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/routes/albums/[albumId]/index.svelte

@@ -4,38 +4,39 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto, api } from '@api';
 
-	export const load: Load = async ({ session, params }) => {
-		if (!session.user) {
+	export const load: Load = async ({ params }) => {
+		try {
+			const albumId = params['albumId'];
+
+			const { data: albumInfo } = await api.albumApi.getAlbumInfo(albumId);
+
+			return {
+				status: 200,
+				props: {
+					album: albumInfo
+				}
+			};
+		} catch (e) {
+			if (e instanceof AxiosError) {
+				if (e.response?.status === 404) {
+					return {
+						status: 302,
+						redirect: '/albums'
+					};
+				}
+			}
+
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
 		}
-		const albumId = params['albumId'];
-
-		let album: AlbumResponseDto;
-
-		try {
-			const { data } = await api.albumApi.getAlbumInfo(albumId);
-			album = data;
-		} catch (e) {
-			return {
-				status: 302,
-				redirect: '/albums'
-			};
-		}
-
-		return {
-			status: 200,
-			props: {
-				album: album
-			}
-		};
 	};
 </script>
 
 <script lang="ts">
 	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import { AxiosError } from 'axios';
 
 	export let album: AlbumResponseDto;
 </script>

web/src/routes/albums/[albumId]/photos/[assetId].svelte

@@ -1,15 +1,19 @@
 <script context="module" lang="ts">
 	export const prerender = false;
 
+	import { api } from '@api';
 	import type { Load } from '@sveltejs/kit';
 
-	export const load: Load = async ({ session, params }) => {
-		if (!session.user) {
+	export const load: Load = async ({ params }) => {
+		try {
+			await api.userApi.getMyUserInfo();
+		} catch (e) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
 		}
+
 		const albumId = params['albumId'];
 
 		if (albumId) {

web/src/routes/albums/index.svelte

@@ -9,29 +9,24 @@
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import { AlbumResponseDto, api } from '@api';
 
-	export const load: Load = async ({ session }) => {
-		if (!session.user) {
+	export const load: Load = async () => {
+		try {
+			const { data: user } = await api.userApi.getMyUserInfo();
+			const { data: albums } = await api.albumApi.getAllAlbums();
+
+			return {
+				status: 200,
+				props: {
+					user: user,
+					albums: albums
+				}
+			};
+		} catch (e) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
 		}
-
-		let albums: AlbumResponseDto[] = [];
-		try {
-			const { data } = await api.albumApi.getAllAlbums();
-			albums = data;
-		} catch (e) {
-			console.log('Error [getAllAlbums] ', e);
-		}
-
-		return {
-			status: 200,
-			props: {
-				user: session.user,
-				albums: albums
-			}
-		};
 	};
 </script>