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/album-page/album-viewer.svelte

@@ -36,6 +36,7 @@
 	let backUrl = '/albums';
 	let currentAlbumName = '';
 	let currentUser: UserResponseDto;
+	let titleInput: HTMLInputElement;
 
 	$: isOwned = currentUser?.id == album.ownerId;
 
@@ -298,6 +299,12 @@
 
 	<section class="m-auto my-[160px] w-[60%]">
 		<input
+			on:keydown={(e) => {
+				if (e.key == 'Enter') {
+					isEditingTitle = false;
+					titleInput.blur();
+				}
+			}}
 			on:focus={() => (isEditingTitle = true)}
 			on:blur={() => (isEditingTitle = false)}
 			class={`transition-all text-6xl text-immich-primary w-[99%] border-b-2 border-transparent outline-none ${
@@ -306,6 +313,7 @@
 			type="text"
 			bind:value={album.albumName}
 			disabled={!isOwned}
+			bind:this={titleInput}
 		/>
 
 		{#if album.assets.length > 0}

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -6,7 +6,6 @@
 	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
 	import PhotoViewer from './photo-viewer.svelte';
 	import DetailPanel from './detail-panel.svelte';
-	import { session } from '$app/stores';
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
 	import { api, AssetResponseDto, AssetTypeEnum } from '@api';
@@ -62,64 +61,62 @@
 	};
 
 	const downloadFile = async () => {
-		if ($session.user) {
-			try {
-				const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
-				const imageExtension = asset.originalPath.split('.')[1];
-				const imageFileName = imageName + '.' + imageExtension;
+		try {
+			const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
+			const imageExtension = asset.originalPath.split('.')[1];
+			const imageFileName = imageName + '.' + imageExtension;
 
-				// If assets is already download -> return;
-				if ($downloadAssets[imageFileName]) {
-					return;
-				}
+			// If assets is already download -> return;
+			if ($downloadAssets[imageFileName]) {
+				return;
+			}
 
-				$downloadAssets[imageFileName] = 0;
+			$downloadAssets[imageFileName] = 0;
 
-				const { data, status } = await api.assetApi.downloadFile(
-					asset.deviceAssetId,
-					asset.deviceId,
-					false,
-					false,
-					{
-						responseType: 'blob',
-						onDownloadProgress: (progressEvent) => {
-							if (progressEvent.lengthComputable) {
-								const total = progressEvent.total;
-								const current = progressEvent.loaded;
-								let percentCompleted = Math.floor((current / total) * 100);
+			const { data, status } = await api.assetApi.downloadFile(
+				asset.deviceAssetId,
+				asset.deviceId,
+				false,
+				false,
+				{
+					responseType: 'blob',
+					onDownloadProgress: (progressEvent) => {
+						if (progressEvent.lengthComputable) {
+							const total = progressEvent.total;
+							const current = progressEvent.loaded;
+							let percentCompleted = Math.floor((current / total) * 100);
 
-								$downloadAssets[imageFileName] = percentCompleted;
-							}
+							$downloadAssets[imageFileName] = percentCompleted;
 						}
 					}
-				);
-
-				if (!(data instanceof Blob)) {
-					return;
 				}
+			);
 
-				if (status === 200) {
-					const fileUrl = URL.createObjectURL(data);
-					const anchor = document.createElement('a');
-					anchor.href = fileUrl;
-					anchor.download = imageFileName;
-
-					document.body.appendChild(anchor);
-					anchor.click();
-					document.body.removeChild(anchor);
-
-					URL.revokeObjectURL(fileUrl);
-
-					// Remove item from download list
-					setTimeout(() => {
-						const copy = $downloadAssets;
-						delete copy[imageFileName];
-						$downloadAssets = copy;
-					}, 2000);
-				}
-			} catch (e) {
-				console.log('Error downloading file ', e);
+			if (!(data instanceof Blob)) {
+				return;
 			}
+
+			if (status === 200) {
+				const fileUrl = URL.createObjectURL(data);
+				const anchor = document.createElement('a');
+				anchor.href = fileUrl;
+				anchor.download = imageFileName;
+
+				document.body.appendChild(anchor);
+				anchor.click();
+				document.body.removeChild(anchor);
+
+				URL.revokeObjectURL(fileUrl);
+
+				// Remove item from download list
+				setTimeout(() => {
+					const copy = $downloadAssets;
+					delete copy[imageFileName];
+					$downloadAssets = copy;
+				}, 2000);
+			}
+		} catch (e) {
+			console.log('Error downloading file ', e);
 		}
 	};
 </script>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -37,7 +37,7 @@
 			map = leaflet.map('map');
 			leaflet
 				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 				})
 				.addTo(map);
 		}
@@ -124,7 +124,7 @@
 							{moment(
 								asset.exifInfo.dateTimeOriginal
 									.toString()
-									.slice(0, asset.exifInfo.dateTimeOriginal.toString().length - 1),
+									.slice(0, asset.exifInfo.dateTimeOriginal.toString().length - 1)
 							).format('ddd, hh:mm A')}
 						</p>
 						<p>GMT{moment(asset.exifInfo.dateTimeOriginal).format('Z')}</p>
@@ -141,7 +141,9 @@
 					<div class="flex text-sm gap-2">
 						{#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
 							{#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
-								<p>{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}MP</p>
+								<p>
+									{getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}MP
+								</p>
 							{/if}
 
 							<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -14,9 +14,14 @@
 				<div class="mb-2" transition:slide>
 					<p class="font-medium text-xs truncate">■ {fileName}</p>
 					<div class="flex flex-row-reverse place-items-center gap-5">
-						<p><span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100</p>
+						<p>
+							<span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100
+						</p>
 						<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
-							<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${$downloadAssets[fileName]}%`} />
+							<div
+								class="bg-immich-primary h-[7px] rounded-full"
+								style={`width: ${$downloadAssets[fileName]}%`}
+							/>
 						</div>
 					</div>
 				</div>

