Release 0.2.0

src/routes/+layout.server.ts

@@ -0,0 +1,3 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = ({ locals }) => ({ user: locals.user });

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 	import NavIcon from '#lib/components/NavIcon.svelte';
 	import ThemeToggle from '#lib/components/ThemeToggle.svelte';
 
-	let { children } = $props();
+	let { children, data } = $props();
 	const primaryNavigation = [
 		{ href: '/eingang', label: 'Eingang', icon: 'inbox' },
 		{ href: '/fundus', label: 'Fundus', icon: 'library' },
@@ -13,7 +13,9 @@
 		{ href: '/archiv', label: 'Archiv', icon: 'archive' }
 	] as const;
 	const administration = { href: '/verwaltung', label: 'Verwaltung', icon: 'settings' } as const;
-	const mobileNavigation = [...primaryNavigation, administration];
+	const mobileNavigation = $derived(
+		data.user?.role === 'barkeeper' ? [...primaryNavigation, administration] : primaryNavigation
+	);
 
 	function isActive(href: string) {
 		return (
@@ -29,15 +31,66 @@
 	/>
 </svelte:head>
 
-<div class="app-shell">
-	<aside class="sidebar">
-		<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
-			<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
-			<span>Sendewerk</span>
-		</a>
+{#if data.user}
+	<div class="app-shell">
+		<aside class="sidebar">
+			<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
+				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+				<span>Sendewerk</span>
+			</a>
 
-		<nav class="main-navigation" aria-label="Hauptnavigation">
-			{#each primaryNavigation as item (item.href)}
+			<nav class="main-navigation" aria-label="Hauptnavigation">
+				{#each primaryNavigation as item (item.href)}
+					<a
+						href={resolve(item.href)}
+						class:active={isActive(item.href)}
+						aria-current={isActive(item.href) ? 'page' : undefined}
+					>
+						<NavIcon name={item.icon} />
+						<span>{item.label}</span>
+					</a>
+				{/each}
+			</nav>
+
+			<div class="sidebar-footer">
+				{#if data.user.role === 'barkeeper'}
+					<nav class="utility-navigation" aria-label="Verwaltung">
+						<a
+							href={resolve(administration.href)}
+							class:active={isActive(administration.href)}
+							aria-current={isActive(administration.href) ? 'page' : undefined}
+						>
+							<NavIcon name={administration.icon} />
+							<span>{administration.label}</span>
+						</a>
+					</nav>
+				{/if}
+				<div class="account-summary">
+					<span>{data.user.displayName}</span>
+					<small>{data.user.role === 'barkeeper' ? 'Barkeeper' : 'Thekencrew'}</small>
+				</div>
+				<form method="POST" action="/logout">
+					<button class="logout-button" type="submit">Abmelden</button>
+				</form>
+				<ThemeToggle />
+			</div>
+		</aside>
+
+		<header class="mobile-header">
+			<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
+				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+				<span>Sendewerk</span>
+			</a>
+			<form method="POST" action="/logout">
+				<button class="mobile-logout" type="submit" aria-label="Abmelden">↗</button>
+			</form>
+			<ThemeToggle />
+		</header>
+
+		<main id="main-content">{@render children()}</main>
+
+		<nav class="mobile-navigation" aria-label="Hauptnavigation">
+			{#each mobileNavigation as item (item.href)}
 				<a
 					href={resolve(item.href)}
 					class:active={isActive(item.href)}
@@ -48,42 +101,16 @@
 				</a>
 			{/each}
 		</nav>
-
-		<div class="sidebar-footer">
-			<nav class="utility-navigation" aria-label="Verwaltung">
-				<a
-					href={resolve(administration.href)}
-					class:active={isActive(administration.href)}
-					aria-current={isActive(administration.href) ? 'page' : undefined}
-				>
-					<NavIcon name={administration.icon} />
-					<span>{administration.label}</span>
-				</a>
-			</nav>
-			<ThemeToggle />
-		</div>
-	</aside>
-
-	<header class="mobile-header">
-		<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
-			<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
-			<span>Sendewerk</span>
-		</a>
-		<ThemeToggle />
-	</header>
-
-	<main id="main-content">{@render children()}</main>
-
-	<nav class="mobile-navigation" aria-label="Hauptnavigation">
-		{#each mobileNavigation as item (item.href)}
-			<a
-				href={resolve(item.href)}
-				class:active={isActive(item.href)}
-				aria-current={isActive(item.href) ? 'page' : undefined}
-			>
-				<NavIcon name={item.icon} />
-				<span>{item.label}</span>
+	</div>
+{:else}
+	<div class="auth-shell">
+		<header class="auth-header">
+			<a class="brand" href={resolve('/login')} aria-label="Sendewerk Anmeldung">
+				<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+				<span>Sendewerk</span>
 			</a>
-		{/each}
-	</nav>
-</div>
+			<ThemeToggle />
+		</header>
+		<main class="auth-main">{@render children()}</main>
+	</div>
+{/if}

src/routes/+page.server.ts

@@ -1,5 +1,7 @@
 import { redirect } from '@sveltejs/kit';
+import { hasUsers } from '#lib/server/auth.js';
 
-export function load() {
-	redirect(307, '/fundus');
+export function load({ locals }) {
+	if (!hasUsers()) redirect(307, '/setup');
+	redirect(307, locals.user ? '/fundus' : '/login');
 }

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

@@ -0,0 +1,57 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import {
+	acceptInvitation,
+	createSession,
+	deleteLinkToken,
+	getInvitation,
+	INVITATION_COOKIE,
+	readLinkToken,
+	storeLinkToken,
+	validDisplayName,
+	validPassword
+} from '#lib/server/auth.js';
+
+export const load: PageServerLoad = ({ url, cookies }) => {
+	const queryToken = url.searchParams.get('token');
+	if (queryToken) {
+		if (queryToken.length <= 100) storeLinkToken(cookies, INVITATION_COOKIE, queryToken);
+		else deleteLinkToken(cookies, INVITATION_COOKIE);
+		redirect(303, '/einladung');
+	}
+	const token = readLinkToken(cookies, INVITATION_COOKIE);
+	const invitation = getInvitation(token);
+	const valid = Boolean(
+		invitation &&
+		!invitation.accepted_at_utc &&
+		!invitation.revoked_at_utc &&
+		invitation.expires_at_utc > new Date().toISOString()
+	);
+	return { valid, email: valid ? invitation?.email : null };
+};
+
+export const actions = {
+	default: async ({ request, cookies }) => {
+		const data = await request.formData();
+		const token = readLinkToken(cookies, INVITATION_COOKIE);
+		const displayName = String(data.get('displayName') || '').trim();
+		const password = String(data.get('password') || '');
+		if (!validDisplayName(displayName) || !validPassword(password)) {
+			return fail(400, {
+				displayName,
+				error: 'Bitte Namen und ein Passwort mit mindestens 12 Zeichen prüfen.'
+			});
+		}
+		try {
+			const user = await acceptInvitation({ token, displayName, password });
+			deleteLinkToken(cookies, INVITATION_COOKIE);
+			createSession(user.id, cookies);
+		} catch {
+			return fail(400, {
+				displayName,
+				error: 'Die Einladung ist ungültig, abgelaufen oder bereits verwendet.'
+			});
+		}
+		redirect(303, '/fundus');
+	}
+} satisfies Actions;

src/routes/einladung/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
+</script>
+
+<svelte:head><title>Einladung annehmen | Sendewerk</title></svelte:head>
+
+<section class="auth-card">
+	<p class="eyebrow">Einladung</p>
+	<h1>Sendewerk-Konto aktivieren</h1>
+	{#if !data.valid && !form?.error}
+		<div class="form-message error" role="alert">
+			Die Einladung ist ungültig, abgelaufen oder bereits verwendet.
+		</div>
+	{:else}
+		<p>Die Einladung gilt für <strong>{data.email}</strong>.</p>
+		{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+		<form class="auth-form" method="POST">
+			<label
+				>Name<input
+					name="displayName"
+					required
+					maxlength="80"
+					value={form?.displayName ?? ''}
+					autocomplete="name"
+				/></label
+			>
+			<label
+				>Passwort<input
+					name="password"
+					type="password"
+					required
+					minlength="12"
+					maxlength="256"
+					autocomplete="new-password"
+				/></label
+			>
+			<button class="primary-button" type="submit">Konto aktivieren</button>
+		</form>
+	{/if}
+</section>

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

@@ -0,0 +1,36 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import {
+	authenticate,
+	createSession,
+	hasUsers,
+	reserveLoginAttempt,
+	validEmail
+} from '#lib/server/auth.js';
+
+export const load: PageServerLoad = ({ locals }) => {
+	if (!hasUsers()) redirect(303, '/setup');
+	if (locals.user) redirect(303, '/fundus');
+};
+
+export const actions = {
+	default: async ({ request, cookies, getClientAddress }) => {
+		const data = await request.formData();
+		const email = String(data.get('email') || '').trim();
+		const password = String(data.get('password') || '');
+		const address = getClientAddress();
+		if (!validEmail(email) || !password || Buffer.byteLength(password, 'utf8') > 256) {
+			return fail(400, { email, error: 'E-Mail oder Passwort ist nicht korrekt.' });
+		}
+		if (!reserveLoginAttempt(email, address)) {
+			return fail(429, {
+				email,
+				error: 'Zu viele Anmeldeversuche. Bitte in 15 Minuten erneut versuchen.'
+			});
+		}
+		const user = await authenticate(email, password);
+		if (!user) return fail(400, { email, error: 'E-Mail oder Passwort ist nicht korrekt.' });
+		createSession(user.id, cookies);
+		redirect(303, '/fundus');
+	}
+} satisfies Actions;

src/routes/login/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { PageProps } from './$types';
+	let { form }: PageProps = $props();
+</script>
+
+<svelte:head><title>Anmelden | Sendewerk</title></svelte:head>
+
+<section class="auth-card">
+	<p class="eyebrow">Redaktionszugang</p>
+	<h1>Bei Sendewerk anmelden</h1>
+	<p>Für Barkeeper und Thekencrew. Eine öffentliche Registrierung gibt es nicht.</p>
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+	<form class="auth-form" method="POST">
+		<label
+			>E-Mail<input
+				name="email"
+				type="email"
+				required
+				maxlength="254"
+				value={form?.email ?? ''}
+				autocomplete="email"
+			/></label
+		>
+		<label
+			>Passwort<input
+				name="password"
+				type="password"
+				required
+				maxlength="256"
+				autocomplete="current-password"
+			/></label
+		>
+		<button class="primary-button" type="submit">Anmelden</button>
+	</form>
+	<a class="auth-link" href={resolve('/passwort-vergessen')}>Passwort vergessen?</a>
+</section>

src/routes/logout/+server.ts

@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { deleteSession } from '#lib/server/auth.js';
+
+export const POST: RequestHandler = ({ cookies }) => {
+	deleteSession(cookies);
+	redirect(303, '/login');
+};

src/routes/passwort-vergessen/+page.server.ts

@@ -0,0 +1,22 @@
+import { fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { requestPasswordReset, reservePasswordResetRequest, validEmail } from '#lib/server/auth.js';
+
+export const actions = {
+	default: async ({ request, getClientAddress }) => {
+		const data = await request.formData();
+		const email = String(data.get('email') || '').trim();
+		if (!validEmail(email))
+			return fail(400, { email, error: 'Bitte eine gültige E-Mail eingeben.' });
+		if (!reservePasswordResetRequest(email, getClientAddress())) {
+			return { sent: true };
+		}
+		try {
+			await requestPasswordReset(email);
+		} catch {
+			// Die sichtbare Antwort bleibt identisch, damit der Mailzustand kein Konto verrät.
+			console.error('Eine Passwortreset-Nachricht konnte nicht bereitgestellt werden.');
+		}
+		return { sent: true };
+	}
+} satisfies Actions;

src/routes/passwort-vergessen/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { PageProps } from './$types';
+	let { form }: PageProps = $props();
+</script>
+
+<svelte:head><title>Passwort vergessen | Sendewerk</title></svelte:head>
+
+<section class="auth-card">
+	<p class="eyebrow">Kontozugang</p>
+	<h1>Passwort zurücksetzen</h1>
+	<p>Wenn das Konto existiert, wird ein 24 Stunden gültiger, einmaliger Link bereitgestellt.</p>
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+	{#if form?.sent}<div class="form-message success" role="status">
+			Anfrage verarbeitet. Bitte Postfach beziehungsweise lokale Outbox prüfen.
+		</div>{/if}
+	<form class="auth-form" method="POST">
+		<label
+			>E-Mail<input
+				name="email"
+				type="email"
+				required
+				maxlength="254"
+				value={form?.email ?? ''}
+				autocomplete="email"
+			/></label
+		>
+		<button class="primary-button" type="submit">Reset-Link anfordern</button>
+	</form>
+	<a class="auth-link" href={resolve('/login')}>Zurück zur Anmeldung</a>
+</section>

src/routes/passwort-zuruecksetzen/+page.server.ts

@@ -0,0 +1,39 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import {
+	deleteLinkToken,
+	passwordResetIsValid,
+	readLinkToken,
+	RESET_COOKIE,
+	resetPassword,
+	storeLinkToken,
+	validPassword
+} from '#lib/server/auth.js';
+
+export const load: PageServerLoad = ({ url, cookies }) => {
+	const queryToken = url.searchParams.get('token');
+	if (queryToken) {
+		if (queryToken.length <= 100) storeLinkToken(cookies, RESET_COOKIE, queryToken);
+		else deleteLinkToken(cookies, RESET_COOKIE);
+		redirect(303, '/passwort-zuruecksetzen');
+	}
+	return { valid: passwordResetIsValid(readLinkToken(cookies, RESET_COOKIE)) };
+};
+
+export const actions = {
+	default: async ({ request, cookies }) => {
+		const data = await request.formData();
+		const token = readLinkToken(cookies, RESET_COOKIE);
+		const password = String(data.get('password') || '');
+		if (!validPassword(password)) {
+			return fail(400, { error: 'Das neue Passwort muss mindestens 12 Zeichen lang sein.' });
+		}
+		try {
+			await resetPassword(token, password);
+			deleteLinkToken(cookies, RESET_COOKIE);
+		} catch {
+			return fail(400, { error: 'Der Link ist ungültig, abgelaufen oder bereits verwendet.' });
+		}
+		redirect(303, '/login?reset=erfolgreich');
+	}
+} satisfies Actions;

src/routes/passwort-zuruecksetzen/+page.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
+</script>
+
+<svelte:head><title>Neues Passwort | Sendewerk</title></svelte:head>
+
+<section class="auth-card">
+	<p class="eyebrow">Kontozugang</p>
+	<h1>Neues Passwort setzen</h1>
+	{#if !data.valid && !form?.error}
+		<div class="form-message error" role="alert">
+			Der Link ist ungültig, abgelaufen oder bereits verwendet.
+		</div>
+		<a class="auth-link" href={resolve('/passwort-vergessen')}>Neuen Link anfordern</a>
+	{:else}
+		{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+		<form class="auth-form" method="POST">
+			<label
+				>Neues Passwort<input
+					name="password"
+					type="password"
+					required
+					minlength="12"
+					maxlength="256"
+					autocomplete="new-password"
+				/></label
+			>
+			<button class="primary-button" type="submit">Passwort speichern</button>
+		</form>
+	{/if}
+</section>

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

@@ -0,0 +1,47 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import {
+	createFirstAdmin,
+	createSession,
+	hasUsers,
+	setupIsConfigured,
+	validDisplayName,
+	validEmail,
+	validPassword
+} from '#lib/server/auth.js';
+
+export const load: PageServerLoad = () => {
+	if (hasUsers()) redirect(303, '/login');
+	return { configured: setupIsConfigured() };
+};
+
+export const actions = {
+	default: async ({ request, cookies }) => {
+		if (hasUsers()) redirect(303, '/login');
+		const data = await request.formData();
+		const setupToken = String(data.get('setupToken') || '');
+		const displayName = String(data.get('displayName') || '').trim();
+		const email = String(data.get('email') || '').trim();
+		const password = String(data.get('password') || '');
+		if (!validDisplayName(displayName) || !validEmail(email) || !validPassword(password)) {
+			return fail(400, {
+				error: 'Bitte Name, gültige E-Mail und ein Passwort mit mindestens 12 Zeichen prüfen.',
+				displayName,
+				email
+			});
+		}
+		try {
+			const user = await createFirstAdmin({ setupToken, displayName, email, password });
+			createSession(user.id, cookies);
+		} catch (cause) {
+			const code = cause instanceof Error ? cause.message : '';
+			if (code === 'SETUP_CLOSED') redirect(303, '/login');
+			return fail(403, {
+				error: 'Das Betreiber-Setup-Token ist ungültig.',
+				displayName,
+				email
+			});
+		}
+		redirect(303, '/fundus');
+	}
+} satisfies Actions;

src/routes/setup/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
+</script>
+
+<svelte:head><title>Erstadmin einrichten | Sendewerk</title></svelte:head>
+
+<section class="auth-card">
+	<p class="eyebrow">Einmalige Einrichtung</p>
+	<h1>Ersten Barkeeper anlegen</h1>
+	<p>
+		Dieses Konto verwaltet Einladungen, Rollen und Sperren. Danach wird die Einrichtung geschlossen.
+	</p>
+	{#if !data.configured}
+		<div class="form-message error" role="alert">
+			Vor dem Start muss ein mindestens 32 Zeichen langes <code>SENDEWERK_SETUP_TOKEN</code>
+			konfiguriert werden.
+		</div>
+	{:else}
+		{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+		<form class="auth-form" method="POST">
+			<label
+				>Betreiber-Setup-Token<input
+					name="setupToken"
+					type="password"
+					required
+					autocomplete="off"
+				/></label
+			>
+			<label
+				>Name<input
+					name="displayName"
+					required
+					maxlength="80"
+					value={form?.displayName ?? ''}
+					autocomplete="name"
+				/></label
+			>
+			<label
+				>E-Mail<input
+					name="email"
+					type="email"
+					required
+					maxlength="254"
+					value={form?.email ?? ''}
+					autocomplete="email"
+				/></label
+			>
+			<label
+				>Passwort<input
+					name="password"
+					type="password"
+					required
+					minlength="12"
+					maxlength="256"
+					autocomplete="new-password"
+				/></label
+			>
+			<p class="field-hint">
+				Mindestens 12 Zeichen. Das Passwort wird ausschließlich als Argon2id-Hash gespeichert.
+			</p>
+			<button class="primary-button" type="submit">Barkeeper anlegen</button>
+		</form>
+	{/if}
+</section>

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

@@ -1,5 +1,97 @@
+import { fail } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
 import { getTaxonomy } from '#lib/server/previews.js';
+import { getMailConfig } from '#lib/server/config.js';
+import {
+	inviteUser,
+	isRole,
+	listOpenInvitations,
+	listUsers,
+	requireBarkeeper,
+	revokeInvitation,
+	setUserLocked,
+	setUserRole,
+	validEmail
+} from '#lib/server/auth.js';
 
-export function load() {
-	return { taxonomy: getTaxonomy() };
+export const load: PageServerLoad = ({ locals }) => {
+	requireBarkeeper(locals.user);
+	return {
+		taxonomy: getTaxonomy(),
+		users: listUsers(),
+		invitations: listOpenInvitations(),
+		mailTransport: getMailConfig().transport
+	};
+};
+
+function actionError(cause: unknown): string {
+	const code = cause instanceof Error ? cause.message : '';
+	if (code === 'USER_EXISTS') return 'Für diese E-Mail existiert bereits ein Konto.';
+	if (code === 'SELF_LOCK') return 'Das eigene Konto kann nicht gesperrt werden.';
+	if (code === 'LAST_BARKEEPER') return 'Mindestens ein aktiver Barkeeper muss erhalten bleiben.';
+	if (code === 'NOT_FOUND') return 'Das Konto wurde nicht gefunden.';
+	return 'Die Aktion konnte nicht ausgeführt werden.';
 }
+
+export const actions = {
+	invite: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		const email = String(data.get('email') || '').trim();
+		const role = String(data.get('role') || '');
+		if (!validEmail(email) || !isRole(role)) {
+			return fail(400, { intent: 'invite', email, error: 'E-Mail und Rolle bitte prüfen.' });
+		}
+		try {
+			const transport = await inviteUser(actor, email, role);
+			return {
+				intent: 'invite',
+				success:
+					transport === 'local'
+						? 'Einladung wurde in der lokalen Mail-Outbox abgelegt.'
+						: 'Einladung wurde versandt.'
+			};
+		} catch (cause) {
+			return fail(400, { intent: 'invite', email, error: actionError(cause) });
+		}
+	},
+	role: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		const userId = String(data.get('userId') || '');
+		const role = String(data.get('role') || '');
+		if (!userId || !isRole(role)) return fail(400, { intent: 'role', error: 'Ungültige Rolle.' });
+		try {
+			setUserRole(actor, userId, role);
+			return { intent: 'role', success: 'Rolle aktualisiert.' };
+		} catch (cause) {
+			return fail(400, { intent: 'role', error: actionError(cause) });
+		}
+	},
+	lock: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			setUserLocked(actor, String(data.get('userId') || ''), true);
+			return { intent: 'lock', success: 'Konto gesperrt und bestehende Sitzungen beendet.' };
+		} catch (cause) {
+			return fail(400, { intent: 'lock', error: actionError(cause) });
+		}
+	},
+	unlock: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			setUserLocked(actor, String(data.get('userId') || ''), false);
+			return { intent: 'unlock', success: 'Konto entsperrt.' };
+		} catch (cause) {
+			return fail(400, { intent: 'unlock', error: actionError(cause) });
+		}
+	},
+	revokeInvitation: async ({ locals, request }) => {
+		const actor = requireBarkeeper(locals.user);
+		const data = await request.formData();
+		revokeInvitation(actor, String(data.get('invitationId') || ''));
+		return { intent: 'revokeInvitation', success: 'Einladung widerrufen.' };
+	}
+} satisfies Actions;

src/routes/verwaltung/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { PageData } from './$types';
-	let { data }: { data: PageData } = $props();
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
 </script>
 
 <svelte:head><title>Verwaltung | Sendewerk</title></svelte:head>
@@ -8,8 +8,108 @@
 <div class="page-wrap narrow-page">
 	<header class="page-heading">
 		<h1>Verwaltung</h1>
-		<p class="page-intro">Abschnittskategorien, Formate und Themen im Überblick.</p>
+		<p class="page-intro">Konten, Rollen und bestehende Taxonomie verwalten.</p>
 	</header>
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
+	{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
+
+	<section class="quiet-panel account-panel">
+		<div class="panel-heading">
+			<div>
+				<p class="eyebrow">Konten & Rollen</p>
+				<h2>Redaktionszugänge</h2>
+			</div>
+			<span class="mail-mode"
+				>Mail: {data.mailTransport === 'local' ? 'lokale Outbox' : 'SMTP'}</span
+			>
+		</div>
+		<div class="account-list">
+			{#each data.users as user (user.id)}
+				<article class="account-row">
+					<div><strong>{user.displayName}</strong><small>{user.email}</small></div>
+					<span class:locked={user.lockedAtUtc} class="account-status"
+						>{user.lockedAtUtc ? 'Gesperrt' : 'Aktiv'}</span
+					>
+					<form method="POST" action="?/role" class="inline-account-form">
+						<input type="hidden" name="userId" value={user.id} />
+						<label class="sr-only" for={`role-${user.id}`}>Rolle für {user.displayName}</label>
+						<select id={`role-${user.id}`} name="role">
+							<option value="barkeeper" selected={user.role === 'barkeeper'}>Barkeeper</option>
+							<option value="thekencrew" selected={user.role === 'thekencrew'}>Thekencrew</option>
+						</select>
+						<button class="text-button" type="submit">Rolle speichern</button>
+					</form>
+					<form method="POST" action={user.lockedAtUtc ? '?/unlock' : '?/lock'}>
+						<input type="hidden" name="userId" value={user.id} />
+						<button
+							class="secondary-button"
+							type="submit"
+							disabled={user.id === data.user?.id}
+							title={user.id === data.user?.id
+								? 'Das eigene Konto kann nicht gesperrt werden.'
+								: undefined}
+							>{user.lockedAtUtc
+								? 'Entsperren'
+								: user.id === data.user?.id
+									? 'Eigenes Konto'
+									: 'Sperren'}</button
+						>
+					</form>
+				</article>
+			{/each}
+		</div>
+	</section>
+
+	<div class="management-grid">
+		<section class="quiet-panel invite-panel">
+			<p class="eyebrow">Einladung</p>
+			<h2>Neues Konto einladen</h2>
+			<form class="compact-form" method="POST" action="?/invite">
+				<label
+					>E-Mail<input
+						name="email"
+						type="email"
+						required
+						maxlength="254"
+						value={form?.intent === 'invite' ? (form.email ?? '') : ''}
+					/></label
+				>
+				<label
+					>Rolle<select name="role"
+						><option value="thekencrew">Thekencrew</option><option value="barkeeper"
+							>Barkeeper</option
+						></select
+					></label
+				>
+				<button class="primary-button" type="submit">Einladung erstellen</button>
+			</form>
+		</section>
+		<section class="quiet-panel invite-panel">
+			<p class="eyebrow">Offene Einladungen</p>
+			<h2>Noch nicht angenommen</h2>
+			{#if data.invitations.length}
+				<div class="invitation-list">
+					{#each data.invitations as invitation (invitation.id)}
+						<div>
+							<span
+								><strong>{invitation.email}</strong><small
+									>{invitation.role === 'barkeeper' ? 'Barkeeper' : 'Thekencrew'}</small
+								></span
+							>
+							<form method="POST" action="?/revokeInvitation">
+								<input type="hidden" name="invitationId" value={invitation.id} /><button
+									class="text-button"
+									type="submit">Widerrufen</button
+								>
+							</form>
+						</div>
+					{/each}
+				</div>
+			{:else}<p class="quiet-copy">Keine offenen Einladungen.</p>{/if}
+		</section>
+	</div>
+
+	<h2 class="section-heading">Taxonomie</h2>
 	<div class="settings-grid">
 		<section class="quiet-panel taxonomy-panel">
 			<p class="eyebrow">Abschnittskategorien</p>
@@ -35,5 +135,4 @@
 			</div>
 		</section>
 	</div>
-	<p class="settings-footnote">Konten und Rollen sind noch nicht verfügbar.</p>
 </div>