2026-02-22 20:07:47 +00:00
5 changed files with 478 additions and 4 deletions
--- a/src/lib/server/users.test.ts
+++ b/src/lib/server/users.test.ts
@@ -2,8 +2,10 @@ import { beforeEach, afterEach, describe, expect, it } from 'vitest';
 import { setupTestDb } from '../../tests/helpers.js';
 import type { Database } from './db/types.js';
 import {
+	createLocalUser,
 	deleteUser,
 	listUsers,
+	setLocalPasswordForUser,
 	updateUser,
 	upsertUserFromAuth,
 	upsertUserProfile
@@ -100,3 +102,50 @@ describe('deleteUser', () => {
 		expect(listUsers().find((item) => item.id === 'u4')).toBeUndefined();
 	});
 });
+
+describe('createLocalUser', () => {
+	it('creates a local user with credentials', async () => {
+		const created = await createLocalUser({
+			username: 'local-user',
+			fullName: 'Local User',
+			email: 'local@example.com',
+			password: 'averysecurepassword'
+		});
+		expect(created.username).toBe('local-user');
+		expect(created.auth_source).toBe('Local');
+		const row = database.get<{ user_id: string; password_hash: string }>(
+			'SELECT user_id, password_hash FROM local_credentials WHERE user_id = ?',
+			[created.id]
+		);
+		expect(row?.user_id).toBe(created.id);
+		expect(row?.password_hash).toBeTruthy();
+	});
+
+	it('rejects duplicate usernames', async () => {
+		await createLocalUser({
+			username: 'dup-user',
+			fullName: 'Dup User',
+			password: 'averysecurepassword'
+		});
+		await expect(
+			createLocalUser({
+				username: 'dup-user',
+				fullName: 'Dup User Two',
+				password: 'averysecurepassword'
+			})
+		).rejects.toThrow('Username already exists');
+	});
+});
+
+describe('setLocalPasswordForUser', () => {
+	it('sets local credentials for an existing user', async () => {
+		upsertUserFromAuth({ id: 'u5', username: 'sarah', fullName: 'Sarah Lee' });
+		await setLocalPasswordForUser('u5', 'averysecurepassword');
+		const row = database.get<{ user_id: string; password_hash: string }>(
+			'SELECT user_id, password_hash FROM local_credentials WHERE user_id = ?',
+			['u5']
+		);
+		expect(row?.user_id).toBe('u5');
+		expect(row?.password_hash).toBeTruthy();
+	});
+});
--- a/src/lib/server/users.ts
+++ b/src/lib/server/users.ts
@@ -1,4 +1,6 @@
+import { randomUUID } from 'crypto';
 import { db } from './db/index.js';
