diff --git a/web/src/App.tsx b/web/src/App.tsx index 7acef50..da04bd8 100644 --- a/web/src/App.tsx +++ b/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 OAuthAuthorizePage from "./pages/Authorize"; +import AuthorizePage from "./pages/Authorize"; +import AuthenticatePage from "./pages/Authenticate"; import AuthLayout from "./layout/AuthLayout"; const router = createBrowserRouter([ @@ -14,10 +14,10 @@ const router = createBrowserRouter([ element: , children: [ { index: true, element: }, - { path: "agreement", element: }, + { path: "authorize", element: }, { path: "login", element: }, { path: "register", element: }, - { path: "authorize", element: }, + { path: "authenticate", element: }, ], }, ]); diff --git a/web/src/pages/Agreement/index.tsx b/web/src/pages/Agreement/index.tsx deleted file mode 100644 index 3c723cc..0000000 --- a/web/src/pages/Agreement/index.tsx +++ /dev/null @@ -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 ( -
-
- -
-
- {/* icon */} -
- -
- -
-
- {/* */} - -
-
- -
-

- - MDN Lab Services - {" "} - wants to access your Home Account -

-
- -

- qwer.009771@gmail.com -

- -
-

- This will allow{" "} - - MDN Lab Services - {" "} - to: -

-
-
- - {/* */} - -
-
-
-
-

View your full name, email and profile image

-
-
-
-
-
-

View your permission from "MDN" group

-
-
-
- -
-

- Are you sure you want to trust MDN Lab Services? -

-

- 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. -

-
- -
- - - -
- -
- -
-
- ); -}; - -export default AgreementPage; diff --git a/web/src/pages/Authenticate/index.tsx b/web/src/pages/Authenticate/index.tsx new file mode 100644 index 0000000..c4a7d86 --- /dev/null +++ b/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 ( +
+ +
+
+ icon + +
+

+ Select Account +

+

+ Choose one of the accounts below in order to proceed to home lab + services and tools. +

+
+
+ + {/* */} + + + +
+ +
+ ); +}; + +export default AuthenticatePage; diff --git a/web/src/pages/Authorize/index.tsx b/web/src/pages/Authorize/index.tsx index c9ffd42..c0b80f6 100644 --- a/web/src/pages/Authorize/index.tsx +++ b/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 AccountList from "@/feature/AccountList"; -import { useEffect, type FC } from "react"; -import { useSearchParams } from "react-router-dom"; +import { ArrowLeftRight, ChevronDown } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import Avatar from "@/feature/Avatar"; +import { useAuth } from "@/store/auth"; -const OAuthAuthorizePage: 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, - ]); +const AuthorizePage: FC = () => { + const promptAccountSelection = useAuth((state) => state.deleteActiveAccount); return ( -
- -
-
- icon +
+
+ +
+
+ {/* icon */} +
+ +
+ +
+
+ {/* */} + +
+
-
-

- Select Account -

-

- Choose one of the accounts below in order to proceed to home lab - services and tools. -

+
+

+ + MDN Lab Services + {" "} + wants to access your Home Account +

+
+ +

+ qwer.009771@gmail.com +

+ +
+

+ This will allow{" "} + + MDN Lab Services + {" "} + to: +

+
-
- {/* */} - - - -
- + {/* */} + +
+
+
+
+

View your full name, email and profile image

+
+
+
+
+
+

View your permission from "MDN" group

+
+
+
+ +
+

+ Are you sure you want to trust MDN Lab Services? +

+

+ 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. +

+
+ +
+ + + +
+ +
+ +
); }; -export default OAuthAuthorizePage; +export default AuthorizePage;