From bae59b8730700b202a14033472a276c38f00fd12 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Wed, 20 Sep 2023 13:05:35 +1200
Subject: [PATCH] Add alert to profile if no email exists warning about
 password reset.

---
 .../(app)/(protected)/profile/+page.svelte    | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/routes/(app)/(protected)/profile/+page.svelte b/src/routes/(app)/(protected)/profile/+page.svelte
index 6db738a..c86e693 100644
--- a/src/routes/(app)/(protected)/profile/+page.svelte
+++ b/src/routes/(app)/(protected)/profile/+page.svelte
@@ -6,6 +6,7 @@
 	import { Label } from '$components/ui/label';
 	import { Input } from '$components/ui/input';
 	import { Button } from '$components/ui/button';
+	import * as Alert from "$lib/components/ui/alert";
 	export let data;
 
 	const profileSchema = userSchema.pick({
@@ -24,7 +25,7 @@
 
 <form method="POST" use:enhance>
 	<!--<SuperDebug data={$form} />-->
-	<h3>Profile</h3>
+	<h3>Your Profile</h3>
 	<hr class="!border-t-2 mt-2 mb-6" />
 	{#if $message}
 		<aside class="alert variant-filled-success mt-6">
@@ -55,12 +56,21 @@
 			<small>{$errors.lastName}</small>
 		{/if}
 	</div>
-	<div class="mt-6">
+	<div class="grid gap-2 mt-6">
 		<Label for="email">Email address</Label>
 		<Input type="email" id="email" name="email" placeholder="Email Address" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
 		{#if $errors.email}
 			<small>{$errors.email}</small>
 		{/if}
+		{#if $form.email === ''}
+			<Alert.Root variant="destructive">
+				<AlertTriangle class="h-4 w-4" />
+				<Alert.Title>Heads up!</Alert.Title>
+				<Alert.Description>
+					Without an email, you won't be able to reset your password if you forget it.
+				</Alert.Description>
+			</Alert.Root>
+		{/if}
 	</div>
 	<div class="mt-6">
 		<Button variant="link" class="text-secondary-foreground" href="/password/change">
@@ -75,4 +85,10 @@
 			>{#if $delayed}<ConicGradient stops={conicStops} spin width="w-6" />{:else}Update Profile{/if}</button
 		> -->
 	</div>
-</form>
\ No newline at end of file
+</form>
+
+<style lang="postcss">
+	form {
+		min-width: 300px;;
+	}
+</style>
\ No newline at end of file