From af9359bbdf229ecddcbd34b36d8e49a1ed02a16f Mon Sep 17 00:00:00 2001
From: restitux <restitux@ohea.xyz>
Date: Thu, 16 Apr 2026 02:37:25 +0000
Subject: [PATCH] frontend: add login page and auth guard

Add authentication flow to the frontend:
- authStore with token management (localStorage persistence)
- Login page with username/password form at /login
- Layout-level auth guard that redirects to /login when no valid
  session exists, validates token on load via GET /api/auth/me
- Top navigation bar showing username and admin link when applicable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte            | 105 ++++++++---
 frontend/src/routes/login/+page.svelte        | 166 ++++++++++++++++++
 .../src/routes/stores/authStore.svelte.ts     |  43 +++++
 3 files changed, 288 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/routes/login/+page.svelte
 create mode 100644 frontend/src/routes/stores/authStore.svelte.ts

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e499baa..a6c88b2 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,22 +1,67 @@
 <script lang="ts">
-	//import Header from './Header.svelte';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { isAuthenticated, getToken, handleUnauthorized } from './stores/authStore.svelte';
 	import '../app.css';
 
 	let { children } = $props();
+
+	let userProfile: { username: string; is_admin: boolean } | null = $state(null);
+	let authChecked = $state(false);
+
+	onMount(async () => {
+		const currentPath = page.url.pathname;
+
+		if (currentPath === '/login') {
+			authChecked = true;
+			return;
+		}
+
+		if (!isAuthenticated()) {
+			await goto('/login');
+			authChecked = true;
+			return;
+		}
+
+		// Validate token by fetching user profile
+		try {
+			const response = await fetch('/api/auth/me', {
+				headers: { Authorization: `Bearer ${getToken()}` }
+			});
+
+			if (!response.ok) {
+				handleUnauthorized();
+				authChecked = true;
+				return;
+			}
+
+			userProfile = await response.json();
+		} catch {
+			handleUnauthorized();
+		}
+
+		authChecked = true;
+	});
 </script>
 
 <div class="app">
