📝 creating docs for login page

features/auth/pages/LoginPage.tsx

@@ -5,19 +5,35 @@ 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 disableDevtool from "disable-devtool";
 
 const LoginPage = () => {
+  /**
+   * 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: <Login />,
   };
 
+  // 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 {
@@ -32,6 +48,7 @@ const LoginPage = () => {
 
   return (
     <>
+      {/* show the current component flow */}
       <main>{componentFlow}</main>
     </>
   );