Add web interface with admin functionality (#167)

web/src/routes/__layout.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getRequest } from '$lib/api';
+	import { onDestroy } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import '../app.css';
+	import { serverEndpoint } from '../lib/constants';
+
+	let endpoint = serverEndpoint;
+	let isServerOk = true;
+
+	const pingServerInterval = setInterval(async () => {
+		const response = await getRequest('server-info/ping', '');
+
+		if (response.res === 'pong') isServerOk = true;
+		if (response.statusCode === 404) isServerOk = false;
+	}, 10000);
+
+	onDestroy(() => clearInterval(pingServerInterval));
+</script>
+
+<main>
+	<slot />
+</main>
+
+<footer
+	class="text-sm fixed bottom-0 h-8 flex place-items-center place-content-center bg-immich-primary/10 w-screen font-mono gap-8 px-4 font-medium"
+>
+	<p class="">
+		Server URL <span class="text-immich-primary font-bold">{endpoint}</span>
+	</p>
+	<p class="">
+		Server Status
+		{#if isServerOk}
+			<span class="text-immich-primary font-bold">OK</span>
+		{:else}
+			<span class="text-red-500 font-bold">OFFLINE</span>
+		{/if}
+	</p>
+</footer>

web/src/routes/admin/api/create-user.ts

@@ -0,0 +1,44 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { serverEndpoint } from '$lib/constants';
+
+export const post: RequestHandler = async ({ request, locals }) => {
+  const form = await request.formData();
+
+  const email = form.get('email')
+  const password = form.get('password')
+  const firstName = form.get('firstName')
+  const lastName = form.get('lastName')
+
+  const payload = {
+    email,
+    password,
+    firstName,
+    lastName,
+  }
+
+  const res = await fetch(`${serverEndpoint}/user`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${locals.user?.accessToken}`
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (res.status === 201) {
+    return {
+      status: 201,
+      body: {
+        success: 'Succesfully create user account'
+      }
+    }
+  } else {
+    return {
+      status: 400,
+      body: {
+        error: await res.json()
+      }
+    }
+
+  }
+}

web/src/routes/admin/index.svelte

@@ -0,0 +1,100 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	import { getRequest } from '$lib/api';
+
+	export const load: Load = async ({ session, fetch }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login',
+			};
+		}
+
+		const usersOnServer = await getRequest('user', session.user.accessToken);
+
+		return {
+			status: 200,
+			props: {
+				user: session.user,
+				usersOnServer,
+			},
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { session } from '$app/stores';
+
+	import type { ImmichUser } from '$lib/models/immich-user';
+	import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
+	import SideBarButton from '$lib/components/shared/side-bar-button.svelte';
+	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+	import NavigationBar from '$lib/components/shared/navigation-bar.svelte';
+	import UserManagement from '$lib/components/admin/user-management.svelte';
+	import FullScreenModal from '$lib/components/shared/full-screen-modal.svelte';
+	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
+
+	let selectedAction: AdminSideBarSelection;
+
+	export let user: ImmichUser;
+	export let usersOnServer: Array<ImmichUser>;
+
+	let shouldShowCreateUserForm: boolean;
+
+	const onButtonClicked = (buttonType: CustomEvent) => {
+		selectedAction = buttonType.detail['actionType'] as AdminSideBarSelection;
+	};
+
+	onMount(() => {
+		selectedAction = AdminSideBarSelection.USER_MANAGEMENT;
+	});
+
+	const onUserCreated = async () => {
+		if ($session.user) {
+			usersOnServer = await getRequest('user', $session.user.accessToken);
+		}
+
+		shouldShowCreateUserForm = false;
+	};
+</script>
+
+<svelte:head>
+	<title>Immich - Administration</title>
+</svelte:head>
+
+<NavigationBar {user} />
+
+{#if shouldShowCreateUserForm}
+	<FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
+		<div>
+			<CreateUserForm on:user-created={onUserCreated} />
+		</div>
+	</FullScreenModal>
+{/if}
+
+<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
+	<section id="admin-sidebar" class="pt-8 pr-6">
+		<SideBarButton
+			title="User"
+			logo={AccountMultipleOutline}
+			actionType={AdminSideBarSelection.USER_MANAGEMENT}
+			isSelected={selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
+			on:selected={onButtonClicked}
+		/>
+	</section>
+	<section class="overflow-y-auto relative">
+		<div id="setting-title" class="pt-10 fixed w-full z-50 bg-immich-bg">
+			<h1 class="text-lg ml-8 mb-4 text-immich-primary font-medium">{selectedAction}</h1>
+			<hr />
+		</div>
+
+		<section id="setting-content" class="relative pt-[85px] flex place-content-center">
+			<section class="w-[800px] pt-4">
+				{#if selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
+					<UserManagement {usersOnServer} on:createUser={() => (shouldShowCreateUserForm = true)} />
+				{/if}
+			</section>
+		</section>
+	</section>
+</section>

web/src/routes/auth/login/api/get-users.ts

@@ -0,0 +1,12 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { getRequest } from '../../../../lib/api';
+
+
+export const get: RequestHandler = async ({ request, locals }) => {
+  const allUsers = await getRequest('user?isAll=true', locals.user!.accessToken)
+
+  return {
+    status: 200,
+    body: { allUsers }
+  };
+}

web/src/routes/auth/login/api/select-admin.ts

@@ -0,0 +1,52 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { putRequest } from '$lib/api';
+import * as cookie from 'cookie';
+
+export const post: RequestHandler = async ({ request, locals }) => {
+
+  const { id, isAdmin } = await request.json()
+
+  const res = await putRequest('user', {
+    id,
+    isAdmin,
+  }, locals.user!.accessToken);
+
+
+
+  if (res.statusCode) {
+    return {
+      status: res.statusCode,
+      body: JSON.stringify(res)
+    }
+  }
+
+  if (res.id == locals.user!.id) {
+    return {
+      status: 200,
+      body: { userInfo: res },
+      headers: {
+        'Set-Cookie': cookie.serialize('session', JSON.stringify(
+          {
+            id: res.id,
+            accessToken: locals.user!.accessToken,
+            firstName: res.firstName,
+            lastName: res.lastName,
+            isAdmin: res.isAdmin,
+            email: res.email,
+          }), {
+          path: '/',
+          httpOnly: true,
+          sameSite: 'strict',
+          maxAge: 60 * 60 * 24 * 30,
+        })
+      }
+    }
+  } else {
+    return {
+      status: 200,
+      body: { userInfo: { ...locals.user! } },
+    }
+  }
+
+
+}

web/src/routes/auth/login/index.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { fade } from 'svelte/transition';
+
+	import LoginForm from '$lib/components/forms/login-form.svelte';
+	import UpdateForm from '../../../lib/components/forms/update-form.svelte';
+	import SelectAdminForm from '../../../lib/components/forms/select-admin-form.svelte';
+
+	let shouldShowUpdateForm = false;
+	let shouldShowSelectAdminForm = false;
+
+	const onLoginSuccess = async () => {
+		goto('/photos');
+	};
+
+	const onNeedUpdate = () => {
+		shouldShowUpdateForm = true;
+		shouldShowSelectAdminForm = false;
+	};
+
+	const onNeedSelectAdmin = () => {
+		shouldShowUpdateForm = false;
+		shouldShowSelectAdminForm = true;
+	};
+</script>
+
+<svelte:head>
+	<title>Immich - Login</title>
+</svelte:head>
+
+<section class="h-screen w-screen flex place-items-center place-content-center">
+	{#if !shouldShowUpdateForm && !shouldShowSelectAdminForm}
+		<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+			<LoginForm on:success={onLoginSuccess} on:need-update={onNeedUpdate} on:need-select-admin={onNeedSelectAdmin} />
+		</div>
+	{/if}
+
+	{#if shouldShowUpdateForm}
+		<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+			<UpdateForm on:success={onLoginSuccess} />
+		</div>
+	{/if}
+
+	{#if shouldShowSelectAdminForm}
+		<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+			<SelectAdminForm on:success={onLoginSuccess} />
+		</div>
+	{/if}
+</section>

web/src/routes/auth/login/index.ts

@@ -0,0 +1,229 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { serverEndpoint } from '$lib/constants';
+import * as cookie from 'cookie'
+import { getRequest, putRequest } from '$lib/api';
+
+type LoggedInUser = {
+  accessToken: string;
+  userId: string;
+  userEmail: string;
+  firstName: string;
+  lastName: string;
+  isAdmin: boolean;
+}
+
+export const post: RequestHandler = async ({ request }) => {
+  const form = await request.formData();
+
+  const email = form.get('email')
+  const password = form.get('password')
+
+  const payload = {
+    email,
+    password,
+  }
+
+  const res = await fetch(`${serverEndpoint}/auth/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (res.status === 201) {
+    // Login success
+    const loggedInUser = await res.json() as LoggedInUser;
+
+    /**
+     * Support legacy users with two scenario
+     * 
+     * Scenario 1 - If one user exists on the server - make the user admin and ask for name.
+     * Scenario 2 - After assigned as admin, scenario 1 user not complete update form with names
+     * Scenario 3 - If two users exists on the server and no admin - ask to choose which one will be made admin
+     */
+
+
+    // check how many user on the server
+    const { userCount } = await getRequest('user/count', '');
+    const { userCount: adminUserCount } = await getRequest('user/count?isAdmin=true', '')
+    /**
+     * Scenario 1 handler
+     */
+    if (userCount == 1 && !loggedInUser.isAdmin) {
+
+      const updatedUser = await putRequest('user', {
+        id: loggedInUser.userId,
+        isAdmin: true
+      }, loggedInUser.accessToken)
+
+
+      /**
+      * Scenario 2 handler for current admin user
+      */
+      let bodyResponse = { success: true, needUpdate: false }
+
+      if (loggedInUser.firstName == "" || loggedInUser.lastName == "") {
+        bodyResponse = { success: false, needUpdate: true }
+      }
+
+
+      return {
+        status: 200,
+        body: {
+          ...bodyResponse,
+          user: {
+            id: updatedUser.userId,
+            accessToken: loggedInUser.accessToken,
+            firstName: updatedUser.firstName,
+            lastName: updatedUser.lastName,
+            isAdmin: updatedUser.isAdmin,
+            email: updatedUser.email,
+          },
+        },
+        headers: {
+          'Set-Cookie': cookie.serialize('session', JSON.stringify(
+            {
+              id: updatedUser.userId,
+              accessToken: loggedInUser.accessToken,
+              firstName: updatedUser.firstName,
+              lastName: updatedUser.lastName,
+              isAdmin: updatedUser.isAdmin,
+              email: updatedUser.email,
+            }), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'strict',
+            maxAge: 60 * 60 * 24 * 30,
+          })
+        }
+      }
+    }
+
+
+    /**
+    * Scenario 3 handler
+    */
+    if (userCount >= 2 && adminUserCount == 0) {
+      return {
+        status: 200,
+        body: {
+          needSelectAdmin: true,
+          user: {
+            id: loggedInUser.userId,
+            accessToken: loggedInUser.accessToken,
+            firstName: loggedInUser.firstName,
+            lastName: loggedInUser.lastName,
+            isAdmin: loggedInUser.isAdmin,
+            email: loggedInUser.userEmail
+          },
+          success: 'success'
+        },
+        headers: {
+          'Set-Cookie': cookie.serialize('session', JSON.stringify(
+            {
+              id: loggedInUser.userId,
+              accessToken: loggedInUser.accessToken,
+              firstName: loggedInUser.firstName,
+              lastName: loggedInUser.lastName,
+              isAdmin: loggedInUser.isAdmin,
+              email: loggedInUser.userEmail
+            }), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'strict',
+            maxAge: 60 * 60 * 24 * 30,
+          })
+        }
+      }
+    }
+
+    /**
+    * Scenario 2 handler
+    */
+    if (loggedInUser.firstName == "" || loggedInUser.lastName == "") {
+      return {
+        status: 200,
+        body: {
+          needUpdate: true,
+          user: {
+            id: loggedInUser.userId,
+            accessToken: loggedInUser.accessToken,
+            firstName: loggedInUser.firstName,
+            lastName: loggedInUser.lastName,
+            isAdmin: loggedInUser.isAdmin,
+            email: loggedInUser.userEmail
+          },
+        },
+        headers: {
+          'Set-Cookie': cookie.serialize('session', JSON.stringify(
+            {
+              id: loggedInUser.userId,
+              accessToken: loggedInUser.accessToken,
+              firstName: loggedInUser.firstName,
+              lastName: loggedInUser.lastName,
+              isAdmin: loggedInUser.isAdmin,
+              email: loggedInUser.userEmail
+            }), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'strict',
+            maxAge: 60 * 60 * 24 * 30,
+          })
+        }
+      }
+    }
+
+
+
+    return {
+      status: 200,
+      body: {
+        user: {
+          id: loggedInUser.userId,
+          accessToken: loggedInUser.accessToken,
+          firstName: loggedInUser.firstName,
+          lastName: loggedInUser.lastName,
+          isAdmin: loggedInUser.isAdmin,
+          email: loggedInUser.userEmail
+        },
+        success: 'success'
+      },
+      headers: {
+        'Set-Cookie': cookie.serialize('session', JSON.stringify(
+          {
+            id: loggedInUser.userId,
+            accessToken: loggedInUser.accessToken,
+            firstName: loggedInUser.firstName,
+            lastName: loggedInUser.lastName,
+            isAdmin: loggedInUser.isAdmin,
+            email: loggedInUser.userEmail,
+          }), {
+          // send cookie for every page
+          path: '/',
+
+          // server side only cookie so you can't use `document.cookie`
+          httpOnly: true,
+
+          // only requests from same site can send cookies
+          // and serves to protect from CSRF
+          // https://developer.mozilla.org/en-US/docs/Glossary/CSRF
+          sameSite: 'strict',
+
+          // set cookie to expire after a month
+          maxAge: 60 * 60 * 24 * 30,
+        })
+      }
+    }
+
+  } else {
+    return {
+      status: 400,
+      body: {
+        error: 'Incorrect email or password'
+      }
+    }
+  }
+
+
+}

