From 116519a70b73d4a96fc1194272cdfafd4d9d0722 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 14 Mar 2025 17:08:11 +0800
Subject: [PATCH] feat(auth): refactor sign up and sign in forms with
 react-hook-form and zod validation

---
 src/components/credentials-sign-in.tsx | 113 +++++++++++++++++-----
 src/components/credentials-sign-up.tsx | 124 ++++++++++++++++++-------
 2 files changed, 181 insertions(+), 56 deletions(-)

diff --git a/src/components/credentials-sign-in.tsx b/src/components/credentials-sign-in.tsx
index 12ed60e..4213154 100644
--- a/src/components/credentials-sign-in.tsx
+++ b/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
-      className="grid gap-6"
-      action={async (formData) => {
-        "use server";
-        await signIn("credentials", formData);
-      }}
-    >
-      <div className="grid gap-2">
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" name="email" type="email" placeholder="m@example.com" required />
-      </div>
-      <div className="grid gap-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" name="password" type="password" required />
-      </div>
-      <Button type="submit" className="w-full">
-        Sign In
-      </Button>
-    </form>
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit((data) => signInWithCredentials(data))}
+        className="grid gap-6"
+      >
+        <FormField
+          control={form.control}
+          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>
+              </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>
   );
 }
diff --git a/src/components/credentials-sign-up.tsx b/src/components/credentials-sign-up.tsx
index 40c02cb..d939290 100644
--- a/src/components/credentials-sign-up.tsx
+++ b/src/components/credentials-sign-up.tsx
@@ -1,45 +1,99 @@
-import bcrypt from "bcrypt";
-import prisma from "@/lib/prisma";
+"use client";
+
+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() {
+  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
-      className="grid gap-6"
-      action={async (formData) => {
-        "use server";
-        const email = formData.get("email");
-        const password = formData.get("password");
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit((data) => signUpWithCredentials(data))}
+        className="grid gap-6"
+      >
+        <FormField
+          control={form.control}
+          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>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
 
-        const validatedData = await authSchema.parseAsync({ email, password });
-        const saltRounds = 10;
-        const pwHash = await bcrypt.hash(validatedData.password, saltRounds);
+        <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>
+          )}
+        />
 
-        await prisma.user.create({
-          data: {
-            email: validatedData.email,
-            password: pwHash,
-          },
-        });
-
-        redirect("/sign-in");
-      }}
-    >
-      <div className="grid gap-2">
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" name="email" type="email" placeholder="m@example.com" required />
-      </div>
-      <div className="grid gap-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" name="password" type="password" required />
-      </div>
-      <Button type="submit" className="w-full">
-        Sign Up
-      </Button>
-    </form>
+        <Button type="submit" className="w-full">
+          Sign Up
+        </Button>
+      </form>
+    </Form>
   );
 }