Added mechanism of required password change of new user's first login (#272)

* Deprecate login scenarios that support pre-web era

* refactor and simplify setup

* Added user info to change password form

* change isFistLogin column to shouldChangePassword

* Implemented change user password

* Implement the change password page for mobile

* Change label

* Added changes log and up minor version

* Fixed typo in the release note

* Up server version

web/src/lib/auth-api.ts

@@ -1,74 +1,64 @@
 type AdminRegistrationResult = Promise<{
-  error?: string
-  success?: string
-  user?: {
-    email: string
-  }
-}>
-
-
+	error?: string;
+	success?: string;
+	user?: {
+		email: string;
+	};
+}>;
 
 type LoginResult = Promise<{
-  error?: string
-  success?: string
-  needUpdate?: boolean
-  needSelectAdmin?: boolean
-  user?: {
-    accessToken: string
-    firstName: string
-    lastName: string
-    isAdmin: boolean
-    id: string
-    email: string
-  }
-}>
+	error?: string;
+	success?: string;
+	user?: {
+		accessToken: string;
+		firstName: string;
+		lastName: string;
+		isAdmin: boolean;
+		id: string;
+		email: string;
+		shouldChangePassword: boolean;
+	};
+}>;
 
 type UpdateResult = Promise<{
-  error?: string
-  success?: string,
-  user?: {
-    accessToken: string
-    firstName: string
-    lastName: string
-    isAdmin: boolean
-    id: string
-    email: string
-  }
-}>
-
+	error?: string;
+	success?: string;
+	user?: {
+		accessToken: string;
+		firstName: string;
+		lastName: string;
+		isAdmin: boolean;
+		id: string;
+		email: string;
+	};
+}>;
 
 export async function sendRegistrationForm(form: HTMLFormElement): AdminRegistrationResult {
+	const response = await fetch(form.action, {
+		method: form.method,
+		body: new FormData(form),
+		headers: { accept: 'application/json' },
+	});
 
-  const response = await fetch(form.action, {
-    method: form.method,
-    body: new FormData(form),
-    headers: { accept: 'application/json' },
-  })
-
-  return await response.json()
-
+	return await response.json();
 }
 
-
 export async function sendLoginForm(form: HTMLFormElement): LoginResult {
+	const response = await fetch(form.action, {
+		method: form.method,
+		body: new FormData(form),
+		headers: { accept: 'application/json' },
+	});
 
-  const response = await fetch(form.action, {
-    method: form.method,
-    body: new FormData(form),
-    headers: { accept: 'application/json' },
-  })
-
-  return await response.json()
+	return await response.json();
 }
 
 export async function sendUpdateForm(form: HTMLFormElement): UpdateResult {
+	const response = await fetch(form.action, {
+		method: form.method,
+		body: new FormData(form),
+		headers: { accept: 'application/json' },
+	});
 
-  const response = await fetch(form.action, {
-    method: form.method,
-    body: new FormData(form),
-    headers: { accept: 'application/json' },
-  })
-
-  return await response.json()
+	return await response.json();
 }
-

web/src/lib/components/forms/admin-registration-form.svelte

@@ -5,20 +5,36 @@
 	let error: string;
 	let success: string;
 
-	async function registerAdmin(event: SubmitEvent) {
-		error = '';
+	let password: string = '';
+	let confirmPassowrd: string = '';
 
-		const formElement = event.target as HTMLFormElement;
+	let canRegister = false;
 
-		const response = await sendRegistrationForm(formElement);
-
-		if (response.error) {
-			error = JSON.stringify(response.error);
+	$: {
+		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+			error = 'Password does not match';
+			canRegister = false;
+		} else {
+			error = '';
+			canRegister = true;
 		}
+	}
+	async function registerAdmin(event: SubmitEvent) {
+		if (canRegister) {
+			error = '';
 
-		if (response.success) {
-			success = response.success;
-			goto('/auth/login');
+			const formElement = event.target as HTMLFormElement;
+
+			const response = await sendRegistrationForm(formElement);
+
+			if (response.error) {
+				error = JSON.stringify(response.error);
+			}
+
+			if (response.success) {
+				success = response.success;
+				goto('/auth/login');
+			}
 		}
 	}
 </script>
@@ -41,21 +57,33 @@
 
 		<div class="m-4 flex flex-col gap-2">
 			<label class="immich-form-label" for="password">Admin Password</label>
-			<input class="immich-form-input" id="password" name="password" type="password" required />
+			<input class="immich-form-input" id="password" name="password" type="password" required bind:value={password} />
 		</div>
 
 		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="password">First Name</label>
+			<label class="immich-form-label" for="confirmPassword">Confirm Admin Password</label>
+			<input
+				class="immich-form-input"
+				id="confirmPassword"
+				name="password"
+				type="password"
+				required
+				bind:value={confirmPassowrd}
+			/>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="firstName">First Name</label>
 			<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
 		</div>
 
 		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="password">Last Name</label>
+			<label class="immich-form-label" for="lastName">Last Name</label>
 			<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
 		</div>
 
 		{#if error}
-			<p class="text-red-400">{error}</p>
+			<p class="text-red-400 ml-4">{error}</p>
 		{/if}
 
 		{#if success}

web/src/lib/components/forms/change-password-form.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { session } from '$app/stores';
+
+	import { sendRegistrationForm, sendUpdateForm } from '$lib/auth-api';
+	import { createEventDispatcher } from 'svelte';
+	import type { ImmichUser } from '../../models/immich-user';
+
+	export let user: ImmichUser;
+	let error: string;
+	let success: string;
+
+	let password: string = '';
+	let confirmPassowrd: string = '';
+
+	let changeChagePassword = false;
+
+	$: {
+		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+			error = 'Password does not match';
+			changeChagePassword = false;
+		} else {
+			error = '';
+			changeChagePassword = true;
+		}
+	}
+	const dispatch = createEventDispatcher();
+
+	async function changePassword(event: SubmitEvent) {
+		if (changeChagePassword) {
+			error = '';
+
+			const formElement = event.target as HTMLFormElement;
+
+			const response = await sendUpdateForm(formElement);
+
+			if (response.error) {
+				error = JSON.stringify(response.error);
+			}
+
+			if (response.success) {
+				success = 'Password has been changed';
+
+				dispatch('success');
+			}
+		}
+	}
+</script>
+
+<div class="border bg-white p-4 shadow-sm w-[500px] rounded-md py-8">
+	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
+		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
+		<h1 class="text-2xl text-immich-primary font-medium">Chage Password</h1>
+
+		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
+			Hi {user.firstName}
+			{user.lastName} ({user.email}),
+			<br />
+			<br />
+			This is either the first time you are signing into the system or a request has been made to change your password. Please
+			enter the new password below.
+		</p>
+	</div>
+
+	<form on:submit|preventDefault={changePassword} method="post" autocomplete="off">
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="password">New Password</label>
+			<input class="immich-form-input" id="password" name="password" type="password" required bind:value={password} />
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+			<input
+				class="immich-form-input"
+				id="confirmPassword"
+				name="password"
+				type="password"
+				required
+				bind:value={confirmPassowrd}
+			/>
+		</div>
+
+		{#if error}
+			<p class="text-red-400 ml-4 text-sm">{error}</p>
+		{/if}
+
+		{#if success}
+			<p class="text-immich-primary ml-4 text-sm">{success}</p>
+		{/if}
+		<div class="flex w-full">
+			<button
+				type="submit"
+				class="m-4 p-2 bg-immich-primary hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full"
+				>Change Password</button
+			>
+		</div>
+	</form>
+</div>

web/src/lib/components/forms/create-user-form.svelte

@@ -5,23 +5,39 @@
 	let error: string;
 	let success: string;
 
+	let password: string = '';
+	let confirmPassowrd: string = '';
+
+	let canCreateUser = false;
+
+	$: {
+		if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+			error = 'Password does not match';
+			canCreateUser = false;
+		} else {
+			error = '';
+			canCreateUser = true;
+		}
+	}
 	const dispatch = createEventDispatcher();
 
 	async function registerUser(event: SubmitEvent) {
-		error = '';
+		if (canCreateUser) {
+			error = '';
 
-		const formElement = event.target as HTMLFormElement;
+			const formElement = event.target as HTMLFormElement;
 
-		const response = await sendRegistrationForm(formElement);
+			const response = await sendRegistrationForm(formElement);
 
-		if (response.error) {
-			error = JSON.stringify(response.error);
-		}
+			if (response.error) {
+				error = JSON.stringify(response.error);
+			}
 
-		if (response.success) {
-			success = 'New user created';
+			if (response.success) {
+				success = 'New user created';
 
-			dispatch('user-created');
+				dispatch('user-created');
+			}
 		}
 	}
 </script>
@@ -43,25 +59,37 @@
 
 		<div class="m-4 flex flex-col gap-2">
 			<label class="immich-form-label" for="password">Password</label>
-			<input class="immich-form-input" id="password" name="password" type="password" required />
+			<input class="immich-form-input" id="password" name="password" type="password" required bind:value={password} />
 		</div>
 
 		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="password">First Name</label>
+			<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
+			<input
+				class="immich-form-input"
+				id="confirmPassword"
+				name="password"
+				type="password"
+				required
+				bind:value={confirmPassowrd}
+			/>
+		</div>
+
+		<div class="m-4 flex flex-col gap-2">
+			<label class="immich-form-label" for="firstName">First Name</label>
 			<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
 		</div>
 
 		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="password">Last Name</label>
+			<label class="immich-form-label" for="lastName">Last Name</label>
 			<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
 		</div>
 
 		{#if error}
-			<p class="text-red-400">{error}</p>
+			<p class="text-red-400 ml-4 text-sm">{error}</p>
 		{/if}
 
 		{#if success}
-			<p class="text-immich-primary">{success}</p>
+			<p class="text-immich-primary ml-4 text-sm">{success}</p>
 		{/if}
 		<div class="flex w-full">
 			<button

web/src/lib/components/forms/login-form.svelte

@@ -18,14 +18,6 @@
 			error = response.error;
 		}
 
-		if (response.needUpdate) {
-			return dispatch('need-update');
-		}
-
-		if (response.needSelectAdmin) {
-			return dispatch('need-select-admin');
-		}
-
 		if (response.success) {
 			$session.user = {
 				accessToken: response.user!.accessToken,
@@ -36,6 +28,10 @@
 				email: response.user!.email,
 			};
 
+			if (!response.user?.isAdmin && response.user?.shouldChangePassword) {
+				return dispatch('first-login');
+			}
+
 			return dispatch('success');
 		}
 	}

web/src/lib/components/forms/select-admin-form.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-	import { session } from '$app/stores';
-
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import type { ImmichUser } from '../../models/immich-user';
-	import Check from 'svelte-material-icons/Check.svelte';
-
-	let error: string = '';
-	let allUsers: Array<ImmichUser> = [];
-	let selectedUserId: string;
-	const dispatch = createEventDispatcher();
-
-	onMount(async () => {
-		const res = await fetch('/auth/login/api/get-users', { method: 'GET' });
-		const data = await res.json();
-		allUsers = data.allUsers;
-	});
-
-	const assignAdmin = async () => {
-		const res = await fetch('/auth/login/api/select-admin', {
-			method: 'POST',
-			body: JSON.stringify({
-				id: selectedUserId,
-				isAdmin: true,
-			}),
-		});
-
-		if (res.status === 200) {
-			const data = await res.json();
-
-			$session.user = {
-				accessToken: '',
-				firstName: data.userInfo.firstName,
-				lastName: data.userInfo.lastName,
-				isAdmin: data.userInfo.isAdmin,
-				id: data.userInfo.id,
-				email: data.userInfo.email,
-			};
-
-			dispatch('success');
-		} else {
-			error = JSON.stringify(await res.json());
-		}
-	};
-</script>
-
-<div class="border bg-white p-4 shadow-sm w-[500px] rounded-md py-8">
-	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
-		<h1 class="text-2xl text-immich-primary font-medium">Select Admin</h1>
-		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
-			There are multiple users on the server, and none have been selected to be the admin. Please assign one as the
-			admin, who will be responsible for administrative tasks
-		</p>
-	</div>
-
-	<div class="text-xs m-4">USERS ON SERVER, CLICK TO SELECT ONE</div>
-	<div class="overflow-y-auto rounded-md max-h-[300px] block border mx-4 px-4 py-2">
-		{#each allUsers as user, i}
-			<div
-				class="p-4 flex justify-between place-items-center my-4 rounded-md hover:cursor-pointer shadow-sm bg-gray-50 hover:bg-gray-100"
-				on:click={() => (selectedUserId = user.id)}
-			>
-				<p class="test-sm text-slate-600">{i + 1} | {user.email}</p>
-
-				<!-- Icon -->
-				{#if selectedUserId == user.id}
-					<div
-						in:fade={{ duration: 100 }}
-						class="border rounded-full border-gray-300 bg-immich-primary w-8 h-8 flex place-items-center place-content-center"
-					>
-						<Check color="white" size="24" />
-					</div>
-				{:else}
-					<div in:fade={{ duration: 100 }} class="border rounded-full border-gray-300 w-8 h-8" />
-				{/if}
-			</div>
-		{/each}
-	</div>
-
-	{#if error}
-		<div class="text-xs m-4 text-red-400">Error: {error}</div>
-	{/if}
-
-	<div class="flex w-full">
-		<button
-			type="submit"
-			class="m-4 p-2 bg-immich-primary hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
-			on:click={assignAdmin}>Assign as Admin</button
-		>
-	</div>
-</div>

web/src/lib/components/forms/update-form.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { session } from '$app/stores';
-	import { sendUpdateForm } from '$lib/auth-api';
-	import { createEventDispatcher } from 'svelte';
-
-	let error: string;
-	const dispatch = createEventDispatcher();
-
-	async function updateInfo(event: SubmitEvent) {
-		error = '';
-
-		const formElement = event.target as HTMLFormElement;
-
-		const response = await sendUpdateForm(formElement);
-
-		if (response.error) {
-			error = response.error;
-		}
-
-		if (response.success) {
-			$session.user = {
-				accessToken: response.user!.accessToken,
-				firstName: response.user!.firstName,
-				lastName: response.user!.lastName,
-				isAdmin: response.user!.isAdmin,
-				id: response.user!.id,
-				email: response.user!.email,
-			};
-
-			dispatch('success');
-		}
-	}
-</script>
-
-<div class="border bg-white p-4 shadow-sm w-[500px] rounded-md py-8">
-	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
-		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
-		<h1 class="text-2xl text-immich-primary font-medium">Update User Info</h1>
-		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
-			Your account doesn't have information about your name, please update to continue the login process.
-		</p>
-	</div>
-
-	<form on:submit|preventDefault={updateInfo} method="post" action="/auth/login/update" autocomplete="off">
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="firstName">First name</label>
-			<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
-		</div>
-
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="lastName">Last name</label>
-			<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
-		</div>
-
-		{#if error}
-			<p class="text-red-400 pl-4">{error}</p>
-		{/if}
-
-		<div class="flex w-full">
-			<button
-				type="submit"
-				class="m-4 p-2 bg-immich-primary hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
-				>Update</button
-			>
-		</div>
-	</form>
-</div>

web/src/lib/models/immich-user.ts

@@ -1,7 +1,9 @@
 export type ImmichUser = {
-  id: string,
-  email: string,
-  firstName: string,
-  lastName: string,
-  isAdmin: boolean,
-}
+	id: string;
+	email: string;
+	firstName: string;
+	lastName: string;
+	isAdmin: boolean;
+	profileImagePath: string;
+	shouldChangePassword: boolean;
+};

web/src/routes/auth/change-password/index.svelte

@@ -0,0 +1,75 @@
+<script context="module" lang="ts">
+	export const prerender = false;
+
+	import type { Load } from '@sveltejs/kit';
+	import type { ImmichUser } from '$lib/models/immich-user';
+
+	export const load: Load = async ({ session }) => {
+		if (!session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login',
+			};
+		}
+
+		try {
+			const res = await fetch(serverEndpoint + '/user/me', {
+				method: 'GET',
+				headers: {
+					Authorization: 'Bearer ' + session.user.accessToken,
+				},
+			});
+
+			const userInfo: ImmichUser = await res.json();
+
+			if (userInfo.shouldChangePassword) {
+				return {
+					status: 200,
+					props: {
+						user: userInfo,
+					},
+				};
+			} else {
+				return {
+					status: 302,
+					redirect: '/photos',
+				};
+			}
+		} catch (e) {
+			console.log('ERROR Getting user info', e);
+			return {
+				status: 302,
+				redirect: '/photos',
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { session } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import ChangePasswordForm from '../../../lib/components/forms/change-password-form.svelte';
+	import { serverEndpoint } from '../../../lib/constants';
+
+	export let user: ImmichUser;
+
+	const onSuccessHandler = async () => {
+		const res = await fetch('/auth/logout', { method: 'POST' });
+
+		if (res.status == 200 && res.statusText == 'OK') {
+			goto('/auth/login');
+		}
+	};
+</script>
+
+<svelte:head>
+	<title>Immich - Change Password</title>
+</svelte:head>
+
+<section class="h-screen w-screen flex place-items-center place-content-center">
+	<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+		<ChangePasswordForm {user} on:success={onSuccessHandler} />
+	</div>
+</section>

web/src/routes/auth/change-password/index.ts

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

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

@@ -3,25 +3,10 @@
 	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>
@@ -29,21 +14,7 @@
 </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}
+	<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+		<LoginForm on:success={onLoginSuccess} on:first-login={() => goto('/auth/change-password')} />
+	</div>
 </section>

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

@@ -1,229 +1,81 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { serverEndpoint } from '$lib/constants';
-import * as cookie from 'cookie'
+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;
-}
+type AuthUser = {
+	accessToken: string;
+	userId: string;
+	userEmail: string;
+	firstName: string;
+	lastName: string;
+	isAdmin: boolean;
+	shouldChangePassword: boolean;
+};
 
 export const post: RequestHandler = async ({ request }) => {
-  const form = await request.formData();
+	const form = await request.formData();
 
-  const email = form.get('email')
-  const password = form.get('password')
+	const email = form.get('email');
+	const password = form.get('password');
 
-  const payload = {
-    email,
-    password,
-  }
+	const payload = {
+		email,
+		password,
+	};
 
-  const res = await fetch(`${serverEndpoint}/auth/login`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(payload),
-  })
+	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;
+	if (res.status === 201) {
+		// Login success
+		const authUser = (await res.json()) as AuthUser;
 
-    /**
-     * 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'
-      }
-    }
-  }
-
-
-}
+		return {
+			status: 200,
+			body: {
+				user: {
+					id: authUser.userId,
+					accessToken: authUser.accessToken,
+					firstName: authUser.firstName,
+					lastName: authUser.lastName,
+					isAdmin: authUser.isAdmin,
+					email: authUser.userEmail,
+					shouldChangePassword: authUser.shouldChangePassword,
+				},
+				success: 'success',
+			},
+			headers: {
+				'Set-Cookie': cookie.serialize(
+					'session',
+					JSON.stringify({
+						id: authUser.userId,
+						accessToken: authUser.accessToken,
+						firstName: authUser.firstName,
+						lastName: authUser.lastName,
+						isAdmin: authUser.isAdmin,
+						email: authUser.userEmail,
+					}),
+					{
+						path: '/',
+						httpOnly: true,
+						sameSite: 'strict',
+						maxAge: 60 * 60 * 24 * 30,
+					},
+				),
+			},
+		};
+	} else {
+		return {
+			status: 400,
+			body: {
+				error: 'Incorrect email or password',
+			},
+		};
+	}
+};

web/src/routes/index.svelte

@@ -35,7 +35,6 @@
 <script lang="ts">
 	import { serverEndpoint } from '$lib/constants';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
 
 	export let isAdminUserExist: boolean;