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

web/src/app.d.ts

@@ -16,5 +16,6 @@ declare namespace svelte.JSX {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	interface HTMLAttributes<T> {
 		oncopyImage?: () => void;
+		onoutclick?: () => void;
 	}
 }

web/src/lib/components/shared-components/base-modal.svelte

@@ -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">

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -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>

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -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>

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -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>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -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 ThemeButton from '../theme-button.svelte';
-	import { AppRoute } from '../../constants';
+	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 {
+		return await api.userApi.getProfileImage(user.id);
-			await api.userApi.getProfileImage(user.id);
-			shouldShowProfileImage = true;
-		} catch (e) {
-			shouldShowProfileImage = false;
-		}
 	};
 	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
+		<AccountInfoPanel
-			in:fade={{ duration: 100 }}
+			{user}
-			out:fade={{ duration: 100 }}
+			on:close={() => (shouldShowAccountInfoPanel = false)}
-			id="account-info-panel"
+			on:logout={logOut}
-			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>
 	{/if}
 </section>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -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>

web/src/lib/constants.ts

@@ -3,7 +3,7 @@ export const loginPageMessage: string | undefined = env.PUBLIC_LOGIN_PAGE_MESSAG
 
 export enum AppRoute {
 	ADMIN_USER_MANAGEMENT = '/admin/user-management',
-	ADMIN_SETTINGS = '/admin/settings',
+	ADMIN_SETTINGS = '/admin/system-settings',
 	ADMIN_STATS = '/admin/server-status',
 	ADMIN_JOBS = '/admin/jobs-status',
 

web/src/lib/utils/click-outside.ts

@@ -2,7 +2,7 @@ export function clickOutside(node: Node) {
 	const handleClick = (event: Event) => {
 		const targetNode = event.target as Node | null;
 		if (!node.contains(targetNode)) {
-			node.dispatchEvent(new CustomEvent('out-click'));
+			node.dispatchEvent(new CustomEvent('outclick'));
 		}
 	};
 

web/src/routes/admin/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import Sync from 'svelte-material-icons/Sync.svelte';
@@ -15,7 +15,7 @@
 			case AppRoute.ADMIN_USER_MANAGEMENT:
 				return 'User Management';
 			case AppRoute.ADMIN_SETTINGS:
-				return 'Settings';
+				return 'System Settings';
 			case AppRoute.ADMIN_JOBS:
 				return 'Jobs';
 			case AppRoute.ADMIN_STATS:

web/src/routes/admin/system-settings/+page.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <svelte:head>
-	<title>Settings - Immich</title>
+	<title>System Settings - Immich</title>
 </svelte:head>
 
 <section class="">

web/src/routes/albums/+page.svelte

@@ -6,7 +6,7 @@
 	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
 	import type { PageData } from './$types';
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import { useAlbums } from './albums.bloc';

web/src/routes/photos/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
 	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';

web/src/routes/sharing/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';

web/src/routes/user-settings/+page.server.ts

@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	try {
+		const { user } = await parent();
+
+		if (!user) {
+			throw Error('User is not logged in');
+		}
+
+		return {
+			user: user
+		};
+	} catch (e) {
+		throw redirect(302, '/auth/login');
+	}
+};

web/src/routes/user-settings/+page.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>Settings - Immich</title>
+</svelte:head>
+
+<section>
+	<NavigationBar user={data.user} shouldShowUploadButton={false} />
+</section>
+
+<section
+	class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
+>
+	<SideBar />
+
+	<section class="overflow-y-auto ">
+		<div
+			id="user-setting-title"
+			class="pt-10 fixed w-full z-50 bg-immich-bg dark:bg-immich-dark-bg"
+		>
+			<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
+				User Settings
+			</h1>
+			<hr class="dark:border-immich-dark-gray" />
+		</div>
+
+		<section id="user-setting-content" class="pt-[85px] flex place-content-center">
+			<section class="w-[800px] pt-5">
+				<UserSettingsList user={data.user} />
+			</section>
+		</section>
+	</section>
+</section>