web/src/routes/auth/login/update.ts

@@ -0,0 +1,63 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { putRequest } from '../../../lib/api';
+import * as cookie from 'cookie'
+
+
+export const post: RequestHandler = async ({ request, locals }) => {
+
+  const form = await request.formData();
+
+  const firstName = form.get('firstName')
+  const lastName = form.get('lastName')
+
+  if (locals.user) {
+    const updatedUser = await putRequest('user', {
+      id: locals.user.id,
+      firstName,
+      lastName
+    }, locals.user.accessToken)
+
+
+
+
+    return {
+      status: 200,
+      body: {
+        user: {
+          id: updatedUser.id,
+          accessToken: locals.user.accessToken,
+          firstName: updatedUser.firstName,
+          lastName: updatedUser.lastName,
+          isAdmin: updatedUser.isAdmin,
+          email: updatedUser.email,
+        },
+        success: 'Update user success'
+      },
+      headers: {
+        'Set-Cookie': cookie.serialize('session', JSON.stringify(
+          {
+            id: updatedUser.id,
+            accessToken: locals.user.accessToken,
+            firstName: updatedUser.firstName,
+            lastName: updatedUser.lastName,
+            isAdmin: updatedUser.isAdmin,
+            email: updatedUser.email,
+          }), {
+          path: '/',
+          httpOnly: true,
+          sameSite: 'strict',
+          maxAge: 60 * 60 * 24 * 30,
+        })
+      }
+    }
+  }
+
+
+
+  return {
+    status: 400,
+    body: {
+      error: 'Cannot get access token from cookies'
+    }
+  }
+}

