added roll depending users

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// frontend/src/App.tsx
+// frontend/src/App.tsx - KORRIGIERT
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
@@ -17,77 +17,110 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }>
   roles = ['admin', 'instandhalter', 'user'] 
 }) => {
   const { user, loading, hasRole } = useAuth();
-  
+
+  console.log('🔒 ProtectedRoute - User:', user?.email, 'Loading:', loading);
+
   if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <div>⏳ Lade Anwendung...</div>
+      </div>
+    );
+  }
+  
+  if (!user) {
+    console.log('❌ No user, redirecting to login');
+    return <Login />;
+  }
+
+  if (!hasRole(roles)) {
+    console.log('❌ Insufficient permissions for:', user.email);
     return (
       <Layout>
         <div style={{ textAlign: 'center', padding: '40px' }}>
-          <div>⏳ Lade Anwendung...</div>
+          <h2>Zugriff verweigert</h2>
+          <p>Sie haben keine Berechtigung für diese Seite.</p>
         </div>
       </Layout>
     );
   }
   
-  if (!user || !hasRole(roles)) {
-    return <Login />;
-  }
-  
+  console.log('✅ Access granted for:', user.email);
   return <Layout>{children}</Layout>;
 };
 
 function App() {
+  const { user, loading } = useAuth();
+
+  console.log('🏠 App Component - User:', user?.email, 'Loading:', loading);
+
+  // Während des Ladens zeigen wir einen Loading Screen
+  if (loading) {
+    return (
+      <div style={{ 
+        textAlign: 'center', 
+        padding: '100px 20px',
+        fontSize: '18px'
+      }}>
+        <div>⏳ SchichtPlaner wird geladen...</div>
+      </div>
+    );
+  }
+
+  return (
+    <Router>
+      <Routes>
+        {/* Public Route */}
+        <Route path="/login" element={<Login />} />
+        
+        {/* Protected Routes with Layout */}
+        <Route path="/" element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        } />
+        
+        <Route path="/shift-plans" element={
+          <ProtectedRoute>
+            <ShiftPlanList />
+          </ProtectedRoute>
+        } />
+        
+        <Route path="/shift-plans/new" element={
+          <ProtectedRoute roles={['admin', 'instandhalter']}>
+            <ShiftPlanCreate />
+          </ProtectedRoute>
+        } />
+        
+        <Route path="/employees" element={
+          <ProtectedRoute roles={['admin', 'instandhalter']}>
+            <EmployeeManagement />
+          </ProtectedRoute>
+        } />
+        
+        <Route path="/settings" element={
+          <ProtectedRoute roles={['admin']}>
+            <Settings />
+          </ProtectedRoute>
+        } />
+        
+        <Route path="/help" element={
+          <ProtectedRoute>
+            <Help />
+          </ProtectedRoute>
+        } />
+      </Routes>
+    </Router>
+  );
+}
+
+// Hauptkomponente mit AuthProvider
+function AppWrapper() {
   return (
     <AuthProvider>
-      <Router>
-        <Routes>
-          {/* Public Route */}
-          <Route path="/login" element={<Login />} />
-          
-          {/* Protected Routes with Layout */}
-          <Route path="/" element={
-            <ProtectedRoute>
-              <Dashboard />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/shift-plans" element={
-            <ProtectedRoute>
-              <ShiftPlanList />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/shift-plans/new" element={
-            <ProtectedRoute roles={['admin', 'instandhalter']}>
-              <ShiftPlanCreate />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/employees" element={
-            <ProtectedRoute roles={['admin', 'instandhalter']}>
-              <EmployeeManagement />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/settings" element={
-            <ProtectedRoute roles={['admin']}>
-              <Settings />
-            </ProtectedRoute>
-          } />
-          
-          <Route path="/help" element={
-            <ProtectedRoute>
-              <Help />
-            </ProtectedRoute>
-          } />
-          
-          {/* Legal Pages (ohne Layout für einfacheren Zugang) */}
-          <Route path="/impressum" element={<div>Impressum Seite</div>} />
-          <Route path="/datenschutz" element={<div>Datenschutz Seite</div>} />
-          <Route path="/agb" element={<div>AGB Seite</div>} />
-        </Routes>
-      </Router>
+      <App />
     </AuthProvider>
   );
 }
 
