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>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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');
|
||||
}
|
||||
Reference in New Issue
Block a user