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
-        type='email'
-        size='login'
-        label='E-Mail'
-        placeholder='Enter your E-Mail'
-      />
-      <LabeledInput
-        type='password'
-        size='login'
-        label='Password'
-        placeholder='Enter your Password'
-      />
+      <form>
+        <LabeledInput
+          type='email'
+          label='E-Mail'
+          placeholder='Enter your E-Mail'
+        />
+        <LabeledInput
+          type='password'
+          label='Password'
+          placeholder='Enter your Password'
+        />
+      </form>
+
+      <hr style={{ width: 230 }} />
+
       <Login provider='authentik' providerDisplayName='SSO' />
     </div>
   );