Add try-catch statement for upcoming login validation, globals.css support (#55)

gradesa/src/app/auth/auth.css

@@ -1,3 +1,5 @@
+@import '../globals.css';
+
 .auth-container {
     min-height: 100vh;
     display: flex;
@@ -8,45 +10,53 @@
 .auth-box {
     width: 100%;
     max-width: 400px;
-    padding: 2rem;
+    padding: var(--u-3xl);
   }
   
 .auth-title {
     text-align: center;
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--u-xl);
   }
 
 .form-group {
-    margin-bottom: 1rem;
+    margin-bottom: var(--u-lg);
   }
 
 .form-label {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--u-md);
   }
 
 .form-input {
     width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    padding: var(--u-md);
+    border: 1px solid var(--fg2);
+    border-radius: var(--radius-sm);
   }
 
 .form-button {
     width: 100%;
-    padding: 0.5rem;
-    background-color: #007bff;
-    color: white;
+    padding: var(--u-md);
+    background-color: var(--primary2);
+    color: var(--fg1);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     cursor: pointer;
-    margin-top: 1rem;
+    margin-top: var(--u-lg);
   }
 
 .form-button:hover {
-    background-color: #0056b3;
+    background-color: var(--primary1);
   }
 
+.error-message {
+    padding: var(--u-md);
+    background-color: var(--tertiary5);
+    color: var(--fg1);
+    border-radius: var(--radius-sm);
+    margin-bottom: var(--u-lg);
+}
+
 .success {
   text-align: center;
   margin-bottom: 1.5rem;
@@ -55,4 +65,4 @@
 .error {
   text-align: center;
   margin-bottom: 1.5rem;
-}
+}

gradesa/src/app/auth/login/page.js

@@ -1,19 +1,51 @@
-"use client";
-import { useState } from "react";
+'use client'
+import { useState, Suspense } from 'react';
+import { useRouter } from 'next/navigation';
 
 export default function Login() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleSubmit = (event) => {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  
+  const handleSubmit = async (event) => {
     event.preventDefault();
-    console.log("Email:", email);
-    console.log("Password:", password);
-  };
+    setError('');
+    setIsLoading(true);
 
+    console.log('Email:', email);
+    console.log('Password:', password);
+    
+    // Mock backend validation
+    try {
+      const mockEmail = 'user@example.com';
+      const mockPassword = 'Demonstration1';
+
+      // API call simulation
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      if (email !== mockEmail || password !== mockPassword) {
+        throw new Error('Ungültige E-Mail-Adresse oder Passwort');
+      }
+
+      console.log('Login successful!');
+      router.push('/');
+
+    } catch (error) {
+      console.log('Validation failed');
+      setError(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  
   return (
-    <>
+    <Suspense fallback={<div>Laden...</div>}>
       <h1 className="auth-title">Anmeldung</h1>
+
+      {error && <div className="error-message">{error}</div>}
+
       <form onSubmit={handleSubmit}>
         <div className="form-group">
           <label className="form-label" htmlFor="email">
@@ -27,6 +59,7 @@ export default function Login() {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
+            disabled={isLoading}
           />
         </div>
 
@@ -42,13 +75,18 @@ export default function Login() {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
+            disabled={isLoading}
           />
         </div>
 
-        <button type="submit" className="form-button">
-          Einloggen
+        <button
+          type="submit"
+          className="form-button"
+          disabled={isLoading}
+        >
+          {isLoading ? 'Wird bearbeitet...' : 'Einloggen'}
         </button>
       </form>
-    </>
+    </Suspense>
   );
 }