galima/periodic-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated landing page

Browse Source
This commit is contained in:
gulimabr
2025-12-02 11:54:36 -03:00
parent 9428c4d2de
commit 5dc4f861d1
5 changed files with 43 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/requirements-icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keycloak Auth App</title>
<title>Requirements Periodic Table</title>
</head>
<body>
<div id="root"></div>

5
frontend/public/requirements-icon.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
<rect x="9" y="3" width="6" height="4" rx="1"/>
<path d="M9 12l2 2 4-4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 327 B

2
frontend/src/components/Layout.tsx
View File

@@ -17,7 +17,7 @@ export default function Layout({ children }: LayoutProps) {
<footer className="border-t border-gray-200 bg-white py-6">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<p className="text-center text-sm text-gray-500">
&copy; {new Date().getFullYear()} Keycloak Auth App. All rights
&copy; {new Date().getFullYear()} Requirements Periodic Table. All rights
reserved.
</p>
</div>

12
frontend/src/components/Navbar.tsx
View File

@@ -20,14 +20,14 @@ export default function Navbar() {
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
<rect x="9" y="3" width="6" height="4" rx="1" />
<path d="M9 12l2 2 4-4" />
</svg>
<span>Auth App</span>
<span>Requirements Periodic Table</span>
</Link>
</div>

135
frontend/src/pages/HomePage.tsx
View File

@@ -14,23 +14,38 @@ export default function HomePage() {
return (
<div className="flex min-h-[60vh] flex-col items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
Welcome to{' '}
<span className="text-primary-600">Keycloak Auth</span>
{/* Icon */}
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-primary-100">
<svg
className="h-12 w-12 text-primary-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
<rect x="9" y="3" width="6" height="4" rx="1" />
<path d="M9 12l2 2 4-4" />
</svg>
</div>
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
Requirements Periodic Table
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
A secure authentication system powered by Keycloak and FastAPI. Login
with your Keycloak credentials to access protected resources.
<p className="mx-auto mt-4 max-w-md text-lg text-gray-600">
Manage and track your project requirements.
</p>
{!isAuthenticated && (
<div className="mt-10">
<div className="mt-8">
{!isAuthenticated ? (
<button
onClick={login}
className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-3 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
>
<svg
className="h-6 w-6"
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -42,108 +57,16 @@ export default function HomePage() {
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
Login with Keycloak
Login
</button>
</div>
)}
{isAuthenticated && (
<div className="mt-10">
) : (
<a
href="/dashboard"
className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-3 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
>
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
/>
</svg>
Go to Dashboard
</a>
</div>
)}
</div>
{/* Features Section */}
<div className="mt-20 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
<svg
className="h-6 w-6 text-primary-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-gray-900">
Secure Authentication
</h3>
<p className="text-gray-600">
HTTP-only cookies protect your tokens from XSS attacks.
</p>
</div>
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
<svg
className="h-6 w-6 text-primary-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-gray-900">
Keycloak Integration
</h3>
<p className="text-gray-600">
Enterprise-grade identity management with Keycloak SSO.
</p>
</div>
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
<svg
className="h-6 w-6 text-primary-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-gray-900">
FastAPI Backend
</h3>
<p className="text-gray-600">
High-performance Python backend with automatic API documentation.
</p>
)}
</div>
</div>
</div>