alexei.dolgolyov
fd1ad91fbe
Some checks failed
Validate / Hassfest (push) Has been cancelled
- Fix i18n: remove $state rune (SSR incompatible in .ts files), use reactive localeVersion counter in layout to trigger re-render on locale change. Language switching now works immediately. - Fix dark theme: add global CSS rules for input/select/textarea to use theme colors, override browser autofill in dark mode, set color-scheme for native controls (scrollbars, checkboxes) - Collapsible sidebar: toggle button (▶/◀) with persistent state, icons-only mode when collapsed. Theme/language buttons moved to bottom above user info. - Loading skeletons: all pages show animated pulse placeholders while data loads, eliminating content flicker on tab switch - Edit support: Servers, Trackers, and Targets now have Edit buttons that open the form pre-filled with current values. Save calls PUT. Sensitive fields (API key, bot token) can be left empty to keep current value when editing. - CLAUDE.md: add dev server restart rules Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
81 lines
3.4 KiB
Svelte
81 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { api } from '$lib/api';
|
|
import { t } from '$lib/i18n';
|
|
import { getAuth } from '$lib/auth.svelte';
|
|
import PageHeader from '$lib/components/PageHeader.svelte';
|
|
import Card from '$lib/components/Card.svelte';
|
|
import Loading from '$lib/components/Loading.svelte';
|
|
|
|
const auth = getAuth();
|
|
let users = $state<any[]>([]);
|
|
let showForm = $state(false);
|
|
let form = $state({ username: '', password: '', role: 'user' });
|
|
let error = $state('');
|
|
let loaded = $state(false);
|
|
|
|
onMount(load);
|
|
async function load() { try { users = await api('/users'); } catch {} finally { loaded = true; } }
|
|
|
|
async function create(e: SubmitEvent) {
|
|
e.preventDefault(); error = '';
|
|
try { await api('/users', { method: 'POST', body: JSON.stringify(form) }); form = { username: '', password: '', role: 'user' }; showForm = false; await load(); }
|
|
catch (err: any) { error = err.message; }
|
|
}
|
|
async function remove(id: number) {
|
|
if (!confirm(t('users.confirmDelete'))) return;
|
|
try { await api(`/users/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { alert(err.message); }
|
|
}
|
|
</script>
|
|
|
|
<PageHeader title={t('users.title')} description={t('users.description')}>
|
|
<button onclick={() => showForm = !showForm}
|
|
class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
|
{showForm ? t('users.cancel') : t('users.addUser')}
|
|
</button>
|
|
</PageHeader>
|
|
|
|
{#if !loaded}<Loading />{:else}
|
|
|
|
{#if showForm}
|
|
<Card class="mb-6">
|
|
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
|
<form onsubmit={create} class="space-y-3">
|
|
<div>
|
|
<label for="usr-name" class="block text-sm font-medium mb-1">{t('users.username')}</label>
|
|
<input id="usr-name" bind:value={form.username} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="usr-pass" class="block text-sm font-medium mb-1">{t('users.password')}</label>
|
|
<input id="usr-pass" bind:value={form.password} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="usr-role" class="block text-sm font-medium mb-1">{t('users.role')}</label>
|
|
<select id="usr-role" bind:value={form.role} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
|
<option value="user">{t('users.roleUser')}</option>
|
|
<option value="admin">{t('users.roleAdmin')}</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">{t('users.create')}</button>
|
|
</form>
|
|
</Card>
|
|
{/if}
|
|
|
|
<div class="space-y-3">
|
|
{#each users as user}
|
|
<Card>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium">{user.username}</p>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">{user.role} · {t('users.joined')} {new Date(user.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
{#if user.id !== auth.user?.id}
|
|
<button onclick={() => remove(user.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('users.delete')}</button>
|
|
{/if}
|
|
</div>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
|
|
{/if}
|