refactor zo zod and felte

web/src/lib/components/settings/email_modal.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
     import Modal from "$lib/components/base/modal.svelte";
+    import { validator } from "@felte/validator-zod";
+    import { createForm } from "felte";
     import { createEventDispatcher } from "svelte";
     import { _ } from "svelte-i18n";
+    import { z } from "zod";
     import TextField from "../base/text_field.svelte";
-    import { createForm } from "$lib/vendor/svelte-form-lib";
-    import { object, string } from "yup";
 
     let _openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
     export function openModal() {
-        $form.email = email
-        $errors.email = "";
+        setFields("email", email);
+        setErrors("email", []);
         _openModal!();
     }
 
@@ -18,17 +19,20 @@
 
     const dispatch = createEventDispatcher();
 
-    const { form, errors, handleChange, handleSubmit } = createForm<{
+    const { form, errors, setFields, setErrors } = createForm<{
         email: string;
     }>({
         initialValues: { email: email },
-        validationSchema: object({
-            email: string()
-                .email($_("not-a-valid-email-address"))
-                .required($_("required")),
+        extend: validator({
+            schema: z.object({
+                email: z
+                    .string()
+                    .min(1, "required")
+                    .email("not-a-valid-email-address"),
+            }),
         }),
-        onSubmit: async (_) => {
-            dispatch("save", $form.email);
+        onSubmit: async (form) => {
+            dispatch("save", form.email);
             closeModal!();
         },
     });
@@ -41,13 +45,8 @@
     bind:openModal={_openModal}
     bind:closeModal
 >
-    <form id="email-form" slot="content" on:submit={handleSubmit}>
-        <TextField
-            name="email"
-            bind:value={$form.email}
-            error={$errors.email}
-            on:change={handleChange}
-        ></TextField>
+    <form id="email-form" slot="content" use:form>
+        <TextField name="email" error={$errors.email}></TextField>
     </form>
     <div slot="footer" class="flex items-center gap-4">
         <button class="btn-secondary" on:click={closeModal}

web/src/lib/components/settings/password_modal.svelte

@@ -3,46 +3,61 @@
     import { createEventDispatcher } from "svelte";
     import { _ } from "svelte-i18n";
     import TextField from "../base/text_field.svelte";
-    import { createForm } from "$lib/vendor/svelte-form-lib";
-    import { object, string } from "yup";
+    import { validator } from "@felte/validator-zod";
+    import { createForm } from "felte";
+    import { z } from "zod";
 
     let _openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
     export function openModal() {
-        $form.password = ""
-        $errors.password = "";
-        $form.oldPassword = ""
-        $errors.oldPassword = "";
+        setFields("password", "")
+        setFields("oldPassword", "")
+        setErrors("password", [])
+        setErrors("oldPassword", [])
         _openModal!();
     }
 
     const dispatch = createEventDispatcher();
 
-    const { form, errors, handleChange, handleSubmit } = createForm<{
+    const { form, errors, setFields, setErrors } = createForm<{
         oldPassword: string;
         password: string;
+        passwordConfirm: string;
     }>({
         initialValues: { oldPassword: "", password: "" },
-        validationSchema: object({
-            oldPassword: string()
-                .min(
-                    8,
-                    $_("must-be-at-least-n-characters-long", {
-                        values: { n: 8 },
-                    }),
-                )
-                .required($_("required")),
-            password: string()
-                .min(
-                    8,
-                    $_("must-be-at-least-n-characters-long", {
-                        values: { n: 8 },
-                    }),
-                )
-                .required($_("required")),
+        extend: validator({
+            schema: z
+                .object({
+                    oldPassword: z.string().min(
+                        8,
+                        $_("must-be-at-least-n-characters-long", {
+                            values: { n: 8 },
+                        }),
+                    ),
+                    password: z.string().min(
+                        8,
+                        $_("must-be-at-least-n-characters-long", {
+                            values: { n: 8 },
+                        }),
+                    ),
+                    passwordConfirm: z.string().min(
+                        8,
+                        $_("must-be-at-least-n-characters-long", {
+                            values: { n: 8 },
+                        }),
+                    ),
+                })
+                .refine((d) => d.password === d.passwordConfirm, {
+                    message: "passwords-must-match",
+                    path: ["passwordConfirm"],
+                }),
         }),
-        onSubmit: async (_) => {
-            dispatch("save", {oldPassword: $form.oldPassword, password: $form.password, passwordConfirm: $form.password});
+        onSubmit: async (form) => {
+            dispatch("save", {
+                oldPassword: form.oldPassword,
+                password: form.password,
+                passwordConfirm: form.password,
+            });
             closeModal!();
         },
     });
@@ -55,30 +70,35 @@
     bind:openModal={_openModal}
     bind:closeModal
 >
-    <form id="password-form" slot="content" on:submit={handleSubmit}>
+    <form id="password-form" slot="content" use:form>
         <TextField
             name="oldPassword"
             label={$_("current-password")}
             type="password"
-            bind:value={$form.oldPassword}
             error={$errors.oldPassword}
-            on:change={handleChange}
         ></TextField>
         <TextField
             name="password"
             label={$_("new-password")}
             type="password"
-            bind:value={$form.password}
             error={$errors.password}
-            on:change={handleChange}
+        ></TextField>
+        <TextField
+            name="passwordConfirm"
+            label={$_("password-confirm")}
+            type="password"
+            error={$errors.passwordConfirm}
         ></TextField>
     </form>
     <div slot="footer" class="flex items-center gap-4">
         <button class="btn-secondary" on:click={closeModal}
             >{$_("cancel")}</button
         >
-        <button class="btn-primary" type="submit" form="password-form" name="save"
-            >{$_("save")}</button
+        <button
+            class="btn-primary"
+            type="submit"
+            form="password-form"
+            name="save">{$_("save")}</button
         >
     </div></Modal
 >