schema validation on signup

frontend/src/view/pages/Register/index.tsx

@@ -1,8 +1,10 @@
 import { Link } from "react-router-dom";
 import { Input } from "../../components/Input";
 import { Button } from "../../components/Button";
+import { useRegisterController } from "./useRegisterController";
 
 export function Register() {
+  const { errors, handleSubmit, register } = useRegisterController();
   return (
     <>
       <header className="flex flex-col items-center gap-4 text-center">
@@ -24,27 +26,32 @@ export function Register() {
         </p>
       </header>
 
-      <form className="mt-[60px] flex flex-col gap-4">
+      <form
+        onSubmit={handleSubmit}
+        className="mt-[60px] flex flex-col gap-4"
+      >
         <Input
           placeholder="Nome"
-          name="name"
+          error={errors.name?.message}
+          {...register("name")}
         />
         <Input
           type="email"
           placeholder="E-mail"
-          name="email"
+          error={errors.email?.message}
+          {...register("email")}
         />
         <Input
           type="password"
           placeholder="Senha"
-          name="password"
+          error={errors.password?.message}
+          {...register("password")}
         />
 
         <Button type="submit" className="mt-2">
           Criar conta
         </Button>
       </form>
-
     </>
   );
 }

frontend/src/view/pages/Register/useRegisterController.ts

@@ -0,0 +1,27 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().min(1, "Nome é obrigatório"),
+  email: z.string().min(1, "E-mail é obrigatório").email("Informe um e-mail válido"),
+  password: z.string().min(8, "Senha deve ter no mínimo 8 caracteres"),
+});
+
+type FormData = z.infer<typeof schema>;
+
+export function useRegisterController() {
+  const {
+    handleSubmit: hookFormSubmit,
+    register,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+  });
+
+  const handleSubmit = hookFormSubmit((data) => {
+    console.log(data);
+  })
+
+  return { register, errors, handleSubmit };
+}