login works

frontend/src/contexts/AuthContext.tsx

@@ -18,19 +18,25 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // Beim Start User aus localStorage laden
-    const savedUser = authService.getCurrentUser();
-    if (savedUser) {
-      setUser(savedUser);
-    }
-    setLoading(false);
+    // User aus localStorage laden beim Start
+    const initAuth = async () => {
+      const savedUser = authService.getCurrentUser();
+      if (savedUser) {
+        setUser(savedUser);
+      }
+      setLoading(false);
+    };
+    
+    initAuth();
   }, []);
 
   const login = async (credentials: LoginRequest) => {
     try {
       const response = await authService.login(credentials);
-      setUser(response.user);
+      setUser(response.user); // ← WICHTIG: User State updaten!
+      console.log('AuthContext: User nach Login gesetzt', response.user);
     } catch (error) {
+      console.error('AuthContext: Login fehlgeschlagen', error);
       throw error;
     }
   };
@@ -39,7 +45,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     try {
       const response = await authService.register(userData);
       setUser(response.user);
+      console.log('AuthContext: User nach Registrierung gesetzt', response.user);
     } catch (error) {
+      console.error('AuthContext: Registrierung fehlgeschlagen', error);
       throw error;
     }
   };
@@ -47,14 +55,24 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const logout = () => {
     authService.logout();
     setUser(null);
+    console.log('AuthContext: User nach Logout entfernt');
   };
 
   const hasRole = (roles: string[]) => {
     return user ? roles.includes(user.role) : false;
   };
 
+  const value = {
+    user,
+    login,
+    register,
+    logout,
+    hasRole,
+    loading
+  };
+
   return (
-    <AuthContext.Provider value={{ user, login, register, logout, hasRole, loading }}>
+    <AuthContext.Provider value={value}>
       {children}
     </AuthContext.Provider>
   );

frontend/src/pages/Auth/Login.tsx

@@ -1,16 +1,16 @@
 // frontend/src/pages/Auth/Login.tsx
 import React, { useState } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
-import { useNavigate } from 'react-router-dom';
 
 const Login: React.FC = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState('admin@schichtplan.de');
+  const [password, setPassword] = useState('admin123');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
   
-  const { login, user } = useAuth();
-  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  console.log('Login Komponente - State:', { email, password, error, loading });
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -18,11 +18,11 @@ const Login: React.FC = () => {
     setLoading(true);
 
     try {
-      console.log('Versuche Login...');
+      console.log('Login startet mit:', { email });
       await login({ email, password });
-      console.log('Login erfolgreich!', 'User:', user);
-      console.log('Navigiere zu /');
-      navigate('/', { replace: true });
+      console.log('Login erfolgreich abgeschlossen');
+      // Force refresh als Fallback
+      window.location.reload();
     } catch (err: any) {
       console.error('Login Fehler:', err);
       setError(err.message || 'Login fehlgeschlagen');
@@ -37,9 +37,10 @@ const Login: React.FC = () => {
       margin: '100px auto', 
       padding: '20px',
       border: '1px solid #ddd',
-      borderRadius: '8px'
+      borderRadius: '8px',
+      backgroundColor: '#f9f9f9'
     }}>
-      <h2>Anmelden</h2>
+      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Anmelden</h2>
       
       {error && (
         <div style={{ 
@@ -47,15 +48,16 @@ const Login: React.FC = () => {
           backgroundColor: '#ffe6e6',
           padding: '10px',
           borderRadius: '4px',
-          marginBottom: '15px'
+          marginBottom: '15px',
+          border: '1px solid #ffcccc'
         }}>
-          {error}
+          <strong>Fehler:</strong> {error}
         </div>
       )}
 
       <form onSubmit={handleSubmit}>
         <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'block', marginBottom: '5px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
             E-Mail:
           </label>
           <input
@@ -63,12 +65,18 @@ const Login: React.FC = () => {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
-            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+            style={{ 
+              width: '100%', 
+              padding: '10px', 
+              border: '1px solid #ccc', 
+              borderRadius: '4px',
+              fontSize: '16px'
+            }}
           />
         </div>
 
-        <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'block', marginBottom: '5px' }}>
+        <div style={{ marginBottom: '20px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
             Passwort:
           </label>
           <input
@@ -76,7 +84,13 @@ const Login: React.FC = () => {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
-            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+            style={{ 
+              width: '100%', 
+              padding: '10px', 
+              border: '1px solid #ccc', 
+              borderRadius: '4px',
+              fontSize: '16px'
+            }}
           />
         </div>
 
@@ -85,22 +99,31 @@ const Login: React.FC = () => {
           disabled={loading}
           style={{ 
             width: '100%', 
-            padding: '10px', 
-            backgroundColor: loading ? '#ccc' : '#007bff',
+            padding: '12px', 
+            backgroundColor: loading ? '#6c757d' : '#007bff',
             color: 'white',
             border: 'none',
             borderRadius: '4px',
-            cursor: loading ? 'not-allowed' : 'pointer'
+            fontSize: '16px',
+            fontWeight: 'bold',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            transition: 'background-color 0.2s'
           }}
         >
-          {loading ? 'Anmeldung...' : 'Anmelden'}
+          {loading ? '⏳ Anmeldung...' : '🔐 Anmelden'}
         </button>
       </form>
 
-      <div style={{ marginTop: '15px', textAlign: 'center' }}>
-        <p>Test Account:</p>
-        <p><strong>Email:</strong> admin@schichtplan.de</p>
-        <p><strong>Passwort:</strong> admin123</p>
+      <div style={{ 
+        marginTop: '20px', 
+        padding: '15px',
+        backgroundColor: '#e7f3ff',
+        borderRadius: '4px',
+        border: '1px solid #b3d9ff'
+      }}>
+        <h4 style={{ margin: '0 0 10px 0' }}>Test Account:</h4>
+        <p style={{ margin: '5px 0' }}><strong>Email:</strong> admin@schichtplan.de</p>
+        <p style={{ margin: '5px 0' }}><strong>Passwort:</strong> admin123</p>
       </div>
     </div>
   );

frontend/src/services/authService.ts

@@ -1,5 +1,5 @@
 // frontend/src/services/authService.ts
-const API_BASE = 'http://localhost:3001/api';
+const API_BASE = 'http://localhost:3002/api';
 
 export interface LoginRequest {
   email: string;