familienarchiv/frontend/src/routes/admin/users/[id]/+page.svelte

<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';
import { getConfirmService } from '$lib/services/confirm.svelte.js';
import UserProfileSection from '$lib/user/UserProfileSection.svelte';
import UserGroupsSection from '$lib/user/UserGroupsSection.svelte';
import UserPasswordSection from '$lib/user/UserPasswordSection.svelte';
import { createUnsavedWarning } from '$lib/hooks/useUnsavedWarning.svelte';
import UnsavedWarningBanner from '$lib/components/UnsavedWarningBanner.svelte';

let { data, form } = $props();

const { confirm } = getConfirmService();
const unsaved = createUnsavedWarning();

const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);

$effect(() => {
	if (form?.success) unsaved.clearOnSuccess();
});
</script>

<div class="flex flex-1 flex-col overflow-hidden">
	<!-- Detail panel header -->
	<div class="flex items-center border-b border-line px-5 py-3">
		<button
			type="button"
			onclick={() => history.back()}
			aria-label={m.btn_back()}
			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring md:hidden"
		>
			<svg
				class="h-4 w-4"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
				stroke-width="2"
				aria-hidden="true"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
			</svg>
		</button>
		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
			{m.admin_user_edit_heading({ username: data.editUser.email })}
		</h2>
		<form
			method="POST"
			action="?/delete"
			use:enhance={async ({ cancel }) => {
				const confirmed = await confirm({
					title: m.admin_user_delete_confirm({ username: data.editUser.email }),
					destructive: true
				});
				if (!confirmed) {
					cancel();
				} else {
					unsaved.clearOnSuccess();
				}
			}}
		>
			<button
				type="submit"
				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400"
			>
				{m.btn_delete()}…
			</button>
		</form>
	</div>

	<!-- Scrollable body -->
	<div class="flex-1 overflow-y-auto px-5 py-5">
		{#if unsaved.showUnsavedWarning}
			<UnsavedWarningBanner onDiscard={unsaved.discard} />
		{/if}
		{#if form?.success}
			<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
				{m.admin_user_updated()}
			</div>
		{/if}
		{#if form?.error}
			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
				{form.error}
			</div>
		{/if}

		<form
			id="edit-user-form"
			method="POST"
			action="?/update"
			use:enhance={() =>
				async ({ update }) => {
					await update({ reset: false });
				}}
			oninput={unsaved.markDirty}
			class="space-y-5"
		>
			<!-- Profile card -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.profile_section_personal()}
				</h3>
				<UserProfileSection
					firstName={data.editUser.firstName ?? ''}
					lastName={data.editUser.lastName ?? ''}
					birthDate={data.editUser.birthDate ?? ''}
					email={data.editUser.email ?? ''}
					contact={data.editUser.contact ?? ''}
				/>
			</div>

			<!-- Groups card -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_col_groups()}
				</h3>
				<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
			</div>

			<!-- Password card -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_label_new_password_optional()}
				</h3>
				<UserPasswordSection />
			</div>
		</form>
	</div>

	<!-- Docked footer -->
	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
		<a
			href="/admin/users"
			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
		>
			{m.btn_cancel()}
		</a>
		<button
			type="submit"
			form="edit-user-form"
			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.btn_save()}
		</button>
	</div>
</div>