✨ creating login popup security check

Perform security checks on the login popup to minimize bugs in unexpected situations.

app/(auth)/login/metadata.tsx

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

app/(auth)/login/page.tsx

@@ -0,0 +1,11 @@
+import LoginPage from "@/features/auth/pages/LoginPage";
+import { metadata } from "./metadata";
+export { metadata };
+
+import React from "react";
+
+const page = () => {
+  return <LoginPage />;
+};
+
+export default page;

features/auth/pages/LoginPage.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+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";
+
+const LoginPage = () => {
+  const componentFlowList = {
+    securityCheckup: <SecurityCheckup />,
+    securityCheckupFailed: <SecurityCheckupFailed />,
+    SecurityCheckupSuccessed: <Login />,
+  };
+
+  const [componentFlow, setComponentFlow] = useState(
+    componentFlowList.securityCheckup
+  );
+
+  useEffect(() => {
+    if (window.opener) {
+      setComponentFlow(componentFlowList.SecurityCheckupSuccessed);
+    } else {
+      setComponentFlow(componentFlowList.securityCheckupFailed);
+
+      const timer = setTimeout(() => {
+        redirect("/");
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return (
+    <>
+      <main>{componentFlow}</main>
+    </>
+  );
+};
+
+export default LoginPage;

features/auth/ui/Login.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Login = () => {
+  return <div>This is login flow</div>;
+};
+
+export default Login;

features/auth/ui/SecurityCheckup.tsx

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,19 @@
+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;

shared/config/routes.ts

@@ -1,7 +1,7 @@
 export const routes = {
   home: "/",
-  login: "/log-in",
-  signup: "/sign-up",
+  login: "/login",
+  signup: "/signup",
   explore: "/explore",
   trending: "/trending",
   genres: "/genres",

widgets/navbar/ui/LoginAndSignup.tsx

@@ -5,12 +5,20 @@ import { Button, Link, NavbarItem } from "@heroui/react";
 import React from "react";
 
 const LoginAndSignup = () => {
+  const openLoginPopup = (e: any) => {
+    window.open(routes.login, "popup", "width=500,height=600");
+  };
   return (
     <>
       <NavbarItem className="hidden lg:flex">
-        <Link href={routes.login} className="font-medium">
+        <Button
+          color="primary"
+          variant="light"
+          className="font-medium"
+          onPress={openLoginPopup}
+        >
           Login
-        </Link>
+        </Button>
       </NavbarItem>
       <NavbarItem>
         <Button

widgets/navbar/ui/Navbar.tsx

@@ -86,7 +86,7 @@ const NavbarUI = () => {
         })}
       </NavbarContent>
 
-      <NavbarContent justify="end">
+      <NavbarContent justify="end" className="gap-1">
         <LoginAndSignup />
       </NavbarContent>