admin) User management admin page (#35)
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m20s
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m20s
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>
This commit was merged in pull request #35.
This commit is contained in:
267
src/routes/(protected)/admin/users/+page.svelte
Normal file
267
src/routes/(protected)/admin/users/+page.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user