Shaun Campbell
f4c5ee1f8f
Some checks failed
PR Checks / lint-test-and-docker-build (pull_request) Failing after 1m0s
listUsers() now LEFT JOINs local_credentials and returns has_local_credentials. The auth source cell renders both the primary auth_source badge and a secondary Local badge when an OIDC user also has local credentials set. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
598 lines
18 KiB
Svelte
598 lines
18 KiB
Svelte
<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;
|
|
has_local_credentials: boolean;
|
|
}
|
|
|
|
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('');
|
|
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;
|
|
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 = '';
|
|
}
|
|
|
|
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()) {
|
|
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 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">
|
|
{#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">
|
|
<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"
|
|
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>
|
|
|
|
{#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}
|