From fcebe9708df7ca2f6b3c726e3a9e11926532b6b2 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Tue, 5 Aug 2025 10:40:21 +0700
Subject: [PATCH] :truck: separating forms ui and logic

separate the form from other elements on the signup and login cards
---
 app/(auth)/log-in/page.tsx                    |  2 +-
 app/(auth)/sign-up/page.tsx                   |  6 +--
 features/auth/ui/LoginForm.tsx                | 30 ---------------
 features/login/ui/EmailForm.tsx               | 27 +++++++++++++
 .../signup/ui}/EmailForm.tsx                  |  0
 .../ContinueWithProviders.tsx                 |  3 +-
 .../login/LoginCard.tsx}                      |  6 +--
 widgets/authentication/signup/SignupCard.tsx  | 38 +++++++++++++++++++
 8 files changed, 74 insertions(+), 38 deletions(-)
 delete mode 100644 features/auth/ui/LoginForm.tsx
 create mode 100644 features/login/ui/EmailForm.tsx
 rename {widgets/login/loginCard => features/signup/ui}/EmailForm.tsx (100%)
 rename widgets/{login/loginCard => authentication}/ContinueWithProviders.tsx (93%)
 rename widgets/{login/loginCard/Index.tsx => authentication/login/LoginCard.tsx} (90%)
 create mode 100644 widgets/authentication/signup/SignupCard.tsx

diff --git a/app/(auth)/log-in/page.tsx b/app/(auth)/log-in/page.tsx
index 98fff1f..cda3971 100644
--- a/app/(auth)/log-in/page.tsx
+++ b/app/(auth)/log-in/page.tsx
@@ -1,4 +1,4 @@
-import LoginCard from "@/widgets/login/loginCard/Index";
+import LoginCard from "@/widgets/authentication/login/LoginCard";
 import React from "react";
 
 const page = () => {
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 73db833..28f22be 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -1,10 +1,10 @@
-import { Link } from "@heroui/react";
+import SignupCard from "@/widgets/authentication/signup/SignupCard";
 import React from "react";
 
 const page = () => {
   return (
-    <div>
-      <h1>Hello world</h1>
+    <div className="fixed z-10 w-screen h-screen flex justify-center items-center -mt-12">
+      <SignupCard />
     </div>
   );
 };
diff --git a/features/auth/ui/LoginForm.tsx b/features/auth/ui/LoginForm.tsx
deleted file mode 100644
index 74a2dfb..0000000
--- a/features/auth/ui/LoginForm.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import { Card, CardBody, CardHeader, Input } from "@heroui/react";
-import React from "react";
-
-const LoginForm = () => {
-  return (
-    <Card
-      className="min-w-[30vw]"
-      shadow="none"
-      classNames={{ base: "outline-1 outline-neutral-400" }}
-    >
-      <CardHeader className="mt-2 justify-center">
-        <h1 className="text-2xl font-medium text-center">Welcome Back</h1>
-      </CardHeader>
-      <CardBody className="px-4">
-        <Input
-          label="Email"
-          variant="bordered"
-          classNames={{
-            input: "focus:outline-none text-md",
-            label: "mb-1",
-          }}
-        />
-      </CardBody>
-    </Card>
-  );
-};
-
-export default LoginForm;
diff --git a/features/login/ui/EmailForm.tsx b/features/login/ui/EmailForm.tsx
new file mode 100644
index 0000000..d97df1a
--- /dev/null
+++ b/features/login/ui/EmailForm.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { Button, Form, Input } from "@heroui/react";
+import React from "react";
+
+const EmailForm = () => {
+  return (
+    // Form component to handle email input
+    <Form className="mt-12 sm:mt-8">
+      <Input
+        className="w-full "
+        label="Email"
+        type="email"
+        variant="bordered"
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button className="mt-2 w-full" color="primary">
+        Continue
+      </Button>
+    </Form>
+  );
+};
+
+export default EmailForm;
diff --git a/widgets/login/loginCard/EmailForm.tsx b/features/signup/ui/EmailForm.tsx
similarity index 100%
rename from widgets/login/loginCard/EmailForm.tsx
rename to features/signup/ui/EmailForm.tsx
diff --git a/widgets/login/loginCard/ContinueWithProviders.tsx b/widgets/authentication/ContinueWithProviders.tsx
similarity index 93%
rename from widgets/login/loginCard/ContinueWithProviders.tsx
rename to widgets/authentication/ContinueWithProviders.tsx
index d57b3c9..d7bdd29 100644
--- a/widgets/login/loginCard/ContinueWithProviders.tsx
+++ b/widgets/authentication/ContinueWithProviders.tsx
@@ -20,9 +20,10 @@ const ContinueWithProviders = () => {
 
   return (
     <div className="w-full flex flex-col gap-2 mt-4">
-      {oAuthProviders.map((provider) => {
+      {oAuthProviders.map((provider, index) => {
         return (
           <Button
+            key={index}
             className="w-full hover:bg-neutral-800"
             variant="bordered"
             startContent={<Icon icon={provider.icon} />}
diff --git a/widgets/login/loginCard/Index.tsx b/widgets/authentication/login/LoginCard.tsx
similarity index 90%
rename from widgets/login/loginCard/Index.tsx
rename to widgets/authentication/login/LoginCard.tsx
index b9ead72..a9d5d57 100644
--- a/widgets/login/loginCard/Index.tsx
+++ b/widgets/authentication/login/LoginCard.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { Card, Divider, Link } from "@heroui/react";
-import React from "react";
-import EmailForm from "./EmailForm";
-import ContinueWithProviders from "./ContinueWithProviders";
 import { routes } from "@/shared/config/routes";
+import React from "react";
+import ContinueWithProviders from "../ContinueWithProviders";
+import EmailForm from "@/features/login/ui/EmailForm";
 
 const LoginCard = () => {
   return (
diff --git a/widgets/authentication/signup/SignupCard.tsx b/widgets/authentication/signup/SignupCard.tsx
new file mode 100644
index 0000000..2439f31
--- /dev/null
+++ b/widgets/authentication/signup/SignupCard.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Card, Divider, Link } from "@heroui/react";
+import { routes } from "@/shared/config/routes";
+import React from "react";
+import ContinueWithProviders from "../ContinueWithProviders";
+import EmailForm from "@/features/signup/ui/EmailForm";
+
+const SignupCard = () => {
+  return (
+    <Card className="px-6 sm:px-8 py-12 sm:py-8 h-screen sm:h-auto w-screen sm:w-[460px]">
+      <h1 className="text-3xl font-light text-center">Create an account</h1>
+
+      {/* Email form */}
+      <EmailForm />
+
+      {/* Log in link */}
+      <p className="text-center text-neutral-300 text-sm font-light mt-5">
+        Already have an account?{" "}
+        <Link className="text-sm font-medium" href={routes.login}>
+          Log in
+        </Link>
+      </p>
+
+      {/* Divider between email form and third-party login options */}
+      <div className="flex w-full items-center mt-4">
+        <Divider className="flex-1" />
+        <span className="px-2 text-neutral-500 text-sm">or</span>
+        <Divider className="flex-1" />
+      </div>
+
+      {/* Buttons for third-party login options */}
+      <ContinueWithProviders />
+    </Card>
+  );
+};
+
+export default SignupCard;