web/src/routes/auth/register/index.svelte

@@ -0,0 +1,39 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	import { serverEndpoint } from '$lib/constants';
+
+	export const load: Load = async ({ session, fetch }) => {
+		const res = await fetch(`${serverEndpoint}/user/count`);
+		const { userCount } = await res.json();
+
+		if (userCount != 0) {
+			// Admin has been registered, redirect to login
+
+			if (!session.user) {
+				return {
+					status: 302,
+					redirect: '/auth/login',
+				};
+			} else {
+				return {
+					status: 302,
+					redirect: '/dashboard',
+				};
+			}
+		}
+
+		return {};
+	};
+</script>
+
+<script lang="ts">
+	import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
+</script>
+
+<svelte:head>
+	<title>Immich - Admin Registration</title>
+</svelte:head>
+
+<section class="h-screen w-screen flex place-items-center place-content-center">
+	<AdminRegistrationForm />
+</section>

web/src/routes/auth/register/index.ts

@@ -0,0 +1,43 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { serverEndpoint } from '$lib/constants';
+
+export const post: RequestHandler = async ({ request }) => {
+  const form = await request.formData();
+
+  const email = form.get('email')
+  const password = form.get('password')
+  const firstName = form.get('firstName')
+  const lastName = form.get('lastName')
+
+  const payload = {
+    email,
+    password,
+    firstName,
+    lastName,
+  }
+
+  const res = await fetch(`${serverEndpoint}/auth/admin-sign-up`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (res.status === 201) {
+    return {
+      status: 201,
+      body: {
+        success: 'Succesfully create admin account'
+      }
+    }
+  } else {
+    return {
+      status: 400,
+      body: {
+        error: await res.json()
+      }
+    }
+
+  }
+}

web/src/routes/index.svelte

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+	export const prerender = false;
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = async ({ session, fetch }) => {
+		const res = await fetch(`${serverEndpoint}/user/count`);
+		const { userCount } = await res.json();
+
+		if (!session.user) {
+			// Check if admin exist to wherether navigating to login or registration
+			if (userCount != 0) {
+				return {
+					status: 200,
+					props: {
+						isAdminUserExist: true,
+					},
+				};
+			} else {
+				return {
+					status: 200,
+					props: {
+						isAdminUserExist: false,
+					},
+				};
+			}
+		} else {
+			return {
+				status: 302,
+				redirect: '/photos',
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	import { serverEndpoint } from '$lib/constants';
+	import { goto } from '$app/navigation';
+
+	export let isAdminUserExist: boolean;
+
+	async function onGettingStartedClicked() {
+		isAdminUserExist ? goto('/auth/login') : goto('/auth/register');
+	}
+</script>
+
+<svelte:head>
+	<title>Immich - Welcome 🎉</title>
+	<meta name="description" content="Immich Web Interface" />
+</svelte:head>
+
+<section class="h-screen w-screen flex place-items-center place-content-center">
+	<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
+		<div class="flex place-items-center place-content-center ">
+			<img class="text-center" src="immich-logo.svg" height="200" width="200" alt="immich-logo" />
+		</div>
+		<h1 class="text-4xl text-immich-primary font-bold font-immich-title">Welcome to Immich Web</h1>
+		<button
+			class="border px-4 py-2 rounded-md bg-immich-primary hover:bg-immich-primary/75 text-white font-bold w-[200px]"
+			on:click={onGettingStartedClicked}>Getting Started</button
+		>
+	</div>
+</section>

web/src/routes/photos/index.svelte

@@ -0,0 +1,75 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+
+	export const load: Load = ({ session }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login',
+			};
+		}
+
+		return {
+			status: 200,
+			props: {
+				user: session.user,
+			},
+		};
+	};
+</script>
+
+<script lang="ts">
+	import type { ImmichUser } from '$lib/models/immich-user';
+
+	import NavigationBar from '../../lib/components/shared/navigation-bar.svelte';
+	import SideBarButton from '$lib/components/shared/side-bar-button.svelte';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+	import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
+	import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
+	import { onMount } from 'svelte';
+
+	export let user: ImmichUser;
+	let selectedAction: AppSideBarSelection;
+
+	const onButtonClicked = (buttonType: CustomEvent) => {
+		selectedAction = buttonType.detail['actionType'] as AppSideBarSelection;
+	};
+
+	onMount(() => {
+		selectedAction = AppSideBarSelection.PHOTOS;
+	});
+</script>
+
+<svelte:head>
+	<title>Immich - Photos</title>
+</svelte:head>
+
+<section>
+	<NavigationBar {user} />
+</section>
+
+<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
+	<section id="admin-sidebar" class="flex flex-col gap-4 pt-8 pr-6">
+		<SideBarButton
+			title="Photos"
+			logo={ImageOutline}
+			actionType={AppSideBarSelection.PHOTOS}
+			isSelected={selectedAction === AppSideBarSelection.PHOTOS}
+			on:selected={onButtonClicked}
+		/>
+
+		<SideBarButton
+			title="Explore"
+			logo={Magnify}
+			actionType={AppSideBarSelection.EXPLORE}
+			isSelected={selectedAction === AppSideBarSelection.EXPLORE}
+			on:selected={onButtonClicked}
+		/>
+	</section>
+
+	<section class="overflow-y-auto relative">
+		<section id="setting-content" class="relative pt-[85px]">
+			<section class="pt-4">Coming soon</section>
+		</section>
+	</section>
+</section>