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