182 lines
7.2 KiB
JavaScript
182 lines
7.2 KiB
JavaScript
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'
|
|
import Spaces from './pages/Spaces'
|
|
import SpaceDetail from './pages/SpaceDetail'
|
|
import Impressum from './pages/Impressum'
|
|
import Profile from './pages/Profile'
|
|
import Users from './pages/Users'
|
|
import Permissions from './pages/Permissions'
|
|
import Providers from './pages/Providers'
|
|
import Login from './pages/Login'
|
|
import AuditLogs from './pages/AuditLogs'
|
|
|
|
// Protected Route Component
|
|
const ProtectedRoute = ({ children }) => {
|
|
const { isAuthenticated, loading } = useAuth()
|
|
|
|
if (loading) {
|
|
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>
|
|
)
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
// Group Required Route Component - User muss einer Berechtigungsgruppe zugewiesen sein
|
|
const GroupRequiredRoute = ({ children }) => {
|
|
const { isAuthenticated, loading } = useAuth()
|
|
const { isAdmin, hasFullAccess, accessibleSpaces, 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 />
|
|
}
|
|
|
|
// Admin oder User mit Gruppen haben Zugriff
|
|
const hasGroups = isAdmin || hasFullAccess || (accessibleSpaces && accessibleSpaces.length > 0)
|
|
|
|
if (!hasGroups) {
|
|
return (
|
|
<Navigate
|
|
to="/"
|
|
replace
|
|
state={{
|
|
message: "Sie sind keiner Berechtigungsgruppe zugewiesen. Bitte kontaktieren Sie einen Administrator.",
|
|
type: "warning"
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return children
|
|
}
|
|
|
|
// Public Route Component (redirects to home if already logged in)
|
|
const PublicRoute = ({ children }) => {
|
|
const { isAuthenticated, loading } = useAuth()
|
|
|
|
if (loading) {
|
|
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>
|
|
)
|
|
}
|
|
|
|
return !isAuthenticated ? children : <Navigate to="/" replace />
|
|
}
|
|
|
|
const AppContent = () => {
|
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen bg-gradient-to-r from-slate-700 to-slate-900">
|
|
<div className="flex flex-1 overflow-hidden">
|
|
<Sidebar isOpen={sidebarOpen} setIsOpen={setSidebarOpen} />
|
|
<main className="flex-1 overflow-y-auto flex flex-col bg-gradient-to-r from-slate-700 to-slate-900">
|
|
<div className="flex-1">
|
|
<Routes>
|
|
<Route path="/login" element={<PublicRoute><Login /></PublicRoute>} />
|
|
<Route path="/" element={<ProtectedRoute><Home /></ProtectedRoute>} />
|
|
<Route path="/spaces" element={<GroupRequiredRoute><Spaces /></GroupRequiredRoute>} />
|
|
<Route path="/spaces/:id" element={<GroupRequiredRoute><SpaceDetail /></GroupRequiredRoute>} />
|
|
<Route path="/impressum" element={<GroupRequiredRoute><Impressum /></GroupRequiredRoute>} />
|
|
<Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
|
|
<Route path="/settings/users" element={<AdminRoute><Users /></AdminRoute>} />
|
|
<Route path="/settings/permissions" element={<AdminRoute><Permissions /></AdminRoute>} />
|
|
<Route path="/settings/providers" element={<AdminRoute><Providers /></AdminRoute>} />
|
|
<Route path="/audit-logs" element={<GroupRequiredRoute><AuditLogs /></GroupRequiredRoute>} />
|
|
</Routes>
|
|
</div>
|
|
<Footer />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<AuthProvider>
|
|
<PermissionsProvider>
|
|
<AppContent />
|
|
</PermissionsProvider>
|
|
</AuthProvider>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
|