admin) User management admin page (#35)

Reviewed-on: #35
Reviewed-by: shaun <shaun@campbellwireless.net>
Co-authored-by: AI Agent <ai-agent@campbellwireless.net>
Co-committed-by: AI Agent <ai-agent@campbellwireless.net>

src/auth.ts

@@ -1,5 +1,6 @@
 import { SvelteKitAuth } from '@auth/sveltekit';
 import { env } from '$env/dynamic/private';
+import { upsertUserFromAuth } from '$lib/server/users.js';
 
 export const { handle, signIn, signOut } = SvelteKitAuth({
 	providers: [
@@ -23,7 +24,25 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
 	trustHost: true,
 	callbacks: {
 		jwt({ token, profile }) {
-			if (profile?.sub) token.sub = profile.sub as string;
+			const details = profile as
+				| {
+						sub?: string;
+						name?: string;
+						email?: string;
+						username?: string;
+						preferred_username?: string;
+					}
+				| undefined;
+			if (details?.sub) {
+				token.sub = details.sub as string;
+				upsertUserFromAuth({
+					id: details.sub,
+					username: details.username ?? details.preferred_username ?? details.name,
+					fullName: details.name ?? details.username ?? details.preferred_username,
+					email: details.email,
+					authSource: 'OIDC - Synology'
+				});
+			}
 			return token;
 		},
 		session({ session, token }) {

src/lib/components/AdminNavMenu.svelte

@@ -42,6 +42,15 @@
 			General
 		</a>
 
+		<a
+			href="{base}/admin/users"
+			class="rounded-md px-3 py-2 text-sm transition-colors {isActive('/admin/users')
+				? 'bg-gray-100 font-medium text-gray-900'
+				: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'}"
+		>
+			Users
+		</a>
+
 		<p class="mt-4 px-3 pb-1 text-xs font-semibold tracking-wider text-gray-400 uppercase">
 			Reference Data
 		</p>

src/lib/server/db/migrations.ts

@@ -53,6 +53,18 @@ export function runMigrations(db: Database): void {
 		)
 	`);
 
+	db.run(`
+		CREATE TABLE IF NOT EXISTS users (
+			id          TEXT PRIMARY KEY,
+			username    TEXT NOT NULL,
+			full_name   TEXT NOT NULL,
+			email       TEXT,
+			auth_source TEXT NOT NULL,
+			created_at  TEXT NOT NULL DEFAULT (datetime('now')),
+			updated_at  TEXT NOT NULL DEFAULT (datetime('now'))
+		)
+	`);
+
 	db.run(`
 		CREATE TABLE IF NOT EXISTS cities (
 			id           INTEGER PRIMARY KEY,

src/lib/server/travellers.ts

@@ -1,5 +1,6 @@
 import { db } from './db/index.js';
 import { randomUUID } from 'crypto';
+import { upsertUserProfile } from './users.js';
 
 export interface Person {
 	id: string;
@@ -33,6 +34,7 @@ export function upsertSelfProfile(
 			 WHERE id = ?`,
 			[firstName, lastName, email ?? null, existing.id]
 		);
+		upsertUserProfile(userId, `${firstName} ${lastName}`.trim(), email ?? null);
 		return db.get<Person>('SELECT * FROM people WHERE id = ?', [existing.id])!;
 	}
 	const id = randomUUID();
@@ -41,6 +43,7 @@ export function upsertSelfProfile(
 		 VALUES (?, ?, ?, ?, ?, 1)`,
 		[id, userId, firstName, lastName, email ?? null]
 	);
+	upsertUserProfile(userId, `${firstName} ${lastName}`.trim(), email ?? null);
 	return db.get<Person>('SELECT * FROM people WHERE id = ?', [id])!;
 }
 

src/lib/server/users.test.ts

@@ -0,0 +1,102 @@
+import { beforeEach, afterEach, describe, expect, it } from 'vitest';
+import { setupTestDb } from '../../tests/helpers.js';
+import type { Database } from './db/types.js';
+import {
+	deleteUser,
+	listUsers,
+	updateUser,
+	upsertUserFromAuth,
+	upsertUserProfile
+} from './users.js';
+
+let database: Database;
+beforeEach(() => {
+	database = setupTestDb();
+});
+
+afterEach(() => {
+	database.close();
+});
+
+describe('upsertUserFromAuth', () => {
+	it('creates a new user with profile data', () => {
+		const created = upsertUserFromAuth({
+			id: 'u1',
+			username: 'jdoe',
+			fullName: 'Jane Doe',
+			email: 'jane@example.com',
+			authSource: 'OIDC - Synology'
+		});
+		expect(created.id).toBe('u1');
+		expect(created.username).toBe('jdoe');
+		expect(created.full_name).toBe('Jane Doe');
+		expect(created.email).toBe('jane@example.com');
+		expect(created.auth_source).toBe('OIDC - Synology');
+		expect(listUsers()).toHaveLength(1);
+	});
+
+	it('updates existing users with new auth data', () => {
+		upsertUserFromAuth({
+			id: 'u1',
+			username: 'jdoe',
+			fullName: 'Jane Doe',
+			email: 'jane@example.com',
+			authSource: 'OIDC - Synology'
+		});
+		const updated = upsertUserFromAuth({
+			id: 'u1',
+			username: 'janed',
+			email: 'jane.doe@example.com'
+		});
+		expect(updated.username).toBe('janed');
+		expect(updated.email).toBe('jane.doe@example.com');
+	});
+});
+
+describe('upsertUserProfile', () => {
+	it('creates a user from profile details', () => {
+		const created = upsertUserProfile('u2', 'Sam Sample', 'sam@example.com');
+		expect(created.id).toBe('u2');
+		expect(created.full_name).toBe('Sam Sample');
+		expect(created.email).toBe('sam@example.com');
+	});
+});
+
+describe('updateUser', () => {
+	it('updates user fields and syncs self profile when present', () => {
+		upsertUserFromAuth({
+			id: 'u3',
+			username: 'sarah',
+			fullName: 'Sarah Lee',
+			email: 'sarah@example.com'
+		});
+		database.run(
+			`INSERT INTO people (id, user_id, first_name, last_name, email, is_self)
+			 VALUES (?, ?, ?, ?, ?, 1)`,
+			['p1', 'u3', 'Sarah', 'Lee', 'sarah@example.com']
+		);
+
+		updateUser({ id: 'u3', username: 'slee', fullName: 'Sarah Smith', email: 'ss@example.com' });
+
+		const user = listUsers().find((item) => item.id === 'u3');
+		expect(user?.username).toBe('slee');
+		expect(user?.full_name).toBe('Sarah Smith');
+		expect(user?.email).toBe('ss@example.com');
+
+		const profile = database.get<{ first_name: string; last_name: string; email: string | null }>(
+			'SELECT first_name, last_name, email FROM people WHERE user_id = ? AND is_self = 1',
+			['u3']
+		);
+		expect(profile?.first_name).toBe('Sarah');
+		expect(profile?.last_name).toBe('Smith');
+		expect(profile?.email).toBe('ss@example.com');
+	});
+});
+
+describe('deleteUser', () => {
+	it('removes the user record', () => {
+		upsertUserFromAuth({ id: 'u4', username: 'delete-me', fullName: 'Delete Me' });
+		deleteUser('u4');
+		expect(listUsers().find((item) => item.id === 'u4')).toBeUndefined();
+	});
+});

src/lib/server/users.ts

@@ -0,0 +1,138 @@
+import { db } from './db/index.js';
+
+export interface AppUser {
+	id: string;
+	username: string;
+	full_name: string;
+	email: string | null;
+	auth_source: string;
+	created_at: string;
+	updated_at: string;
+}
+
+const DEFAULT_AUTH_SOURCE = 'OIDC - Synology';
+
+const normalizeOptional = (value?: string | null): string | undefined => {
+	const trimmed = value?.trim();
+	return trimmed ? trimmed : undefined;
+};
+
+const normalizeEmail = (value?: string | null): string | null | undefined => {
+	if (value === undefined) return undefined;
+	if (value === null) return null;
+	const trimmed = value.trim();
+	return trimmed ? trimmed : null;
+};
+
+export function listUsers(): AppUser[] {
+	return db.all<AppUser>(
+		`SELECT id, username, full_name, email, auth_source, created_at, updated_at
+		 FROM users
+		 ORDER BY username COLLATE NOCASE`
+	);
+}
+
+export function upsertUserFromAuth(input: {
+	id: string;
+	username?: string | null;
+	fullName?: string | null;
+	email?: string | null;
+	authSource?: string | null;
+}): AppUser {
+	const existing = db.get<AppUser>('SELECT * FROM users WHERE id = ?', [input.id]);
+	const username = normalizeOptional(input.username) ?? existing?.username ?? input.id;
+	const fullName = normalizeOptional(input.fullName) ?? existing?.full_name ?? '';
+	const email = normalizeOptional(input.email) ?? existing?.email ?? null;
+	const authSource =
+		normalizeOptional(input.authSource) ?? existing?.auth_source ?? DEFAULT_AUTH_SOURCE;
+
+	if (existing) {
+		const setClauses: string[] = [];
+		const values: Array<string | null> = [];
+		if (username !== existing.username) {
+			setClauses.push('username = ?');
+			values.push(username);
+		}
+		if (fullName !== existing.full_name) {
+			setClauses.push('full_name = ?');
+			values.push(fullName);
+		}
+		if (email !== existing.email) {
+			setClauses.push('email = ?');
+			values.push(email);
+		}
+		if (authSource !== existing.auth_source) {
+			setClauses.push('auth_source = ?');
+			values.push(authSource);
+		}
+		if (setClauses.length > 0) {
+			setClauses.push("updated_at = datetime('now')");
+			values.push(input.id);
+			db.run(`UPDATE users SET ${setClauses.join(', ')} WHERE id = ?`, values);
+		}
+	} else {
+		db.run(
+			`INSERT INTO users (id, username, full_name, email, auth_source)
+			 VALUES (?, ?, ?, ?, ?)`,
+			[input.id, username, fullName, email, authSource]
+		);
+	}
+	return db.get<AppUser>('SELECT * FROM users WHERE id = ?', [input.id])!;
+}
+
+export function upsertUserProfile(
+	userId: string,
+	fullName: string,
+	email?: string | null
+): AppUser {
+	return upsertUserFromAuth({ id: userId, fullName, email, authSource: DEFAULT_AUTH_SOURCE });
+}
+
+export function updateUser(input: {
+	id: string;
+	username: string;
+	fullName: string;
+	email?: string | null;
+}): void {
+	const existing = db.get<{ email: string | null }>('SELECT email FROM users WHERE id = ?', [
+		input.id
+	]);
+	const email = normalizeEmail(input.email);
+	const nextEmail = email === undefined ? existing?.email ?? null : email;
+	db.run(
+		`UPDATE users
+		 SET username = ?, full_name = ?, email = ?, updated_at = datetime('now')
+		 WHERE id = ?`,
+		[input.username.trim(), input.fullName.trim(), nextEmail, input.id]
+	);
+	syncSelfProfile(input.id, input.fullName, nextEmail);
+}
+
+export function deleteUser(id: string): void {
+	db.run('DELETE FROM users WHERE id = ?', [id]);
+}
+
+function syncSelfProfile(userId: string, fullName: string, email?: string | null): void {
+	const profile = db.get<{ id: string; first_name: string; last_name: string; email: string | null }>(
+		`SELECT id, first_name, last_name, email FROM people WHERE user_id = ? AND is_self = 1 LIMIT 1`,
+		[userId]
+	);
+	if (!profile) return;
+
+	const trimmed = fullName.trim();
+	let firstName = profile.first_name;
+	let lastName = profile.last_name;
+	if (trimmed) {
+		const parts = trimmed.split(/\s+/);
+		firstName = parts[0] ?? profile.first_name;
+		if (parts.length > 1) {
+			lastName = parts.slice(1).join(' ');
+		}
+	}
+	const nextEmail = email === undefined ? profile.email : email;
+	db.run(
+		`UPDATE people SET first_name = ?, last_name = ?, email = ?, updated_at = datetime('now')
+		 WHERE id = ?`,
+		[firstName, lastName, nextEmail, profile.id]
+	);
+}

src/routes/(protected)/admin/api/users/+server.ts

@@ -0,0 +1,33 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAdmin } from '$lib/server/admin/auth.js';
+import { deleteUser, listUsers, updateUser } from '$lib/server/users.js';
+
+export const GET: RequestHandler = async (event) => {
+	requireAdmin((await event.locals.auth())?.user?.id);
+	return json(listUsers());
+};
+
+export const PATCH: RequestHandler = async (event) => {
+	requireAdmin((await event.locals.auth())?.user?.id);
+	const body = await event.request.json();
+	const { id, username, full_name, email } = body as {
+		id?: string;
+		username?: string;
+		full_name?: string;
+		email?: string | null;
+	};
+	if (!id?.trim() || !username?.trim() || !full_name?.trim()) {
+		return json({ error: 'id, username and full_name required' }, { status: 400 });
+	}
+	updateUser({ id: id.trim(), username, fullName: full_name, email });
+	return json({ ok: true });
+};
+
+export const DELETE: RequestHandler = async (event) => {
+	requireAdmin((await event.locals.auth())?.user?.id);
+	const id = event.url.searchParams.get('id')?.trim();
+	if (!id) return json({ error: 'id required' }, { status: 400 });
+	deleteUser(id);
+	return json({ ok: true });
+};

src/routes/(protected)/admin/users/+page.svelte

@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { onMount } from 'svelte';
+
+	interface User {
+		id: string;
+		username: string;
+		full_name: string;
+		email: string | null;
+		auth_source: string;
+	}
+
+	let users = $state<User[]>([]);
+	let loading = $state(true);
+	let error = $state('');
+	let editing = $state<User | null>(null);
+	let editUsername = $state('');
+	let editFullName = $state('');
+	let editEmail = $state('');
+
+	async function loadUsers() {
+		loading = true;
+		try {
+			const res = await fetch(`${base}/admin/api/users`);
+			if (!res.ok) {
+				error = 'Failed to load users';
+				return;
+			}
+			users = await res.json();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load users';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function startEdit(user: User) {
+		editing = user;
+		editUsername = user.username;
+		editFullName = user.full_name;
+		editEmail = user.email ?? '';
+		error = '';
+	}
+
+	function cancelEdit() {
+		editing = null;
+		editUsername = '';
+		editFullName = '';
+		editEmail = '';
+		error = '';
+	}
+
+	async function submitEdit() {
+		if (!editing) return;
+		if (!editUsername.trim() || !editFullName.trim()) {
+			error = 'Username and full name are required';
+			return;
+		}
+		try {
+			const res = await fetch(`${base}/admin/api/users`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					id: editing.id,
+					username: editUsername.trim(),
+					full_name: editFullName.trim(),
+					email: editEmail.trim() || null
+				})
+			});
+			if (!res.ok) {
+				const data = await res.json();
+				error = data.error ?? 'Failed to update user';
+				return;
+			}
+			cancelEdit();
+			loadUsers();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update user';
+		}
+	}
+
+	async function removeUser(user: User) {
+		if (!confirm(`Remove ${user.username}?`)) return;
+		try {
+			const res = await fetch(`${base}/admin/api/users?id=${encodeURIComponent(user.id)}`, {
+				method: 'DELETE'
+			});
+			if (!res.ok) {
+				const data = await res.json();
+				alert(data.error ?? 'Failed to remove user');
+				return;
+			}
+			if (editing?.id === user.id) cancelEdit();
+			loadUsers();
+		} catch (e) {
+			alert(e instanceof Error ? e.message : 'Failed to remove user');
+		}
+	}
+
+	onMount(loadUsers);
+</script>
+
+<svelte:head>
+	<title>Users — Admin — Trips</title>
+</svelte:head>
+
+<div class="mx-auto max-w-4xl">
+	<div class="mb-6">
+		<h1 class="text-2xl font-bold text-gray-900">Users</h1>
+		<p class="mt-1 text-sm text-gray-500">Manage application user accounts and access.</p>
+	</div>
+
+	<div class="flex flex-col gap-4">
+		{#if error && !editing}
+			<div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+				{error}
+			</div>
+		{/if}
+		{#if editing}
+			<div class="rounded-lg border border-gray-200 bg-gray-50 p-5">
+				<h3 class="mb-4 text-sm font-semibold text-gray-700">Edit user</h3>
+				{#if error}
+					<p class="mb-3 text-sm text-red-600">{error}</p>
+				{/if}
+				<div class="grid grid-cols-[1fr_1fr_1fr_auto] items-end gap-3">
+					<div class="flex flex-col gap-1.5">
+						<label class="text-xs font-medium text-gray-500"
+							>Username <span class="text-red-500">*</span></label
+						>
+						<input
+							type="text"
+							bind:value={editUsername}
+							class="rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+						/>
+					</div>
+					<div class="flex flex-col gap-1.5">
+						<label class="text-xs font-medium text-gray-500"
+							>Full name <span class="text-red-500">*</span></label
+						>
+						<input
+							type="text"
+							bind:value={editFullName}
+							class="rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+						/>
+					</div>
+					<div class="flex flex-col gap-1.5">
+						<label class="text-xs font-medium text-gray-500">Email</label>
+						<input
+							type="email"
+							bind:value={editEmail}
+							placeholder="name@example.com"
+							class="rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+						/>
+					</div>
+					<div class="flex gap-2">
+						<button
+							onclick={submitEdit}
+							class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+						>
+							Save
+						</button>
+						<button
+							onclick={cancelEdit}
+							class="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+						>
+							Cancel
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<div class="overflow-hidden rounded-lg border border-gray-200">
+			{#if loading}
+				<p class="p-8 text-center text-sm text-gray-500">Loading...</p>
+			{:else if users.length === 0}
+				<p class="p-8 text-center text-sm text-gray-500">No users found.</p>
+			{:else}
+				<table class="min-w-full divide-y divide-gray-200">
+					<thead class="bg-gray-50">
+						<tr>
+							<th
+								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase"
+								>Username</th
+							>
+							<th
+								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase"
+								>Full name</th
+							>
+							<th
+								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase"
+								>Email</th
+							>
+							<th
+								class="px-4 py-3 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase"
+								>Auth source</th
+							>
+							<th
+								class="px-4 py-3 text-right text-xs font-semibold tracking-wide text-gray-500 uppercase"
+								>Actions</th
+							>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-200 bg-white">
+						{#each users as user (user.id)}
+							<tr class="hover:bg-gray-50">
+								<td class="px-4 py-3 text-sm font-medium text-gray-900">{user.username}</td>
+								<td class="px-4 py-3 text-sm text-gray-700">
+									{user.full_name || '—'}
+								</td>
+								<td class="px-4 py-3 text-sm text-gray-700">
+									{user.email || '—'}
+								</td>
+								<td class="px-4 py-3">
+									<span class="rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
+										>{user.auth_source}</span
+									>
+								</td>
+								<td class="px-4 py-3 text-right">
+									<div class="inline-flex items-center gap-1">
+										<button
+											onclick={() => startEdit(user)}
+											class="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+											aria-label="Edit user"
+											title="Edit"
+										>
+											<svg
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												class="h-4 w-4"
+											>
+												<path d="M12 20h9" />
+												<path
+													d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"
+												/>
+											</svg>
+										</button>
+										<button
+											onclick={() => removeUser(user)}
+											class="inline-flex h-8 w-8 items-center justify-center rounded-md text-red-500 hover:bg-red-50 hover:text-red-600"
+											aria-label="Remove user"
+											title="Remove"
+										>
+											<svg
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												class="h-4 w-4"
+											>
+												<path d="M3 6h18" />
+												<path d="M8 6V4h8v2" />
+												<path d="M19 6l-1 14H6L5 6" />
+											</svg>
+										</button>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</div>
+	</div>
+</div>