From b6a951a7b6bfa31eb14616dc57084f194ea2feca Mon Sep 17 00:00:00 2001
From: "@milesibastos" <antonio@milesibastos.com>
Date: Tue, 4 Mar 2025 07:24:12 -0300
Subject: [PATCH] feat: update registration form schema and validation for
 terms and policies, enhance checkbox layout

---
 src/routes/[[locale]]/register/+page.svelte | 40 ++++++++++++---------
 src/routes/[[locale]]/register/schema.ts    | 14 +++++---
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/routes/[[locale]]/register/+page.svelte b/src/routes/[[locale]]/register/+page.svelte
index 732bd242..bc5dc7b6 100644
--- a/src/routes/[[locale]]/register/+page.svelte
+++ b/src/routes/[[locale]]/register/+page.svelte
@@ -15,6 +15,8 @@
   let { data } = $props();
 
   const form = superForm(data.form, {
+    resetForm: false,
+    clearOnSubmit: "none",
     validators: zodClient(schema),
     // Optional: Handle form submission outcomes
     onResult: ({ result }) => {
@@ -74,14 +76,15 @@
           </Form.Control>
           <Form.FieldErrors />
         </Form.Field>
-        <Form.Field {form} name="hasTaxId" class="flex flex-row items-start space-x-3 space-y-0 ">
+        <Form.Field {form} name="hasTaxId" class="flex items-center space-x-2">
           <Form.Control let:attrs>
             <Checkbox {...attrs} bind:checked={$formData.hasTaxId} />
-            <div class="space-y-1 leading-none">
-              <Form.Label>
-                Deseo desgravar esta donación. Es necesario indicar el número de DNI para comunicárselo a Hacienda.
-              </Form.Label>
-            </div>
+            <Form.Label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Deseo desgravar esta donación. Es necesario indicar el número de DNI para comunicárselo a Hacienda.
+            </Form.Label>
+            <input name={attrs.name} value={$formData.hasTaxId} hidden />
           </Form.Control>
           <Form.FieldErrors />
         </Form.Field>
@@ -91,24 +94,27 @@
           </Form.Control>
           <Form.FieldErrors />
         </Form.Field>
-        <Form.Field {form} name="terms" class="flex flex-row items-start space-x-3 space-y-0 ">
+        <Form.Field {form} name="terms" class="flex items-center space-x-2">
           <Form.Control let:attrs>
             <Checkbox {...attrs} bind:checked={$formData.terms} />
-            <div class="space-y-1 leading-none">
-              <Form.Label>Acepto las condiciones legales</Form.Label>
-            </div>
+            <Form.Label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >Acepto las condiciones legales</Form.Label
+            >
+            <input name={attrs.name} value={$formData.terms} hidden />
           </Form.Control>
           <Form.FieldErrors />
         </Form.Field>
-        <Form.Field {form} name="policies" class="flex flex-row items-start space-x-3 space-y-0 ">
+        <Form.Field {form} name="policies" class="flex items-center space-x-2">
           <Form.Control let:attrs>
             <Checkbox {...attrs} bind:checked={$formData.policies} />
-            <div class="space-y-1 leading-none">
-              <Form.Label>
-                Al registrarme confirmo mi aceptación de vuestros términos de uso, política de privacidad y política de
-                cookies.
-              </Form.Label>
-            </div>
+            <Form.Label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Al registrarme confirmo mi aceptación de vuestros términos de uso, política de privacidad y política de
+              cookies.
+            </Form.Label>
+            <input name={attrs.name} value={$formData.policies} hidden />
           </Form.Control>
           <Form.FieldErrors />
         </Form.Field>
diff --git a/src/routes/[[locale]]/register/schema.ts b/src/routes/[[locale]]/register/schema.ts
index 55c3408d..f68a5ebe 100644
--- a/src/routes/[[locale]]/register/schema.ts
+++ b/src/routes/[[locale]]/register/schema.ts
@@ -4,11 +4,17 @@ export const schema = z.object({
   first_name: z.string().min(1, "First name is required"),
   last_name: z.string().min(1, "Last name is required"),
   email: z.string().email("Please enter a valid email address"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
-  taxId: z.string().min(8, "Password must be at least 8 characters"),
+  password: z.string().min(8, "Password must be at least 8 characters long"),
+  taxId: z.string().min(8, "Tax ID must be at least 8 characters long"),
   hasTaxId: z.boolean().default(false),
-  terms: z.boolean().refine((value) => value, { message: "You must agree to the terms" }),
-  policies: z.boolean().default(false),
+  terms: z
+    .boolean()
+    .default(false)
+    .refine((value) => value === true, { message: "You must agree to the terms" }),
+  policies: z
+    .boolean()
+    .default(false)
+    .refine((value) => value === true, { message: "You must accept our privacy policies" }),
 });
 
 export type FormSchema = z.infer<typeof schema>;