From 02a4b3a3d133e61433196841cb2a9a558bbb7cfc Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Wed, 20 Aug 2025 22:07:12 +0700
Subject: [PATCH] :sparkles: create new signup page

---
 app/(auth)/signup/metadata.tsx     |  5 +++
 app/(auth)/signup/page.tsx         | 11 ++++++
 features/auth/pages/SignupPage.tsx | 57 ++++++++++++++++++++++++++++++
 features/auth/ui/Signup.tsx        | 42 ++++++++++++++++++++++
 4 files changed, 115 insertions(+)
 create mode 100644 app/(auth)/signup/metadata.tsx
 create mode 100644 app/(auth)/signup/page.tsx
 create mode 100644 features/auth/pages/SignupPage.tsx
 create mode 100644 features/auth/ui/Signup.tsx

diff --git a/app/(auth)/signup/metadata.tsx b/app/(auth)/signup/metadata.tsx
new file mode 100644
index 0000000..77bb0d4
--- /dev/null
+++ b/app/(auth)/signup/metadata.tsx
@@ -0,0 +1,5 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Sign Up | Nounoz TV",
+};
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
new file mode 100644
index 0000000..fb33e99
--- /dev/null
+++ b/app/(auth)/signup/page.tsx
@@ -0,0 +1,11 @@
+import SignupPage from "@/features/auth/pages/SignupPage";
+import { metadata } from "./metadata";
+export { metadata };
+
+import React from "react";
+
+const page = () => {
+  return <SignupPage />;
+};
+
+export default page;
diff --git a/features/auth/pages/SignupPage.tsx b/features/auth/pages/SignupPage.tsx
new file mode 100644
index 0000000..e999e14
--- /dev/null
+++ b/features/auth/pages/SignupPage.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+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 disableDevtool from "disable-devtool";
+import Signup from "../ui/Signup";
+
+const SignupPage = () => {
+  /**
+   * 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 />,
+    SecurityCheckupSuccessed: <Signup />,
+  };
+
+  // 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.SecurityCheckupSuccessed);
+    } else {
+      setComponentFlow(componentFlowList.securityCheckupFailed);
+
+      const timer = setTimeout(() => {
+        redirect("/");
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return (
+    <>
+      {/* show the current component flow */}
+      <main>{componentFlow}</main>
+    </>
+  );
+};
+
+export default SignupPage;
diff --git a/features/auth/ui/Signup.tsx b/features/auth/ui/Signup.tsx
new file mode 100644
index 0000000..d6cf8a0
--- /dev/null
+++ b/features/auth/ui/Signup.tsx
@@ -0,0 +1,42 @@
+"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";
+
+const Signup = () => {
+  return (
+    <div className="pt-12 max-w-[480px] mx-auto">
+      <div className="text-3xl text-center">Create an account</div>
+
+      {/* Email form */}
+      <div className="mt-6 px-3">
+        <EmailInput />
+      </div>
+
+      {/* Sign up 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-6 px-10">
+        <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 */}
+      <div className="mt-6 px-4">
+        <OAuthProviders />
+      </div>
+    </div>
+  );
+};
+
+export default Signup;