mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web) add user setting page (#1115)
* refactoring * refactor * fix naming * Added animation * add user setting page * Add skeleton for user setting page * styling * styling * Spelling
This commit is contained in:
Alex
GitHub
parent
efa1781eb6
commit
e116f17c43
17 changed files with 190 additions and 70 deletions
|
|
@ -35,7 +35,7 @@
|
|||
>
|
||||
<div
|
||||
use:clickOutside
|
||||
on:out-click={() => dispatch('close')}
|
||||
on:outclick={() => dispatch('close')}
|
||||
class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md"
|
||||
>
|
||||
<div class="flex justify-between place-items-center px-5 py-3">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden"
|
||||
style={`top: ${y}px; left: ${x}px;`}
|
||||
use:clickOutside
|
||||
on:out-click={() => dispatch('clickoutside')}
|
||||
on:outclick={() => dispatch('clickoutside')}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
out:fade={{ duration: 100 }}
|
||||
class="absolute left-0 top-0 w-full h-full bg-black/40 z-[100] flex place-items-center place-content-center"
|
||||
>
|
||||
<div class="z-[9999]" use:clickOutside on:out-click={() => dispatch('clickOutside')}>
|
||||
<div class="z-[9999]" use:clickOutside on:outclick={() => dispatch('clickOutside')}>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<script lang="ts">
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Cog from 'svelte-material-icons/Cog.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const getFirstLetter = (text?: string) => {
|
||||
return text?.charAt(0).toUpperCase();
|
||||
};
|
||||
|
||||
const getUserProfileImage = async () => {
|
||||
return await api.userApi.getProfileImage(user.id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
in:fade={{ duration: 100 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
id="account-info-panel"
|
||||
class="absolute right-[25px] top-[75px] bg-immich-bg dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-2xl w-[360px] text-center z-[100]"
|
||||
use:clickOutside
|
||||
on:outclick={() => dispatch('close')}
|
||||
>
|
||||
<div class="flex place-items-center place-content-center mt-6">
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
|
||||
>
|
||||
{#await getUserProfileImage() then}
|
||||
<img
|
||||
transition:fade={{ duration: 100 }}
|
||||
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-20 w-20 object-cover shadow-md"
|
||||
/>
|
||||
{:catch}
|
||||
<div transition:fade={{ duration: 200 }} class="text-lg">
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
</div>
|
||||
{/await}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
|
||||
{user.firstName}
|
||||
{user.lastName}
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
|
||||
|
||||
<div class="mt-4 flex place-items-center place-content-center">
|
||||
<button
|
||||
class="flex border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary font-medium place-items-center place-content-center gap-2 text-xs"
|
||||
on:click={() => {
|
||||
goto('/user-settings');
|
||||
dispatch('close');
|
||||
}}
|
||||
>
|
||||
<span><Cog size="18" /></span>Manage your Immich account</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-bg" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<button
|
||||
class="border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary text-xs"
|
||||
on:click={() => dispatch('logout')}>Sign Out</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,16 +4,14 @@
|
|||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fade, fly } from 'svelte/transition';
|
||||
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
|
||||
import { clickOutside } from '../../utils/click-outside';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import ThemeButton from './theme-button.svelte';
|
||||
import { AppRoute } from '../../constants';
|
||||
|
||||
import ThemeButton from '../theme-button.svelte';
|
||||
import { AppRoute } from '../../../constants';
|
||||
import AccountInfoPanel from './account-info-panel.svelte';
|
||||
export let user: UserResponseDto;
|
||||
export let shouldShowUploadButton = true;
|
||||
|
||||
let shouldShowAccountInfo = false;
|
||||
let shouldShowProfileImage = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let shouldShowAccountInfoPanel = false;
|
||||
|
|
@ -23,12 +21,7 @@
|
|||
});
|
||||
|
||||
const getUserProfileImage = async () => {
|
||||
try {
|
||||
await api.userApi.getProfileImage(user.id);
|
||||
shouldShowProfileImage = true;
|
||||
} catch (e) {
|
||||
shouldShowProfileImage = false;
|
||||
}
|
||||
return await api.userApi.getProfileImage(user.id);
|
||||
};
|
||||
const getFirstLetter = (text?: string) => {
|
||||
return text?.charAt(0).toUpperCase();
|
||||
|
|
@ -103,15 +96,16 @@
|
|||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
||||
>
|
||||
{#if shouldShowProfileImage}
|
||||
{#await getUserProfileImage() then}
|
||||
<img
|
||||
src={`api/user/profile-image/${user.id}`}
|
||||
transition:fade={{ duration: 100 }}
|
||||
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-12 w-12 object-cover shadow-md"
|
||||
/>
|
||||
{:else}
|
||||
{:catch}
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
{/if}
|
||||
{/await}
|
||||
</button>
|
||||
|
||||
{#if shouldShowAccountInfo}
|
||||
|
|
@ -129,49 +123,10 @@
|
|||
</div>
|
||||
|
||||
{#if shouldShowAccountInfoPanel}
|
||||
<div
|
||||
in:fade={{ duration: 100 }}
|
||||
out:fade={{ duration: 100 }}
|
||||
id="account-info-panel"
|
||||
class="absolute right-[25px] top-[75px] bg-immich-bg dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-2xl w-[360px] text-center z-[100]"
|
||||
use:clickOutside
|
||||
on:out-click={() => (shouldShowAccountInfoPanel = false)}
|
||||
>
|
||||
<div class="flex place-items-center place-content-center mt-6">
|
||||
<button
|
||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
|
||||
>
|
||||
{#if shouldShowProfileImage}
|
||||
<img
|
||||
src={`api/user/profile-image/${user.id}`}
|
||||
alt="profile-img"
|
||||
class="inline rounded-full h-20 w-20 object-cover shadow-md"
|
||||
/>
|
||||
{:else}
|
||||
<div class="text-lg">
|
||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
|
||||
{user.firstName}
|
||||
{user.lastName}
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
|
||||
|
||||
<div class="my-4">
|
||||
<hr class="dark:border-immich-dark-bg" />
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<button
|
||||
class="border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary"
|
||||
on:click={logOut}>Sign Out</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<AccountInfoPanel
|
||||
{user}
|
||||
on:close={() => (shouldShowAccountInfoPanel = false)}
|
||||
on:logout={logOut}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { UserResponseDto } from '@api';
|
||||
import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
|
||||
import SettingInputField, {
|
||||
SettingInputFieldType
|
||||
} from '../admin-page/settings/setting-input-field.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
</script>
|
||||
|
||||
<SettingAccordion title="User profile" subtitle="Manage the user information">
|
||||
<section class="my-4">
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="First name"
|
||||
bind:value={user.firstName}
|
||||
required={true}
|
||||
/>
|
||||
|
||||
<SettingInputField
|
||||
inputType={SettingInputFieldType.TEXT}
|
||||
label="Last name"
|
||||
bind:value={user.lastName}
|
||||
required={true}
|
||||
/>
|
||||
</section>
|
||||
</SettingAccordion>
|
||||
Loading…
Add table
Add a link
Reference in a new issue