optimized admin protection

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
+import { PermissionsProvider, usePermissions } from './contexts/PermissionsContext'
 import Sidebar from './components/Sidebar'
 import Footer from './components/Footer'
 import Home from './pages/Home'
@@ -34,6 +35,43 @@ const ProtectedRoute = ({ children }) => {
   return isAuthenticated ? children : <Navigate to="/login" replace />
 }
 
+// Admin Only Route Component
+const AdminRoute = ({ children }) => {
+  const { isAuthenticated, loading } = useAuth()
+  const { isAdmin, loading: permissionsLoading } = usePermissions()
+
+  if (loading || permissionsLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-r from-slate-700 to-slate-900 flex items-center justify-center">
+        <div className="text-center">
+          <svg className="animate-spin h-12 w-12 text-blue-500 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <p className="text-slate-300">Lade...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gradient-to-r from-slate-700 to-slate-900 flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-400 text-xl font-semibold mb-2">Zugriff verweigert</p>
+          <p className="text-slate-300">Nur Administratoren haben Zugriff auf diese Seite.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return children
+}
+
 // Public Route Component (redirects to home if already logged in)
 const PublicRoute = ({ children }) => {
   const { isAuthenticated, loading } = useAuth()
@@ -71,8 +109,8 @@ const AppContent = () => {
               <Route path="/spaces/:id" element={<ProtectedRoute><SpaceDetail /></ProtectedRoute>} />
               <Route path="/impressum" element={<ProtectedRoute><Impressum /></ProtectedRoute>} />
               <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
-              <Route path="/settings/users" element={<ProtectedRoute><Users /></ProtectedRoute>} />
-              <Route path="/settings/permissions" element={<ProtectedRoute><Permissions /></ProtectedRoute>} />
+              <Route path="/settings/users" element={<AdminRoute><Users /></AdminRoute>} />
+              <Route path="/settings/permissions" element={<AdminRoute><Permissions /></AdminRoute>} />
               <Route path="/audit-logs" element={<ProtectedRoute><AuditLogs /></ProtectedRoute>} />
             </Routes>
           </div>
@@ -87,7 +125,9 @@ function App() {
   return (
     <Router>
       <AuthProvider>
-        <AppContent />
+        <PermissionsProvider>
+          <AppContent />
+        </PermissionsProvider>
       </AuthProvider>
     </Router>
   )