👔 complete handler callback

Complete the logic checking and loading on the OAuth module callback handler.

features/auth/pages/LoginPage.tsx

@@ -3,8 +3,8 @@
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import Login from "@/features/auth/ui/Login";
-import SecurityCheckup from "@/features/auth/ui/SecurityCheckup";
-import SecurityCheckupFailed from "@/features/auth/ui/SecurityCheckupFailed";
+import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
+import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 
 const LoginPage = () => {
   /**

features/auth/pages/SignupPage.tsx

@@ -2,8 +2,8 @@
 
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import SecurityCheckup from "@/features/auth/ui/SecurityCheckup";
-import SecurityCheckupFailed from "@/features/auth/ui/SecurityCheckupFailed";
+import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
+import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 import disableDevtool from "disable-devtool";
 import Signup from "../ui/Signup";
 

features/auth/ui/SecurityCheckup.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-const SecurityCheckup = () => {
-  return (
-    <div className="flex justify-center">
-      <div className="max-w-[60vh]">
-        <h1 className="mt-[20vh] text-2xl text-center">Please wait...</h1>
-        <p className="mt-4 text-sm text-center text-neutral-400">
-          We want to ensure a secure authentication environment before
-          proceeding for your safety.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default SecurityCheckup;

features/auth/ui/SecurityCheckupFailed.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-
-const SecurityCheckupFailed = () => {
-  return (
-    <div className="flex justify-center">
-      <div className="max-w-[60vh]">
-        <h1 className="mt-[20vh] text-2xl text-center text-red-400">
-          Your browser is not secure
-        </h1>
-        <p className="mt-4 text-sm text-center text-neutral-400">
-          Sorry, we had to stop the authentication process and return you to the
-          home page because your browser environment is not secure.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default SecurityCheckupFailed;

features/oauth-callback/pages/callbackHandler.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { redirect } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
+import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
+import LoadingProcess from "../ui/LoadingProcess";
+
+const OauthCallbackHandler = () => {
+  /**
+   * 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.
+   */
+  const componentFlowList = {
+    securityCheckup: <SecurityCheckup />,
+    securityCheckupFailed: <SecurityCheckupFailed />,
+    proceedCallback: <LoadingProcess />,
+  };
+
+  // State to set the current page component
+  const [componentFlow, setComponentFlow] = useState(
+    componentFlowList.securityCheckup
+  );
+
+  useEffect(() => {
+    // Prevent opening devtools while in authentication page
+    // disableDevtool();
+
+    /**
+     * Check if the window has an opener (i.e., it was opened by another window)
+     * If it does, the security checkup has passed.
+     * If it doesn't, the security checkup has failed and user will be redirected to the homepage.
+     */
+    if (window.opener) {
+      setComponentFlow(componentFlowList.proceedCallback);
+    } else {
+      setComponentFlow(componentFlowList.securityCheckupFailed);
+
+      const timer = setTimeout(() => {
+        redirect("/");
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return (
+    <>
+      {/* show the current component flow */}
+      <main>{componentFlow}</main>
+    </>
+  );
+};
+
+export default OauthCallbackHandler;

features/oauth-callback/ui/LoadingProcess.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { CircularProgress } from "@heroui/react";
+import React from "react";
+
+const LoadingProcess = () => {
+  return (
+    <div className="w-full flex flex-col items-center text-center mt-[26vh]">
+      <CircularProgress aria-label="Loading..." size="lg" />
+      <div className="mt-4">
+        <h1 className="text-lg text-neutral-200">Please wait...</h1>
+        <p className="text-sm text-neutral-400">
+          Your request is being processed
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingProcess;