Add alert to profile if no email exists warning about password reset.

This commit is contained in:
Bradley Shellnut 2023-09-20 13:05:35 +12:00
parent 54c7460fc4
commit bae59b8730

View file

@ -6,6 +6,7 @@
import { Label } from '$components/ui/label'; import { Label } from '$components/ui/label';
import { Input } from '$components/ui/input'; import { Input } from '$components/ui/input';
import { Button } from '$components/ui/button'; import { Button } from '$components/ui/button';
import * as Alert from "$lib/components/ui/alert";
export let data; export let data;
const profileSchema = userSchema.pick({ const profileSchema = userSchema.pick({
@ -24,7 +25,7 @@
<form method="POST" use:enhance> <form method="POST" use:enhance>
<!--<SuperDebug data={$form} />--> <!--<SuperDebug data={$form} />-->
<h3>Profile</h3> <h3>Your Profile</h3>
<hr class="!border-t-2 mt-2 mb-6" /> <hr class="!border-t-2 mt-2 mb-6" />
{#if $message} {#if $message}
<aside class="alert variant-filled-success mt-6"> <aside class="alert variant-filled-success mt-6">
@ -55,12 +56,21 @@
<small>{$errors.lastName}</small> <small>{$errors.lastName}</small>
{/if} {/if}
</div> </div>
<div class="mt-6"> <div class="grid gap-2 mt-6">
<Label for="email">Email address</Label> <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} /> <Input type="email" id="email" name="email" placeholder="Email Address" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
{#if $errors.email} {#if $errors.email}
<small>{$errors.email}</small> <small>{$errors.email}</small>
{/if} {/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>
<div class="mt-6"> <div class="mt-6">
<Button variant="link" class="text-secondary-foreground" href="/password/change"> <Button variant="link" class="text-secondary-foreground" href="/password/change">
@ -76,3 +86,9 @@
> --> > -->
</div> </div>
</form> </form>
<style lang="postcss">
form {
min-width: 300px;;
}
</style>