fix: proper page names
This commit is contained in:
@ -4,8 +4,8 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
|||||||
import IndexPage from "./pages/Index";
|
import IndexPage from "./pages/Index";
|
||||||
import LoginPage from "./pages/Login";
|
import LoginPage from "./pages/Login";
|
||||||
import RegisterPage from "./pages/Register";
|
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";
|
import AuthLayout from "./layout/AuthLayout";
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
@ -14,10 +14,10 @@ const router = createBrowserRouter([
|
|||||||
element: <AuthLayout />,
|
element: <AuthLayout />,
|
||||||
children: [
|
children: [
|
||||||
{ index: true, element: <IndexPage /> },
|
{ index: true, element: <IndexPage /> },
|
||||||
{ path: "agreement", element: <AgreementPage /> },
|
{ path: "authorize", element: <AuthorizePage /> },
|
||||||
{ path: "login", element: <LoginPage /> },
|
{ path: "login", element: <LoginPage /> },
|
||||||
{ path: "register", element: <RegisterPage /> },
|
{ path: "register", element: <RegisterPage /> },
|
||||||
{ path: "authorize", element: <OAuthAuthorizePage /> },
|
{ path: "authenticate", element: <AuthenticatePage /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -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;
|
|
||||||
69
web/src/pages/Authenticate/index.tsx
Normal file
69
web/src/pages/Authenticate/index.tsx
Normal file
@ -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;
|
||||||
@ -1,69 +1,114 @@
|
|||||||
|
import { type FC } from "react";
|
||||||
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
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 (
|
return (
|
||||||
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
<div
|
||||||
<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">
|
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="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">
|
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
||||||
<img
|
<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">
|
||||||
src="/icon.png"
|
<div className="flex flex-col items-center pt-10 sm:pt-0">
|
||||||
alt="icon"
|
<div className="flex flex-col items-center flex-5/6">
|
||||||
className="w-16 h-16 mb-4 mt-2 sm:mt-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">
|
<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">
|
||||||
</h2>
|
MDN Lab Services
|
||||||
<h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
|
</a>{" "}
|
||||||
Choose one of the accounts below in order to proceed to home lab
|
wants to access your Home Account
|
||||||
services and tools.
|
</h2>
|
||||||
</h4>
|
<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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
|
{/* <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">
|
||||||
</CardContent>
|
<div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
|
||||||
</div>
|
<div className="flex flex-row items-center gap-4">
|
||||||
</Card>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default OAuthAuthorizePage;
|
export default AuthorizePage;
|
||||||
|
|||||||
Reference in New Issue
Block a user