🚧 (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

@@ -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.
+   * 1. If it passes, the login component will appear and the user will perform authentication.
-   * 2. 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.
-   * 3. 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)

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 */}