✨ create new signup page

app/(auth)/signup/metadata.tsx

@@ -0,0 +1,5 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Sign Up | Nounoz TV",
+};

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;

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;

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;