From 8e698194443dc950ba305ed4890ef200b992008a Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Thu, 2 Oct 2025 10:33:40 +0700
Subject: [PATCH] :construction: (wip) proping function into page component

Prop the page component state function on the main to the page component so that the page can be changed from the page
component. Used for step-by-step login procedures.
---
 features/auth/pages/SignupPage.tsx | 20 +++++++++-----------
 features/auth/ui/Signup.tsx        | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/features/auth/pages/SignupPage.tsx b/features/auth/pages/SignupPage.tsx
index c4f4215..b5aacbb 100644
--- a/features/auth/pages/SignupPage.tsx
+++ b/features/auth/pages/SignupPage.tsx
@@ -1,29 +1,27 @@
 "use client";
 
 import { redirect } from "next/navigation";
-import React, { useEffect, useState } from "react";
+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";
 
 const SignupPage = () => {
+  // State to set the current page component
+  const [componentFlow, setComponentFlow] = useState<JSX.Element>(
+    <SecurityCheckup />
+  );
+
   /**
    * Create a lit component that will be used in popp, consisting of 3 component flows:
-   * 1. When the user opens it, a browser environment check will be performed.
-   * 2. If it passes, the login component will appear and the user will perform authentication.
-   * 3. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
+   * 1. If it passes, the login component will appear and the user will perform authentication.
+   * 2. If it fails, stop the authentication process and display the warning component, then return the user to the homepage.
    */
   const componentFlowList = {
-    securityCheckup: <SecurityCheckup />,
     securityCheckupFailed: <SecurityCheckupFailed />,
-    SecurityCheckupSuccessed: <Signup />,
+    SecurityCheckupSuccessed: <Signup changeCurrentPage={setComponentFlow} />,
   };
 
-  // State to set the current page component
-  const [componentFlow, setComponentFlow] = useState(
-    componentFlowList.securityCheckup
-  );
-
   useEffect(() => {
     /**
      * Check if the window has an opener (i.e., it was opened by another window)
diff --git a/features/auth/ui/Signup.tsx b/features/auth/ui/Signup.tsx
index d6cf8a0..c3749c2 100644
--- a/features/auth/ui/Signup.tsx
+++ b/features/auth/ui/Signup.tsx
@@ -2,11 +2,16 @@
 
 import React from "react";
 import EmailInput from "./EmailInput";
-import { Divider, Link } from "@heroui/react";
+import { Button, Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
 import OAuthProviders from "./OAuthProviders";
+import DebugPage from "@/app/debug/DebugPage";
 
-const Signup = () => {
+type Props = {
+  changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
+};
+
+const Signup = ({ changeCurrentPage }: Props) => {
   return (
     <div className="pt-12 max-w-[480px] mx-auto">
       <div className="text-3xl text-center">Create an account</div>
@@ -14,6 +19,13 @@ const Signup = () => {
       {/* Email form */}
       <div className="mt-6 px-3">
         <EmailInput />
+        <Button
+          onPress={() => changeCurrentPage(<DebugPage />)}
+          className="mt-2 w-full"
+          color="primary"
+        >
+          For debug only
+        </Button>
       </div>
 
       {/* Sign up link */}