replaced hook form with json schema from

app/package.json

@@ -34,7 +34,8 @@
     "liquidjs": "^10.15.0",
     "lodash-es": "^4.17.21",
     "oauth4webapi": "^2.11.1",
-    "swr": "^2.2.5"
+    "swr": "^2.2.5",
+    "json-schema-form-react": "link:json-schema-form-react"
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.613.0",

app/src/ui/modules/auth/LoginForm.tsx

@@ -1,7 +1,7 @@
-import { typeboxResolver } from "@hookform/resolvers/typebox";
+import type { ValueError } from "@sinclair/typebox/value";
-import { Type } from "core/utils";
+import { type TSchema, Type, Value } from "core/utils";
+import { Form, type Validator } from "json-schema-form-react";
 import type { ComponentPropsWithoutRef } from "react";
-import { useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
 import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
@@ -11,6 +11,13 @@ export type LoginFormProps = Omit<ComponentPropsWithoutRef<"form">, "onSubmit">
    formData?: any;
 };
 
+class TypeboxValidator implements Validator<ValueError> {
+   async validate(schema: TSchema, data: any) {
+      return Value.Check(schema, data) ? [] : [...Value.Errors(schema, data)];
+   }
+}
+const validator = new TypeboxValidator();
+
 const schema = Type.Object({
    email: Type.String({
       pattern: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$"
@@ -20,36 +27,39 @@ const schema = Type.Object({
    })
 });
 
-export function LoginForm({ formData, className, method = "POST", ...props }: LoginFormProps) {
+export function LoginForm({ formData, className, ...props }: LoginFormProps) {
-   const {
-      register,
-      formState: { isValid, errors }
-   } = useForm({
-      mode: "onChange",
-      defaultValues: formData,
-      resolver: typeboxResolver(schema)
-   });
-
    return (
-      <form {...props} method={method} className={twMerge("flex flex-col gap-3 w-full", className)}>
+      <Form
-         <Formy.Group>
+         method="POST"
-            <Formy.Label htmlFor="email">Email address</Formy.Label>
+         {...props}
-            <Formy.Input type="email" {...register("email")} />
+         schema={schema}
-         </Formy.Group>
+         validator={validator}
-         <Formy.Group>
+         validationMode="change"
-            <Formy.Label htmlFor="password">Password</Formy.Label>
+         className={twMerge("flex flex-col gap-3 w-full", className)}
-            <Formy.Input type="password" {...register("password")} />
+      >
-         </Formy.Group>
+         {({ errors, submitting }) => (
+            <>
+               <pre>{JSON.stringify(errors, null, 2)}</pre>
+               <Formy.Group>
+                  <Formy.Label htmlFor="email">Email address</Formy.Label>
+                  <Formy.Input type="email" name="email" />
+               </Formy.Group>
+               <Formy.Group>
+                  <Formy.Label htmlFor="password">Password</Formy.Label>
+                  <Formy.Input type="password" name="password" />
+               </Formy.Group>
 
-         <Button
+               <Button
-            type="submit"
+                  type="submit"
-            variant="primary"
+                  variant="primary"
-            size="large"
+                  size="large"
-            className="w-full mt-2 justify-center"
+                  className="w-full mt-2 justify-center"
-            disabled={!isValid}
+                  disabled={errors.length > 0 || submitting}
-         >
+               >
-            Sign in
+                  Sign in
-         </Button>
+               </Button>
-      </form>
+            </>
+         )}
+      </Form>
    );
 }

app/src/ui/routes/auth/auth.login.tsx

@@ -22,7 +22,6 @@ export function AuthLogin() {
       },
       {}
    ) as Record<string, AppAuthOAuthStrategy>;
-   //console.log("oauth", oauth, strategies);
 
    return (
       <AppShell.Root>