101 lines
3.0 KiB
Svelte
101 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
record = null,
|
|
fieldErrors = {} as Record<string, string>
|
|
}: {
|
|
record?: Record<string, unknown> | null;
|
|
fieldErrors?: Record<string, string>;
|
|
} = $props();
|
|
|
|
let email = $state('');
|
|
let firstName = $state('');
|
|
let lastName = $state('');
|
|
let phoneNumber = $state('');
|
|
|
|
$effect(() => {
|
|
const rec = record ?? {};
|
|
const user = rec.user as Record<string, unknown> | undefined;
|
|
email = String((user?.email as string) ?? rec.email ?? '');
|
|
firstName = String(rec.firstName ?? '');
|
|
lastName = String(rec.lastName ?? '');
|
|
phoneNumber = String(rec.phoneNumber ?? '');
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div>
|
|
<label
|
|
for="field-email"
|
|
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Email</label
|
|
>
|
|
<input
|
|
id="field-email"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
bind:value={email}
|
|
placeholder="user@example.com"
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
|
/>
|
|
{#if fieldErrors.email}
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.email}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="field-firstName"
|
|
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">First Name</label
|
|
>
|
|
<input
|
|
id="field-firstName"
|
|
type="text"
|
|
name="firstName"
|
|
required
|
|
bind:value={firstName}
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
|
/>
|
|
{#if fieldErrors.firstName}
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.firstName}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="field-lastName"
|
|
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">Last Name</label
|
|
>
|
|
<input
|
|
id="field-lastName"
|
|
type="text"
|
|
name="lastName"
|
|
required
|
|
bind:value={lastName}
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
|
/>
|
|
{#if fieldErrors.lastName}
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.lastName}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="field-phoneNumber"
|
|
class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
|
>
|
|
Phone Number
|
|
</label>
|
|
<input
|
|
id="field-phoneNumber"
|
|
type="text"
|
|
name="phoneNumber"
|
|
required
|
|
bind:value={phoneNumber}
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
|
/>
|
|
{#if fieldErrors.phoneNumber}
|
|
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{fieldErrors.phoneNumber}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|