From ba5b3aaf7c952bbe7fdaa5696b944fe083432475 Mon Sep 17 00:00:00 2001
From: Ronald Gene <regenify.base.eth@gmail.com>
Date: Mon, 22 Sep 2025 09:53:55 -0600
Subject: [PATCH 1/5] feat: Add Sign In and Sign Up pages with form handling
 using react-hook-form

---
 package-lock.json                 |  17 +++
 package.json                      |   1 +
 src/actions/auth/signup/action.ts |   4 +-
 src/app/(auth)/signin/page.tsx    | 143 ++++++++++++++++++++++
 src/app/(auth)/signup/page.tsx    | 191 ++++++++++++++++++++++++++++++
 src/app/auth/signin/page.tsx      |   5 -
 src/app/auth/signup/page.tsx      |   5 -
 7 files changed, 354 insertions(+), 12 deletions(-)
 create mode 100644 src/app/(auth)/signin/page.tsx
 create mode 100644 src/app/(auth)/signup/page.tsx
 delete mode 100644 src/app/auth/signin/page.tsx
 delete mode 100644 src/app/auth/signup/page.tsx

diff --git a/package-lock.json b/package-lock.json
index 8411e4f..22fa723 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "next-safe-action": "^8.0.11",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-hook-form": "^7.63.0",
         "react-icons": "^5.5.0",
         "tailwind-merge": "^3.3.1",
         "viem": "^2.37.5",
@@ -8897,6 +8898,22 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.63.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
+      "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
diff --git a/package.json b/package.json
index b78e3e5..7f19f33 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "next-safe-action": "^8.0.11",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hook-form": "^7.63.0",
     "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "viem": "^2.37.5",
diff --git a/src/actions/auth/signup/action.ts b/src/actions/auth/signup/action.ts
index 9edaffc..fb84552 100644
--- a/src/actions/auth/signup/action.ts
+++ b/src/actions/auth/signup/action.ts
@@ -2,10 +2,10 @@
 
 import { actionClient } from '@/lib/action';
 import { Signup} from './logic';
-import { SignupSchema} from './schema';
+import { signupSchema} from './schema';
 
 export const signupAction = actionClient