-export default App;
+export default AppWrapper;

frontend/src/contexts/AuthContext.tsx

@@ -1,4 +1,4 @@
-// frontend/src/contexts/AuthContext.tsx
+// frontend/src/contexts/AuthContext.tsx - KORRIGIERT
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import { authService, User, LoginRequest } from '../services/authService';
 
@@ -8,6 +8,7 @@ interface AuthContextType {
   logout: () => void;
   hasRole: (roles: string[]) => boolean;
   loading: boolean;
+  refreshUser: () => void; // NEU: Force refresh
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -15,22 +16,44 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [refreshTrigger, setRefreshTrigger] = useState(0); // NEU: Refresh trigger
 
+  // User beim Start laden
   useEffect(() => {
-    // User aus localStorage laden beim Start
     const savedUser = authService.getCurrentUser();
     if (savedUser) {
       setUser(savedUser);
+      console.log('✅ User from localStorage:', savedUser.email);
     }
     setLoading(false);
   }, []);
 
+  // NEU: User vom Server laden wenn nötig
+  useEffect(() => {
+    if (refreshTrigger > 0) {
+      const loadUserFromServer = async () => {
+        const serverUser = await authService.fetchCurrentUser();
+        if (serverUser) {
+          setUser(serverUser);
+          console.log('✅ User from server:', serverUser.email);
+        }
+      };
+      loadUserFromServer();
+    }
+  }, [refreshTrigger]);
+
   const login = async (credentials: LoginRequest) => {
     try {
+      console.log('🔄 Attempting login...');
       const response = await authService.login(credentials);
       setUser(response.user);
+      console.log('✅ Login successful, user set:', response.user.email);
+      
+      // Force refresh der App
+      setRefreshTrigger(prev => prev + 1);
+      
     } catch (error) {
-      console.error('AuthContext: Login fehlgeschlagen', error);
+      console.error('❌ Login failed:', error);
       throw error;
     }
   };
@@ -38,6 +61,11 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const logout = () => {
     authService.logout();
     setUser(null);
+    console.log('✅ Logout completed');
+  };
+
+  const refreshUser = () => {
+    setRefreshTrigger(prev => prev + 1);
   };
 
   const hasRole = (roles: string[]) => {
@@ -49,7 +77,8 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     login,
     logout,
     hasRole,
-    loading
+    loading,
+    refreshUser // NEU
   };
 
   return (

frontend/src/pages/Auth/Login.tsx

@@ -1,16 +1,16 @@
-// frontend/src/pages/Auth/Login.tsx
+// frontend/src/pages/Auth/Login.tsx - KORRIGIERT
 import React, { useState } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 
 const Login: React.FC = () => {
-  const [email, setEmail] = useState('admin@schichtplan.de');
-  const [password, setPassword] = useState('admin123');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
   
-  const { login } = useAuth();
+  const { login, user } = useAuth(); // user hinzugefügt für Debugging
 
-  console.log('Login Komponente - State:', { email, password, error, loading });
+  console.log('🔍 Login Component - Current user:', user);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -18,13 +18,14 @@ const Login: React.FC = () => {
     setLoading(true);
 
     try {
-      console.log('Login startet mit:', { email });
+      console.log('🚀 Starting login process...');
       await login({ email, password });
-      console.log('Login erfolgreich abgeschlossen');
-      // Force refresh als Fallback
-      window.location.reload();
+      console.log('✅ Login process completed');
+      
+      // Navigation passiert automatisch durch AuthContext
+      
     } catch (err: any) {
-      console.error('Login Fehler:', err);
+      console.error('❌ Login error:', err);
       setError(err.message || 'Login fehlgeschlagen');
     } finally {
       setLoading(false);
@@ -37,10 +38,9 @@ const Login: React.FC = () => {
       margin: '100px auto', 
       padding: '20px',
       border: '1px solid #ddd',
-      borderRadius: '8px',
-      backgroundColor: '#f9f9f9'
+      borderRadius: '8px'
     }}>
-      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Anmelden</h2>
+      <h2>Anmelden</h2>
       
       {error && (
         <div style={{ 
@@ -48,8 +48,7 @@ const Login: React.FC = () => {
           backgroundColor: '#ffe6e6',
           padding: '10px',
           borderRadius: '4px',
-          marginBottom: '15px',
-          border: '1px solid #ffcccc'
+          marginBottom: '15px'
         }}>
           <strong>Fehler:</strong> {error}
         </div>
@@ -57,7 +56,7 @@ const Login: React.FC = () => {
 
       <form onSubmit={handleSubmit}>
         <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+          <label style={{ display: 'block', marginBottom: '5px' }}>
             E-Mail:
           </label>
           <input
@@ -65,18 +64,12 @@ const Login: React.FC = () => {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
-            style={{ 
-              width: '100%', 
-              padding: '10px', 
-              border: '1px solid #ccc', 
-              borderRadius: '4px',
-              fontSize: '16px'
-            }}
+            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
           />
         </div>
 
-        <div style={{ marginBottom: '20px' }}>
-          <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+        <div style={{ marginBottom: '15px' }}>
+          <label style={{ display: 'block', marginBottom: '5px' }}>
             Passwort:
           </label>
           <input
@@ -84,13 +77,7 @@ const Login: React.FC = () => {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
-            style={{ 
-              width: '100%', 
-              padding: '10px', 
-              border: '1px solid #ccc', 
-              borderRadius: '4px',
-              fontSize: '16px'
-            }}
+            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
           />
         </div>
 
@@ -99,31 +86,23 @@ const Login: React.FC = () => {
           disabled={loading}
           style={{ 
             width: '100%', 
-            padding: '12px', 
-            backgroundColor: loading ? '#6c757d' : '#007bff',
+            padding: '10px', 
+            backgroundColor: loading ? '#ccc' : '#007bff',
             color: 'white',
             border: 'none',
             borderRadius: '4px',
-            fontSize: '16px',
-            fontWeight: 'bold',
-            cursor: loading ? 'not-allowed' : 'pointer',
-            transition: 'background-color 0.2s'
+            cursor: loading ? 'not-allowed' : 'pointer'
           }}
         >
-          {loading ? '⏳ Anmeldung...' : 'Anmelden'}
+          {loading ? 'Anmeldung...' : 'Anmelden'}
         </button>
       </form>
 
-      <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 style={{ marginTop: '15px', textAlign: 'center' }}>
+        <p><strong>Test Accounts:</strong></p>
+        <p>admin@schichtplan.de / admin123</p>
+        <p>instandhalter@schichtplan.de / instandhalter123</p>
+        <p>user@schichtplan.de / user123</p>
       </div>
     </div>
   );

frontend/src/pages/Employees/components/EmployeeForm.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest } from '../../../types/employee';
 import { employeeService } from '../../../services/employeeService';
+import { useAuth } from '../../../contexts/AuthContext';
 
 interface EmployeeFormProps {
   mode: 'create' | 'edit';
@@ -10,6 +11,13 @@ interface EmployeeFormProps {
   onCancel: () => void;
 }
 
+// Rollen Definition
+const ROLE_OPTIONS = [
+  { value: 'user', label: 'Mitarbeiter', description: 'Kann eigene Schichten einsehen' },
+  { value: 'instandhalter', label: 'Instandhalter', description: 'Kann Schichtpläne erstellen und Mitarbeiter verwalten' },
+  { value: 'admin', label: 'Administrator', description: 'Voller Zugriff auf alle Funktionen' }
+] as const;
+
 const EmployeeForm: React.FC<EmployeeFormProps> = ({
   mode,
   employee,
@@ -27,6 +35,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const { hasRole } = useAuth();
 
   useEffect(() => {
     if (mode === 'edit' && employee) {
@@ -50,6 +59,14 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     }));
   };
 
+  // NEU: Checkbox für Rollen
+  const handleRoleChange = (roleValue: 'admin' | 'instandhalter' | 'user') => {
+    setFormData(prev => ({
+      ...prev,
+      role: roleValue
+    }));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -94,6 +111,19 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     return formData.name.trim() && formData.email.trim();
   };
 
+  // Bestimme welche Rollen der aktuelle Benutzer vergeben darf
+  const getAvailableRoles = () => {
+    if (hasRole(['admin'])) {
+      return ROLE_OPTIONS; // Admins können alle Rollen vergeben
+    }
+    if (hasRole(['instandhalter'])) {
+      return ROLE_OPTIONS.filter(role => role.value !== 'admin'); // Instandhalter können keine Admins erstellen
+    }
+    return ROLE_OPTIONS.filter(role => role.value === 'user'); // Normale User können gar nichts (sollte nicht vorkommen)
+  };
+
+  const availableRoles = getAvailableRoles();
+
   return (
     <div style={{
       maxWidth: '600px',
@@ -146,7 +176,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
               required
               style={{
                 width: '100%',
-                padding: '10px 12px',
+                padding: '10px',
                 border: '1px solid #ddd',
                 borderRadius: '4px',
                 fontSize: '16px'
@@ -173,7 +203,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
               required
               style={{
                 width: '100%',
-                padding: '10px 12px',
+                padding: '10px',
                 border: '1px solid #ddd',
                 borderRadius: '4px',
                 fontSize: '16px'
@@ -202,7 +232,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                 minLength={6}
                 style={{
                   width: '100%',
-                  padding: '10px 12px',
+                  padding: '10px',
                   border: '1px solid #ddd',
                   borderRadius: '4px',
                   fontSize: '16px'
@@ -215,40 +245,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
             </div>
           )}
 
-          {/* Rolle */}
-          <div>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '8px', 
-              fontWeight: 'bold',
-              color: '#2c3e50'
-            }}>
-              Rolle *
-            </label>
-            <select
-              name="role"
-              value={formData.role}
-              onChange={handleChange}
-              required
-              style={{
-                width: '100%',
-                padding: '10px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px',
-                backgroundColor: 'white'
-              }}
-            >
-              <option value="user">Mitarbeiter (User)</option>
-              <option value="instandhalter">Instandhalter</option>
-              <option value="admin">Administrator</option>
-            </select>
-            <div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
-              {formData.role === 'admin' && 'Administratoren haben vollen Zugriff auf alle Funktionen.'}
-              {formData.role === 'instandhalter' && 'Instandhalter können Schichtpläne erstellen und Mitarbeiter verwalten.'}
-              {formData.role === 'user' && 'Mitarbeiter können ihre eigenen Schichten und Verfügbarkeiten einsehen.'}
-            </div>
-          </div>
+          
 
           {/* Telefon */}
           <div>
@@ -267,7 +264,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
               onChange={handleChange}
               style={{
                 width: '100%',
-                padding: '10px 12px',
+                padding: '10px',
                 border: '1px solid #ddd',
                 borderRadius: '4px',
                 fontSize: '16px'
@@ -293,7 +290,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
               onChange={handleChange}
               style={{
                 width: '100%',
-                padding: '10px 12px',
+                padding: '10px',
                 border: '1px solid #ddd',
                 borderRadius: '4px',
                 fontSize: '16px'
@@ -302,9 +299,107 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
             />
           </div>
 
+          {/* NEU: Rollen als Checkboxes */}
+          <div>
+            <label style={{ 
+              display: 'block', 
+              marginBottom: '12px', 
+              fontWeight: 'bold',
+              color: '#2c3e50'
+            }}>
+              Rolle *
+            </label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              {availableRoles.map(role => (
+                <div 
+                  key={role.value}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    padding: '5px',
+                    border: `2px solid ${formData.role === role.value ? '#3498db' : '#e0e0e0'}`,
+                    borderRadius: '8px',
+                    backgroundColor: formData.role === role.value ? '#f8fafc' : 'white',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s'
+                  }}
+                  onClick={() => handleRoleChange(role.value)}
+                >
+                  <input
+                    type="radio"
+                    name="role"
+                    value={role.value}
+                    checked={formData.role === role.value}
+                    onChange={() => handleRoleChange(role.value)}
+                    style={{
+                      marginRight: '12px',
+                      marginTop: '2px',
+                      width: '18px',
+                      height: '18px'
+                    }}
+                  />
+                  <div style={{ flex: 1 }}>
+                    <div style={{ 
+                      fontWeight: 'bold', 
+                      color: '#2c3e50',
+                      marginBottom: '4px'
+                    }}>
+                      {role.label}
+                    </div>
+                    <div style={{ 
+                      fontSize: '14px', 
+                      color: '#7f8c8d',
+                      lineHeight: '1.4'
+                    }}>
+                      {role.description}
+                    </div>
+                  </div>
+                  {/* Role Badge */}
+                  <div style={{
+                    padding: '4px 8px',
+                    backgroundColor: 
+                      role.value === 'admin' ? '#e74c3c' :
+                      role.value === 'instandhalter' ? '#3498db' : '#27ae60',
+                    color: 'white',
+                    borderRadius: '12px',
+                    fontSize: '12px',
+                    fontWeight: 'bold'
+                  }}>
+                    {role.value.toUpperCase()}
+                  </div>
+                </div>
+              ))}
+            </div>
+            
+            {/* Info über Berechtigungen */}
+            <div style={{ 
+              marginTop: '10px', 
+              padding: '10px',
+              backgroundColor: '#e8f4fd',
+              border: '1px solid #b6d7e8',
+              borderRadius: '4px',
+              fontSize: '12px',
+              color: '#2c3e50'
+            }}>
+              <strong>Info:</strong> { 
+                formData.role === 'admin' ? 'Administratoren haben vollen Zugriff auf alle Funktionen.' :
+                formData.role === 'instandhalter' ? 'Instandhalter können Schichtpläne erstellen und Mitarbeiter verwalten.' :
+                'Mitarbeiter können ihre eigenen Schichten und Verfügbarkeiten einsehen.'
+              }
+            </div>
+          </div>
+
           {/* Aktiv Status (nur beim Bearbeiten) */}
           {mode === 'edit' && (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <div style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '10px',
+              padding: '15px',
+              border: '1px solid #e0e0e0',
+              borderRadius: '6px',
+              backgroundColor: '#f8f9fa'
+            }}>
               <input
                 type="checkbox"
                 name="isActive"
@@ -313,9 +408,14 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                 onChange={handleChange}
                 style={{ width: '18px', height: '18px' }}
               />
-              <label htmlFor="isActive" style={{ fontWeight: 'bold', color: '#2c3e50' }}>
-                Mitarbeiter ist aktiv
-              </label>
+              <div>
+                <label htmlFor="isActive" style={{ fontWeight: 'bold', color: '#2c3e50', display: 'block' }}>
+                  Mitarbeiter ist aktiv
+                </label>
+                <div style={{ fontSize: '12px', color: '#7f8c8d' }}>
+                  Inaktive Mitarbeiter können sich nicht anmelden und werden nicht für Schichten eingeplant.
+                </div>
+              </div>
             </div>
           )}
         </div>