fix: proper page names

web/src/App.tsx

@@ -4,8 +4,8 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import IndexPage from "./pages/Index";
 import LoginPage from "./pages/Login";
 import RegisterPage from "./pages/Register";
-import AgreementPage from "./pages/Agreement";
+import AuthorizePage from "./pages/Authorize";
-import OAuthAuthorizePage from "./pages/Authorize";
+import AuthenticatePage from "./pages/Authenticate";
 import AuthLayout from "./layout/AuthLayout";
 
 const router = createBrowserRouter([
@@ -14,10 +14,10 @@ const router = createBrowserRouter([
     element: <AuthLayout />,
     children: [
       { index: true, element: <IndexPage /> },
-      { path: "agreement", element: <AgreementPage /> },
+      { path: "authorize", element: <AuthorizePage /> },
       { path: "login", element: <LoginPage /> },
       { path: "register", element: <RegisterPage /> },
-      { path: "authorize", element: <OAuthAuthorizePage /> },
+      { path: "authenticate", element: <AuthenticatePage /> },
     ],
   },
 ]);

web/src/pages/Agreement/index.tsx

@@ -1,114 +0,0 @@
-import { type FC } from "react";
-
-import { Card, CardContent } from "@/components/ui/card";
-import { ArrowLeftRight, ChevronDown } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import Avatar from "@/feature/Avatar";
-import { useAuth } from "@/store/auth";
-
-const AgreementPage: FC = () => {
-  const promptAccountSelection = useAuth((state) => state.deleteActiveAccount);
-
-  return (
-    <div
-      className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
-    >
-      <div className="relative z-10 flex items-center justify-center min-h-screen">
-        <Card className="sm:w-[425px] sm:min-w-[425px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
-          <div className="flex flex-col items-center pt-10 sm:pt-0">
-            <div className="flex flex-col items-center flex-5/6">
-              {/* <img
-                src="/icon.png"
-                alt="icon"
-                className="w-16 h-16 mb-4 mt-2 sm:mt-6"
-              /> */}
-              <div className="flex flex-row items-center gap-4 mt-2 mb-4 sm:mt-6">
-                <Avatar iconSize={32} className="w-12 h-12" />
-                <div className="text-gray-400 dark:text-gray-600">
-                  <ArrowLeftRight />
-                </div>
-                <div className="p-2 rounded-full bg-gray-900 ring ring-gray-400 dark:ring dark:ring-gray-500">
-                  {/* <img
-                    src="https://lucide.dev/logo.dark.svg"
-                    className="w-8 h-8"
-                  /> */}
-                  <img
-                    src="https://developer.mozilla.org/favicon.svg"
-                    className="w-8 h-8"
-                  />
-                </div>
-              </div>
-
-              <div className="px-4 sm:mt-4 mt-8">
-                <h2 className="text-2xl font-medium text-gray-800 dark:text-gray-300 text-center w-full mb-2">
-                  <a href="#" className="text-blue-500">
-                    MDN Lab Services
-                  </a>{" "}
-                  wants to access your Home Account
-                </h2>
-                <div className="flex flex-row items-center justify-center mb-6 gap-2">
-                  <Avatar iconSize={28} className="w-9 h-9" />
-                  <p className="text-sm text-gray-500 dark:text-gray-500">
-                    qwer.009771@gmail.com
-                  </p>
-                  <Button
-                    variant="icon"
-                    className="px-0 py-0"
-                    onClick={promptAccountSelection}
-                  >
-                    <ChevronDown />
-                  </Button>
-                </div>
-                <h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
-                  This will allow{" "}
-                  <a href="#" className="text-blue-500">
-                    MDN Lab Services
-                  </a>{" "}
-                  to:
-                </h4>
-              </div>
-            </div>
-
-            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
-            <CardContent className="w-full space-y-4 text-sm">
-              <div className="flex flex-col gap-3 mb-8">
-                <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
-                  <div className="flex flex-row items-center gap-4">
-                    <div className="w-3 h-3 rounded-full bg-blue-500"></div>
-                    <p>View your full name, email and profile image</p>
-                  </div>
-                </div>
-                <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
-                  <div className="flex flex-row items-center gap-4">
-                    <div className="w-3 h-3 rounded-full bg-blue-500"></div>
-                    <p>View your permission from "MDN" group</p>
-                  </div>
-                </div>
-              </div>
-
-              <div className="mb-10">
-                <p className="font-medium mb-4 dark:text-gray-200">
-                  Are you sure you want to trust MDN Lab Services?
-                </p>
-                <p className="text-sm text-gray-400 dark:text-gray-500">
-                  Please do not share any sensitive, personal, or unnecessary
-                  information unless you trust this service. Protect your
-                  privacy and only provide information that is required for the
-                  intended purpose.
-                </p>
-              </div>
-
-              <div className="flex flex-row justify-between items-center">
-                <Button variant="text">Cancel</Button>
-
-                <Button>Allow</Button>
-              </div>
-            </CardContent>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default AgreementPage;

web/src/pages/Authenticate/index.tsx

@@ -0,0 +1,69 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { useOAuthContext } from "@/context/oauth";
+import AccountList from "@/feature/AccountList";
+import { useEffect, type FC } from "react";
+import { useSearchParams } from "react-router-dom";
+
+const AuthenticatePage: FC = () => {
+  const [searchParams] = useSearchParams();
+
+  const {
+    setActive,
+    setClientID,
+    setRedirectURI,
+    setScope,
+    setState,
+    setNonce,
+  } = useOAuthContext();
+
+  useEffect(() => {
+    setActive(true);
+    setClientID(searchParams.get("client_id") ?? "");
+    setRedirectURI(searchParams.get("redirect_uri") ?? "");
+    const scope = searchParams.get("scope") ?? "";
+    setScope(scope.split(" ").filter((s) => s.length > 0));
+    setState(searchParams.get("state") ?? "");
+    setNonce(searchParams.get("nonce") ?? "");
+  }, [
+    searchParams,
+    setActive,
+    setClientID,
+    setNonce,
+    setRedirectURI,
+    setScope,
+    setState,
+  ]);
+
+  return (
+    <div className="relative z-10 flex items-center justify-center min-h-screen">
+      <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
+        <div className="flex sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
+          <div className="flex flex-col items-center flex-1">
+            <img
+              src="/icon.png"
+              alt="icon"
+              className="w-16 h-16 mb-4 mt-2 sm:mt-6"
+            />
+
+            <div className="px-4 sm:mt-4 mt-8">
+              <h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
+                Select Account
+              </h2>
+              <h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
+                Choose one of the accounts below in order to proceed to home lab
+                services and tools.
+              </h4>
+            </div>
+          </div>
+
+          {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
+          <CardContent className="w-full space-y-4 flex-1">
+            <AccountList />
+          </CardContent>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default AuthenticatePage;

web/src/pages/Authorize/index.tsx

@@ -1,69 +1,114 @@
+import { type FC } from "react";
+
 import { Card, CardContent } from "@/components/ui/card";
-import { useOAuthContext } from "@/context/oauth";
+import { ArrowLeftRight, ChevronDown } from "lucide-react";
-import AccountList from "@/feature/AccountList";
+import { Button } from "@/components/ui/button";
-import { useEffect, type FC } from "react";
+import Avatar from "@/feature/Avatar";
-import { useSearchParams } from "react-router-dom";
+import { useAuth } from "@/store/auth";
 
-const OAuthAuthorizePage: FC = () => {
+const AuthorizePage: FC = () => {
-  const [searchParams] = useSearchParams();
+  const promptAccountSelection = useAuth((state) => state.deleteActiveAccount);
-
-  const {
-    setActive,
-    setClientID,
-    setRedirectURI,
-    setScope,
-    setState,
-    setNonce,
-  } = useOAuthContext();
-
-  useEffect(() => {
-    setActive(true);
-    setClientID(searchParams.get("client_id") ?? "");
-    setRedirectURI(searchParams.get("redirect_uri") ?? "");
-    const scope = searchParams.get("scope") ?? "";
-    setScope(scope.split(" ").filter((s) => s.length > 0));
-    setState(searchParams.get("state") ?? "");
-    setNonce(searchParams.get("nonce") ?? "");
-  }, [
-    searchParams,
-    setActive,
-    setClientID,
-    setNonce,
-    setRedirectURI,
-    setScope,
-    setState,
-  ]);
 
   return (
+    <div
+      className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
+    >
       <div className="relative z-10 flex items-center justify-center min-h-screen">
-      <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
+        <Card className="sm:w-[425px] sm:min-w-[425px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
-        <div className="flex sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
+          <div className="flex flex-col items-center pt-10 sm:pt-0">
-          <div className="flex flex-col items-center flex-1">
+            <div className="flex flex-col items-center flex-5/6">
-            <img
+              {/* <img
                 src="/icon.png"
                 alt="icon"
                 className="w-16 h-16 mb-4 mt-2 sm:mt-6"
+              /> */}
+              <div className="flex flex-row items-center gap-4 mt-2 mb-4 sm:mt-6">
+                <Avatar iconSize={32} className="w-12 h-12" />
+                <div className="text-gray-400 dark:text-gray-600">
+                  <ArrowLeftRight />
+                </div>
+                <div className="p-2 rounded-full bg-gray-900 ring ring-gray-400 dark:ring dark:ring-gray-500">
+                  {/* <img
+                    src="https://lucide.dev/logo.dark.svg"
+                    className="w-8 h-8"
+                  /> */}
+                  <img
+                    src="https://developer.mozilla.org/favicon.svg"
+                    className="w-8 h-8"
                   />
+                </div>
+              </div>
 
               <div className="px-4 sm:mt-4 mt-8">
-              <h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
+                <h2 className="text-2xl font-medium text-gray-800 dark:text-gray-300 text-center w-full mb-2">
-                Select Account
+                  <a href="#" className="text-blue-500">
+                    MDN Lab Services
+                  </a>{" "}
+                  wants to access your Home Account
                 </h2>
-              <h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
+                <div className="flex flex-row items-center justify-center mb-6 gap-2">
-                Choose one of the accounts below in order to proceed to home lab
+                  <Avatar iconSize={28} className="w-9 h-9" />
-                services and tools.
+                  <p className="text-sm text-gray-500 dark:text-gray-500">
+                    qwer.009771@gmail.com
+                  </p>
+                  <Button
+                    variant="icon"
+                    className="px-0 py-0"
+                    onClick={promptAccountSelection}
+                  >
+                    <ChevronDown />
+                  </Button>
+                </div>
+                <h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
+                  This will allow{" "}
+                  <a href="#" className="text-blue-500">
+                    MDN Lab Services
+                  </a>{" "}
+                  to:
                 </h4>
               </div>
             </div>
 
             {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
-          <CardContent className="w-full space-y-4 flex-1">
+            <CardContent className="w-full space-y-4 text-sm">
-            <AccountList />
+              <div className="flex flex-col gap-3 mb-8">
+                <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
+                  <div className="flex flex-row items-center gap-4">
+                    <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+                    <p>View your full name, email and profile image</p>
+                  </div>
+                </div>
+                <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
+                  <div className="flex flex-row items-center gap-4">
+                    <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+                    <p>View your permission from "MDN" group</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mb-10">
+                <p className="font-medium mb-4 dark:text-gray-200">
+                  Are you sure you want to trust MDN Lab Services?
+                </p>
+                <p className="text-sm text-gray-400 dark:text-gray-500">
+                  Please do not share any sensitive, personal, or unnecessary
+                  information unless you trust this service. Protect your
+                  privacy and only provide information that is required for the
+                  intended purpose.
+                </p>
+              </div>
+
+              <div className="flex flex-row justify-between items-center">
+                <Button variant="text">Cancel</Button>
+
+                <Button>Allow</Button>
+              </div>
             </CardContent>
           </div>
         </Card>
       </div>
+    </div>
   );
 };
 
-export default OAuthAuthorizePage;
+export default AuthorizePage;