feat: Client side validation on account page

This commit is contained in:
April Hall 2025-02-22 15:48:54 -05:00
parent 5782831ea6
commit 99179ef348
No known key found for this signature in database
GPG Key ID: A49AC35CB186266C
2 changed files with 11 additions and 5 deletions

View File

@ -2,12 +2,15 @@
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 ChangePasswordSchema, changePasswordSchema } from '$lib/types/account';
import type { Infer, SuperValidated } from 'sveltekit-superforms';
import { superForm } from 'sveltekit-superforms';
import { zodClient } from 'sveltekit-superforms/adapters';
let { data }: { data: SuperValidated<Infer<ChangePasswordSchema>> } = $props();
const { form, errors, message, enhance } = superForm(data);
const { form, errors, message, enhance } = superForm(data, {
validators: zodClient(changePasswordSchema),
});
</script>
<!-- Update Password -->

View File

@ -2,12 +2,15 @@
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 { ChangeUsernameSchema } from '$lib/types/account';
import { type ChangeUsernameSchema, changeUsernameSchema } from '$lib/types/account';
import type { Infer, SuperValidated } from 'sveltekit-superforms';
import { superForm } from 'sveltekit-superforms';
import { zodClient } from 'sveltekit-superforms/adapters';
let { data }: { data: SuperValidated<Infer<ChangeUsernameSchema>> } = $props();
const { form, errors, message, enhance } = superForm(data);
const { form, errors, message, enhance } = superForm(data, {
validators: zodClient(changeUsernameSchema),
});
</script>
<form class="grid w-full items-start gap-3" method="POST" action="?/updateUsername" use:enhance>
@ -18,7 +21,7 @@
<Input
id="username"
name="username"
type="password"
type="text"
placeholder="New Username"
bind:value={$form.username}
aria-invalid={$errors.username ? 'true' : undefined}