feat(ui): add profile page and forced password change

src/routes/me/+page.server.ts

@@ -0,0 +1,17 @@
+import { UserValidationError } from '$lib/server/users/repository';
+import { fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	rename: async ({ request, locals }) => {
+		const form = await request.formData();
+		const displayName = String(form.get('displayName') ?? '');
+		try {
+			await locals.app.users.rename(locals.user!.id, displayName);
+			return { renamed: true };
+		} catch (e) {
+			if (e instanceof UserValidationError) return fail(400, { error: e.message, displayName });
+			throw e;
+		}
+	}
+};

src/routes/me/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import FormError from '$lib/components/FormError.svelte';
+	import type { PageProps } from './$types';
+
+	let { data, form }: PageProps = $props();
+</script>
+
+<main class="space-y-6 p-4">
+	<h1 class="text-2xl font-bold">Me</h1>
+	<p class="text-gray-600">
+		Logged in as <span class="font-mono">{data.user?.username}</span>{data.user?.role === 'admin'
+			? ' (admin)'
+			: ''}
+	</p>
+
+	<form method="POST" action="?/rename" use:enhance class="space-y-2">
+		<label for="displayName">Display name</label>
+		<input
+			id="displayName"
+			name="displayName"
+			required
+			maxlength="120"
+			value={form?.displayName ?? data.user?.displayName ?? ''}
+		/>
+		<FormError message={form?.error} />
+		{#if form?.renamed}<p class="text-sm text-green-700">Saved.</p>{/if}
+		<button type="submit" class="rounded-lg bg-green-700 px-4 py-2 font-semibold text-white"
+			>Save</button
+		>
+	</form>
+
+	<a href="/me/password" class="block rounded-lg border border-gray-300 px-4 py-3 text-center"
+		>Change password</a
+	>
+
+	<form method="POST" action="/logout">
+		<button type="submit" class="w-full rounded-lg border border-red-300 px-4 py-3 text-red-700"
+			>Log out</button
+		>
+	</form>
+</main>

src/routes/me/password/+page.server.ts

@@ -0,0 +1,42 @@
+import { dev } from '$app/environment';
+import { verifyPassword } from '$lib/server/auth/password';
+import { createSessionToken, SESSION_COOKIE, SESSION_TTL_SECONDS } from '$lib/server/auth/session';
+import { UserValidationError } from '$lib/server/users/repository';
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ locals }) => ({ forced: locals.user!.mustChangePassword });
+
+export const actions: Actions = {
+	default: async ({ request, locals, cookies }) => {
+		const user = locals.user!;
+		const form = await request.formData();
+		const current = String(form.get('current') ?? '');
+		const next = String(form.get('next') ?? '');
+		const confirm = String(form.get('confirm') ?? '');
+
+		if (!(await verifyPassword(current, user.passwordHash)))
+			return fail(400, { error: 'Current password is incorrect' });
+		if (next === current) return fail(400, { error: 'New password must differ from the current one' });
+		if (next !== confirm) return fail(400, { error: 'New passwords do not match' });
+
+		try {
+			const updated = await locals.app.users.setPassword(user.id, next, { mustChange: false });
+			const token = createSessionToken(
+				{ uid: updated.id, sv: updated.sessionVersion },
+				locals.app.config.sessionSecret
+			);
+			cookies.set(SESSION_COOKIE, token, {
+				path: '/',
+				httpOnly: true,
+				sameSite: 'lax',
+				secure: !dev,
+				maxAge: SESSION_TTL_SECONDS
+			});
+		} catch (e) {
+			if (e instanceof UserValidationError) return fail(400, { error: e.message });
+			throw e;
+		}
+		redirect(303, '/');
+	}
+};

src/routes/me/password/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import FormError from '$lib/components/FormError.svelte';
+	import type { PageProps } from './$types';
+
+	let { data, form }: PageProps = $props();
+</script>
+
+<main class="space-y-6 p-4">
+	<h1 class="text-2xl font-bold">Change password</h1>
+	{#if data.forced}
+		<p class="rounded-lg bg-amber-100 p-3 text-sm text-amber-900">
+			You must choose a new password before continuing.
+		</p>
+	{/if}
+	<form method="POST" use:enhance class="space-y-4">
+		<div>
+			<label for="current">Current password</label>
+			<input id="current" name="current" type="password" autocomplete="current-password" required />
+		</div>
+		<div>
+			<label for="next">New password (8+ characters)</label>
+			<input id="next" name="next" type="password" autocomplete="new-password" minlength="8" required />
+		</div>
+		<div>
+			<label for="confirm">Confirm new password</label>
+			<input
+				id="confirm"
+				name="confirm"
+				type="password"
+				autocomplete="new-password"
+				minlength="8"
+				required
+			/>
+		</div>
+		<FormError message={form?.error} />
+		<button type="submit" class="w-full rounded-lg bg-green-700 py-3 font-semibold text-white"
+			>Save password</button
+		>
+	</form>
+</main>