-  .inputSchema(SignupSchema)
+  .inputSchema(signupSchema)
   .metadata({ actionName: 'signup' })
   .action(async ({ parsedInput }) => {
     try {
diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
new file mode 100644
index 0000000..34f6941
--- /dev/null
+++ b/src/app/(auth)/signin/page.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { signinAction } from "@/actions/auth/signin/action";
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+
+type SignInFormValues = {
+  email: string;
+  password: string;
+  remember?: boolean;
+};
+
+export default function SignInPage() {
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    setError,
+    clearErrors,
+  } = useForm<SignInFormValues>();
+
+  const onSubmit = async (data: SignInFormValues) => {
+    clearErrors("root");
+    try {
+      await signinAction(data);
+      router.push("/");
+    } catch (err) {
+      if (err instanceof Error) {
+        setError("root", {
+          type: "server",
+          message: err.message || "Something went wrong",
+        });
+      } else {
+        setError("root", { type: "server", message: "Something went wrong" });
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">
+            Sign in to Sentiopulse
+          </CardTitle>
+          <CardDescription className="text-center">
+            Enter your credentials to access your account
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <label
+                htmlFor="email"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="john@example.com"
+                {...register("email", { required: "Email is required" })}
+              />
+              {errors.email && (
+                <p className="text-sm text-red-600">{errors.email.message}</p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="password"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Password
+              </label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Enter your password"
+                {...register("password", { required: "Password is required" })}
+              />
+              {errors.password && (
+                <p className="text-sm text-red-600">
+                  {errors.password.message}
+                </p>
+              )}
+            </div>
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-2">
+                <input
+                  id="remember"
+                  type="checkbox"
+                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                  {...register("remember")}
+                />
+                <label htmlFor="remember" className="text-sm text-gray-600">
+                  Remember me
+                </label>
+              </div>
+              <Link
+                href="/auth/forgot-password"
+                className="text-sm text-blue-600 hover:underline"
+              >
+                Forgot password?
+              </Link>
+            </div>
+            {errors.root && (
+              <div className="text-red-600 text-sm text-center">
+                {errors.root.message}
+              </div>
+            )}
+          </CardContent>
+          <CardFooter className="flex flex-col space-y-4">
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? "Signing in..." : "Sign in"}
+            </Button>
+            <p className="text-center text-sm text-gray-600">
+              Don&apos;t have an account?{" "}
+              <Link
+                href="/auth/signup"
+                className="text-blue-600 hover:underline font-medium"
+              >
+                Sign up
+              </Link>
+            </p>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
new file mode 100644
index 0000000..35d5627
--- /dev/null
+++ b/src/app/(auth)/signup/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { signupAction } from "@/actions/auth/signup/action";
+import { useForm } from "react-hook-form";
+
+type SignUpFormValues = {
+  name: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  terms: boolean;
+};
+
+export default function SignUpPage() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    watch,
+  } = useForm<SignUpFormValues>();
+
+  const router = useRouter();
+  const { setError, clearErrors } = useForm<SignUpFormValues>();
+
+  const password = watch("password");
+
+  const onSubmit = async (data: SignUpFormValues) => {
+    clearErrors("root");
+    try {
+      await signupAction(data);
+      router.push("/");
+    } catch (err) {
+      if (err instanceof Error) {
+        setError("root", {
+          type: "server",
+          message: err.message || "Something went wrong",
+        });
+      } else {
+        setError("root", { type: "server", message: "Something went wrong" });
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">
+            Create your account
+          </CardTitle>
+        </CardHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <CardContent className="space-y-4">
+            {/* Full Name */}
+            <div className="space-y-2">
+              <label htmlFor="name" className="text-sm font-medium">
+                Full Name
+              </label>
+              <Input
+                id="name"
+                type="text"
+                placeholder="John Doe"
+                {...register("name", { required: "Name is required" })}
+              />
+              {errors.name && (
+                <p className="text-sm text-red-600">{errors.name.message}</p>
+              )}
+            </div>
+
+            {/* Email */}
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="john@example.com"
+                {...register("email", {
+                  required: "Email is required",
+                })}
+              />
+              {errors.email && (
+                <p className="text-sm text-red-600">{errors.email.message}</p>
+              )}
+            </div>
+
+            {/* Password */}
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium">
+                Password
+              </label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Create a strong password"
+                {...register("password", { required: "Password is required" })}
+              />
+              {errors.password && (
+                <p className="text-sm text-red-600">
+                  {errors.password.message}
+                </p>
+              )}
+            </div>
+
+            {/* Confirm Password */}
+            <div className="space-y-2">
+              <label htmlFor="confirmPassword" className="text-sm font-medium">
+                Confirm Password
+              </label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                placeholder="Confirm your password"
+                {...register("confirmPassword", {
+                  required: "Please confirm your password",
+                  validate: (value) =>
+                    value === password || "Passwords do not match",
+                })}
+              />
+              {errors.confirmPassword && (
+                <p className="text-sm text-red-600">
+                  {errors.confirmPassword.message}
+                </p>
+              )}
+            </div>
+
+            {/* Terms */}
+            <div className="flex items-center space-x-2 mb-4">
+              <input
+                id="terms"
+                type="checkbox"
+                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
+                {...register("terms", {
+                  required: "You must accept the terms",
+                })}
+              />
+              <label htmlFor="terms" className="text-sm text-gray-600">
+                I agree to the{" "}
+                <Link href="/terms" className="text-blue-600 hover:underline">
+                  Terms of Service
+                </Link>{" "}
+                and{" "}
+                <Link href="/privacy" className="text-blue-600 hover:underline">
+                  Privacy Policy
+                </Link>
+              </label>
+            </div>
+            {errors.terms && (
+              <p className="text-sm text-red-600">{errors.terms.message}</p>
+            )}
+
+            {/* Server Error */}
+            {errors.root && (
+              <div className="text-red-600 text-sm text-center">
+                {errors.root.message}
+              </div>
+            )}
+          </CardContent>
+
+          <CardFooter className="flex flex-col space-y-4">
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? "Creating account..." : "Create account"}
+            </Button>
+            <p className="text-center text-sm text-gray-600">
+              Already have an account?{" "}
+              <Link
+                href="/auth/signin"
+                className="text-blue-600 hover:underline font-medium"
+              >
+                Sign in
+              </Link>
+            </p>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
deleted file mode 100644
index 6fee84b..0000000
--- a/src/app/auth/signin/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import LoginForm from "@/components/LoginForm";
-
-export default function SignInPage() {
-  return <LoginForm />;
-}
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
deleted file mode 100644
index e71e51d..0000000
--- a/src/app/auth/signup/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import RegisterForm from "@/components/RegisterForm";
-
-export default function SignUpPage() {
-  return <RegisterForm />;
-}

From b8f5f0757c6115b0e65d74905bb9041100585ab5 Mon Sep 17 00:00:00 2001
From: Ronald Gene <regenify.base.eth@gmail.com>
Date: Mon, 22 Sep 2025 10:08:37 -0600
Subject: [PATCH 2/5] fix: Update Sign In and Sign Up links to remove redundant
 path segments

---
 src/app/(auth)/signin/page.tsx | 2 +-
 src/app/(auth)/signup/page.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
index 34f6941..208fb5b 100644
--- a/src/app/(auth)/signin/page.tsx
+++ b/src/app/(auth)/signin/page.tsx
@@ -129,7 +129,7 @@ export default function SignInPage() {
             <p className="text-center text-sm text-gray-600">
               Don&apos;t have an account?{" "}
               <Link
-                href="/auth/signup"
+                href="/signup"
                 className="text-blue-600 hover:underline font-medium"
               >
                 Sign up
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index 35d5627..2eb192e 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -28,10 +28,10 @@ export default function SignUpPage() {
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
+    setError,
+    clearErrors,
   } = useForm<SignUpFormValues>();
-
   const router = useRouter();
-  const { setError, clearErrors } = useForm<SignUpFormValues>();
 
   const password = watch("password");
 
@@ -177,7 +177,7 @@ export default function SignUpPage() {
             <p className="text-center text-sm text-gray-600">
               Already have an account?{" "}
               <Link
-                href="/auth/signin"
+                href="/signin"
                 className="text-blue-600 hover:underline font-medium"
               >
                 Sign in

From b7435d41346b025977a091e21a8d1a64d729f698 Mon Sep 17 00:00:00 2001
From: Ronald Gene <regenify.base.eth@gmail.com>
Date: Tue, 23 Sep 2025 03:28:55 -0600
Subject: [PATCH 3/5] feat: Refactor authentication forms and add validation
 with Zod; implement reusable form components

---
 package-lock.json                             |  55 +++++
 package.json                                  |   4 +
 src/actions/auth/signup/schema.ts             |  28 ++-
 src/app/(auth)/signin/page.tsx                | 140 +------------
 src/app/(auth)/signup/page.tsx                | 196 +-----------------
 .../pages/signin/SigninPageContainer.tsx      | 116 +++++++++++
 .../pages/signup/SignupPageContainer.tsx      | 143 +++++++++++++
 .../shared/Form/FormButton/FormButton.tsx     |  27 +++
 .../shared/Form/FormCheckbox/FormCheckbox.tsx |  53 +++++
 .../shared/Form/FormInput/FormInput.tsx       |  46 ++++
 src/components/ui/form.tsx                    | 167 +++++++++++++++
 src/components/ui/label.tsx                   |  24 +++
 12 files changed, 662 insertions(+), 337 deletions(-)
 create mode 100644 src/components/pages/signin/SigninPageContainer.tsx
 create mode 100644 src/components/pages/signup/SignupPageContainer.tsx
 create mode 100644 src/components/shared/Form/FormButton/FormButton.tsx
 create mode 100644 src/components/shared/Form/FormCheckbox/FormCheckbox.tsx
 create mode 100644 src/components/shared/Form/FormInput/FormInput.tsx
 create mode 100644 src/components/ui/form.tsx
 create mode 100644 src/components/ui/label.tsx

diff --git a/package-lock.json b/package-lock.json
index 22fa723..5913709 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,11 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "@prisma/client": "^6.15.0",
+        "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-slot": "^1.2.3",
         "@rainbow-me/rainbowkit": "^2.2.8",
         "@tanstack/react-query": "^5.87.1",
         "bcryptjs": "^3.0.2",
@@ -25,6 +28,7 @@
         "react-dom": "19.1.0",
         "react-hook-form": "^7.63.0",
         "react-icons": "^5.5.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "viem": "^2.37.5",
         "wagmi": "^2.16.9",
@@ -563,6 +567,18 @@
         "viem": ">=2.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1684,6 +1700,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -3122,6 +3161,12 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -9544,6 +9589,16 @@
         "atomic-sleep": "^1.0.0"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 7f19f33..d6f704c 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,11 @@
     "prisma:reset": "prisma migrate reset"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@prisma/client": "^6.15.0",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
     "@rainbow-me/rainbowkit": "^2.2.8",
     "@tanstack/react-query": "^5.87.1",
     "bcryptjs": "^3.0.2",
@@ -31,6 +34,7 @@
     "react-dom": "19.1.0",
     "react-hook-form": "^7.63.0",
     "react-icons": "^5.5.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "viem": "^2.37.5",
     "wagmi": "^2.16.9",
diff --git a/src/actions/auth/signup/schema.ts b/src/actions/auth/signup/schema.ts
index 208e79b..fbaed25 100644
--- a/src/actions/auth/signup/schema.ts
+++ b/src/actions/auth/signup/schema.ts
@@ -1,14 +1,22 @@
 import { z } from "zod";
 
-export const signupSchema = z.object({
-    name: z.string().min(1, 'Name is required'),
-    email: z.string().email('Invalid email format'),
-    password: z.string()
-        .min(8, 'Password must be at least 8 characters long')
-        .regex(/(?=.*[a-z])/, 'Password must contain at least one lowercase letter')
-        .regex(/(?=.*[A-Z])/, 'Password must contain at least one uppercase letter')
-        .regex(/(?=.*\d)/, 'Password must contain at least one number')
-
-})
+export const signupSchema = z
+    .object({
+        name: z.string().min(1, 'Name is required'),
+        email: z.string().email('Invalid email format'),
+        password: z.string()
+            .min(8, 'Password must be at least 8 characters long')
+            .regex(/(?=.*[a-z])/, 'Password must contain at least one lowercase letter')
+            .regex(/(?=.*[A-Z])/, 'Password must contain at least one uppercase letter')
+            .regex(/(?=.*\d)/, 'Password must contain at least one number'),
+        confirmPassword: z.string().min(1, 'Please confirm your password'),
+        terms: z.literal(true, {
+            errorMap: () => ({ message: 'You must accept the terms' })
+        }),
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+        message: 'Passwords do not match',
+        path: ['confirmPassword'],
+    });
 
 export type signupInput = z.infer<typeof signupSchema>
\ No newline at end of file
diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
index 208fb5b..bf85d52 100644
--- a/src/app/(auth)/signin/page.tsx
+++ b/src/app/(auth)/signin/page.tsx
@@ -1,143 +1,7 @@
 "use client";
 
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { signinAction } from "@/actions/auth/signin/action";
-import { useForm } from "react-hook-form";
-import { useRouter } from "next/navigation";
-
-type SignInFormValues = {
-  email: string;
-  password: string;
-  remember?: boolean;
-};
+import SigninPageContainer from "@/components/pages/signin/SigninPageContainer";
 
 export default function SignInPage() {
-  const router = useRouter();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    setError,
-    clearErrors,
-  } = useForm<SignInFormValues>();
-
-  const onSubmit = async (data: SignInFormValues) => {
-    clearErrors("root");
-    try {
-      await signinAction(data);
-      router.push("/");
-    } catch (err) {
-      if (err instanceof Error) {
-        setError("root", {
-          type: "server",
-          message: err.message || "Something went wrong",
-        });
-      } else {
-        setError("root", { type: "server", message: "Something went wrong" });
-      }
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl font-bold text-center">
-            Sign in to Sentiopulse
-          </CardTitle>
-          <CardDescription className="text-center">
-            Enter your credentials to access your account
-          </CardDescription>
-        </CardHeader>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <label
-                htmlFor="email"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Email
-              </label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="john@example.com"
-                {...register("email", { required: "Email is required" })}
-              />
-              {errors.email && (
-                <p className="text-sm text-red-600">{errors.email.message}</p>
-              )}
-            </div>
-            <div className="space-y-2">
-              <label
-                htmlFor="password"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Password
-              </label>
-              <Input
-                id="password"
-                type="password"
-                placeholder="Enter your password"
-                {...register("password", { required: "Password is required" })}
-              />
-              {errors.password && (
-                <p className="text-sm text-red-600">
-                  {errors.password.message}
-                </p>
-              )}
-            </div>
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center space-x-2">
-                <input
-                  id="remember"
-                  type="checkbox"
-                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                  {...register("remember")}
-                />
-                <label htmlFor="remember" className="text-sm text-gray-600">
-                  Remember me
-                </label>
-              </div>
-              <Link
-                href="/auth/forgot-password"
-                className="text-sm text-blue-600 hover:underline"
-              >
-                Forgot password?
-              </Link>
-            </div>
-            {errors.root && (
-              <div className="text-red-600 text-sm text-center">
-                {errors.root.message}
-              </div>
-            )}
-          </CardContent>
-          <CardFooter className="flex flex-col space-y-4">
-            <Button type="submit" className="w-full" disabled={isSubmitting}>
-              {isSubmitting ? "Signing in..." : "Sign in"}
-            </Button>
-            <p className="text-center text-sm text-gray-600">
-              Don&apos;t have an account?{" "}
-              <Link
-                href="/signup"
-                className="text-blue-600 hover:underline font-medium"
-              >
-                Sign up
-              </Link>
-            </p>
-          </CardFooter>
-        </form>
-      </Card>
-    </div>
-  );
+  return <SigninPageContainer />;
 }
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index 2eb192e..28e1598 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -1,191 +1,9 @@
-"use client";
+import SignupPageContainer from "@/components/pages/signup/SignupPageContainer";
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { signupAction } from "@/actions/auth/signup/action";
-import { useForm } from "react-hook-form";
-
-type SignUpFormValues = {
-  name: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-  terms: boolean;
-};
-
-export default function SignUpPage() {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    watch,
-    setError,
-    clearErrors,
-  } = useForm<SignUpFormValues>();
-  const router = useRouter();
-
-  const password = watch("password");
-
-  const onSubmit = async (data: SignUpFormValues) => {
-    clearErrors("root");
-    try {
-      await signupAction(data);
-      router.push("/");
-    } catch (err) {
-      if (err instanceof Error) {
-        setError("root", {
-          type: "server",
-          message: err.message || "Something went wrong",
-        });
-      } else {
-        setError("root", { type: "server", message: "Something went wrong" });
-      }
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl font-bold text-center">
-            Create your account
-          </CardTitle>
-        </CardHeader>
-
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <CardContent className="space-y-4">
-            {/* Full Name */}
-            <div className="space-y-2">
-              <label htmlFor="name" className="text-sm font-medium">
-                Full Name
-              </label>
-              <Input
-                id="name"
-                type="text"
-                placeholder="John Doe"
-                {...register("name", { required: "Name is required" })}
-              />
-              {errors.name && (
-                <p className="text-sm text-red-600">{errors.name.message}</p>
-              )}
-            </div>
-
-            {/* Email */}
-            <div className="space-y-2">
-              <label htmlFor="email" className="text-sm font-medium">
-                Email
-              </label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="john@example.com"
-                {...register("email", {
-                  required: "Email is required",
-                })}
-              />
-              {errors.email && (
-                <p className="text-sm text-red-600">{errors.email.message}</p>
-              )}
-            </div>
-
-            {/* Password */}
-            <div className="space-y-2">
-              <label htmlFor="password" className="text-sm font-medium">
-                Password
-              </label>
-              <Input
-                id="password"
-                type="password"
-                placeholder="Create a strong password"
-                {...register("password", { required: "Password is required" })}
-              />
-              {errors.password && (
-                <p className="text-sm text-red-600">
-                  {errors.password.message}
-                </p>
-              )}
-            </div>
-
-            {/* Confirm Password */}
-            <div className="space-y-2">
-              <label htmlFor="confirmPassword" className="text-sm font-medium">
-                Confirm Password
-              </label>
-              <Input
-                id="confirmPassword"
-                type="password"
-                placeholder="Confirm your password"
-                {...register("confirmPassword", {
-                  required: "Please confirm your password",
-                  validate: (value) =>
-                    value === password || "Passwords do not match",
-                })}
-              />
-              {errors.confirmPassword && (
-                <p className="text-sm text-red-600">
-                  {errors.confirmPassword.message}
-                </p>
-              )}
-            </div>
-
-            {/* Terms */}
-            <div className="flex items-center space-x-2 mb-4">
-              <input
-                id="terms"
-                type="checkbox"
-                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
-                {...register("terms", {
-                  required: "You must accept the terms",
-                })}
-              />
-              <label htmlFor="terms" className="text-sm text-gray-600">
-                I agree to the{" "}
-                <Link href="/terms" className="text-blue-600 hover:underline">
-                  Terms of Service
-                </Link>{" "}
-                and{" "}
-                <Link href="/privacy" className="text-blue-600 hover:underline">
-                  Privacy Policy
-                </Link>
-              </label>
-            </div>
-            {errors.terms && (
-              <p className="text-sm text-red-600">{errors.terms.message}</p>
-            )}
-
-            {/* Server Error */}
-            {errors.root && (
-              <div className="text-red-600 text-sm text-center">
-                {errors.root.message}
-              </div>
-            )}
-          </CardContent>
-
-          <CardFooter className="flex flex-col space-y-4">
-            <Button type="submit" className="w-full" disabled={isSubmitting}>
-              {isSubmitting ? "Creating account..." : "Create account"}
-            </Button>
-            <p className="text-center text-sm text-gray-600">
-              Already have an account?{" "}
-              <Link
-                href="/signin"
-                className="text-blue-600 hover:underline font-medium"
-              >
-                Sign in
-              </Link>
-            </p>
-          </CardFooter>
-        </form>
-      </Card>
+export default function Signup(){
+  return(
+    <div>
+      <SignupPageContainer/>
     </div>
-  );
-}
+  )
+}
\ No newline at end of file
diff --git a/src/components/pages/signin/SigninPageContainer.tsx b/src/components/pages/signin/SigninPageContainer.tsx
new file mode 100644
index 0000000..a11e710
--- /dev/null
+++ b/src/components/pages/signin/SigninPageContainer.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { signinAction } from "@/actions/auth/signin/action";
+import { useForm } from "react-hook-form";
+import { useAction } from "next-safe-action/hooks";
+import { Form } from "@/components/ui/form";
+import FormInput from "@/components/shared/Form/FormInput/FormInput";
+import FormButton from "@/components/shared/Form/FormButton/FormButton";
+import { signinSchema } from "@/actions/auth/signin/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { toast } from "sonner";
+
+type SignInFormValues = z.infer<typeof signinSchema>;
+
+export default function SigninPageContainer() {
+  const form = useForm<SignInFormValues>({
+    mode: "onChange",
+    resolver: zodResolver(signinSchema),
+  });
+  const router = useRouter();
+
+  const { execute, isExecuting } = useAction(signinAction, {
+    onSuccess: () => {
+      toast.success("Signed in successfully!");
+      router.push("/");
+    },
+    onError: (error) => {
+      const fieldErrors = error.error.validationErrors?.fieldErrors;
+      const errorMessage =
+        error.error.serverError ??
+        (fieldErrors
+          ? Object.entries(fieldErrors)
+              .map(([key, value]) => `${key}: ${value}`)
+              .join(", ")
+          : "An unknown error occurred");
+      toast.error(errorMessage);
+    },
+  });
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">
+            Sign in to Sentiopulse
+          </CardTitle>
+          <CardDescription className="text-center">
+            Enter your credentials to access your account
+          </CardDescription>
+        </CardHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(execute)}>
+            <CardContent className="space-y-4">
+              <FormInput
+                control={form.control}
+                name="email"
+                label="Email"
+                placeholder="john@example.com"
+                type="email"
+                required
+              />
+              <FormInput
+                control={form.control}
+                name="password"
+                label="Password"
+                placeholder="Enter your password"
+                type="password"
+                required
+              />
+
+              <div className="flex justify-end mb-3">
+                <Link
+                  href="/auth/forgot-password"
+                  className="text-sm text-blue-600 hover:underline"
+                >
+                  Forgot password?
+                </Link>
+              </div>
+            </CardContent>
+
+            <CardFooter className="flex flex-col space-y-4">
+              <FormButton
+                className="w-full"
+                loading={isExecuting}
+                disabled={!form.formState.isValid || isExecuting}
+              >
+                Sign in
+              </FormButton>
+              <p className="text-center text-sm text-gray-600">
+                Don&apos;t have an account?{" "}
+                <Link
+                  href="/signup"
+                  className="text-blue-600 hover:underline font-medium"
+                >
+                  Sign up
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Form>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/pages/signup/SignupPageContainer.tsx b/src/components/pages/signup/SignupPageContainer.tsx
new file mode 100644
index 0000000..dc93ef3
--- /dev/null
+++ b/src/components/pages/signup/SignupPageContainer.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { signupAction } from "@/actions/auth/signup/action";
+import { useForm } from "react-hook-form";
+import { useAction } from "next-safe-action/hooks";
+import { Form } from "@/components/ui/form";
+import FormInput from "@/components/shared/Form/FormInput/FormInput";
+import FormCheckbox from "@/components/shared/Form/FormCheckbox/FormCheckbox";
+import FormButton from "@/components/shared/Form/FormButton/FormButton";
+import { signupSchema } from "@/actions/auth/signup/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { toast } from "sonner";
+
+type SignUpFormValues = z.infer<typeof signupSchema>;
+
+export default function SignupPageContainer() {
+  const form = useForm<SignUpFormValues>({
+    mode: "onChange",
+    resolver: zodResolver(signupSchema),
+  });
+  const router = useRouter();
+
+  const { execute, isExecuting } = useAction(signupAction, {
+    onSuccess: () => {
+      toast.success("Account created successfully!");
+      form.reset();
+      router.push("/");
+    },
+    onError: (error) => {
+      const fieldErrors = error.error.validationErrors?.fieldErrors;
+      const errorMessage =
+        error.error.serverError ??
+        (fieldErrors
+          ? Object.entries(fieldErrors)
+              .map(([key, value]) => `${key}: ${value}`)
+              .join(", ")
+          : "An unknown error occurred");
+      toast.error(errorMessage);
+    },
+  });
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">
+            Create your account
+          </CardTitle>
+        </CardHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(execute)}>
+            <CardContent className="space-y-4">
+              <FormInput
+                control={form.control}
+                name="name"
+                label="Full Name"
+                placeholder="John Doe"
+                required
+              />
+              <FormInput
+                control={form.control}
+                name="email"
+                label="Email"
+                placeholder="john@example.com"
+                type="email"
+                required
+              />
+              <FormInput
+                control={form.control}
+                name="password"
+                label="Password"
+                placeholder="Create a strong password"
+                type="password"
+                required
+              />
+              <FormInput
+                control={form.control}
+                name="confirmPassword"
+                label="Confirm Password"
+                placeholder="Confirm your password"
+                type="password"
+                required
+              />
+              <FormCheckbox
+                control={form.control}
+                name="terms"
+                label={
+                  <span>
+                    I agree to the{" "}
+                    <Link
+                      href="/terms"
+                      className="text-blue-600 hover:underline"
+                    >
+                      Terms of Service
+                    </Link>{" "}
+                    and{" "}
+                    <Link
+                      href="/privacy"
+                      className="text-blue-600 hover:underline"
+                    >
+                      Privacy Policy
+                    </Link>
+                  </span>
+                }
+                required
+              />
+            </CardContent>
+
+            <CardFooter className="flex flex-col space-y-4">
+              <FormButton
+                className="w-full"
+                loading={isExecuting}
+                disabled={!form.formState.isValid || isExecuting}
+              >
+                Create account
+              </FormButton>
+              <p className="text-center text-sm text-gray-600">
+                Already have an account?{" "}
+                <Link
+                  href="/signin"
+                  className="text-blue-600 hover:underline font-medium"
+                >
+                  Sign in
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Form>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/shared/Form/FormButton/FormButton.tsx b/src/components/shared/Form/FormButton/FormButton.tsx
new file mode 100644
index 0000000..f51e074
--- /dev/null
+++ b/src/components/shared/Form/FormButton/FormButton.tsx
@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button";
+
+type FormButtonProps = {
+  type?: "button" | "submit" | "reset";
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export default function FormButton({
+  type = "submit",
+  loading = false,
+  disabled = false,
+  className = "",
+  children,
+}: FormButtonProps) {
+  return (
+    <Button
+      type={type}
+      disabled={disabled || loading}
+      className={className}
+    >
+      {loading ? "Loading..." : children}
+    </Button>
+  );
+}
\ No newline at end of file
diff --git a/src/components/shared/Form/FormCheckbox/FormCheckbox.tsx b/src/components/shared/Form/FormCheckbox/FormCheckbox.tsx
new file mode 100644
index 0000000..c683695
--- /dev/null
+++ b/src/components/shared/Form/FormCheckbox/FormCheckbox.tsx
@@ -0,0 +1,53 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+type FormCheckboxProps<T extends FieldValues> = {
+  control: Control<T>;
+  name: Path<T>;
+  label: React.ReactNode;
+  required?: boolean;
+};
+
+export function FormCheckbox<T extends FieldValues>({
+  control,
+  name,
+  label,
+  required = false,
+}: FormCheckboxProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <div className="flex items-center space-x-2">
+            <FormControl>
+              <input
+                id={name}
+                type="checkbox"
+                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
+                checked={!!field.value}
+                onChange={field.onChange}
+                ref={field.ref}
+                required={required}
+              />
+            </FormControl>
+            <FormLabel htmlFor={name} className="text-sm text-gray-600">
+              {label}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </FormLabel>
+          </div>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export default FormCheckbox;
diff --git a/src/components/shared/Form/FormInput/FormInput.tsx b/src/components/shared/Form/FormInput/FormInput.tsx
new file mode 100644
index 0000000..4386e32
--- /dev/null
+++ b/src/components/shared/Form/FormInput/FormInput.tsx
@@ -0,0 +1,46 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+
+type FormInputProps<T extends FieldValues> = {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  placeholder?: string;
+  type?: string;
+  required?: boolean;
+};
+
+export function FormInput<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  type = "text",
+  required = false,
+}: FormInputProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>
+            {label} {required && <span className="text-destructive">*</span>}
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              placeholder={placeholder}
+              type={type}
+              required={required}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export default FormInput;
\ No newline at end of file
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..524b986
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..fb5fbc3
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

From 919a56aab5c8f767a63a7a1567d6470b77d13c15 Mon Sep 17 00:00:00 2001
From: Ronald Gene <regenify.base.eth@gmail.com>
Date: Tue, 23 Sep 2025 05:16:47 -0600
Subject: [PATCH 4/5] refactor: Standardize input type naming for signin and
 signup; enhance form components with default values and improved validation

---
 src/actions/auth/signin/logic.ts              |  4 +-
 src/actions/auth/signin/schema.ts             |  2 +-
 src/actions/auth/signup/logic.ts              |  4 +-
 src/actions/auth/signup/schema.ts             |  2 +-
 src/app/(auth)/signup/page.tsx                |  2 -
 .../pages/signin/SigninPageContainer.tsx      | 12 ++-
 .../pages/signup/SignupPageContainer.tsx      | 15 +++-
 .../shared/Form/FormButton/FormButton.tsx     |  2 +-
 .../shared/Form/FormInput/FormInput.tsx       | 81 ++++++++++++++-----
 9 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/src/actions/auth/signin/logic.ts b/src/actions/auth/signin/logic.ts
index 7f89554..3f78998 100644
--- a/src/actions/auth/signin/logic.ts
+++ b/src/actions/auth/signin/logic.ts
@@ -1,13 +1,13 @@
 import 'server-only';
 
 import { prisma } from "@/lib/prisma";
-import { signinInput } from "./schema";
 import bcrypt from "bcryptjs";
 import { error, Result, success } from "@/lib/result";
 import { getSession } from "@/lib/session";
 import type { User } from "@prisma/client";
+import { SigninInput } from './schema';
 
-export async function signin(input: signinInput): Promise<Result<Omit<User, 'password'>>> {
+export async function signin(input: SigninInput): Promise<Result<Omit<User, 'password'>>> {
     const { email, password } = input;
 
     const normalisedEmail = email.toLowerCase().trim();
diff --git a/src/actions/auth/signin/schema.ts b/src/actions/auth/signin/schema.ts
index 995d4fa..7bb7c7b 100644
--- a/src/actions/auth/signin/schema.ts
+++ b/src/actions/auth/signin/schema.ts
@@ -5,4 +5,4 @@ export const signinSchema = z.object({
     password: z.string().min(1,'Password is required')
 });
 
-export type signinInput = z.infer<typeof signinSchema>
\ No newline at end of file
+export type SigninInput = z.infer<typeof signinSchema>
\ No newline at end of file
diff --git a/src/actions/auth/signup/logic.ts b/src/actions/auth/signup/logic.ts
index 45a4396..e62f656 100644
--- a/src/actions/auth/signup/logic.ts
+++ b/src/actions/auth/signup/logic.ts
@@ -2,12 +2,12 @@ import 'server-only';
 
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcryptjs";
-import { signupInput } from "./schema";
 import { error, Result, success } from "@/lib/result";
 import { getSession } from "@/lib/session";
 import type { User } from "@prisma/client";
+import { SignupInput } from './schema';
 
-export async function Signup(input: signupInput): Promise<Result<User>> {
+export async function Signup(input: SignupInput): Promise<Result<User>> {
     const { email, name, password } = input;
 
     const normalisedEmail = email.toLowerCase().trim();
diff --git a/src/actions/auth/signup/schema.ts b/src/actions/auth/signup/schema.ts
index fbaed25..fc139f7 100644
--- a/src/actions/auth/signup/schema.ts
+++ b/src/actions/auth/signup/schema.ts
@@ -19,4 +19,4 @@ export const signupSchema = z
         path: ['confirmPassword'],
     });
 
-export type signupInput = z.infer<typeof signupSchema>
\ No newline at end of file
+export type SignupInput = z.infer<typeof signupSchema>
\ No newline at end of file
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index 28e1598..a472aa4 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -2,8 +2,6 @@ import SignupPageContainer from "@/components/pages/signup/SignupPageContainer";
 
 export default function Signup(){
   return(
-    <div>
       <SignupPageContainer/>
-    </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/pages/signin/SigninPageContainer.tsx b/src/components/pages/signin/SigninPageContainer.tsx
index a11e710..78dca4e 100644
--- a/src/components/pages/signin/SigninPageContainer.tsx
+++ b/src/components/pages/signin/SigninPageContainer.tsx
@@ -15,11 +15,11 @@ import { useForm } from "react-hook-form";
 import { useAction } from "next-safe-action/hooks";
 import { Form } from "@/components/ui/form";
 import FormInput from "@/components/shared/Form/FormInput/FormInput";
-import FormButton from "@/components/shared/Form/FormButton/FormButton";
 import { signinSchema } from "@/actions/auth/signin/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { toast } from "sonner";
+import { FormButton } from "@/components/shared/Form/FormButton/FormButton";
 
 type SignInFormValues = z.infer<typeof signinSchema>;
 
@@ -27,6 +27,10 @@ export default function SigninPageContainer() {
   const form = useForm<SignInFormValues>({
     mode: "onChange",
     resolver: zodResolver(signinSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
   });
   const router = useRouter();
 
@@ -94,7 +98,11 @@ export default function SigninPageContainer() {
               <FormButton
                 className="w-full"
                 loading={isExecuting}
-                disabled={!form.formState.isValid || isExecuting}
+                disabled={
+                  !form.formState.isValid ||
+                  !form.formState.isDirty ||
+                  isExecuting
+                }
               >
                 Sign in
               </FormButton>
diff --git a/src/components/pages/signup/SignupPageContainer.tsx b/src/components/pages/signup/SignupPageContainer.tsx
index dc93ef3..b2c6664 100644
--- a/src/components/pages/signup/SignupPageContainer.tsx
+++ b/src/components/pages/signup/SignupPageContainer.tsx
@@ -15,11 +15,11 @@ import { useAction } from "next-safe-action/hooks";
 import { Form } from "@/components/ui/form";
 import FormInput from "@/components/shared/Form/FormInput/FormInput";
 import FormCheckbox from "@/components/shared/Form/FormCheckbox/FormCheckbox";
-import FormButton from "@/components/shared/Form/FormButton/FormButton";
 import { signupSchema } from "@/actions/auth/signup/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { toast } from "sonner";
+import { FormButton } from "@/components/shared/Form/FormButton/FormButton";
 
 type SignUpFormValues = z.infer<typeof signupSchema>;
 
@@ -27,6 +27,13 @@ export default function SignupPageContainer() {
   const form = useForm<SignUpFormValues>({
     mode: "onChange",
     resolver: zodResolver(signupSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+      terms: true,
+    },
   });
   const router = useRouter();
 
@@ -121,7 +128,11 @@ export default function SignupPageContainer() {
               <FormButton
                 className="w-full"
                 loading={isExecuting}
-                disabled={!form.formState.isValid || isExecuting}
+                disabled={
+                  !form.formState.isValid ||
+                  !form.formState.isDirty ||
+                  isExecuting
+                }
               >
                 Create account
               </FormButton>
diff --git a/src/components/shared/Form/FormButton/FormButton.tsx b/src/components/shared/Form/FormButton/FormButton.tsx
index f51e074..6771dcd 100644
--- a/src/components/shared/Form/FormButton/FormButton.tsx
+++ b/src/components/shared/Form/FormButton/FormButton.tsx
@@ -8,7 +8,7 @@ type FormButtonProps = {
   children: React.ReactNode;
 };
 
-export default function FormButton({
+export function FormButton({
   type = "submit",
   loading = false,
   disabled = false,
diff --git a/src/components/shared/Form/FormInput/FormInput.tsx b/src/components/shared/Form/FormInput/FormInput.tsx
index 4386e32..515dee1 100644
--- a/src/components/shared/Form/FormInput/FormInput.tsx
+++ b/src/components/shared/Form/FormInput/FormInput.tsx
@@ -1,24 +1,38 @@
 import { Control, FieldValues, Path } from "react-hook-form";
 import { Input } from "@/components/ui/input";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
-
-type FormInputProps<T extends FieldValues> = {
-  control: Control<T>;
-  name: Path<T>;
-  label: string;
-  placeholder?: string;
-  type?: string;
-  required?: boolean;
-};
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 
 export function FormInput<T extends FieldValues>({
+  placeholder,
   control,
   name,
   label,
-  placeholder,
   type = "text",
   required = false,
-}: FormInputProps<T>) {
+  helperText,
+  endComponent,
+  min,
+  step,
+  max,
+}: {
+  max?: number;
+  step?: number;
+  label: string;
+  placeholder: string;
+  control: Control<T>;
+  name: Path<T>;
+  type?: React.HTMLInputTypeAttribute;
+  required?: boolean;
+  helperText?: string;
+  endComponent?: React.ReactNode;
+  min?: number;
+}) {
   return (
     <FormField
       control={control}
@@ -26,16 +40,39 @@ export function FormInput<T extends FieldValues>({
       render={({ field }) => (
         <FormItem>
           <FormLabel>
-            {label} {required && <span className="text-destructive">*</span>}
+            {label} {required && <span className="text-red-500">*</span>}
           </FormLabel>
-          <FormControl>
-            <Input
-              {...field}
-              placeholder={placeholder}
-              type={type}
-              required={required}
-            />
-          </FormControl>
+          <div className="flex flex-row gap-2">
+            <FormControl>
+              <Input
+                placeholder={placeholder}
+                {...field}
+                min={min}
+                max={max}
+                step={step}
+                onChange={(e) => {
+                  if (type === "number") {
+                    const value = e.target.value;
+                    if (value === "" || value === null || value === undefined) {
+                      field.onChange(null);
+                    } else {
+                      field.onChange(Number(value));
+                    }
+                  } else {
+                    field.onChange(e.target.value);
+                  }
+                }}
+                type={type}
+                required={required}
+              />
+            </FormControl>
+            {endComponent}
+          </div>
+          {helperText && (
+            <div className="text-sm text-gray-500 dark:text-gray-400 my-1">
+              {helperText}
+            </div>
+          )}
           <FormMessage />
         </FormItem>
       )}
@@ -43,4 +80,4 @@ export function FormInput<T extends FieldValues>({
   );
 }
 
-export default FormInput;
\ No newline at end of file
+export default FormInput;

From 91ccaae012f8ade2f89d3cdc047917513ea2b06d Mon Sep 17 00:00:00 2001
From: Ronald Gene <regenify.base.eth@gmail.com>
Date: Fri, 26 Sep 2025 04:01:33 -0600
Subject: [PATCH 5/5] refactor: Rename Signup function to signup for
 consistency; update imports in related files; add FormInput and FormCheckbox
 components

---
 src/actions/auth/signup/action.ts                 |  4 ++--
 src/actions/auth/signup/logic.ts                  |  7 +++++--
 src/app/(auth)/signin/page.tsx                    |  4 +++-
 src/app/(auth)/signup/page.tsx                    |  2 +-
 .../pages/signin/SigninPageContainer.tsx          | 15 +++------------
 .../pages/signup/SignupPageContainer.tsx          |  8 ++++----
 .../shared/Form/{FormButton => }/FormButton.tsx   |  0
 .../Form/{FormCheckbox => }/FormCheckbox.tsx      |  0
 .../shared/Form/{FormInput => }/FormInput.tsx     |  0
 9 files changed, 18 insertions(+), 22 deletions(-)
 rename src/components/shared/Form/{FormButton => }/FormButton.tsx (100%)
 rename src/components/shared/Form/{FormCheckbox => }/FormCheckbox.tsx (100%)
 rename src/components/shared/Form/{FormInput => }/FormInput.tsx (100%)

diff --git a/src/actions/auth/signup/action.ts b/src/actions/auth/signup/action.ts
index fb84552..f2ca780 100644
--- a/src/actions/auth/signup/action.ts
+++ b/src/actions/auth/signup/action.ts
@@ -1,7 +1,7 @@
 'use server';
 
 import { actionClient } from '@/lib/action';
-import { Signup} from './logic';
+import { signup} from './logic';
 import { signupSchema} from './schema';
 
 export const signupAction = actionClient
@@ -9,7 +9,7 @@ export const signupAction = actionClient
   .metadata({ actionName: 'signup' })
   .action(async ({ parsedInput }) => {
     try {
-      const result = await Signup(parsedInput);
+      const result = await signup(parsedInput);
 
       if (result.success) {
         return result.data;
diff --git a/src/actions/auth/signup/logic.ts b/src/actions/auth/signup/logic.ts
index e62f656..078f63b 100644
--- a/src/actions/auth/signup/logic.ts
+++ b/src/actions/auth/signup/logic.ts
@@ -7,7 +7,7 @@ import { getSession } from "@/lib/session";
 import type { User } from "@prisma/client";
 import { SignupInput } from './schema';
 
-export async function Signup(input: SignupInput): Promise<Result<User>> {
+export async function signup(input: SignupInput): Promise<Result<Omit<User, 'password'>>> {
     const { email, name, password } = input;
 
     const normalisedEmail = email.toLowerCase().trim();
@@ -34,5 +34,8 @@ export async function Signup(input: SignupInput): Promise<Result<User>> {
     session.user = { id: user.id };
     await session.save();
 
-    return success(user);
+    // Omit password before returning
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { password: _password, ...userWithoutPassword } = user;
+    return success(userWithoutPassword);
 }
\ No newline at end of file
diff --git a/src/app/(auth)/signin/page.tsx b/src/app/(auth)/signin/page.tsx
index bf85d52..69da413 100644
--- a/src/app/(auth)/signin/page.tsx
+++ b/src/app/(auth)/signin/page.tsx
@@ -1,6 +1,8 @@
 "use client";
 
-import SigninPageContainer from "@/components/pages/signin/SigninPageContainer";
+import { SigninPageContainer } from "@/components/pages/signin/SigninPageContainer";
+
+
 
 export default function SignInPage() {
   return <SigninPageContainer />;
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index a472aa4..8548712 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -1,4 +1,4 @@
-import SignupPageContainer from "@/components/pages/signup/SignupPageContainer";
+import { SignupPageContainer } from "@/components/pages/signup/SignupPageContainer";
 
 export default function Signup(){
   return(
diff --git a/src/components/pages/signin/SigninPageContainer.tsx b/src/components/pages/signin/SigninPageContainer.tsx
index 78dca4e..cc9af05 100644
--- a/src/components/pages/signin/SigninPageContainer.tsx
+++ b/src/components/pages/signin/SigninPageContainer.tsx
@@ -14,16 +14,16 @@ import { signinAction } from "@/actions/auth/signin/action";
 import { useForm } from "react-hook-form";
 import { useAction } from "next-safe-action/hooks";
 import { Form } from "@/components/ui/form";
-import FormInput from "@/components/shared/Form/FormInput/FormInput";
+import FormInput from "@/components/shared/Form/FormInput";
 import { signinSchema } from "@/actions/auth/signin/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { toast } from "sonner";
-import { FormButton } from "@/components/shared/Form/FormButton/FormButton";
+import { FormButton } from "@/components/shared/Form/FormButton";
 
 type SignInFormValues = z.infer<typeof signinSchema>;
 
-export default function SigninPageContainer() {
+export function SigninPageContainer() {
   const form = useForm<SignInFormValues>({
     mode: "onChange",
     resolver: zodResolver(signinSchema),
@@ -83,15 +83,6 @@ export default function SigninPageContainer() {
                 type="password"
                 required
               />
-
-              <div className="flex justify-end mb-3">
-                <Link
-                  href="/auth/forgot-password"
-                  className="text-sm text-blue-600 hover:underline"
-                >
-                  Forgot password?
-                </Link>
-              </div>
             </CardContent>
 
             <CardFooter className="flex flex-col space-y-4">
diff --git a/src/components/pages/signup/SignupPageContainer.tsx b/src/components/pages/signup/SignupPageContainer.tsx
index b2c6664..f32a16d 100644
--- a/src/components/pages/signup/SignupPageContainer.tsx
+++ b/src/components/pages/signup/SignupPageContainer.tsx
@@ -13,17 +13,17 @@ import { signupAction } from "@/actions/auth/signup/action";
 import { useForm } from "react-hook-form";
 import { useAction } from "next-safe-action/hooks";
 import { Form } from "@/components/ui/form";
-import FormInput from "@/components/shared/Form/FormInput/FormInput";
-import FormCheckbox from "@/components/shared/Form/FormCheckbox/FormCheckbox";
+import FormInput from "@/components/shared/Form/FormInput";
+import FormCheckbox from "@/components/shared/Form/FormCheckbox";
 import { signupSchema } from "@/actions/auth/signup/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { toast } from "sonner";
-import { FormButton } from "@/components/shared/Form/FormButton/FormButton";
+import { FormButton } from "@/components/shared/Form/FormButton";
 
 type SignUpFormValues = z.infer<typeof signupSchema>;
 
-export default function SignupPageContainer() {
+export function SignupPageContainer() {
   const form = useForm<SignUpFormValues>({
     mode: "onChange",
     resolver: zodResolver(signupSchema),
diff --git a/src/components/shared/Form/FormButton/FormButton.tsx b/src/components/shared/Form/FormButton.tsx
similarity index 100%
rename from src/components/shared/Form/FormButton/FormButton.tsx
rename to src/components/shared/Form/FormButton.tsx
diff --git a/src/components/shared/Form/FormCheckbox/FormCheckbox.tsx b/src/components/shared/Form/FormCheckbox.tsx
similarity index 100%
rename from src/components/shared/Form/FormCheckbox/FormCheckbox.tsx
rename to src/components/shared/Form/FormCheckbox.tsx
diff --git a/src/components/shared/Form/FormInput/FormInput.tsx b/src/components/shared/Form/FormInput.tsx
similarity index 100%
rename from src/components/shared/Form/FormInput/FormInput.tsx
rename to src/components/shared/Form/FormInput.tsx