} />
@@ -85,7 +125,9 @@ function App() {
return (
-
+
+
+
)
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index dfc92f2..52ccb4f 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -1,11 +1,13 @@
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
+import { usePermissions } from '../contexts/PermissionsContext'
import { useState, useEffect } from 'react'
const Sidebar = ({ isOpen, setIsOpen }) => {
const location = useLocation()
const navigate = useNavigate()
const { user, logout } = useAuth()
+ const { isAdmin } = usePermissions()
const [expandedMenus, setExpandedMenus] = useState({})
const menuItems = [
@@ -22,6 +24,7 @@ const Sidebar = ({ isOpen, setIsOpen }) => {
path: '/settings',
subItems: [
{ path: '/settings/users', label: 'User', icon: '👥' },
+ { path: '/settings/permissions', label: 'Berechtigungen', icon: '🔐' },
]
}
@@ -127,7 +130,8 @@ const Sidebar = ({ isOpen, setIsOpen }) => {
))}
- {/* Settings Menu mit Unterpunkten */}
+ {/* Settings Menu mit Unterpunkten - nur für Admins */}
+ {isAdmin && (
+ )}
{/* Profil-Eintrag und Logout am unteren Ende */}
diff --git a/frontend/src/contexts/PermissionsContext.jsx b/frontend/src/contexts/PermissionsContext.jsx
new file mode 100644
index 0000000..fb1e399
--- /dev/null
+++ b/frontend/src/contexts/PermissionsContext.jsx
@@ -0,0 +1,102 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react'
+import { useAuth } from './AuthContext'
+
+const PermissionsContext = createContext(null)
+
+export const PermissionsProvider = ({ children }) => {
+ const { authFetch, isAuthenticated } = useAuth()
+ const [permissions, setPermissions] = useState({
+ isAdmin: false,
+ hasFullAccess: false,
+ accessibleSpaces: [],
+ canCreateSpace: false,
+ canDeleteSpace: false,
+ canCreateFqdn: {},
+ canDeleteFqdn: {},
+ canUploadCSR: {},
+ canSignCSR: {},
+ })
+ const [loading, setLoading] = useState(true)
+
+ const fetchPermissions = useCallback(async () => {
+ if (!isAuthenticated) {
+ setLoading(false)
+ return
+ }
+
+ try {
+ setLoading(true)
+ const response = await authFetch('/api/user/permissions')
+ if (response.ok) {
+ const data = await response.json()
+ setPermissions({
+ isAdmin: data.isAdmin || false,
+ hasFullAccess: data.hasFullAccess || false,
+ accessibleSpaces: data.accessibleSpaces || [],
+ canCreateSpace: data.permissions?.canCreateSpace || false,
+ canDeleteSpace: data.permissions?.canDeleteSpace || false,
+ canCreateFqdn: data.permissions?.canCreateFqdn || {},
+ canDeleteFqdn: data.permissions?.canDeleteFqdn || {},
+ canUploadCSR: data.permissions?.canUploadCSR || {},
+ canSignCSR: data.permissions?.canSignCSR || {},
+ })
+ }
+ } catch (err) {
+ console.error('Error fetching permissions:', err)
+ } finally {
+ setLoading(false)
+ }
+ }, [isAuthenticated, authFetch])
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ fetchPermissions()
+ } else {
+ setPermissions({
+ isAdmin: false,
+ hasFullAccess: false,
+ accessibleSpaces: [],
+ canCreateSpace: false,
+ canDeleteSpace: false,
+ canCreateFqdn: {},
+ canDeleteFqdn: {},
+ canUploadCSR: {},
+ canSignCSR: {},
+ })
+ setLoading(false)
+ }
+ }, [isAuthenticated, fetchPermissions])
+
+ const canCreateSpace = () => permissions.canCreateSpace
+ const canDeleteSpace = (spaceId) => permissions.canDeleteSpace
+ const canCreateFqdn = (spaceId) => permissions.canCreateFqdn[spaceId] === true
+ const canDeleteFqdn = (spaceId) => permissions.canDeleteFqdn[spaceId] === true
+ const canUploadCSR = (spaceId) => permissions.canUploadCSR[spaceId] === true
+ const canSignCSR = (spaceId) => permissions.canSignCSR[spaceId] === true
+ const hasAccessToSpace = (spaceId) => permissions.accessibleSpaces.includes(spaceId)
+
+ const value = {
+ permissions,
+ loading,
+ refreshPermissions: fetchPermissions,
+ isAdmin: permissions.isAdmin,
+ canCreateSpace,
+ canDeleteSpace,
+ canCreateFqdn,
+ canDeleteFqdn,
+ canUploadCSR,
+ canSignCSR,
+ hasAccessToSpace,
+ }
+
+ return
{children}
+}
+
+export const usePermissions = () => {
+ const context = useContext(PermissionsContext)
+ if (!context) {
+ throw new Error('usePermissions muss innerhalb eines PermissionsProvider verwendet werden')
+ }
+ return context
+}
+
diff --git a/frontend/src/hooks/usePermissions.js b/frontend/src/hooks/usePermissions.js
new file mode 100644
index 0000000..24ea552
--- /dev/null
+++ b/frontend/src/hooks/usePermissions.js
@@ -0,0 +1,3 @@
+// Re-export from PermissionsContext for backward compatibility
+export { usePermissions } from '../contexts/PermissionsContext'
+
diff --git a/frontend/src/pages/AuditLogs.jsx b/frontend/src/pages/AuditLogs.jsx
index 16da40d..4ae55c7 100644
--- a/frontend/src/pages/AuditLogs.jsx
+++ b/frontend/src/pages/AuditLogs.jsx
@@ -163,6 +163,7 @@ const AuditLogs = () => {
csr: 'CSR',
provider: 'Provider',
certificate: 'Zertifikat',
+ permission_group: 'Berechtigungsgruppen',
}
const toggleLogExpansion = (logId) => {
@@ -239,6 +240,7 @@ const AuditLogs = () => {
+
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index dd79380..2cef111 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -267,6 +267,20 @@ const Home = () => {
+
+
+
+
+
Benutzer
+
{stats.users || 0}
+
+
+
+
Fehler beim Laden der Statistiken
diff --git a/frontend/src/pages/Permissions.jsx b/frontend/src/pages/Permissions.jsx
new file mode 100644
index 0000000..b7bec68
--- /dev/null
+++ b/frontend/src/pages/Permissions.jsx
@@ -0,0 +1,637 @@
+import { useState, useEffect } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { usePermissions } from '../hooks/usePermissions'
+
+const Permissions = () => {
+ const { authFetch } = useAuth()
+ const { refreshPermissions } = usePermissions()
+ const [groups, setGroups] = useState([])
+ const [spaces, setSpaces] = useState([])
+ const [loading, setLoading] = useState(false)
+ const [fetching, setFetching] = useState(true)
+ const [error, setError] = useState('')
+ const [showForm, setShowForm] = useState(false)
+ const [editingGroup, setEditingGroup] = useState(null)
+ const [showDeleteModal, setShowDeleteModal] = useState(false)
+ const [groupToDelete, setGroupToDelete] = useState(null)
+ const [confirmChecked, setConfirmChecked] = useState(false)
+ const [formData, setFormData] = useState({
+ name: '',
+ description: '',
+ permission: 'READ',
+ spaceIds: []
+ })
+
+ useEffect(() => {
+ // Lade Daten parallel beim Mount und beim Zurückkehren zur Seite
+ let isMounted = true
+
+ const loadData = async () => {
+ if (isMounted) {
+ setFetching(true)
+ }
+ await Promise.all([fetchGroups(), fetchSpaces()])
+ }
+
+ loadData()
+
+ return () => {
+ isMounted = false
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ const fetchGroups = async () => {
+ try {
+ setError('')
+ const response = await authFetch('/api/permission-groups')
+ if (response.ok) {
+ const data = await response.json()
+ setGroups(Array.isArray(data) ? data : [])
+ } else {
+ setError('Fehler beim Abrufen der Berechtigungsgruppen')
+ }
+ } catch (err) {
+ setError('Fehler beim Abrufen der Berechtigungsgruppen')
+ console.error('Error fetching permission groups:', err)
+ } finally {
+ setFetching(false)
+ }
+ }
+
+ const fetchSpaces = async () => {
+ try {
+ const response = await authFetch('/api/spaces')
+ if (response.ok) {
+ const data = await response.json()
+ setSpaces(Array.isArray(data) ? data : [])
+ }
+ } catch (err) {
+ console.error('Error fetching spaces:', err)
+ }
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setError('')
+ setLoading(true)
+
+ if (!formData.name.trim()) {
+ setError('Bitte geben Sie einen Namen ein')
+ setLoading(false)
+ return
+ }
+
+ if (!formData.permission) {
+ setError('Bitte wählen Sie eine Berechtigungsstufe')
+ setLoading(false)
+ return
+ }
+
+ try {
+ const url = editingGroup
+ ? `/api/permission-groups/${editingGroup.id}`
+ : '/api/permission-groups'
+ const method = editingGroup ? 'PUT' : 'POST'
+
+ const body = {
+ name: formData.name,
+ description: formData.description,
+ permission: formData.permission,
+ spaceIds: formData.spaceIds
+ }
+
+ const response = await authFetch(url, {
+ method,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ })
+
+ if (response.ok) {
+ await fetchGroups()
+ setFormData({ name: '', description: '', permission: 'READ', spaceIds: [] })
+ setShowForm(false)
+ setEditingGroup(null)
+ // Aktualisiere Berechtigungen nach Änderung an Berechtigungsgruppen
+ refreshPermissions()
+ } else {
+ const errorData = await response.json()
+ setError(errorData.error || 'Fehler beim Speichern der Berechtigungsgruppe')
+ }
+ } catch (err) {
+ setError('Fehler beim Speichern der Berechtigungsgruppe')
+ console.error('Error saving permission group:', err)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleEdit = (group) => {
+ setEditingGroup(group)
+ setFormData({
+ name: group.name,
+ description: group.description || '',
+ permission: group.permission,
+ spaceIds: group.spaceIds || []
+ })
+ setShowForm(true)
+ }
+
+ const handleDelete = (group) => {
+ setGroupToDelete(group)
+ setShowDeleteModal(true)
+ setConfirmChecked(false)
+ }
+
+ const confirmDelete = async () => {
+ if (!confirmChecked || !groupToDelete) {
+ return
+ }
+
+ try {
+ const response = await authFetch(`/api/permission-groups/${groupToDelete.id}`, {
+ method: 'DELETE',
+ })
+
+ if (response.ok) {
+ await fetchGroups()
+ setShowDeleteModal(false)
+ setGroupToDelete(null)
+ setConfirmChecked(false)
+ // Aktualisiere Berechtigungen nach Löschen einer Berechtigungsgruppe
+ refreshPermissions()
+ } else {
+ const errorData = await response.json().catch(() => ({ error: 'Fehler beim Löschen' }))
+ alert(errorData.error || 'Fehler beim Löschen der Berechtigungsgruppe')
+ }
+ } catch (err) {
+ console.error('Error deleting permission group:', err)
+ alert('Fehler beim Löschen der Berechtigungsgruppe')
+ }
+ }
+
+ const cancelDelete = () => {
+ setShowDeleteModal(false)
+ setGroupToDelete(null)
+ setConfirmChecked(false)
+ }
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ })
+ }
+
+ const handleSpaceToggle = (spaceId) => {
+ setFormData(prev => {
+ const spaceIds = prev.spaceIds || []
+ if (spaceIds.includes(spaceId)) {
+ return { ...prev, spaceIds: spaceIds.filter(id => id !== spaceId) }
+ } else {
+ return { ...prev, spaceIds: [...spaceIds, spaceId] }
+ }
+ })
+ }
+
+ const getPermissionLabel = (permission) => {
+ switch (permission) {
+ case 'READ':
+ return 'Lesen'
+ case 'READ_WRITE':
+ return 'Lesen/Schreiben'
+ case 'FULL_ACCESS':
+ return 'Vollzugriff'
+ default:
+ return permission
+ }
+ }
+
+ const getPermissionBadgeColor = (permission) => {
+ switch (permission) {
+ case 'READ':
+ return 'bg-green-600/20 text-green-300 border-green-500/30'
+ case 'READ_WRITE':
+ return 'bg-yellow-600/20 text-yellow-300 border-yellow-500/30'
+ case 'FULL_ACCESS':
+ return 'bg-purple-600/20 text-purple-300 border-purple-500/30'
+ default:
+ return 'bg-blue-600/20 text-blue-300 border-blue-500/30'
+ }
+ }
+
+ const getPermissionIcon = (permission) => {
+ switch (permission) {
+ case 'READ':
+ return '👁️'
+ case 'READ_WRITE':
+ return '✏️'
+ case 'FULL_ACCESS':
+ return '🔓'
+ default:
+ return '🔐'
+ }
+ }
+
+ const getPermissionDescription = (permission) => {
+ switch (permission) {
+ case 'READ':
+ return 'Nur CSRs und Zertifikate ansehen. Keine Requests, keine Lösch-/Erstellrechte.'
+ case 'READ_WRITE':
+ return 'FQDNs innerhalb eines Spaces erstellen (nicht löschen), CSRs requesten und ansehen. Keine Spaces löschen/erstellen.'
+ case 'FULL_ACCESS':
+ return 'Vollzugriff: Alles darf gemacht werden. Löschen, Erstellen, CSR requesten und ansehen.'
+ default:
+ return ''
+ }
+ }
+
+ return (
+
+
+
+
+
+ 🔐
+ Berechtigungsgruppen
+
+
Verwalten Sie Berechtigungsgruppen und weisen Sie Spaces zu
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {showForm && (
+
+
+
+ {editingGroup ? '✏️' : '➕'}
+ {editingGroup ? 'Berechtigungsgruppe bearbeiten' : 'Neue Berechtigungsgruppe'}
+
+
+
+
+
+ )}
+
+ {fetching ? (
+
+
+
+
Lade Berechtigungsgruppen...
+
+
+ ) : groups.length === 0 ? (
+
+
🔐
+
+ Noch keine Berechtigungsgruppen vorhanden
+
+
+ Erstellen Sie Ihre erste Gruppe, um Berechtigungen zu verwalten
+
+
+
+ ) : (
+
+ {groups.map((group) => (
+
+
+
+
+ {group.name}
+
+ {group.description && (
+
{group.description}
+ )}
+
+
+
+
+
+
+
+
+ {getPermissionIcon(group.permission)}
+ {getPermissionLabel(group.permission)}
+
+
+ {group.spaceIds && group.spaceIds.length > 0 && (
+
+
+ 📁
+ Zugewiesene Spaces ({group.spaceIds.length})
+
+
+ {group.spaceIds.map(spaceId => {
+ const space = spaces.find(s => s.id === spaceId)
+ return space ? (
+
+ {space.name}
+
+ ) : null
+ })}
+
+
+ )}
+
+
+
+ Erstellt: {group.createdAt ? new Date(group.createdAt).toLocaleDateString('de-DE', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ }) : 'Unbekannt'}
+
+
+
+ ))}
+
+ )}
+
+ {/* Delete Confirmation Modal */}
+ {showDeleteModal && groupToDelete && (
+
+
+
+
+
+ Berechtigungsgruppe löschen
+
+
+
+
+
+ Möchten Sie die Berechtigungsgruppe {groupToDelete.name} wirklich löschen?
+
+
+ Diese Aktion kann nicht rückgängig gemacht werden.
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
Der Benutzername des Admin-Users mit UID 'admin' kann nicht geändert werden
+ )}
@@ -430,9 +440,15 @@ const Profile = () => {
value={formData.email}
onChange={handleChange}
required
- className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ disabled={user?.id === 'admin'}
+ className={`w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+ user?.id === 'admin' ? 'opacity-50 cursor-not-allowed' : ''
+ }`}
placeholder="Geben Sie Ihre E-Mail-Adresse ein"
/>
+ {user?.id === 'admin' && (
+
Die E-Mail-Adresse des Admin-Users mit UID 'admin' kann nicht geändert werden
+ )}
diff --git a/frontend/src/pages/SpaceDetail.jsx b/frontend/src/pages/SpaceDetail.jsx
index cede620..0f28d2d 100644
--- a/frontend/src/pages/SpaceDetail.jsx
+++ b/frontend/src/pages/SpaceDetail.jsx
@@ -1,11 +1,13 @@
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
+import { usePermissions } from '../hooks/usePermissions'
const SpaceDetail = () => {
const { id } = useParams()
const navigate = useNavigate()
const { authFetch } = useAuth()
+ const { canCreateFqdn, canDeleteFqdn, canSignCSR, canUploadCSR, refreshPermissions } = usePermissions()
const [space, setSpace] = useState(null)
const [fqdns, setFqdns] = useState([])
const [showForm, setShowForm] = useState(false)
@@ -123,6 +125,8 @@ const SpaceDetail = () => {
setFqdns([...fqdns, newFqdn])
setFormData({ fqdn: '', description: '' })
setShowForm(false)
+ // Aktualisiere Berechtigungen nach dem Erstellen eines FQDNs
+ refreshPermissions()
} else {
let errorMessage = 'Fehler beim Erstellen des FQDN'
try {
@@ -176,6 +180,8 @@ const SpaceDetail = () => {
setShowDeleteModal(false)
setFqdnToDelete(null)
setConfirmChecked(false)
+ // Aktualisiere Berechtigungen nach dem Löschen eines FQDNs
+ refreshPermissions()
} else {
const errorData = await response.json().catch(() => ({ error: 'Fehler beim Löschen' }))
alert(errorData.error || 'Fehler beim Löschen des FQDN')
@@ -586,7 +592,13 @@ const SpaceDetail = () => {
@@ -630,11 +642,18 @@ const SpaceDetail = () => {
@@ -340,11 +352,18 @@ const Spaces = () => {