DemocraticTech.Fund/crowd-fund-web
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: update registration form schema and validation for terms and policies, enhance checkbox layout

Browse Source
This commit is contained in:
@milesibastos
2025-03-04 07:24:12 -03:00
parent 6ff109c14f
commit b6a951a7b6
2 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/[[locale]]/register/+page.svelte
+23 -17
View File
@@ -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>
src/routes/[[locale]]/register/schema.ts
+10 -4
View File
@@ -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>;