📝 creating docs for login page

bun.lock

@@ -9,6 +9,7 @@
         "@tailwindcss/postcss": "^4.1.11",
         "commitizen": "^4.3.1",
         "cz-emoji": "^1.3.2-canary.2",
+        "disable-devtool": "^0.3.9",
         "framer-motion": "^12.23.3",
         "ky": "^1.8.2",
         "next": "15.3.5",
@@ -791,6 +792,8 @@
 
     "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
 
+    "disable-devtool": ["disable-devtool@0.3.9", "", {}, "sha512-WHCpC8f93Cn2DnTeaq57NFLcdw4921sovh1ammnp/2o8Snb704HK/Vw1/D2D1Pihc0zc8/mVKb5nchHtoadObQ=="],
+
     "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],

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>
     </>
   );

package.json

@@ -18,6 +18,7 @@
     "@tailwindcss/postcss": "^4.1.11",
     "commitizen": "^4.3.1",
     "cz-emoji": "^1.3.2-canary.2",
+    "disable-devtool": "^0.3.9",
     "framer-motion": "^12.23.3",
     "ky": "^1.8.2",
     "next": "15.3.5",