From 8ab50b2c5e10d09813b563ddb5d4cf62d992753d Mon Sep 17 00:00:00 2001
From: Maximilian Liebmann <lima@noreply.git.dominikstahl.dev>
Date: Fri, 9 May 2025 17:38:07 +0200
Subject: [PATCH] refactor: restyle login page with UI components

Improves the login page's visual appearance by using Card and Input components.
---
 src/app/login/page.tsx                   | 22 +++---
 src/components/labeled-input.tsx         | 48 ++++---------
 src/components/ui/card.tsx               | 92 ++++++++++++++++++++++++
 src/components/ui/input.tsx              | 21 ++++++
 src/components/user/login-form.tsx       |  2 +-
 src/components/user/sso-login-button.tsx |  2 +-
 6 files changed, 142 insertions(+), 45 deletions(-)
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/input.tsx

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 6532785..b843b45 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -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>
   );
 }
diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx
index 572fa01..af8879e 100644
--- a/src/components/labeled-input.tsx
+++ b/src/components/labeled-input.tsx
@@ -1,48 +1,28 @@
+import { Input } from '@/components/ui/input';
+
 export default function LabeledInput({
   type,
-  width,
   label,
   placeholder,
   value,
 }: {
   type: 'text' | 'email' | 'password';
-  width?: number;
-  label?: string;
+  label: string;
   placeholder?: string;
   value?: string;
 }) {
   const randomId = Math.random().toString(36).substring(2, 15);
 
-  if (!label) {
-    return (
-      <div className='flex flex-col gap-2'>
-        <input
-          className='border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500'
-          type={type}
-          placeholder={placeholder}
-          defaultValue={value}
-          style={{
-            width: width ? `${width}px` : '100%',
-          }}
-        />
-      </div>
-    );
-  } else {
-    return (
-      <div className='flex flex-col gap-2'>
-        <label htmlFor={randomId}>{label}</label>
+  return (
+    <div className='flex flex-col gap-2'>
+      <label htmlFor={randomId}>{label}</label>
 
-        <input
-          className='border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500'
-          id={randomId}
-          type={type}
-          placeholder={placeholder}
-          defaultValue={value}
-          style={{
-            width: width ? `${width}px` : '100%',
-          }}
-        />
-      </div>
-    );
-  }
+      <Input
+        type={type}
+        placeholder={placeholder}
+        defaultValue={value}
+        id={randomId}
+      />
+    </div>
+  );
 }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..32a06b1
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card'
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-header'
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-title'
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-description'
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-action'
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-content'
+      className={cn('px-6', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-footer'
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..485626a
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot='input'
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx
index 0dbd6e7..47e1945 100644
--- a/src/components/user/login-form.tsx
+++ b/src/components/user/login-form.tsx
@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button';
 
 export default function LoginForm() {
   return (
-    <form className='flex flex-col gap-4 w-7/8'>
+    <form className='flex flex-col gap-4 w-full'>
       <LabeledInput
         type='email'
         label='E-Mail'
diff --git a/src/components/user/sso-login-button.tsx b/src/components/user/sso-login-button.tsx
index 9b9cea0..064e2eb 100644
--- a/src/components/user/sso-login-button.tsx
+++ b/src/components/user/sso-login-button.tsx
@@ -11,7 +11,7 @@ export default function SSOLogin({
 }) {
   return (
     <form
-      className='flex flex-col items-center gap-4 w-7/8'
+      className='flex flex-col items-center gap-4 w-full'
       action={async () => {
         'use server';
         await signIn(provider);