refactor: restyle login page with UI components
All checks were successful
container-scan / Container Scan (pull_request) Successful in 8m27s
docker-build / docker (pull_request) Successful in 9m5s

Improves the login page's visual appearance by using Card and Input components.
This commit is contained in:
Maximilian Liebmann 2025-05-09 17:38:07 +02:00
parent a56b6829a2
commit 8ab50b2c5e
6 changed files with 142 additions and 45 deletions

View file

@ -4,6 +4,7 @@ import LoginForm from '@/components/user/login-form';
import { redirect } from 'next/navigation';
import '@/app/globals.css';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
export default async function LoginPage() {
const session = await auth();
@ -14,17 +15,20 @@ export default async function LoginPage() {
return (
<div className='flex flex-col items-center justify-center h-screen'>
<div className='flex flex-col items-center justify-center w-full max-w-sm p-15 gap-10 bg-white border border-gray-300 rounded-lg shadow-md'>
<h1>Login</h1>
<Card className='w-[350px] max-w-screen'>
<CardHeader>
<CardTitle className='text-lg text-center'>Login</CardTitle>
</CardHeader>
<CardContent className='gap-6 flex flex-col'>
<LoginForm />
<LoginForm></LoginForm>
<hr />
<hr style={{ width: 230 }} />
{process.env.AUTH_AUTHENTIK_ISSUER && (
<SSOLogin provider='authentik' providerDisplayName='SSO' />
)}
</div>
{process.env.AUTH_AUTHENTIK_ISSUER && (
<SSOLogin provider='authentik' providerDisplayName='SSO' />
)}
</CardContent>
</Card>
</div>
);
}