Rework Header Component for Auth handling

src/routes/+layout.svelte

@@ -2,7 +2,6 @@
 
 <script lang="ts">
 	import '../app.postcss';
-	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { writable } from 'svelte/store';
 	import { themes } from '$lib/types/themes'
@@ -13,6 +12,11 @@
 	import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
 	import type { ChellarisGameInfo } from '$lib/types/chellaris';
 	import UserSettingsStore from '$lib/stores/UserSettingsStore';
+	import AuthTokenStore from '$lib/stores/AuthTokenStore';
+
+	if (browser) {
+		$AuthTokenStore = document.cookie.split("=")[document.cookie.split("=").length - 1];
+	}
 
 /*	$: {
 		fetch(apiBaseUrl + '/v3/ethics').then((res) => {
@@ -39,7 +43,7 @@
 
 </script>
 
-<Header {page}/>
+<Header />
 <div class="m-4 border-2 border-accent rounded-lg h-[calc(100%-5.75rem-1px)]">
 	<slot />
 </div>

src/routes/Header.svelte

@@ -1,16 +1,15 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+	import { page } from '$app/stores';
 	import discord from '$lib/images/discord.svg';
+	import AuthTokenStore from '$lib/stores/AuthTokenStore';
+	import { Exit, EyeClosed, EyeOpen } from 'radix-icons-svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { themes } from '$lib/types/themes';
-	import UserSettingsStore from '$lib/stores/UserSettingsStore';
-	import * as Avatar from '$lib/components/ui/avatar';
-	import { CaretDown, CaretRight, Exit, EyeClosed, EyeOpen } from 'radix-icons-svelte';
 	import { Separator } from '$lib/components/ui/separator';
+	import { Input } from '$lib/components/ui/input';
 	import * as Popover from '$lib/components/ui/popover';
-
+	import * as Avatar from '$lib/components/ui/avatar';
-	let { page } = $props()
 
 	type User = {
 		token: string,
@@ -20,29 +19,46 @@
 		admin: boolean
 	}
 
-	/*let user: User | undefined = $state({
-		user.loggedIn = true;
-		tokenVisible: false,
-		discord: "neshura",
-		picture: "/avatar.png",
-		admin: true, // DEBUG
-	})*/
-
 	let user: User | undefined = $state(undefined);
 
-	function logout() {
+	function handleLogout() {
+		$AuthTokenStore = ""
+		document.cookie = "authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"
 		user = undefined
 	}
 
-	function nextTheme() {
+	async function handleLogin() {
-		if ($UserSettingsStore.themeId + 1 < themes.length) {
+		// pretend we are handling the login via a fetch
-			$UserSettingsStore.themeId += 1
+		await new Promise((resolve) => setTimeout(resolve, 200));
+		let ret = {
+			token: $AuthTokenStore,
+			discord: "neshura",
+			picture: "/avatar.png",
+			admin: true
+		}
+
+		if (true) {
+			const d = new Date();
+			let authExpiryDays = 14
+			d.setTime(d.getTime() + (authExpiryDays*24*60*60*1000));
+			document.cookie = "authToken=" + ret.token + "; expires=" + d.toUTCString() + "; path=/";
+
+			user = {
+				token: ret.token,
+				tokenVisible: false,
+				discord: ret.discord ?? undefined,
+				picture: ret.picture ?? undefined,
+				admin: ret.admin
+			}
 		}
 		else {
-			$UserSettingsStore.themeId = 0
+			// handle login failure
 		}
 	}
 
+	if ($AuthTokenStore != "") {
+		handleLogin()
+	}
 </script>
 
 <div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
@@ -62,14 +78,14 @@
 		<Button
 			variant="ghost"
 			href="/"
-			class="{$page.url.pathname == '/' ? 'text-accent-foreground bg-accent' : ''}"
+			class="{$page.url.pathname === '/' ? 'text-accent-foreground bg-accent' : ''}"
 		>
 			Home
 		</Button>
 		<Button
 			variant="ghost"
 			href="/current"
-			class="{$page.url.pathname == '/current' ? 'text-accent-foreground bg-accent' : ''}"
+			class="{$page.url.pathname === '/current' ? 'text-accent-foreground bg-accent' : ''}"
 		>
 			Game [Current Game]
 		</Button>
@@ -80,23 +96,23 @@
 		>
 			Archives
 		</Button>
-		{#if user != undefined && user.admin}
+		{#if user !== undefined && user.admin}
 			<Button
 				variant="ghost"
 				href="/admin"
-				class="{$page.url.pathname == '/admin' ? 'text-accent-foreground bg-accent' : ''}"
+				class="{$page.url.pathname === '/admin' ? 'text-accent-foreground bg-accent' : ''}"
 			>
 				Admin
 			</Button>
 			<Button
 				variant="ghost"
 				href="/admin/new"
-				class="{$page.url.pathname == '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
+				class="{$page.url.pathname === '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
 			>
 				Admin (New)
 			</Button>
 		{/if}
-		{#if user != undefined}
+		{#if user !== undefined}
 			<Popover.Root>
 				<Popover.Trigger>
 					<Button
@@ -118,7 +134,7 @@
 								{:else}
 									<p class="text-sm font-medium leading-none w-12">******</p>
 								{/if}
-								<Button variant="ghost" size="sm" class="p-0 h-2 justify-start" on:click={() => {user.tokenVisible = !user.tokenVisible}}>
+								<Button variant="ghost" size="sm" class="p-0 h-2 justify-start" on:click={() => {if (user !== undefined) user.tokenVisible = !user.tokenVisible}}>
 									{#if user.tokenVisible}
 										<EyeOpen />
 									{:else}
@@ -142,7 +158,7 @@
 					</div>
 					<Separator orientation="horizontal" />
 					<div class="w-full p-1">
-						<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={logout}>
+						<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={handleLogout}>
 							<p>Log out </p>
 							<Exit />
 						</Button>
@@ -159,16 +175,18 @@
 						Log In
 					</Button>
 				</Popover.Trigger>
-				<Popover.Content class="w-56 p-1">
+				<Popover.Content class="w-40 p-1 ">
-					<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/profile">
+					<form class="flex flex-col items-center gap-1" on:submit={handleLogin}>
-						Token:
+						<Input type="text" placeholder="User Token" bind:value={$AuthTokenStore} />
-
+						<div class="flex flex-row">
-						Log In
+							<Button variant="link" class="flex flex-row items-center h-8 space-x-1 px-2 py-1.5 text-sm w-full text-muted-foreground" href="/sign-up" >
-					</Button>
+								Sign Up
-					<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={logout}>
+							</Button>
-						<p>Sign Up </p>
+							<Button variant="secondary" class="justify-start h-8 px-2 py-1.5 text-sm w-full" type="submit">
-						<Exit />
+								Log In
-					</Button>
+							</Button>
+						</div>
+					</form>
 				</Popover.Content>
 			</Popover.Root>
 		{/if}

src/routes/sign-up/+page.svelte

@@ -1,3 +1,12 @@
-<div>
+<script lang="ts">
-	LOGIN PAGE
+
+</script>
+
+<div class="flex flex-col items-center justify-center h-full">
+	<p>
+		Get an Account!
+	</p>
+	<p>
+		WIP
+	</p>
 </div>