refactor(login): page styling

src/app/api/auth/[...nextauth]/route.ts

@@ -1,10 +1,3 @@
 import { handlers } from '@/auth';
-import { NextRequest, NextResponse } from 'next/server';
 
 export const { GET, POST } = handlers;
-
-export async function middleware(request: NextRequest) {
-  if (request.nextUrl.pathname === '/') {
-    return NextResponse.redirect(new URL('/login', request.url));
-  }
-}

src/app/globals.css

@@ -25,12 +25,20 @@
   --textbox-50: rgb(204, 204, 204, 0.5);
   --textbox-75: rgb(204, 204, 204, 0.75);
   --textbox-100: rgb(204, 204, 204, 1);
+
+  --base-1: #f3f3f3;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #e5e7eb;
+
+    --textbox-50: rgb(75, 85, 99, 0.5);
+    --textbox-75: rgb(75, 85, 99, 0.75);
+    --textbox-100: rgb(75, 85, 99, 1);
+
+    --base-1: #111111;
   }
 }
 

src/app/login/login.module.css

@@ -1,14 +1,30 @@
-/* /home/max/Git/MeetUp/src/app/login/login.module.css */
+body:has(.loginContainer) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100svh;
+}
+
 .loginContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
   gap: 1.5rem;
   padding: 2rem;
+  width: 300px;
+
+  background-color: var(--base-1);
+  border-radius: 1rem;
+  border: 2px solid var(--foreground);
 }
 
 .loginContainer h1 {
   margin-bottom: 1rem;
 }
+
+.loginContainer form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

src/app/login/page.tsx

@@ -19,18 +19,21 @@ export default async function LoginPage() {
     <div className={style.loginContainer}>
       <h1>Login</h1>
 
-      <LabeledInput
+      <form>
-        type='email'
+        <LabeledInput
-        size='login'
+          type='email'
-        label='E-Mail'
+          label='E-Mail'
-        placeholder='Enter your E-Mail'
+          placeholder='Enter your E-Mail'
-      />
+        />
-      <LabeledInput
+        <LabeledInput
-        type='password'
+          type='password'
-        size='login'
+          label='Password'
-        label='Password'
+          placeholder='Enter your Password'
-        placeholder='Enter your Password'
+        />
-      />
+      </form>
+
+      <hr style={{ width: 230 }} />
+
       <Login provider='authentik' providerDisplayName='SSO' />
     </div>
   );

src/components/button.tsx

@@ -8,17 +8,22 @@ export default function Button({
   children,
   mode = 'primary',
   icon,
+  width,
 }: {
   type?: 'button' | 'submit' | 'reset';
   children?: React.ReactNode;
   mode?: 'primary' | 'warning' | 'success' | 'danger';
   icon?: IconProp;
+  width?: number;
 }) {
   if (!icon) {
     return (
       <button
         className={style.button + ' ' + style['style_' + mode]}
         type={type}
+        style={{
+          width: width ? `${width}px` : '100%',
+        }}
       >
         <span>{children}</span>
       </button>
@@ -30,6 +35,9 @@ export default function Button({
           style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
         }
         type={type}
+        style={{
+          width: width ? `${width}px` : '100%',
+        }}
       >
         <FontAwesomeIcon icon={icon} height={25} />
         <span>{children}</span>

src/components/labeled-input.module.css

@@ -4,14 +4,14 @@
 }
 
 .input {
-  height: 50px;
   position: relative;
   overflow: visible;
+  width: 250px;
 }
 
 .input input {
   width: 100%;
-  height: 100%;
+  height: 50px;
   border: 1px solid var(--textbox-75);
   border-radius: 9999px;
   padding: 10px 20px;

src/components/labeled-input.tsx

@@ -2,52 +2,47 @@ import style from './labeled-input.module.css';
 
 export default function LabeledInput({
   type,
-  size = 'default',
+  width,
   label,
   placeholder,
   value,
 }: {
   type: 'text' | 'email' | 'password';
-  size: 'default' | 'login' | 'settings';
+  width?: number;
   label?: string;
   placeholder?: string;
   value?: string;
 }) {
+  const randomId = Math.random().toString(36).substring(2, 15);
+
   if (!label) {
     return (
       <div className={style.input}>
         <input
           type={type}
-          className={
-            style['input'] +
-            ' ' +
-            style['size_' + size] +
-            ' ' +
-            style['type_' + type]
-          }
           placeholder={placeholder}
           defaultValue={value}
+          style={{
+            width: width ? `${width}px` : '100%',
+          }}
         />
       </div>
     );
   } else {
     return (
       <div className={style.input}>
-        <p>
+        <label htmlFor={randomId} className={style['label']}>
-          <label className={style['label']}>{label}</label>
+          {label}
-        </p>
+        </label>
 
         <input
+          id={randomId}
           type={type}
-          className={
-            style['input'] +
-            ' ' +
-            style['size_' + size] +
-            ' ' +
-            style['type_' + type]
-          }
           placeholder={placeholder}
           defaultValue={value}
+          style={{
+            width: width ? `${width}px` : '100%',
+          }}
         />
       </div>
     );

src/components/user/login-button.tsx

@@ -16,7 +16,7 @@ export default function Login({
         await signIn(provider);
       }}
     >
-      <Button type='submit' mode='warning' icon={faOpenid}>
+      <Button type='submit' mode='warning' icon={faOpenid} width={250}>
         Login with {providerDisplayName}
       </Button>
     </form>