From a2216b44db52ac38efbc270ce7fd0069c0014029 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Thu, 2 Oct 2025 23:56:20 +0700
Subject: [PATCH] :truck: (mv) separating card from other components

---
 features/auth/pages/LoginPage.tsx             |  2 +-
 features/auth/pages/SignupPage.tsx            |  2 +-
 features/auth/ui/{ => cards}/Login.tsx        |  4 +-
 features/auth/ui/{ => cards}/Signup.tsx       | 16 ++------
 .../auth/ui/{ => components}/EmailInput.tsx   |  0
 features/auth/ui/components/FullNameInput.tsx | 38 +++++++++++++++++++
 .../ui/{ => components}/OAuthProviders.tsx    |  9 ++---
 7 files changed, 50 insertions(+), 21 deletions(-)
 rename features/auth/ui/{ => cards}/Login.tsx (90%)
 rename features/auth/ui/{ => cards}/Signup.tsx (74%)
 rename features/auth/ui/{ => components}/EmailInput.tsx (100%)
 create mode 100644 features/auth/ui/components/FullNameInput.tsx
 rename features/auth/ui/{ => components}/OAuthProviders.tsx (89%)

diff --git a/features/auth/pages/LoginPage.tsx b/features/auth/pages/LoginPage.tsx
index ae789b6..0456b53 100644
--- a/features/auth/pages/LoginPage.tsx
+++ b/features/auth/pages/LoginPage.tsx
@@ -2,7 +2,7 @@
 
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import Login from "@/features/auth/ui/Login";
+import Login from "@/features/auth/ui/cards/Login";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 
diff --git a/features/auth/pages/SignupPage.tsx b/features/auth/pages/SignupPage.tsx
index b5aacbb..257bae8 100644
--- a/features/auth/pages/SignupPage.tsx
+++ b/features/auth/pages/SignupPage.tsx
@@ -4,7 +4,7 @@ import { redirect } from "next/navigation";
 import React, { JSX, useEffect, useState } from "react";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
-import Signup from "../ui/Signup";
+import Signup from "../ui/cards/Signup";
 
 const SignupPage = () => {
   // State to set the current page component
diff --git a/features/auth/ui/Login.tsx b/features/auth/ui/cards/Login.tsx
similarity index 90%
rename from features/auth/ui/Login.tsx
rename to features/auth/ui/cards/Login.tsx
index f64bbdf..6a605ba 100644
--- a/features/auth/ui/Login.tsx
+++ b/features/auth/ui/cards/Login.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import EmailInput from "./EmailInput";
 import { Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
-import OAuthProviders from "./OAuthProviders";
+import EmailInput from "../components/EmailInput";
+import OAuthProviders from "../components/OAuthProviders";
 
 const Login = () => {
   return (
diff --git a/features/auth/ui/Signup.tsx b/features/auth/ui/cards/Signup.tsx
similarity index 74%
rename from features/auth/ui/Signup.tsx
rename to features/auth/ui/cards/Signup.tsx
index c3749c2..fb7f4a2 100644
--- a/features/auth/ui/Signup.tsx
+++ b/features/auth/ui/cards/Signup.tsx
@@ -1,11 +1,10 @@
 "use client";
 
 import React from "react";
-import EmailInput from "./EmailInput";
-import { Button, Divider, Link } from "@heroui/react";
+import { Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
-import OAuthProviders from "./OAuthProviders";
-import DebugPage from "@/app/debug/DebugPage";
+import OAuthProviders from "../components/OAuthProviders";
+import FullNameInput from "../components/FullNameInput";
 
 type Props = {
   changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
@@ -18,14 +17,7 @@ const Signup = ({ changeCurrentPage }: Props) => {
 
       {/* Email form */}
       <div className="mt-6 px-3">
-        <EmailInput />
-        <Button
-          onPress={() => changeCurrentPage(<DebugPage />)}
-          className="mt-2 w-full"
-          color="primary"
-        >
-          For debug only
-        </Button>
+        <FullNameInput changeCurrentPage={changeCurrentPage} />
       </div>
 
       {/* Sign up link */}
diff --git a/features/auth/ui/EmailInput.tsx b/features/auth/ui/components/EmailInput.tsx
similarity index 100%
rename from features/auth/ui/EmailInput.tsx
rename to features/auth/ui/components/EmailInput.tsx
diff --git a/features/auth/ui/components/FullNameInput.tsx b/features/auth/ui/components/FullNameInput.tsx
new file mode 100644
index 0000000..fc6a424
--- /dev/null
+++ b/features/auth/ui/components/FullNameInput.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Input } from "@heroui/react";
+import DebugPage from "@/app/debug/DebugPage";
+
+type Props = {
+  changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
+};
+
+const FullNameInput = ({ changeCurrentPage }: Props) => {
+  const [fullName, setFullName] = useState("");
+
+  return (
+    <>
+      <Input
+        className="w-full "
+        label="Full Name"
+        type="name"
+        variant="bordered"
+        onChange={(e) => setFullName(e.target.value)}
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button
+        onPress={() => changeCurrentPage(<DebugPage />)}
+        className="mt-2 w-full"
+        color="primary"
+      >
+        Continue
+      </Button>
+    </>
+  );
+};
+
+export default FullNameInput;
diff --git a/features/auth/ui/OAuthProviders.tsx b/features/auth/ui/components/OAuthProviders.tsx
similarity index 89%
rename from features/auth/ui/OAuthProviders.tsx
rename to features/auth/ui/components/OAuthProviders.tsx
index d427c0a..1bfbb4e 100644
--- a/features/auth/ui/OAuthProviders.tsx
+++ b/features/auth/ui/components/OAuthProviders.tsx
@@ -1,13 +1,12 @@
 "use client";
 
-import { OauthProviders } from "../types/oauthProvidersList";
-import { ResponseRequestOauthUrl } from "../types/responseRequestOauthUrl";
-
 import React, { useEffect, useState } from "react";
+import { OauthProviders } from "../../types/oauthProvidersList";
+import { ResponseRequestOauthUrl } from "../../types/responseRequestOauthUrl";
 import { Button } from "@heroui/react";
 import { Icon } from "@iconify/react";
-import getOauthProviderList from "../lib/getOauthProviderList";
-import requestOauthUrl from "../lib/requestOauthUrl";
+import getOauthProviderList from "../../lib/getOauthProviderList";
+import requestOauthUrl from "../../lib/requestOauthUrl";
 
 const OAuthProviders = () => {
   // Set initial state for OAuth providers list