refactored login page
This commit is contained in:
Lucas Oliveira
parent
c05ddc3700
commit
1696dea10b
5 changed files with 76 additions and 46 deletions
29
frontend/components/logo/google-logo.tsx
Normal file
29
frontend/components/logo/google-logo.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
export default function GoogleLogo(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 17 17"
|
||||
fill="none"
|
||||
aria-label="Google Logo"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<title>Google Logo</title>
|
||||
<path
|
||||
d="M15.54 8.66699C15.54 8.14699 15.4933 7.64699 15.4067 7.16699H8.5V10.007H12.4467C12.2733 10.9203 11.7533 11.6937 10.9733 12.2137V14.0603H13.3533C14.74 12.7803 15.54 10.9003 15.54 8.66699Z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M8.49979 15.8337C10.4798 15.8337 12.1398 15.1804 13.3531 14.0604L10.9731 12.2137C10.3198 12.6537 9.48646 12.9204 8.49979 12.9204C6.59312 12.9204 4.97312 11.6337 4.39312 9.90039H1.95312V11.7937C3.15979 14.1871 5.63312 15.8337 8.49979 15.8337Z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M4.39317 9.89289C4.2465 9.45289 4.15984 8.98622 4.15984 8.49956C4.15984 8.01289 4.2465 7.54622 4.39317 7.10622V5.21289H1.95317C1.45317 6.19956 1.1665 7.31289 1.1665 8.49956C1.1665 9.68622 1.45317 10.7996 1.95317 11.7862L3.85317 10.3062L4.39317 9.89289Z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M8.49979 4.08699C9.57979 4.08699 10.5398 4.46033 11.3065 5.18033L13.4065 3.08033C12.1331 1.89366 10.4798 1.16699 8.49979 1.16699C5.63312 1.16699 3.15979 2.81366 1.95312 5.21366L4.39312 7.10699C4.97312 5.37366 6.59312 4.08699 8.49979 4.08699Z"
|
||||
fill="#EA4335"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
19
frontend/components/logo/logo.tsx
Normal file
19
frontend/components/logo/logo.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export default function Logo(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="22"
|
||||
viewBox="0 0 24 22"
|
||||
fill="currentColor"
|
||||
className="h-6 w-6 text-primary"
|
||||
aria-label="OpenRAG Logo"
|
||||
{...props}
|
||||
>
|
||||
<title>OpenRAG Logo</title>
|
||||
<path d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"></path>
|
||||
<path d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"></path>
|
||||
<path d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
BIN
frontend/public/images/background.png
Normal file
BIN
frontend/public/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
|
|
@ -1,16 +1,11 @@
|
|||
"use client";
|
||||
|
||||
import { Loader2, Lock, LogIn } from "lucide-react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import GoogleLogo from "@/components/logo/google-logo";
|
||||
import Logo from "@/components/logo/logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { useGetSettingsQuery } from "../api/queries/useGetSettingsQuery";
|
||||
|
||||
|
|
@ -51,30 +46,29 @@ function LoginPageContent() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background p-4">
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader className="text-center space-y-4">
|
||||
<div className="flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mx-auto">
|
||||
<Lock className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl">Welcome to OpenRAG</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
Sign in to access your documents and AI chat
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<Button onClick={login} className="w-full" size="lg">
|
||||
<LogIn className="h-4 w-4 mr-2" />
|
||||
Sign In with Google
|
||||
</Button>
|
||||
|
||||
<p className="text-xs text-center text-muted-foreground">
|
||||
By signing in, you agree to our terms of service and privacy policy.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div
|
||||
className="min-h-dvh relative flex gap-4 flex-col items-center justify-center bg-background p-4"
|
||||
style={{
|
||||
backgroundImage: "url('/images/background.png')",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<Logo className="fill-primary" width={32} height={28} />
|
||||
<h1 className="text-2xl font-medium font-chivo">Welcome to OpenRAG</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
All your knowledge at your fingertips.
|
||||
</p>
|
||||
<Button onClick={login} className="w-80 gap-1.5" size="lg">
|
||||
<GoogleLogo className="h-4 w-4" />
|
||||
Continue with Google
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 absolute bottom-6 text-xs text-muted-foreground">
|
||||
<p className="text-accent-emerald-foreground">Systems Operational</p>•
|
||||
<p>Privacy Policy</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { Bell, Loader2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
|
||||
import { KnowledgeFilterDropdown } from "@/components/knowledge-filter-dropdown";
|
||||
|
|
@ -61,20 +62,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
<div className="header-start-display px-4">
|
||||
{/* Logo/Title */}
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="22"
|
||||
viewBox="0 0 24 22"
|
||||
fill="currentColor"
|
||||
className="h-6 w-6 text-primary"
|
||||
aria-label="OpenRAG Logo"
|
||||
>
|
||||
<title>OpenRAG Logo</title>
|
||||
<path d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"></path>
|
||||
<path d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"></path>
|
||||
<path d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"></path>
|
||||
</svg>
|
||||
<Image src="/logo.svg" alt="OpenRAG Logo" width={24} height={22} />
|
||||
<span className="text-lg font-semibold">OpenRAG</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue