Use cookies for client requests (#377)

* Use cookie for frontend request

* Remove api helper to use SDK

* Added error handling to status box

* Remove additional places that check for session.user

* Refactor sending password

* prettier clean up

* remove deadcode

* Move all authentication requests to the client

* refactor upload panel to only fetch assets after the upload panel disappear

* Added keydown to remove focus on title change on album viewer

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
-	import { sendRegistrationForm } from '$lib/auth-api';
+	import { api } from '@api';
 	let error: string;
 	let success: string;
 
@@ -19,21 +19,33 @@
 			canRegister = true;
 		}
 	}
+
 	async function registerAdmin(event: SubmitEvent) {
 		if (canRegister) {
 			error = '';
 
 			const formElement = event.target as HTMLFormElement;
 
-			const response = await sendRegistrationForm(formElement);
+			const form = new FormData(formElement);
 
-			if (response.error) {
-				error = JSON.stringify(response.error);
-			}
+			const email = form.get('email');
+			const password = form.get('password');
+			const firstName = form.get('firstName');
+			const lastName = form.get('lastName');
 
-			if (response.success) {
-				success = response.success;
+			const { status } = await api.authenticationApi.adminSignUp({
+				email: String(email),
+				password: String(password),
+				firstName: String(firstName),
+				lastName: String(lastName)
+			});
+
+			if (status === 201) {
 				goto('/auth/login');
+				return;
+			} else {
+				error = 'Error create admin account';
+				return;
 			}
 		}
 	}
@@ -44,8 +56,8 @@
 		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
 		<h1 class="text-2xl text-immich-primary font-medium">Admin Registration</h1>
 		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
-			Since you are the first user on the system, you will be assigned as the Admin and are responsible for
-			administrative tasks, and additional users will be created by you.
+			Since you are the first user on the system, you will be assigned as the Admin and are
+			responsible for administrative tasks, and additional users will be created by you.
 		</p>
 	</div>
 
@@ -57,7 +69,14 @@
 
 		<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 bind:value={password} />
+			<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">

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { sendUpdateForm } from '$lib/auth-api';
+	import { api } from '@api';
 	import { createEventDispatcher } from 'svelte';
 	import type { ImmichUser } from '../../models/immich-user';
 
@@ -21,24 +21,24 @@
 			changeChagePassword = true;
 		}
 	}
+
 	const dispatch = createEventDispatcher();
 
-	async function changePassword(event: SubmitEvent) {
+	async function changePassword() {
 		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';
+			const { status } = await api.userApi.updateUser({
+				id: user.id,
+				password: String(password),
+				shouldChangePassword: false
+			});
 
+			if (status === 200) {
 				dispatch('success');
+				return;
+			} else {
+				console.error('Error changing password');
 			}
 		}
 	}
@@ -54,15 +54,22 @@
 			{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.
+			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} />
+			<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">

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { sendRegistrationForm } from '$lib/auth-api';
+	import { api } from '@api';
 	import { createEventDispatcher } from 'svelte';
 
 	let error: string;
@@ -22,21 +22,33 @@
 	const dispatch = createEventDispatcher();
 
 	async function registerUser(event: SubmitEvent) {
+		console.log('registerUser');
 		if (canCreateUser) {
 			error = '';
 
 			const formElement = event.target as HTMLFormElement;
 
-			const response = await sendRegistrationForm(formElement);
+			const form = new FormData(formElement);
 
-			if (response.error) {
-				error = JSON.stringify(response.error);
-			}
+			const email = form.get('email');
+			const password = form.get('password');
+			const firstName = form.get('firstName');
+			const lastName = form.get('lastName');
 
-			if (response.success) {
+			const { status } = await api.userApi.createUser({
+				email: String(email),
+				password: String(password),
+				firstName: String(firstName),
+				lastName: String(lastName)
+			});
+
+			if (status === 201) {
 				success = 'New user created';
 
 				dispatch('user-created');
+				return;
+			} else {
+				error = 'Error create user account';
 			}
 		}
 	}
@@ -47,11 +59,12 @@
 		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
 		<h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
 		<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
-			Please provide your user with the password, they will have to change it on their first sign in.
+			Please provide your user with the password, they will have to change it on their first sign
+			in.
 		</p>
 	</div>
 
-	<form on:submit|preventDefault={registerUser} method="post" action="/admin/api/create-user" autocomplete="off">
+	<form on:submit|preventDefault={registerUser} autocomplete="off">
 		<div class="m-4 flex flex-col gap-2">
 			<label class="immich-form-label" for="email">Email</label>
 			<input class="immich-form-input" id="email" name="email" type="email" required />
@@ -59,7 +72,14 @@
 
 		<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 bind:value={password} />
+			<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">

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

@@ -1,41 +1,35 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { session } from '$app/stores';
-	import { sendLoginForm } from '$lib/auth-api';
 	import { loginPageMessage } from '$lib/constants';
+	import { api } from '@api';
 	import { createEventDispatcher } from 'svelte';
 
 	let error: string;
+	let email: string = '';
+	let password: string = '';
+
 	const dispatch = createEventDispatcher();
 
-	async function login(event: SubmitEvent) {
-		error = '';
+	const login = async () => {
+		try {
+			error = '';
 
-		const formElement = event.target as HTMLFormElement;
+			const { data } = await api.authenticationApi.login({
+				email,
+				password
+			});
 
-		const response = await sendLoginForm(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,
-			};
-
-			if (!response.user?.isAdmin && response.user?.shouldChangePassword) {
-				return dispatch('first-login');
+			if (!data.isAdmin && data.shouldChangePassword) {
+				dispatch('first-login');
+				return;
 			}
 
-			return dispatch('success');
+			dispatch('success');
+			return;
+		} catch (e) {
+			error = 'Incorrect email or password';
+			return;
 		}
-	}
+	};
 </script>
 
 <div class="border bg-white p-4 shadow-sm w-[500px] rounded-md py-8">
@@ -45,20 +39,36 @@
 	</div>
 
 	{#if loginPageMessage}
-		<p class="text-sm border rounded-md m-4 p-4 text-immich-primary font-medium bg-immich-primary/5">
+		<p
+			class="text-sm border rounded-md m-4 p-4 text-immich-primary font-medium bg-immich-primary/5"
+		>
 			{@html loginPageMessage}
 		</p>
 	{/if}
 
-	<form on:submit|preventDefault={login} method="post" action="" autocomplete="off">
+	<form on:submit|preventDefault={login} autocomplete="off">
 		<div class="m-4 flex flex-col gap-2">
 			<label class="immich-form-label" for="email">Email</label>
-			<input class="immich-form-input" id="email" name="email" type="email" required />
+			<input
+				class="immich-form-input"
+				id="email"
+				name="email"
+				type="email"
+				bind:value={email}
+				required
+			/>
 		</div>
 
 		<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"
+				bind:value={password}
+				required
+			/>
 		</div>
 
 		{#if error}