122 lines
3.9 KiB
Svelte
122 lines
3.9 KiB
Svelte
<!--
|
|
There should be a form in the middle
|
|
rounded corners
|
|
floats above the screen slightly
|
|
Profile picture in the center at the top, about 1/3-1/2 the width of the form
|
|
Their email address, not editable, instead is a regular sized black text (or white in dark mode)
|
|
Input field for their Phone Number
|
|
Two inputs, side by side, a little margin between them. First and Last name
|
|
A submit button
|
|
Save the form then redirect them to their dashboard
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import Window from '$lib/components/containers/Window.svelte';
|
|
import { clientFormatPhoneNumber } from '$lib/utils';
|
|
import type { PageProps } from './$types';
|
|
|
|
let { data }: PageProps = $props();
|
|
|
|
let firstName = $state('');
|
|
let lastName = $state('');
|
|
|
|
function splitName(fullName: string | null | undefined): { first: string; last: string } {
|
|
if (!fullName) return { first: '', last: '' };
|
|
const parts = fullName.trim().split(/\s+/);
|
|
return { first: parts[0] ?? '', last: parts.slice(1).join(' ') };
|
|
}
|
|
|
|
$effect(() => {
|
|
if (data.user?.name && !firstName) {
|
|
const names = splitName(data.user.name);
|
|
firstName = names.first;
|
|
lastName = names.last;
|
|
}
|
|
});
|
|
let phoneNumber = $state('');
|
|
|
|
function handlePhoneInput(event: Event) {
|
|
const input = event.target as HTMLInputElement;
|
|
phoneNumber = clientFormatPhoneNumber(input.value);
|
|
}
|
|
</script>
|
|
|
|
<Window>
|
|
<form method="POST" class="flex flex-col items-center gap-5">
|
|
<h1 class="text-center text-2xl font-bold text-slate-900 dark:text-slate-100">
|
|
Please finish setting up your profile
|
|
</h1>
|
|
|
|
{#if data.user?.image}
|
|
<img
|
|
src={data.user?.image}
|
|
alt="Profile"
|
|
class="h-24 w-24 rounded-full object-cover shadow-sm sm:h-28 sm:w-28"
|
|
/>
|
|
{:else}
|
|
<div
|
|
class="flex h-24 w-24 items-center justify-center rounded-full bg-indigo-100 text-3xl font-semibold text-indigo-700 sm:h-28 sm:w-28 dark:bg-indigo-900 dark:text-indigo-300"
|
|
>
|
|
{data.user?.name?.charAt(0)?.toUpperCase() ?? '?'}
|
|
</div>
|
|
{/if}
|
|
|
|
<p class="text-base text-slate-900 dark:text-slate-100">{data.user?.email}</p>
|
|
|
|
<div class="flex w-full flex-col gap-4">
|
|
<input type="hidden" name="userId" value={data.user?.id} />
|
|
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="firstName" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
First Name
|
|
</label>
|
|
<input
|
|
id="firstName"
|
|
type="text"
|
|
name="firstName"
|
|
placeholder="First Name"
|
|
bind:value={firstName}
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="lastName" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Last Name
|
|
</label>
|
|
<input
|
|
id="lastName"
|
|
type="text"
|
|
name="lastName"
|
|
placeholder="Last Name"
|
|
bind:value={lastName}
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="phoneNumber" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
Phone Number
|
|
</label>
|
|
<input
|
|
id="phoneNumber"
|
|
type="tel"
|
|
name="phoneNumber"
|
|
placeholder="(555) 555-5555"
|
|
bind:value={phoneNumber}
|
|
oninput={handlePhoneInput}
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="mt-1 flex h-11 w-full items-center justify-center rounded-lg bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700"
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</Window>
|