From 99179ef348fc6a11f926d84d488305c39320cf0a Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Sat, 22 Feb 2025 15:48:54 -0500
Subject: [PATCH] feat: Client side validation on account page

---
 src/lib/components/forms/updatePassword.svelte | 7 +++++--
 src/lib/components/forms/updateUsername.svelte | 9 ++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/forms/updatePassword.svelte b/src/lib/components/forms/updatePassword.svelte
index 25614ce..726b0c3 100644
--- a/src/lib/components/forms/updatePassword.svelte
+++ b/src/lib/components/forms/updatePassword.svelte
@@ -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 -->
diff --git a/src/lib/components/forms/updateUsername.svelte b/src/lib/components/forms/updateUsername.svelte
index 37b3a6b..c172e99 100644
--- a/src/lib/components/forms/updateUsername.svelte
+++ b/src/lib/components/forms/updateUsername.svelte
@@ -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}