47 lines
1.8 KiB
Svelte
47 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button/index';
|
|
import { Input } from '$lib/components/ui/input/index';
|
|
import { Label } from '$lib/components/ui/label/index';
|
|
import type { ChangePasswordSchema } from '$lib/types/account';
|
|
import type { Infer, SuperValidated } from 'sveltekit-superforms';
|
|
import { superForm } from 'sveltekit-superforms';
|
|
|
|
let { data }: { data: SuperValidated<Infer<ChangePasswordSchema>> } = $props();
|
|
const { form, errors, message, enhance } = superForm(data);
|
|
</script>
|
|
|
|
<!-- Update Password -->
|
|
<form class="grid w-full items-start gap-3" use:enhance method="POST" action="?/updatePassword">
|
|
<fieldset class="grid w-full gap-3 rounded-lg border p-4">
|
|
<legend class="-ml-1 px-1 text-sm font-medium"> Update Password </legend>
|
|
<div class="grid gap-3">
|
|
<Label for="currentPassword">Current Password</Label>
|
|
<Input
|
|
id="currentPassword"
|
|
name="currentPassword"
|
|
type="password"
|
|
placeholder="Current Password"
|
|
bind:value={$form.currentPassword}
|
|
aria-invalid={$errors.currentPassword ? 'true' : undefined}
|
|
/>
|
|
{#if $errors.currentPassword}<span class="text-sm text-red-500">{$errors.currentPassword[0]}</span>{/if}
|
|
</div>
|
|
<div class="grid gap-3">
|
|
<Label for="newPassword">New Password</Label>
|
|
<Input
|
|
id="newPassword"
|
|
name="newPassword"
|
|
type="password"
|
|
placeholder="New Password"
|
|
bind:value={$form.newPassword}
|
|
aria-invalid={$errors.newPassword ? 'true' : undefined}
|
|
/>
|
|
{#if $errors.newPassword}<span class="text-sm text-red-500">{$errors.newPassword[0]}</span>{/if}
|
|
</div>
|
|
<Button type="submit">Update Password</Button>
|
|
<p class="mt-1 text-center text-sm text-green-500">
|
|
{#if $message}{$message}{/if}
|
|
</p>
|
|
</fieldset>
|
|
</form>
|