25014cce2d
Shared (src/lib/components/user/): - UserProfileSection.svelte: name/birth-date/email/contact fields - UserGroupsSection.svelte: group checkboxes - UserPasswordSection.svelte: new/confirm password fields Page-local: - admin/users/new/AccountSection.svelte: username + initial password admin/users/[id] drops from 224 → ~35 lines. admin/users/new drops from 191 → ~30 lines. Date utilities imported from \$lib/utils/date. Part of #75 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
96 lines
2.6 KiB
Svelte
96 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte';
|
|
import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let {
|
|
firstName = '',
|
|
lastName = '',
|
|
birthDate = '',
|
|
email = '',
|
|
contact = ''
|
|
}: {
|
|
firstName?: string;
|
|
lastName?: string;
|
|
birthDate?: string;
|
|
email?: string;
|
|
contact?: string;
|
|
} = $props();
|
|
|
|
let birthDateDisplay = $state(untrack(() => isoToGerman(birthDate)));
|
|
let birthDateIso = $state(untrack(() => birthDate));
|
|
|
|
function handleBirthDateInput(e: Event) {
|
|
const result = handleGermanDateInput(e);
|
|
birthDateDisplay = result.display;
|
|
birthDateIso = result.iso;
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<label class="block">
|
|
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.profile_label_first_name()}
|
|
</span>
|
|
<input
|
|
type="text"
|
|
name="firstName"
|
|
value={firstName}
|
|
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.profile_label_last_name()}
|
|
</span>
|
|
<input
|
|
type="text"
|
|
name="lastName"
|
|
value={lastName}
|
|
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<label class="block">
|
|
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.profile_label_birth_date()}
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="TT.MM.JJJJ"
|
|
value={birthDateDisplay}
|
|
oninput={handleBirthDateInput}
|
|
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
|
/>
|
|
<input type="hidden" name="birthDate" value={birthDateIso} />
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.profile_label_email()}
|
|
</span>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={email}
|
|
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<label class="block">
|
|
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{m.profile_label_contact()}
|
|
</span>
|
|
<textarea
|
|
name="contact"
|
|
rows="3"
|
|
placeholder={m.profile_contact_placeholder()}
|
|
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
|
>{contact}</textarea
|
|
>
|
|
</label>
|
|
</div>
|