web/src/lib/components/asset-viewer/intersection-observer.svelte

@@ -22,8 +22,8 @@
 					}
 				},
 				{
-					rootMargin,
-				},
+					rootMargin
+				}
 			);
 
 			observer.observe(container);

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { session } from '$app/stores';
 	import { fade } from 'svelte/transition';
 
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -14,33 +13,29 @@
 	const dispatch = createEventDispatcher();
 
 	onMount(async () => {
-		if ($session.user) {
-			const { data } = await api.assetApi.getAssetById(assetId);
-			assetInfo = data;
-		}
+		const { data } = await api.assetApi.getAssetById(assetId);
+		assetInfo = data;
 	});
 
 	const loadAssetData = async () => {
-		if ($session.user) {
-			try {
-				const { data } = await api.assetApi.serveFile(
-					assetInfo.deviceAssetId,
-					deviceId,
-					false,
-					true,
-					{
-						responseType: 'blob'
-					}
-				);
-
-				if (!(data instanceof Blob)) {
-					return;
+		try {
+			const { data } = await api.assetApi.serveFile(
+				assetInfo.deviceAssetId,
+				deviceId,
+				false,
+				true,
+				{
+					responseType: 'blob'
 				}
+			);
 
-				const assetData = URL.createObjectURL(data);
-				return assetData;
-			} catch (e) {}
-		}
+			if (!(data instanceof Blob)) {
+				return;
+			}
+
+			const assetData = URL.createObjectURL(data);
+			return assetData;
+		} catch (e) {}
 	};
 </script>
 

web/src/lib/components/asset-viewer/video-viewer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { session } from '$app/stores';
 	import { fade } from 'svelte/transition';
 
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -16,50 +15,46 @@
 	let isVideoLoading = true;
 
 	onMount(async () => {
-		if ($session.user) {
-			const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
+		const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
 
-			asset = assetInfo;
+		asset = assetInfo;
 
-			await loadVideoData();
-		}
+		await loadVideoData();
 	});
 
 	const loadVideoData = async () => {
 		isVideoLoading = true;
 
-		if ($session.user) {
-			try {
-				const { data } = await api.assetApi.serveFile(
-					asset.deviceAssetId,
-					asset.deviceId,
-					false,
-					true,
-					{
-						responseType: 'blob'
-					}
-				);
-
-				if (!(data instanceof Blob)) {
-					return;
+		try {
+			const { data } = await api.assetApi.serveFile(
+				asset.deviceAssetId,
+				asset.deviceId,
+				false,
+				true,
+				{
+					responseType: 'blob'
 				}
+			);
 
-				const videoData = URL.createObjectURL(data);
-				videoPlayerNode.src = videoData;
+			if (!(data instanceof Blob)) {
+				return;
+			}
 
-				videoPlayerNode.load();
+			const videoData = URL.createObjectURL(data);
+			videoPlayerNode.src = videoData;
 
-				videoPlayerNode.oncanplay = () => {
-					videoPlayerNode.muted = true;
-					videoPlayerNode.play();
-					videoPlayerNode.muted = false;
+			videoPlayerNode.load();
 
-					isVideoLoading = false;
-				};
+			videoPlayerNode.oncanplay = () => {
+				videoPlayerNode.muted = true;
+				videoPlayerNode.play();
+				videoPlayerNode.muted = false;
 
-				return videoData;
-			} catch (e) {}
-		}
+				isVideoLoading = false;
+			};
+
+			return videoData;
+		} catch (e) {}
 	};
 </script>
 

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}

web/src/lib/components/shared-components/announcement-box.svelte

@@ -24,23 +24,27 @@
 
 			<section class="max-h-[400px] overflow-y-auto">
 				<div class="font-thin">
-					Hi friend, there is a new release of <span class="font-immich-title text-immich-primary font-bold"
-						>IMMICH</span
+					Hi friend, there is a new release of <span
+						class="font-immich-title text-immich-primary font-bold">IMMICH</span
 					>, please take your time to visit the
 					<span class="underline font-medium"
-						><a href="https://github.com/alextran1502/immich/releases/latest" target="_blank" rel="noopener noreferrer"
-							>release note</a
+						><a
+							href="https://github.com/alextran1502/immich/releases/latest"
+							target="_blank"
+							rel="noopener noreferrer">release note</a
 						></span
 					>
-					and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
-					especially if you use WatchTower or any mechanism that handles updating your application automatically.
+					and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent
+					any misconfigurations, especially if you use WatchTower or any mechanism that handles updating
+					your application automatically.
 				</div>
 
 				{#if remoteVersion == 'v1.11.0_17-dev'}
 					<div class="mt-2 font-thin">
-						This specific version <span class="font-medium">v1.11.0_17-dev</span> includes changes in the docker-compose
-						setup that added additional containters. Please make sure to update the docker-compose file, pull new images
-						and check your setup for the latest features and bug fixes.
+						This specific version <span class="font-medium">v1.11.0_17-dev</span> includes changes in
+						the docker-compose setup that added additional containters. Please make sure to update the
+						docker-compose file, pull new images and check your setup for the latest features and bug
+						fixes.
 					</div>
 				{/if}
 			</section>

web/src/lib/components/shared-components/immich-thumbnail.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { session } from '$app/stores';
 	import { createEventDispatcher, onDestroy } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
@@ -32,14 +31,12 @@
 	let videoAbortController: AbortController;
 
 	const loadImageData = async () => {
-		if ($session.user) {
-			const { data } = await api.assetApi.getAssetThumbnail(asset.id, format, {
-				responseType: 'blob'
-			});
-			if (data instanceof Blob) {
-				imageData = URL.createObjectURL(data);
-				return imageData;
-			}
+		const { data } = await api.assetApi.getAssetThumbnail(asset.id, format, {
+			responseType: 'blob'
+		});
+		if (data instanceof Blob) {
+			imageData = URL.createObjectURL(data);
+			return imageData;
 		}
 	};
 

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { session } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import type { ImmichUser } from '$lib/models/immich-user';
@@ -23,14 +22,12 @@
 	});
 
 	const getUserProfileImage = async () => {
-		if ($session.user) {
-			try {
-				await api.userApi.getProfileImage(user.id);
-				shouldShowProfileImage = true;
-			} catch (e) {
-				console.log('User does not have a profile image');
-				shouldShowProfileImage = false;
-			}
+		try {
+			await api.userApi.getProfileImage(user.id);
+			shouldShowProfileImage = true;
+		} catch (e) {
+			console.log('User does not have a profile image');
+			shouldShowProfileImage = false;
 		}
 	};
 	const getFirstLetter = (text?: string) => {

web/src/lib/components/shared-components/status-box.svelte

@@ -1,49 +1,50 @@
 <script lang="ts">
-	import { getRequest } from '$lib/utils/api-helper';
 	import { onDestroy, onMount } from 'svelte';
 	import { serverEndpoint } from '$lib/constants';
 	import Cloud from 'svelte-material-icons/Cloud.svelte';
 	import Dns from 'svelte-material-icons/Dns.svelte';
 	import LoadingSpinner from './loading-spinner.svelte';
-	import { goto } from '$app/navigation';
-
-	type ServerInfoType = {
-		diskAvailable: string;
-		diskAvailableRaw: number;
-		diskSize: string;
-		diskSizeRaw: number;
-		diskUsagePercentage: number;
-		diskUse: string;
-		diskUseRaw: number;
-	};
+	import { api, ServerInfoResponseDto } from '@api';
 
 	let endpoint = serverEndpoint;
 	let isServerOk = true;
 	let serverVersion = '';
-	let serverInfoRes: ServerInfoType;
+	let serverInfo: ServerInfoResponseDto;
 
 	onMount(async () => {
-		const res = await getRequest('server-info/version', '');
-		serverVersion = `v${res.major}.${res.minor}.${res.patch}`;
+		try {
+			const { data: version } = await api.serverInfoApi.getServerVersion();
 
-		serverInfoRes = (await getRequest('server-info', '')) as ServerInfoType;
+			serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
 
-		getStorageUsagePercentage();
+			const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
+			serverInfo = serverInfoRes;
+			getStorageUsagePercentage();
+		} catch (e) {
+			console.log('Error [StatusBox] [onMount]');
+			isServerOk = false;
+		}
 	});
 
 	const pingServerInterval = setInterval(async () => {
-		const response = await getRequest('server-info/ping', '');
+		try {
+			const { data: pingReponse } = await api.serverInfoApi.pingServer();
 
-		if (response.res === 'pong') isServerOk = true;
-		else isServerOk = false;
+			if (pingReponse.res === 'pong') isServerOk = true;
+			else isServerOk = false;
 
-		serverInfoRes = (await getRequest('server-info', '')) as ServerInfoType;
+			const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
+			serverInfo = serverInfoRes;
+		} catch (e) {
+			console.log('Error [StatusBox] [pingServerInterval]');
+			isServerOk = false;
+		}
 	}, 10000);
 
 	onDestroy(() => clearInterval(pingServerInterval));
 
 	const getStorageUsagePercentage = () => {
-		return Math.round((serverInfoRes.diskUseRaw / serverInfoRes.diskSizeRaw) * 100);
+		return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
 	};
 </script>
 
@@ -54,12 +55,15 @@
 		</div>
 		<div>
 			<p class="text-sm font-medium text-immich-primary">Storage</p>
-			{#if serverInfoRes}
+			{#if serverInfo}
 				<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
 					<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
-					<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${getStorageUsagePercentage()}%`} />
+					<div
+						class="bg-immich-primary h-[7px] rounded-full"
+						style={`width: ${getStorageUsagePercentage()}%`}
+					/>
 				</div>
-				<p class="text-xs">{serverInfoRes?.diskUse} of {serverInfoRes?.diskSize} used</p>
+				<p class="text-xs">{serverInfo?.diskUse} of {serverInfo?.diskSize} used</p>
 			{:else}
 				<div class="mt-2">
 					<LoadingSpinner />

web/src/lib/components/shared-components/upload-panel.svelte

@@ -7,7 +7,6 @@
 	import type { UploadAsset } from '$lib/models/upload-asset';
 	import { getAssetsInfo } from '$lib/stores/assets';
 	import { session } from '$app/stores';
-
 	let showDetail = true;
 
 	let uploadLength = 0;
@@ -75,12 +74,9 @@
 	}
 
 	let isUploading = false;
+
 	uploadAssetsStore.isUploading.subscribe((value) => {
 		isUploading = value;
-
-		if (isUploading == false) {
-			getAssetsInfo();
-		}
 	});
 </script>
 
@@ -88,6 +84,7 @@
 	<div
 		in:fade={{ duration: 250 }}
 		out:fade={{ duration: 250, delay: 1000 }}
+		on:outroend={() => getAssetsInfo()}
 		class="absolute right-6 bottom-6 z-[10000]"
 	>
 		{#if showDetail}
@@ -107,49 +104,51 @@
 
 				<div class="max-h-[400px] overflow-y-auto pr-2 rounded-lg immich-scrollbar">
 					{#each $uploadAssetsStore as uploadAsset}
-						<div
-							in:fade={{ duration: 250 }}
-							out:fade={{ duration: 100 }}
-							class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
-						>
-							<div class="relative">
-								<img
-									in:fade={{ duration: 250 }}
-									id={`${uploadAsset.id}`}
-									src="/immich-logo.svg"
-									alt=""
-									class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg "
-								/>
-
-								<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
-									<p
-										class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
-									>
-										.{uploadAsset.fileExtension}
-									</p>
-								</div>
-							</div>
-
-							<div class="p-2 pr-4 flex flex-col justify-between">
-								<input
-									disabled
-									class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
-									value={`[${getSizeInHumanReadableFormat(uploadAsset.file.size)}] ${
-										uploadAsset.file.name
-									}`}
-								/>
-
-								<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
-									<div
-										class="bg-immich-primary h-[15px] rounded-md transition-all"
-										style={`width: ${uploadAsset.progress}%`}
+						{#key uploadAsset.id}
+							<div
+								in:fade={{ duration: 250 }}
+								out:fade={{ duration: 100 }}
+								class="text-xs mt-3 rounded-lg bg-immich-bg grid grid-cols-[70px_auto] gap-2 h-[70px]"
+							>
+								<div class="relative">
+									<img
+										in:fade={{ duration: 250 }}
+										id={`${uploadAsset.id}`}
+										src="/immich-logo.svg"
+										alt=""
+										class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg "
 									/>
-									<p class="absolute h-full w-full text-center top-0 text-[10px] ">
-										{uploadAsset.progress}/100
-									</p>
+
+									<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">
+										<p
+											class="absolute bottom-1 right-1 object-right-bottom text-gray-50/95 font-semibold stroke-immich-primary uppercase"
+										>
+											.{uploadAsset.fileExtension}
+										</p>
+									</div>
+								</div>
+
+								<div class="p-2 pr-4 flex flex-col justify-between">
+									<input
+										disabled
+										class="bg-gray-100 border w-full p-1 rounded-md text-[10px] px-2"
+										value={`[${getSizeInHumanReadableFormat(uploadAsset.file.size)}] ${
+											uploadAsset.file.name
+										}`}
+									/>
+
+									<div class="w-full bg-gray-300 h-[15px] rounded-md mt-[5px] text-white relative">
+										<div
+											class="bg-immich-primary h-[15px] rounded-md transition-all"
+											style={`width: ${uploadAsset.progress}%`}
+										/>
+										<p class="absolute h-full w-full text-center top-0 text-[10px] ">
+											{uploadAsset.progress}/100
+										</p>
+									</div>
 								</div>
 							</div>
-						</div>
+						{/key}
 					{/each}
 				</div>
 			</div>