add profile page

src/components/Header.svelte

@@ -56,8 +56,8 @@
 	</nav>
 
 	<div class="corner">
+		<a href="/profile">
 		<div class="login-message">{username}</div>
-		<a href="/login">
 			<img src={profile} alt="Profile" style="width: 16px; height: 16px;" title={profileTitle} />
 		</a>
 	</div>

src/routes/login/+page.svelte

@@ -6,14 +6,10 @@
 
 	let isAuthenticated = false;
 	let isLoading = true;
-	let user = null;
 	let showPassword = false;
 
 	$: authentication.subscribe((value) => {
 		isAuthenticated = !!value;
-		if (value) {
-			user = value;
-		}
 	});
 
 	onMount(() => {
@@ -71,10 +67,6 @@
 		}
 	}
 
-	function logout() {
-		window.location.href = '/logout';
-	}
-
 	function navigateToRegister() {
 		window.location.href = '/register';
 	}
@@ -117,9 +109,6 @@
 				<button type="button" class="register-button" on:click={navigateToRegister}>Register</button>
 			</form>
 		</div>
-	{:else}
-		<p>You are logged in as {user.username}!</p>
-		<button class="logout-button" on:click={logout}>Logout</button>
 	{/if}
 </div>
 
@@ -151,8 +140,7 @@
     }
 
     .add-button,
-    .register-button,
-    .logout-button {
+    .register-button {
         padding: 0.5rem 1rem;
         margin-top: 0.5rem;
         border: none;
@@ -171,9 +159,4 @@
         background-color: #2196f3;
         color: white;
     }
-
-    .logout-button {
-        background-color: #f44336;
-        color: white;
-    }
 </style>

src/routes/profile/+page.js

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

src/routes/profile/+page.svelte

@@ -0,0 +1,61 @@
+<script>
+	import { onMount } from 'svelte';
+	import { authentication } from '../store.js';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
+
+	let isAuthenticated = false;
+	let isLoading = true;
+	let user = null;
+
+	$: authentication.subscribe((value) => {
+		isAuthenticated = !!value;
+		if (value) {
+			user = value;
+		}
+	});
+
+	onMount(() => {
+		try {
+			const storedAuth = localStorage.getItem('authentication');
+			if (storedAuth) {
+				authentication.set(JSON.parse(storedAuth));
+			} else {
+				goto('/login');
+			}
+		} catch (error) {
+			console.error('Error parsing stored auth:', error);
+		} finally {
+			isLoading = false;
+		}
+	});
+
+	function logout() {
+		window.location.href = '/logout';
+	}
+</script>
+
+<svelte:head>
+	<title>Login</title>
+	<meta name="description" content="Login page" />
+</svelte:head>
+
+<div in:fade class="text-column">
+	{#if isLoading}
+		<p>Loading...</p>
+	{:else if isAuthenticated}
+		<p>You are logged in as {user.username}!</p>
+		<button class="logout-button" on:click={logout}>Logout</button>
+	{/if}
+</div>
+
+<style>
+    input::placeholder {
+        opacity: 0.5;
+    }
+
+    .logout-button {
+        background-color: #f44336;
+        color: white;
+    }
+</style>