admin) manage local login users
Some checks failed
PR Checks / lint-test-and-docker-build (pull_request) Failing after 1m2s
Some checks failed
PR Checks / lint-test-and-docker-build (pull_request) Failing after 1m2s
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user