feat: oauth auth page

web/src/pages/OAuthAuthorize/index.tsx

@@ -0,0 +1,74 @@
+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 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,
+  ]);
+
+  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)]`}
+      // style={{ backgroundImage: `url(${overlay})` }}
+    >
+      <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>
+    </div>
+  );
+};
+
+export default OAuthAuthorizePage;