campbellwireless/trips
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

admin) allow local login user management (#39)
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m28s
Details

Browse Source 
Co-authored-by: Shaun Campbell <shaun@campbellwireless.net>
Reviewed-on: #39
Co-authored-by: AI Agent <ai-agent@campbellwireless.net>
Co-committed-by: AI Agent <ai-agent@campbellwireless.net>
This commit was merged in pull request #39.
This commit is contained in:
AI Agent
2026-02-22 20:07:46 +00:00
committed by shaun
parent fc8e80186d
commit e11fcb56a2
8 changed files with 505 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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();

22
src/routes/(protected)/admin/api/users/local-credentials/+server.ts Normal file
View File

@@ -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 }
);
}
};

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

@@ -8,6 +8,7 @@
full_name: string;
email: string | null;
auth_source: string;
has_local_credentials: boolean;
}
let users = $state<User[]>([]);
@@ -17,6 +18,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 +64,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 +226,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">
@@ -212,12 +341,37 @@
{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
>
<div class="flex flex-wrap gap-1">
<span class="rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
>{user.auth_source}</span
>
{#if user.has_local_credentials && user.auth_source !== 'Local'}
<span class="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700"
>Local</span
>
{/if}
</div>
</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 +419,179 @@
</div>
</div>
</div>
{#if addDrawerOpen}
<div
class="fixed inset-0 z-40 bg-black/20"
role="button"
tabindex="-1"
onclick={closeAddDrawer}
onkeydown={(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"
onkeydown={(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={(e) => { e.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}
onkeydown={(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"
onkeydown={(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={(e) => { e.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}