arithefirst/svchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Client side validation on account page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/forms/updatePassword.svelte
View File

@ -2,12 +2,15 @@
import { Button } from '$lib/components/ui/button/index'; import { Button } from '$lib/components/ui/button/index';
import { Input } from '$lib/components/ui/input/index'; import { Input } from '$lib/components/ui/input/index';
import { Label } from '$lib/components/ui/label/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 type { Infer, SuperValidated } from 'sveltekit-superforms';
import { superForm } from 'sveltekit-superforms'; import { superForm } from 'sveltekit-superforms';
import { zodClient } from 'sveltekit-superforms/adapters';
let { data }: { data: SuperValidated<Infer<ChangePasswordSchema>> } = $props(); 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> </script>
<!-- Update Password --> <!-- Update Password -->

9
src/lib/components/forms/updateUsername.svelte
View File

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