haos-hacs-immich-album-watcher/frontend/src/routes/users/+page.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';
	import Modal from '$lib/components/Modal.svelte';
	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
	import IconButton from '$lib/components/IconButton.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);
	let confirmDelete = $state<any>(null);

	// Admin reset password
	let resetUserId = $state<number | null>(null);
	let resetUsername = $state('');
	let resetPassword = $state('');
	let resetMsg = $state('');
	let resetSuccess = $state(false);

	onMount(load);
	async function load() {
		try { users = await api('/users'); }
		catch (err: any) { error = err.message || t('common.loadError'); }
		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; }
	}
	function remove(id: number) {
		confirmDelete = {
			id,
			onconfirm: async () => {
				try { await api(`/users/${id}`, { method: 'DELETE' }); await load(); }
				catch (err: any) { error = err.message; }
				finally { confirmDelete = null; }
			}
		};
	}
	function openResetPassword(user: any) {
		resetUserId = user.id; resetUsername = user.username; resetPassword = ''; resetMsg = ''; resetSuccess = false;
	}
	async function resetUserPassword(e: SubmitEvent) {
		e.preventDefault(); resetMsg = ''; resetSuccess = false;
		try {
			await api(`/users/${resetUserId}/password`, { method: 'PUT', body: JSON.stringify({ new_password: resetPassword }) });
			resetMsg = t('common.passwordChanged');
			resetSuccess = true;
			setTimeout(() => { resetUserId = null; resetMsg = ''; resetSuccess = false; }, 2000);
		} catch (err: any) { resetMsg = err.message; resetSuccess = false; }
	}
</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 hover>
			<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>
				<div class="flex items-center gap-1">
					{#if user.id !== auth.user?.id}
						<IconButton icon="mdiKeyVariant" title={t('common.changePassword')} onclick={() => openResetPassword(user)} />
						<IconButton icon="mdiDelete" title={t('users.delete')} onclick={() => remove(user.id)} variant="danger" />
					{/if}
				</div>
			</div>
		</Card>
	{/each}
</div>

{/if}

<!-- Admin reset password modal -->
<Modal open={resetUserId !== null} title="{t('common.changePassword')}: {resetUsername}" onclose={() => { resetUserId = null; resetMsg = ''; resetSuccess = false; }}>
	<form onsubmit={resetUserPassword} class="space-y-3">
		<div>
			<label for="reset-pwd" class="block text-sm font-medium mb-1">{t('common.newPassword')}</label>
			<input id="reset-pwd" type="password" bind:value={resetPassword} required
				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
		</div>
		{#if resetMsg}
			<p class="text-sm {resetSuccess ? 'text-[var(--color-success-fg)]' : 'text-[var(--color-error-fg)]'}">{resetMsg}</p>
		{/if}
		<button type="submit" class="w-full py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
			{t('common.save')}
		</button>
	</form>
</Modal>

<ConfirmModal open={confirmDelete !== null} message={t('users.confirmDelete')}
	onconfirm={() => confirmDelete?.onconfirm()} oncancel={() => confirmDelete = null} />