DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

feat: added button styling and updated login layout

Browse source
This commit is contained in:
Dominik 2025-04-19 01:24:28 +02:00 • committed by SomeCodecat
parent d86c86e137
commit 77ef7038d2
9 changed files with 196 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -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",

24
src/app/globals.css
View file

@ -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;
}
}

20
src/app/login/page.tsx
View file

@ -1,20 +1,18 @@
import { auth } from '@/auth';
import SignIn from '@/components/user/signin-button';
import { SignOut } from '@/components/user/signout-button';
import Login from '@/components/user/login-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 ? (
<SignIn></SignIn>
) : (
<>
<h2>Hallo {session.user.name}</h2>
<SignOut></SignOut>
</>
)}
<Login provider='authentik' providerDisplayName='SSO' />
</div>
);
}

54
src/components/Button.module.css Normal file
View file

@ -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);
}

39
src/components/Button.tsx Normal file
View file

@ -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>
);
}
}

24
src/components/user/login-button.tsx Normal file
View file

@ -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>
);
}

5
src/components/user/signout-button.tsx → src/components/user/logout-button.tsx
View file

@ -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>
);
}

14
src/components/user/signin-button.tsx
View file

@ -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>
);
}

40
yarn.lock
View file

@ -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"