feat: added button styling and updated login layout

package.json

@@ -10,6 +10,11 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "next": "15.3.2",
     "next-auth": "^5.0.0-beta.25",
     "react": "^19.0.0",

src/app/globals.css

@@ -1,12 +1,32 @@
 :root {
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #3a3a3a;
+
+  --neutral: #808080;
+
+  --primary-50: rgba(59, 130, 246, 0.5);
+  --primary-75: rgba(59, 130, 246, 0.75);
+  --primary-100: rgba(59, 130, 246, 1);
+
+  --warning-50: rgba(245, 158, 11, 0.5);
+  --warning-75: rgba(245, 158, 11, 0.75);
+  --warning-100: rgba(245, 158, 11, 1);
+
+  --success-50: rgba(22, 163, 74, 0.5);
+  --success-75: rgba(22, 163, 74, 0.75);
+  --success-100: rgba(22, 163, 74, 1);
+
+  --danger-50: rgba(220, 38, 38, 0.5);
+  --danger-75: rgba(220, 38, 38, 0.75);
+  --danger-100: rgba(220, 38, 38, 1);
+
+  --button-text-size: 18px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
-    --foreground: #ededed;
+    --foreground: #e5e7eb;
   }
 }
 

src/app/login/page.tsx

@@ -1,20 +1,18 @@
 import { auth } from '@/auth';
-import SignIn from '@/components/user/signin-button';
+import Login from '@/components/user/login-button';
-import { SignOut } from '@/components/user/signout-button';
+import { redirect } from 'next/navigation';
 
-export default async function Login() {
+export default async function LoginPage() {
   const session = await auth();
+
+  if (session?.user) {
+    redirect('/');
+  }
+
   return (
     <div>
       <h1>Login</h1>
-      {!session?.user ? (
+      <Login provider='authentik' providerDisplayName='SSO' />
-        <SignIn></SignIn>
-      ) : (
-        <>
-          <h2>Hallo {session.user.name}</h2>
-          <SignOut></SignOut>
-        </>
-      )}
     </div>
   );
 }

src/components/Button.module.css

@@ -0,0 +1,54 @@
+.button {
+  background-color: var(--color-50);
+  border-radius: 9999px;
+  padding: 10px 20px;
+  outline: none;
+  border: 2px solid var(--color-100);
+  transition: background-color 0.3s ease;
+  height: 50px;
+}
+
+.button:hover {
+  background-color: var(--color-75);
+}
+
+.button:active {
+  background-color: var(--color-100);
+}
+
+.button span {
+  color: var(--foreground);
+  font-size: var(--button-text-size);
+  font-weight: 600;
+}
+
+.icon {
+  display: grid;
+  grid-template-columns: 25px 1fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.style_primary {
+  --color-50: var(--primary-50);
+  --color-75: var(--primary-75);
+  --color-100: var(--primary-100);
+}
+
+.style_warning {
+  --color-50: var(--warning-50);
+  --color-75: var(--warning-75);
+  --color-100: var(--warning-100);
+}
+
+.style_success {
+  --color-50: var(--success-50);
+  --color-75: var(--success-75);
+  --color-100: var(--success-100);
+}
+
+.style_danger {
+  --color-50: var(--danger-50);
+  --color-75: var(--danger-75);
+  --color-100: var(--danger-100);
+}

src/components/Button.tsx

@@ -0,0 +1,39 @@
+import style from './Button.module.css';
+
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function Button({
+  type,
+  children,
+  mode = 'primary',
+  icon,
+}: {
+  type?: 'button' | 'submit' | 'reset';
+  children?: React.ReactNode;
+  mode?: 'primary' | 'warning' | 'success' | 'danger';
+  icon?: IconProp;
+}) {
+  if (!icon) {
+    return (
+      <button
+        className={style.button + ' ' + style['style_' + mode]}
+        type={type}
+      >
+        <span>{children}</span>
+      </button>
+    );
+  } else {
+    return (
+      <button
+        className={
+          style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
+        }
+        type={type}
+      >
+        <FontAwesomeIcon icon={icon} height={25} />
+        <span>{children}</span>
+      </button>
+    );
+  }
+}

src/components/user/login-button.tsx

@@ -0,0 +1,24 @@
+import { signIn } from '@/auth';
+import Button from '../Button';
+import { faOpenid } from '@fortawesome/free-brands-svg-icons';
+
+export default function Login({
+  provider,
+  providerDisplayName,
+}: {
+  provider: string;
+  providerDisplayName: string;
+}) {
+  return (
+    <form
+      action={async () => {
+        'use server';
+        await signIn(provider);
+      }}
+    >
+      <Button type='submit' mode='warning' icon={faOpenid}>
+        Login with {providerDisplayName}
+      </Button>
+    </form>
+  );
+}

src/components/user/logout-button.tsx

@@ -1,6 +1,7 @@
 import { signOut } from '@/auth';
+import Button from '../Button';
 
-export function SignOut() {
+export function Logout() {
   return (
     <form
       action={async () => {
@@ -8,7 +9,7 @@ export function SignOut() {
         await signOut();
       }}
     >
-      <button type='submit'>Sign Out</button>
+      <Button type='submit'>Sign Out</Button>
     </form>
   );
 }

src/components/user/signin-button.tsx

@@ -1,14 +0,0 @@
-import { signIn } from '@/auth';
-
-export default function SignIn() {
-  return (
-    <form
-      action={async () => {
-        'use server';
-        await signIn('authentik');
-      }}
-    >
-      <button type='submit'>Signin with Authentik</button>
-    </form>
-  );
-}

yarn.lock

@@ -103,6 +103,46 @@
     "@eslint/core" "^0.13.0"
     levn "^0.4.1"
 
+"@fortawesome/fontawesome-common-types@6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470"
+  integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
+
+"@fortawesome/fontawesome-svg-core@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2"
+  integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-brands-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz#4ebee8098f31da5446dda81edc344025eb59b27e"
+  integrity sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-regular-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz#f1651e55e6651a15589b0569516208f9c65f96db"
+  integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-solid-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6"
+  integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/react-fontawesome@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
+  integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"