Better require login page (#587)

kscalelabs · Nov 11, 2024 · 55986fe · 55986fe
1 parent 80e6bb4
commit 55986fe
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/frontend/src/components/auth/AuthBlock.tsx b/frontend/src/components/auth/AuthBlock.tsx
@@ -25,7 +25,10 @@ const AuthBlock: React.FC<AuthBlockProps> = ({ title, onClosed, signup }) => {
   return (
     <Card className="w-[400px] bg-gray-12 text-gray-12 rounded-lg">
       <CardHeader>
-        <Header title={title} onClosed={onClosed} />
+        <Header
+          title={title ? title : signup ? "Signup" : "Login"}
+          onClosed={onClosed}
+        />
       </CardHeader>
       <AuthBlockInner initialSignup={signup} />
     </Card>

diff --git a/frontend/src/components/auth/AuthProvider.tsx b/frontend/src/components/auth/AuthProvider.tsx
@@ -144,7 +144,7 @@ const AuthProvider = () => {
     <div className="flex flex-col w-full">
       <div className="flex justify-center items-center mb-4">
         <div className="border-t border-gray-300 flex-grow mr-3"></div>
-        <span className="flex-shrink">OR</span>
+        <span className="text-white flex-shrink">OR</span>
         <div className="border-t border-gray-300 flex-grow ml-3"></div>
       </div>
       <div className="flex items-center w-full gap-x-2">

diff --git a/frontend/src/components/auth/RequireAuthentication.tsx b/frontend/src/components/auth/RequireAuthentication.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import AuthBlock from "@/components/auth/AuthBlock";
+import Container from "@/components/ui/container";
 import { useAuthentication } from "@/hooks/useAuth";
 
 interface Props {
@@ -24,16 +25,16 @@ const RequireAuthentication = (props: Props) => {
   return isAuthenticated ? (
     <>{children}</>
   ) : (
-    <>
-      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
-        <div className="relative w-auto my-6 mx-auto max-w-3xl">
-          <div className="border-0 rounded-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-            <AuthBlock onClosed={onClosed} />
-          </div>
+    <Container className="flex justify-center items-center max-w-xl">
+      <div className="flex flex-col justify-center items-center my-6">
+        <h2 className="text-gray-1 text-xl font-bold mb-4">
+          You must be logged in to view this page
+        </h2>
+        <div className="border-0 rounded-lg">
+          <AuthBlock onClosed={onClosed} />
         </div>
       </div>
-      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
-    </>
+    </Container>
   );
 };
 

diff --git a/frontend/src/components/ui/Header.tsx b/frontend/src/components/ui/Header.tsx
@@ -1,16 +1,24 @@
 import { FaTimes } from "react-icons/fa";
 
+import { cn } from "@/lib/utils";
+
 interface HeaderProps {
   title: string | React.ReactNode;
   label?: string;
   onClosed?: () => void;
+  className?: string;
 }
 
-const Header = ({ title, label, onClosed }: HeaderProps) => {
+const Header = ({ title, label, onClosed, className }: HeaderProps) => {
   return (
-    <div className="w-full flex flex-col items-center justify-center gap-y-4">
-      <h1 className="text-3xl font-semibold text-primary py-4">{title}</h1>
-      {label && <p className="text-muted-foreground text-s,">{label}</p>}
+    <div
+      className={cn(
+        "w-full flex flex-col items-center justify-center gap-y-4",
+        className,
+      )}
+    >
+      <h1 className="text-3xl font-semibold text-gray-1 py-4">{title}</h1>
+      {label && <p className="text-gray-3 text-sm">{label}</p>}
       {onClosed && (
         <button
           onClick={onClosed}