feat(auth): refactor sign up and sign in forms with react-hook-form and zod validation

src/components/credentials-sign-in.tsx

@@ -1,28 +1,99 @@
-import { signIn } from "@/lib/auth";
+"use client";
+
+import { z } from "zod";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useState } from "react";
+import { authSchema } from "@/lib/zod";
+import { useForm } from "react-hook-form";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signInWithCredentials } from "@/app/actions/auth";
+import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
 
 export function CredentialsSignIn() {
+  const form = useForm<z.infer<typeof authSchema>>({
+    resolver: zodResolver(authSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  const toggleVisibility = () => setIsVisible((prevState) => !prevState);
+
   return (
+    <Form {...form}>
       <form
+        onSubmit={form.handleSubmit((data) => signInWithCredentials(data))}
         className="grid gap-6"
-      action={async (formData) => {
-        "use server";
-        await signIn("credentials", formData);
-      }}
       >
-      <div className="grid gap-2">
+        <FormField
-        <Label htmlFor="email">Email</Label>
+          control={form.control}
-        <Input id="email" name="email" type="email" placeholder="m@example.com" required />
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Input className="peer pe-9" {...field} />
+                  <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50">
+                    <MailIcon size={16} aria-hidden="true" />
                   </div>
-      <div className="grid gap-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" name="password" type="password" required />
                 </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Input
+                    className="pe-9"
+                    type={isVisible ? "text" : "password"}
+                    {...field}
+                  />
+                  <button
+                    className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+                    type="button"
+                    onClick={toggleVisibility}
+                    aria-label={isVisible ? "Hide password" : "Show password"}
+                    aria-pressed={isVisible}
+                    aria-controls="password"
+                  >
+                    {isVisible ? (
+                      <EyeOffIcon size={16} aria-hidden="true" />
+                    ) : (
+                      <EyeIcon size={16} aria-hidden="true" />
+                    )}
+                  </button>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <Button type="submit" className="w-full">
           Sign In
         </Button>
       </form>
+    </Form>
   );
 }

src/components/credentials-sign-up.tsx

@@ -1,45 +1,99 @@
-import bcrypt from "bcrypt";
+"use client";
-import prisma from "@/lib/prisma";
+
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useState } from "react";
 import { authSchema } from "@/lib/zod";
-import { redirect } from "next/navigation";
+import { useForm } from "react-hook-form";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signUpWithCredentials } from "@/app/actions/auth";
+import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
 
 export function CredentialsSignUp() {
-  return (
+  const form = useForm<z.infer<typeof authSchema>>({
-    <form
+    resolver: zodResolver(authSchema),
-      className="grid gap-6"
+    defaultValues: {
-      action={async (formData) => {
+      email: "",
-        "use server";
+      password: "",
-        const email = formData.get("email");
-        const password = formData.get("password");
-
-        const validatedData = await authSchema.parseAsync({ email, password });
-        const saltRounds = 10;
-        const pwHash = await bcrypt.hash(validatedData.password, saltRounds);
-
-        await prisma.user.create({
-          data: {
-            email: validatedData.email,
-            password: pwHash,
     },
   });
 
-        redirect("/sign-in");
+  const [isVisible, setIsVisible] = useState<boolean>(false);
-      }}
+
+  const toggleVisibility = () => setIsVisible((prevState) => !prevState);
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit((data) => signUpWithCredentials(data))}
+        className="grid gap-6"
       >
-      <div className="grid gap-2">
+        <FormField
-        <Label htmlFor="email">Email</Label>
+          control={form.control}
-        <Input id="email" name="email" type="email" placeholder="m@example.com" required />
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Input className="peer pe-9" {...field} />
+                  <div className="text-muted-foreground/80 pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50">
+                    <MailIcon size={16} aria-hidden="true" />
                   </div>
-      <div className="grid gap-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" name="password" type="password" required />
                 </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Input
+                    className="pe-9"
+                    type={isVisible ? "text" : "password"}
+                    {...field}
+                  />
+                  <button
+                    className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+                    type="button"
+                    onClick={toggleVisibility}
+                    aria-label={isVisible ? "Hide password" : "Show password"}
+                    aria-pressed={isVisible}
+                    aria-controls="password"
+                  >
+                    {isVisible ? (
+                      <EyeOffIcon size={16} aria-hidden="true" />
+                    ) : (
+                      <EyeIcon size={16} aria-hidden="true" />
+                    )}
+                  </button>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <Button type="submit" className="w-full">
           Sign Up
         </Button>
       </form>
+    </Form>
   );
 }