Checkpoint SHD dashboard design system

src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

src/lib/components/AppShell.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { Snippet } from 'svelte';
+
+	let { user, children }: {
+		user: { username: string; role: string } | null;
+		children: Snippet;
+	} = $props();
+
+	const links = [
+		{ href: '/builds', label: 'Discover' },
+		{ href: '/builder', label: 'Builder' },
+		{ href: '/guides', label: 'Guides' }
+	];
+</script>
+
+<header class="site-header">
+	<a class="brand" href="/" aria-label="SHD.build home">
+		<span class="brand-mark">SHD</span><span>SHD<b>.build</b></span>
+	</a>
+	<nav aria-label="Main navigation">
+		{#each links as link}
+			<a class:active={page.url.pathname.startsWith(link.href)} href={link.href}>{link.label}</a>
+		{/each}
+		{#if user}
+			<a class:active={page.url.pathname.startsWith('/account')} href="/account">My Profile</a>
+		{/if}
+		{#if user?.role === 'admin'}
+			<a class:active={page.url.pathname.startsWith('/admin')} href="/admin/stats">Admin</a>
+		{/if}
+	</nav>
+	{#if user}
+		<div class="account">
+			<a href="/account"><small>AGENT</small>{user.username}</a>
+			<form method="POST" action="/sign-in?/logout"><button>SIGN OUT →</button></form>
+		</div>
+	{:else}
+		<a class="sign-in" href="/sign-in">SIGN IN →</a>
+	{/if}
+</header>
+
+{@render children()}

src/lib/components/PendingForm.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { Snippet } from 'svelte';
+	let { action, method = 'POST', class: className = '', children }: { action: string; method?: 'POST'; class?: string; children: Snippet<[boolean]> } = $props();
+	let pending = $state(false);
+</script>
+<form {action} {method} class={className} use:enhance={() => { if (pending) return; pending = true; return async ({ update }) => { try { await update(); } finally { pending = false; } }; }}>
+	<fieldset disabled={pending} aria-busy={pending}>{@render children(pending)}</fieldset>
+</form>
+
+<style>fieldset{border:0;padding:0;margin:0;min-width:0}fieldset[aria-busy=true]{opacity:.7}</style>

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/server/auth/authorization.ts

@@ -0,0 +1,12 @@
+import type { AuthUser } from './session';
+import { error } from '@sveltejs/kit';
+
+/**
+ * Every admin page, action, and endpoint must call this server-side.
+ * The capability-based permission checks will replace the broad admin role
+ * as the permission editor is introduced.
+ */
+export function requireAdmin(user: AuthUser | null): asserts user is AuthUser {
+	if (!user) error(401, 'Sign in required');
+	if (user.role !== 'admin') error(403, 'Administrator permission required');
+}

src/lib/server/auth/password.ts

@@ -0,0 +1,18 @@
+import { hash, verify, argon2id } from 'argon2';
+
+/**
+ * Password hashes use the PHC string format, which embeds the unique salt,
+ * algorithm version, and work parameters alongside the derived hash.
+ */
+export function hashPassword(password: string): Promise<string> {
+	return hash(password, {
+		type: argon2id,
+		memoryCost: 19_456,
+		timeCost: 2,
+		parallelism: 1
+	});
+}
+
+export function verifyPassword(passwordHash: string, candidate: string): Promise<boolean> {
+	return verify(passwordHash, candidate);
+}

src/lib/server/auth/session.ts

@@ -0,0 +1,82 @@
+import { dev } from '$app/environment';
+import { getDatabase } from '$lib/server/database';
+import type { Cookies } from '@sveltejs/kit';
+import { createHash, randomBytes, randomUUID } from 'node:crypto';
+
+const COOKIE_NAME = 'shd_session';
+const SESSION_SECONDS = 60 * 60 * 24 * 30;
+
+export type AuthUser = {
+	id: string;
+	username: string;
+	role: string;
+	discordLinked: boolean;
+};
+
+function hashToken(token: string): string {
+	return createHash('sha256').update(token).digest('hex');
+}
+
+export async function createSession(cookies: Cookies, userId: string): Promise<void> {
+	const database = await getDatabase();
+	const token = randomBytes(32).toString('base64url');
+	const now = new Date();
+	const expiresAt = new Date(now.getTime() + SESSION_SECONDS * 1000);
+	const insert = await database.prepare(
+		'INSERT INTO sessions (id, user_id, token_hash, expires_at, created_at) VALUES (?, ?, ?, ?, ?)'
+	);
+
+	await insert.run(
+		randomUUID(),
+		userId,
+		hashToken(token),
+		expiresAt.toISOString(),
+		now.toISOString()
+	);
+
+	cookies.set(COOKIE_NAME, token, {
+		path: '/',
+		httpOnly: true,
+		sameSite: 'lax',
+		secure: !dev,
+		maxAge: SESSION_SECONDS
+	});
+}
+
+export async function getSessionUser(cookies: Cookies): Promise<AuthUser | null> {
+	const token = cookies.get(COOKIE_NAME);
+	if (!token) return null;
+
+	const database = await getDatabase();
+	const statement = await database.prepare(`
+		SELECT users.id, users.username, users.role, users.discord_id
+		FROM sessions
+		JOIN users ON users.id = sessions.user_id
+		WHERE sessions.token_hash = ? AND sessions.expires_at > ?
+	`);
+	const user = await statement.get(hashToken(token), new Date().toISOString());
+
+	if (!user) {
+		cookies.delete(COOKIE_NAME, { path: '/' });
+		return null;
+	}
+
+	return {
+		id: String(user.id),
+		username: String(user.username),
+		role: String(user.role),
+		discordLinked: typeof user.discord_id === 'string'
+	};
+}
+
+export async function destroySession(cookies: Cookies): Promise<void> {
+	const token = cookies.get(COOKIE_NAME);
+
+	if (token) {
+		const database = await getDatabase();
+		const statement = await database.prepare('DELETE FROM sessions WHERE token_hash = ?');
+		await statement.run(hashToken(token));
+	}
+
+	cookies.delete(COOKIE_NAME, { path: '/' });
+}

src/lib/server/database.ts

@@ -0,0 +1,21 @@
+import { connect, type Database } from '@tursodatabase/database';
+import { env } from '$env/dynamic/private';
+import { resolve } from 'node:path';
+
+let databasePromise: Promise<Database> | undefined;
+
+/**
+ * Returns the process-wide embedded Turso connection.
+ *
+ * This module lives under $lib/server so SvelteKit prevents it from being
+ * imported into browser bundles.
+ */
+export function getDatabase(): Promise<Database> {
+	const configuredPath = env.TDR_DATABASE_PATH || './data/shd-build.db';
+
+	if (!databasePromise) {
+		databasePromise = connect(resolve(configuredPath));
+	}
+
+	return databasePromise;
+}