+import { setLocalCredentialPassword } from './local-credentials.js';

 export interface AppUser {
 	id: string;
@@ -11,6 +13,7 @@ export interface AppUser {
 }

 const DEFAULT_AUTH_SOURCE = 'OIDC - Synology';
+const LOCAL_AUTH_SOURCE = 'Local';

 const normalizeOptional = (value?: string | null): string | undefined => {
 	const trimmed = value?.trim();
@@ -112,6 +115,56 @@ export function deleteUser(id: string): void {
 	db.run('DELETE FROM users WHERE id = ?', [id]);
 }

+export async function createLocalUser(input: {
+	username: string;
+	fullName: string;
+	email?: string | null;
+	password: string;
+}): Promise<AppUser> {
+	const username = input.username?.trim() ?? '';
+	const fullName = input.fullName?.trim() ?? '';
+	if (!username || !fullName) {
+		throw new Error('Username and full name are required');
+	}
+	const email = normalizeEmail(input.email);
+	const existingUsername = db.get<{ id: string }>(
+		'SELECT id FROM users WHERE lower(username) = lower(?)',
+		[username]
+	);
+	if (existingUsername) {
+		throw new Error('Username already exists');
+	}
+	if (email) {
+		const existingEmail = db.get<{ id: string }>(
+			'SELECT id FROM users WHERE lower(email) = lower(?)',
+			[email]
+		);
+		if (existingEmail) {
+			throw new Error('Email already exists');
+		}
+	}
+	const id = randomUUID();
+	db.run(
+		`INSERT INTO users (id, username, full_name, email, auth_source)
+		 VALUES (?, ?, ?, ?, ?)`,
+		[id, username, fullName, email ?? null, LOCAL_AUTH_SOURCE]
+	);
+	await setLocalCredentialPassword(id, input.password);
+	return db.get<AppUser>('SELECT * FROM users WHERE id = ?', [id])!;
+}
+
+export async function setLocalPasswordForUser(userId: string, password: string): Promise<void> {
+	const id = userId?.trim() ?? '';
+	if (!id) {
+		throw new Error('User id required');
+	}
+	const existing = db.get<{ id: string }>('SELECT id FROM users WHERE id = ?', [id]);
+	if (!existing) {
+		throw new Error('User not found');
+	}
+	await setLocalCredentialPassword(id, password);
+}
+
 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`,
--- a/src/routes/(protected)/admin/api/users/+server.ts
+++ b/src/routes/(protected)/admin/api/users/+server.ts
@@ -1,7 +1,7 @@
 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';
+import { createLocalUser, deleteUser, listUsers, updateUser } from '$lib/server/users.js';

 export const GET: RequestHandler = async (event) => {
 	requireAdmin((await event.locals.auth())?.user);
@@ -24,6 +24,34 @@ export const PATCH: RequestHandler = async (event) => {
 	return json({ ok: true });
 };

+export const POST: RequestHandler = async (event) => {
+	requireAdmin((await event.locals.auth())?.user);
+	const body = await event.request.json();
+	const { username, full_name, email, password } = body as {
+		username?: string;
+		full_name?: string;
+		email?: string | null;
+		password?: string;
+	};
+	if (!username?.trim() || !full_name?.trim() || !password?.trim()) {
+		return json({ error: 'username, full_name and password required' }, { status: 400 });
+	}
+	try {
+		const user = await createLocalUser({
+			username: username.trim(),
+			fullName: full_name.trim(),
+			email,
+			password
+		});
+		return json(user);
+	} catch (error) {
+		return json(
+			{ error: error instanceof Error ? error.message : 'Failed to create user' },
+			{ status: 400 }
+		);
+	}
+};
+
 export const DELETE: RequestHandler = async (event) => {
 	requireAdmin((await event.locals.auth())?.user);
 	const id = event.url.searchParams.get('id')?.trim();
--- a/src/routes/(protected)/admin/api/users/local-credentials/+server.ts
+++ b/src/routes/(protected)/admin/api/users/local-credentials/+server.ts
@@ -0,0 +1,22 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireAdmin } from '$lib/server/admin/auth.js';
+import { setLocalPasswordForUser } from '$lib/server/users.js';
+
+export const POST: RequestHandler = async (event) => {
+	requireAdmin((await event.locals.auth())?.user);
+	const body = await event.request.json();
+	const { id, password } = body as { id?: string; password?: string };
+	if (!id?.trim() || !password?.trim()) {
+		return json({ error: 'id and password required' }, { status: 400 });
+	}
+	try {
+		await setLocalPasswordForUser(id.trim(), password);
+		return json({ ok: true });
+	} catch (error) {
+		return json(
+			{ error: error instanceof Error ? error.message : 'Failed to set password' },
+			{ status: 400 }
+		);
+	}
+};
--- a/src/routes/(protected)/admin/users/+page.svelte
+++ b/src/routes/(protected)/admin/users/+page.svelte
@@ -17,6 +17,19 @@
 	let editUsername = $state('');
 	let editFullName = $state('');
 	let editEmail = $state('');
+	let addDrawerOpen = $state(false);
+	let addUsername = $state('');
+	let addFullName = $state('');
+	let addEmail = $state('');
+	let addPassword = $state('');
+	let addPasswordConfirm = $state('');
+	let addError = $state('');
+	let addSubmitting = $state(false);
+	let passwordDrawerUser = $state<User | null>(null);
+	let localPassword = $state('');
+	let localPasswordConfirm = $state('');
+	let localPasswordError = $state('');
+	let localPasswordSubmitting = $state(false);

 	async function loadUsers() {
 		loading = true;
@@ -50,6 +63,113 @@
 		error = '';
 	}

+	function openAddDrawer() {
+		addDrawerOpen = true;
+		addError = '';
+	}
+
+	function closeAddDrawer() {
+		addDrawerOpen = false;
+		addUsername = '';
+		addFullName = '';
+		addEmail = '';
+		addPassword = '';
+		addPasswordConfirm = '';
+		addError = '';
+	}
+
+	async function submitAddUser() {
+		if (!addUsername.trim() || !addFullName.trim() || !addPassword.trim()) {
+			addError = 'Username, full name, and password are required';
+			return;
+		}
+		if (addPassword.trim().length < 12) {
+			addError = 'Password must be at least 12 characters';
+			return;
+		}
+		if (addPassword.trim() !== addPasswordConfirm.trim()) {
+			addError = 'Passwords do not match';
+			return;
+		}
+		addSubmitting = true;
+		addError = '';
+		try {
+			const res = await fetch(`${base}/admin/api/users`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					username: addUsername.trim(),
+					full_name: addFullName.trim(),
+					email: addEmail.trim() || null,
+					password: addPassword
+				})
+			});
+			if (!res.ok) {
+				const data = await res.json();
+				addError = data.error ?? 'Failed to create user';
+				return;
+			}
+			closeAddDrawer();
+			loadUsers();
+		} catch (e) {
+			addError = e instanceof Error ? e.message : 'Failed to create user';
+		} finally {
+			addSubmitting = false;
+		}
+	}
+
+	function openPasswordDrawer(user: User) {
+		passwordDrawerUser = user;
+		localPassword = '';
+		localPasswordConfirm = '';
+		localPasswordError = '';
+	}
+
+	function closePasswordDrawer() {
+		passwordDrawerUser = null;
+		localPassword = '';
+		localPasswordConfirm = '';
+		localPasswordError = '';
+	}
+
+	async function submitLocalPassword() {
+		if (!passwordDrawerUser) return;
+		if (!localPassword.trim()) {
+			localPasswordError = 'Password is required';
+			return;
+		}
+		if (localPassword.trim().length < 12) {
+			localPasswordError = 'Password must be at least 12 characters';
+			return;
+		}
+		if (localPassword.trim() !== localPasswordConfirm.trim()) {
+			localPasswordError = 'Passwords do not match';
+			return;
+		}
+		localPasswordSubmitting = true;
+		localPasswordError = '';
+		try {
+			const res = await fetch(`${base}/admin/api/users/local-credentials`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					id: passwordDrawerUser.id,
+					password: localPassword
+				})
+			});
+			if (!res.ok) {
+				const data = await res.json();
+				localPasswordError = data.error ?? 'Failed to set password';
+				return;
+			}
+			closePasswordDrawer();
+		} catch (e) {
+			localPasswordError = e instanceof Error ? e.message : 'Failed to set password';
+		} finally {
+			localPasswordSubmitting = false;
+		}
+	}
+
 	async function submitEdit() {
 		if (!editing) return;
 		if (!editUsername.trim() || !editFullName.trim()) {
@@ -105,9 +225,17 @@
 </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 class="mb-6 flex items-start justify-between gap-4">
+		<div>
+			<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>
+		<button
+			onclick={openAddDrawer}
+			class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+		>
+			Add User
+		</button>
 	</div>

 	<div class="flex flex-col gap-4">
@@ -218,6 +346,24 @@
 								</td>
 								<td class="px-4 py-3 text-right">
 									<div class="inline-flex items-center gap-1">
+										<button
+											onclick={() => openPasswordDrawer(user)}
+											class="inline-flex h-8 w-8 items-center justify-center rounded-md text-blue-500 hover:bg-blue-50 hover:text-blue-600"
+											aria-label="Set local password"
+											title="Set local password"
+										>
+											<svg
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												class="h-4 w-4"
+											>
+												<path d="M21 10h-6" />
+												<path d="M15 10V7a3 3 0 0 0-6 0v3" />
+												<rect x="3" y="10" width="12" height="10" rx="2" />
+											</svg>
+										</button>
 										<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"
@@ -265,3 +411,179 @@
 		</div>
 	</div>
 </div>
+
+{#if addDrawerOpen}
+	<div
+		class="fixed inset-0 z-40 bg-black/20"
+		role="button"
+		tabindex="-1"
+		onclick={closeAddDrawer}
+		on:keydown={(e: KeyboardEvent) => e.key === 'Escape' && closeAddDrawer()}
+	></div>
+	<div
+		class="fixed top-0 right-0 z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl"
+		role="dialog"
+		aria-modal="true"
+		aria-label="Add user"
+		on:keydown={(e: KeyboardEvent) => e.key === 'Escape' && closeAddDrawer()}
+	>
+		<div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+			<div>
+				<h2 class="text-base font-semibold text-gray-900">Add user</h2>
+				<p class="text-xs text-gray-500">Create a new local login user.</p>
+			</div>
+			<button
+				onclick={closeAddDrawer}
+				class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+				aria-label="Close"
+			>
+				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			</button>
+		</div>
+		<form class="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-4" onsubmit|preventDefault={submitAddUser}>
+			{#if addError}
+				<p class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+					{addError}
+				</p>
+			{/if}
+			<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={addUsername}
+					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={addFullName}
+					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"
+					placeholder="name@example.com"
+					bind:value={addEmail}
+					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">Password <span class="text-red-500">*</span></label>
+				<input
+					type="password"
+					bind:value={addPassword}
+					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"
+				/>
+				<p class="text-xs text-gray-500">Minimum 12 characters.</p>
+			</div>
+			<div class="flex flex-col gap-1.5">
+				<label class="text-xs font-medium text-gray-500">Confirm password <span class="text-red-500">*</span></label>
+				<input
+					type="password"
+					bind:value={addPasswordConfirm}
+					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="mt-2 flex items-center justify-end gap-2">
+				<button
+					type="button"
+					onclick={closeAddDrawer}
+					class="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+				>
+					Cancel
+				</button>
+				<button
+					type="submit"
+					disabled={addSubmitting}
+					class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
+				>
+					{addSubmitting ? 'Creating...' : 'Create user'}
+				</button>
+			</div>
+		</form>
+	</div>
+{/if}
+
+{#if passwordDrawerUser}
+	<div
+		class="fixed inset-0 z-40 bg-black/20"
+		role="button"
+		tabindex="-1"
+		onclick={closePasswordDrawer}
+		on:keydown={(e: KeyboardEvent) => e.key === 'Escape' && closePasswordDrawer()}
+	></div>
+	<div
+		class="fixed top-0 right-0 z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl"
+		role="dialog"
+		aria-modal="true"
+		aria-label="Set local password"
+		on:keydown={(e: KeyboardEvent) => e.key === 'Escape' && closePasswordDrawer()}
+	>
+		<div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+			<div>
+				<h2 class="text-base font-semibold text-gray-900">Set local password</h2>
+				<p class="text-xs text-gray-500">{passwordDrawerUser.username}</p>
+			</div>
+			<button
+				onclick={closePasswordDrawer}
+				class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+				aria-label="Close"
+			>
+				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			</button>
+		</div>
+		<form
+			class="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-4"
+			onsubmit|preventDefault={submitLocalPassword}
+		>
+			{#if localPasswordError}
+				<p class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+					{localPasswordError}
+				</p>
+			{/if}
+			<div class="flex flex-col gap-1.5">
+				<label class="text-xs font-medium text-gray-500">New password <span class="text-red-500">*</span></label>
+				<input
+					type="password"
+					bind:value={localPassword}
+					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"
+				/>
+				<p class="text-xs text-gray-500">Minimum 12 characters.</p>
+			</div>
+			<div class="flex flex-col gap-1.5">
+				<label class="text-xs font-medium text-gray-500">Confirm password <span class="text-red-500">*</span></label>
+				<input
+					type="password"
+					bind:value={localPasswordConfirm}
+					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="mt-2 flex items-center justify-end gap-2">
+				<button
+					type="button"
+					onclick={closePasswordDrawer}
+					class="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+				>
+					Cancel
+				</button>
+				<button
+					type="submit"
+					disabled={localPasswordSubmitting}
+					class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
+				>
+					{localPasswordSubmitting ? 'Saving...' : 'Save password'}
+				</button>
+			</div>
+		</form>
+	</div>
+{/if}