-	<!--<Header />-->
+	{#if authChecked}
+		{#if userProfile && page.url.pathname !== '/login'}
+			<nav class="top-nav">
+				<a href="/" class="nav-link">Apps</a>
+				{#if userProfile.is_admin}
+					<a href="/admin" class="nav-link">Admin</a>
+				{/if}
+				<span class="nav-spacer"></span>
+				<span class="nav-user">{userProfile.username}</span>
+			</nav>
+		{/if}
 
-	<main>
-		{@render children()}
-	</main>
-
-	<!--<footer>
-		<p>
-			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
-		</p>
-	</footer>-->
+		<main>
+			{@render children()}
+		</main>
+	{/if}
 </div>
 
 <style>
@@ -27,31 +72,39 @@
 	}
 
 	main {
-		/*flex: 1;*/
-		/*display: flex;*/
-		/*flex-direction: column;*/
-		/*padding: 1rem;*/
 		width: 100%;
-		/*max-width: 64rem;*/
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
 
-	footer {
+	.top-nav {
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
 		align-items: center;
-		padding: 12px;
+		padding: 0.5rem 1rem;
+		background-color: #1a1a2e;
+		border-bottom: 1px solid #333;
 	}
 
-	footer a {
-		font-weight: bold;
+	.nav-link {
+		color: #aaa;
+		text-decoration: none;
+		padding: 0.4rem 0.8rem;
+		border-radius: 4px;
+		font-size: 0.9rem;
 	}
 
-	@media (min-width: 480px) {
-		footer {
-			padding: 12px 0;
-		}
+	.nav-link:hover {
+		color: #e0e0e0;
+		background-color: #2a2a4e;
+		text-decoration: none;
+	}
+
+	.nav-spacer {
+		flex-grow: 1;
+	}
+
+	.nav-user {
+		color: #888;
+		font-size: 0.85rem;
 	}
 </style>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
new file mode 100644
index 0000000..76582b7
--- /dev/null
+++ b/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { setToken, isAuthenticated } from '../stores/authStore.svelte';
+	import { onMount } from 'svelte';
+
+	let username = $state('');
+	let password = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	onMount(() => {
+		if (isAuthenticated()) {
+			goto('/');
+		}
+	});
+
+	async function handleLogin(event: Event) {
+		event.preventDefault();
+		error = '';
+		loading = true;
+
+		try {
+			const response = await fetch('/api/auth/login', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ username, password })
+			});
+
+			if (!response.ok) {
+				const data = await response.json().catch(() => null);
+				error = data?.description || 'Invalid username or password';
+				return;
+			}
+
+			const data = await response.json();
+			setToken(data.token);
+			await goto('/');
+		} catch (e) {
+			error = 'Connection error. Please try again.';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Login</title>
+</svelte:head>
+
+<div class="login-container">
+	<div class="login-box">
+		<h1>GameStream</h1>
+		<form onsubmit={handleLogin}>
+			<div class="field">
+				<label for="username">Username</label>
+				<input
+					id="username"
+					type="text"
+					bind:value={username}
+					autocomplete="username"
+					required
+					disabled={loading}
+				/>
+			</div>
+			<div class="field">
+				<label for="password">Password</label>
+				<input
+					id="password"
+					type="password"
+					bind:value={password}
+					autocomplete="current-password"
+					required
+					disabled={loading}
+				/>
+			</div>
+			{#if error}
+				<div class="error">{error}</div>
+			{/if}
+			<button type="submit" disabled={loading}>
+				{loading ? 'Signing in...' : 'Sign in'}
+			</button>
+		</form>
+	</div>
+</div>
+
+<style>
+	.login-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 100vh;
+	}
+
+	.login-box {
+		background-color: #1a1a2e;
+		border: 1px solid #333;
+		border-radius: 12px;
+		padding: 2.5rem;
+		width: 100%;
+		max-width: 380px;
+	}
+
+	h1 {
+		color: #e0e0e0;
+		margin: 0 0 1.5rem 0;
+		font-size: 1.5rem;
+	}
+
+	.field {
+		margin-bottom: 1rem;
+	}
+
+	label {
+		display: block;
+		color: #aaa;
+		font-size: 0.85rem;
+		margin-bottom: 0.3rem;
+	}
+
+	input {
+		width: 100%;
+		padding: 0.6rem 0.8rem;
+		border: 1px solid #444;
+		border-radius: 6px;
+		background-color: #0f0f23;
+		color: #e0e0e0;
+		font-size: 1rem;
+		box-sizing: border-box;
+	}
+
+	input:focus {
+		outline: none;
+		border-color: #00aaff;
+	}
+
+	input:disabled {
+		opacity: 0.6;
+	}
+
+	.error {
+		color: #ff4444;
+		font-size: 0.85rem;
+		margin-bottom: 1rem;
+	}
+
+	button {
+		width: 100%;
+		padding: 0.7rem;
+		border: none;
+		border-radius: 6px;
+		background-color: #00aaff;
+		color: white;
+		font-size: 1rem;
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
+
+	button:hover:not(:disabled) {
+		background-color: #0088cc;
+	}
+
+	button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+</style>
diff --git a/frontend/src/routes/stores/authStore.svelte.ts b/frontend/src/routes/stores/authStore.svelte.ts
new file mode 100644
index 0000000..041654c
--- /dev/null
+++ b/frontend/src/routes/stores/authStore.svelte.ts
@@ -0,0 +1,43 @@
+import { goto } from '$app/navigation';
+
+interface AuthState {
+	token: string | null;
+}
+
+function loadToken(): string | null {
+	if (typeof window === 'undefined') return null;
+	return localStorage.getItem('auth_token');
+}
+
+export const authStore: AuthState = $state({
+	token: loadToken()
+});
+
+export function getToken(): string | null {
+	return authStore.token;
+}
+
+export function setToken(token: string) {
+	authStore.token = token;
+	localStorage.setItem('auth_token', token);
+}
+
+export function clearToken() {
+	authStore.token = null;
+	localStorage.removeItem('auth_token');
+}
+
+export function isAuthenticated(): boolean {
+	return authStore.token !== null;
+}
+
+export function requireAuth() {
+	if (!isAuthenticated()) {
+		goto('/login');
+	}
+}
+
+export function handleUnauthorized() {
+	clearToken();
+	goto('/login');
+}