work on making login persistent

frontend/src/lib/components/UserLogin.svelte

@@ -6,17 +6,32 @@
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
 
 	import { goto } from '$app/navigation';
-	import { authCookieLogin } from '$lib/client';
+	import { authCookieLogin, usersCurrentUser } from '$lib/client/services.gen';
 	import {
 		type AuthCookieLoginData,
-		type Body_auth_cookie_login_auth_login_post
+		type Body_auth_cookie_login_auth_login_post,
+		type UserRead
 	} from '$lib/client/types.gen';
+	import { currentUser } from '$lib/stores/userStore';
 	import { preventDefault } from '$lib/util';
 	import { Button, Card, Heading, Input, Select } from 'flowbite-svelte';
 	import { _ } from 'svelte-i18n';
 
+	async function refresh(): Promise<string> {
+		const returned = await usersCurrentUser();
+		console.log('returned on refresh: ', returned);
+		if (returned.error) {
+			console.log('Error getting current user: ', returned.error.detail);
+			currentUser.set(null as unknown as UserRead);
+			return returned.error.detail;
+		} else {
+			currentUser.set(returned.data as UserRead);
+			return 'success';
+		}
+	}
+
 	// functionality
-	async function submitData() {
+	async function submitData(): Promise<void> {
 		const loginData: Body_auth_cookie_login_auth_login_post = {
 			username: formData[0].value,
 			password: formData[1].value
@@ -26,6 +41,8 @@
 			body: loginData
 		};
 
+		console.log('logindata: ', data);
+
 		const authReturn = await authCookieLogin(data);
 
 		if (authReturn.error) {
@@ -34,7 +51,16 @@
 				element.value = '';
 			}
 		} else {
-			goto('/userLand/userLandingpage');
+			const status: string = await refresh();
+
+			if (status !== 'success') {
+				console.log('error during retrieving active users: ', status);
+				showAlert = true;
+				alertMessage = $_('login.unauthorized') + ': ' + status;
+			} else {
+				console.log('login and user retrieval successful');
+				goto('/userLand/userLandingpage');
+			}
 		}
 	}
 
@@ -81,30 +107,20 @@
 
 	let remember: boolean = false;
 	let showAlert: boolean = false;
-	$: console.log('remember: ', remember, 'showAlert: ', showAlert);
+	let alertMessage: string = $_('login.badCredentials');
 </script>
 
 {#if showAlert}
 	<AlertMessage
 		title={$_('login.alertMessageTitle')}
-		message={$_('login.badCredentials')}
+		message={alertMessage}
 		lastpage={`${base}/userLand/userLogin`}
 		onclick={() => {
 			showAlert = false;
 		}}
 	/>
 {/if}
 
-<!-- {#if users.get()['loggedIn'] && users.get()['loggedIn'] !== null}
-	<AlertMessage
-		title={$_('login.alertMessageTitle')}
-		message={$_('login.alreadyLoggedInMessage')}
-		lastpage={`${base}`}
-		onclick={() => {
-			showAlert = false;
-		}}
-	/>
-{:else} -->
 <div class="container m-2 mx-auto w-full max-w-xl">
 	<Card class="container m-2 mx-auto mb-6 w-full max-w-xl pb-6">
 		<Heading

frontend/src/lib/components/UserProfile.svelte

@@ -1,39 +1,69 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
-	import { users } from '$lib/stores/userStore';
+	import { authCookieLogout } from '$lib/client/services.gen';
+	import { type UserRead } from '$lib/client/types.gen';
+	import { currentUser } from '$lib/stores/userStore';
 	import { Button, Heading, Popover } from 'flowbite-svelte';
 	import { onDestroy } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
+	import AlertMessage from './AlertMessage.svelte';
 
 	export let triggeredBy = '';
-	let loggedIn: string | null = users.get()['loggedIn'];
-	let userData: UserData | null = loggedIn ? users.fetch(loggedIn) : null;
 
-	const unsubscribe = users.subscribe((currentUserData) => {
-		loggedIn = currentUserData['loggedIn'];
+	let userData: UserRead | null = get(currentUser);
+	let showAlert: boolean = false;
+	let alertMessage: string = $_('login.alertMessageError');
 
-		if (loggedIn && loggedIn !== null) {
-			userData = users.fetch(loggedIn);
-		}
+	const unsubscribe = currentUser.subscribe((data) => {
+		console.log('data: ', data);
+		userData = data;
 	});
 
-	function logout() {
-		users.get()['loggedIn'] = null;
-		userData = null;
+	async function logout(): Promise<void> {
+		const response = await authCookieLogout();
+		if (response.error) {
+			console.log('Error during logout: ', response.response.status, response.error.detail);
+			showAlert = true;
+			alertMessage += ': ' + response.error.detail;
+		} else {
+			console.log('Successful logout of user ', userData.email, response.response.status);
+			userData = null;
+			goto(`/${base}`);
+		}
 	}
 
 	onDestroy(unsubscribe);
+
+	$: console.log('userData: ', userData);
 </script>
 
 <Popover {triggeredBy} class="text-gray-700 dark:text-gray-400">
+	{#if showAlert}
+		<AlertMessage
+			title={$_('login.alertMessageTitle')}
+			message={alertMessage}
+			onclick={() => {
+				showAlert = false;
+			}}
+		/>
+	{/if}
 	{#if userData !== null}
-		<div class="mx-auto flex flex-col items-center justify-center">
-			<p class="m-2 w-full rounded-lg border p-2 text-lg font-semibold">{userData.name}</p>
-			<Button href={`${base}/`} on:click={logout} size="lg">Logout</Button>
+		<div class="mx-auto mb-6 flex flex-col items-center justify-center space-y-6">
+			<p class="m-2 w-full rounded-lg p-2 font-semibold">{userData.email}</p>
+			<Button class="m-2 w-full" on:click={logout} size="lg"
+				>{$_('login.profileButtonLabelLogout')}</Button
+			>
 		</div>
 	{:else}
 		<div class="mx-auto mb-6 flex flex-col items-center justify-center space-y-6">
-			<Heading tag="h3">Willkommen!</Heading>
-			<Button href="{base}/userLand/userLogin">Einloggen oder Registrieren</Button>
+			<Heading tag="h3" class="mx-auto flex w-full justify-center"
+				>{$_('login.profileTitleDefault')}</Heading
+			>
+			<Button class="m-2 w-full" href="{base}/userLand/userLogin" size="lg"
+				>{$_('login.profileButtonLabelDefault')}</Button
+			>
 		</div>
 	{/if}
 </Popover>