Replace account and license-keys pages with profile page and dashboard

2026-09-10 13:11:41 -05:00
parent f50eb34769
commit 1aecc51bbd
20 changed files with 157 additions and 254 deletions
@@ -0,0 +1,115 @@
+<!-- 
+    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">
+			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"
+			>
+				{data.user?.name?.charAt(0)?.toUpperCase() ?? '?'}
+			</div>
+		{/if}
+
+		<p class="text-base text-slate-900">{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"> 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"
+					/>
+				</div>
+				<div class="flex flex-col gap-1.5">
+					<label for="lastName" class="text-sm font-medium text-slate-700"> 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"
+					/>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-1.5">
+				<label for="phoneNumber" class="text-sm font-medium text-slate-700"> 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"
+				/>
+			</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>