+
+
Filter
+ {hasActiveFilters && (
+
-
-
-
-
-
-
+
+
handleFilterChange('action', value)}
+ options={[
+ { value: '', label: 'Alle Aktionen' },
+ { value: 'CREATE', label: 'Erstellt' },
+ { value: 'UPDATE', label: 'Aktualisiert' },
+ { value: 'DELETE', label: 'Gelöscht' },
+ { value: 'UPLOAD', label: 'Hochgeladen' },
+ { value: 'SIGN', label: 'Signiert' },
+ { value: 'ENABLE', label: 'Aktiviert' },
+ { value: 'DISABLE', label: 'Deaktiviert' }
+ ]}
+ />
+ handleFilterChange('resourceType', value)}
+ options={[
+ { value: '', label: 'Alle Typen' },
+ { value: 'user', label: 'Benutzer' },
+ { value: 'space', label: 'Space' },
+ { value: 'fqdn', label: 'FQDN' },
+ { value: 'csr', label: 'CSR' },
+ { value: 'provider', label: 'Provider' },
+ { value: 'certificate', label: 'Zertifikat' },
+ { value: 'permission_group', label: 'Berechtigungsgruppen' }
+ ]}
+ />
+
+
{
value={filters.userId}
onChange={(e) => handleFilterChange('userId', e.target.value)}
placeholder="Benutzer-ID filtern"
- 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"
+ className="w-full px-4 py-3 bg-slate-700/50 hover:bg-slate-700/70 text-white rounded-lg border border-slate-600/50 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all duration-200 text-sm placeholder-slate-400"
/>
diff --git a/frontend/src/pages/RenewalQueue.jsx b/frontend/src/pages/RenewalQueue.jsx
new file mode 100644
index 0000000..e307589
--- /dev/null
+++ b/frontend/src/pages/RenewalQueue.jsx
@@ -0,0 +1,379 @@
+import { useState, useEffect, useMemo, useRef } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+
+// Custom Dropdown Component
+const CustomDropdown = ({ label, value, onChange, options, placeholder = "Auswählen" }) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const dropdownRef = useRef(null)
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ const selectedOption = options.find(opt => opt.value === value) || { label: placeholder }
+
+ return (
+
+
+
+ {isOpen && (
+
+
+ {options.map((option) => (
+
+ ))}
+
+
+ )}
+
+ )
+}
+
+const RenewalQueue = () => {
+ const { authFetch } = useAuth()
+ const [queue, setQueue] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [statusFilter, setStatusFilter] = useState('all')
+ const [spaceFilter, setSpaceFilter] = useState('all')
+ const [isRefreshing, setIsRefreshing] = useState(false)
+ const [lastUpdate, setLastUpdate] = useState(null)
+
+ const fetchQueue = async (silent = false) => {
+ try {
+ if (!silent) {
+ setIsRefreshing(true)
+ }
+ const response = await authFetch('/api/renewal-queue')
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ const data = await response.json()
+ setQueue(data.queue || [])
+ setLastUpdate(new Date())
+ setLoading(false)
+ } catch (err) {
+ console.error('Error fetching renewal queue:', err)
+ setLoading(false)
+ } finally {
+ if (!silent) {
+ setIsRefreshing(false)
+ }
+ }
+ }
+
+ useEffect(() => {
+ fetchQueue()
+ // Live-Refresh alle 5 Sekunden für Echtzeit-Ansicht
+ const interval = setInterval(() => fetchQueue(true), 5000)
+ return () => clearInterval(interval)
+ }, [authFetch])
+
+ // Extrahiere eindeutige Spaces für Filter
+ const uniqueSpaces = useMemo(() => {
+ const spaces = new Set()
+ queue.forEach(item => {
+ if (item.spaceName) {
+ spaces.add(item.spaceName)
+ }
+ })
+ return Array.from(spaces).sort()
+ }, [queue])
+
+ // Filtere und sortiere Queue-Einträge
+ const filteredAndSortedQueue = useMemo(() => {
+ let filtered = queue
+
+ // Filter nach Status
+ if (statusFilter !== 'all') {
+ filtered = filtered.filter(item => item.status === statusFilter)
+ }
+
+ // Filter nach Space
+ if (spaceFilter !== 'all') {
+ filtered = filtered.filter(item => item.spaceName === spaceFilter)
+ }
+
+ // Sortiere nach scheduled_at (nächste oben)
+ filtered.sort((a, b) => {
+ const dateA = new Date(a.scheduledAt)
+ const dateB = new Date(b.scheduledAt)
+ return dateA - dateB
+ })
+
+ return filtered
+ }, [queue, statusFilter, spaceFilter])
+
+ // Teile in "Ausstehend" und "Erledigt"
+ const pendingQueue = useMemo(() => {
+ return filteredAndSortedQueue.filter(item =>
+ item.status === 'pending' || item.status === 'processing'
+ )
+ }, [filteredAndSortedQueue])
+
+ const completedQueue = useMemo(() => {
+ return filteredAndSortedQueue.filter(item =>
+ item.status === 'completed' || item.status === 'failed'
+ )
+ }, [filteredAndSortedQueue])
+
+ const getStatusColor = (status) => {
+ switch (status) {
+ case 'pending':
+ return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50'
+ case 'processing':
+ return 'bg-blue-500/20 text-blue-400 border-blue-500/50'
+ case 'success':
+ return 'bg-green-500/20 text-green-400 border-green-500/50'
+ case 'completed':
+ return 'bg-green-500/20 text-green-400 border-green-500/50'
+ case 'failed':
+ return 'bg-red-500/20 text-red-400 border-red-500/50'
+ default:
+ return 'bg-slate-500/20 text-slate-400 border-slate-500/50'
+ }
+ }
+
+ const formatDate = (dateStr) => {
+ if (!dateStr) return '-'
+ try {
+ // Prüfe ob es bereits im DB-Format ist (YYYY-MM-DD HH:MM:SS)
+ const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2}):(\d{2})/)
+ if (match) {
+ // Parse als UTC und formatiere
+ const [, year, month, day, hour, minute] = match
+ const date = new Date(Date.UTC(
+ parseInt(year, 10),
+ parseInt(month, 10) - 1,
+ parseInt(day, 10),
+ parseInt(hour, 10),
+ parseInt(minute, 10)
+ ))
+ return date.toLocaleString('de-DE', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: false,
+ timeZone: 'UTC'
+ })
+ }
+ // Fallback: Versuche als ISO-String zu parsen
+ const date = new Date(dateStr)
+ if (isNaN(date.getTime())) {
+ return dateStr // Falls Parsing fehlschlägt, gib Original zurück
+ }
+ return date.toLocaleString('de-DE', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: false
+ })
+ } catch (err) {
+ console.error('Fehler beim Formatieren des Datums:', err, dateStr)
+ return dateStr
+ }
+ }
+
+ const renderQueueTable = (items, title) => {
+ if (items.length === 0) {
+ return null
+ }
+
+ return (
+
+
{title}
+
+
+
+
+
+ | FQDN |
+ Space |
+ Geplant für |
+ Status |
+ Verarbeitet |
+ Fehler |
+
+
+
+ {items.map((item) => (
+
+ | {item.fqdn || '-'} |
+ {item.spaceName || '-'} |
+ {formatDate(item.scheduledAt)} |
+
+
+ {item.status}
+
+ |
+ {formatDate(item.processedAt)} |
+ {item.errorMessage || '-'} |
+
+ ))}
+
+
+
+
+
+ )
+ }
+
+
+ const formatLastUpdate = () => {
+ if (!lastUpdate) return ''
+ const now = new Date()
+ const diff = Math.floor((now - lastUpdate) / 1000)
+ if (diff < 5) return 'Gerade eben'
+ if (diff < 60) return `Vor ${diff} Sekunden`
+ const minutes = Math.floor(diff / 60)
+ return `Vor ${minutes} Minute${minutes > 1 ? 'n' : ''}`
+ }
+
+ return (
+
+
+
+
+
Renewal Queue
+
+ Übersicht über geplante und laufende Zertifikatserneuerungen
+
+
+
+ {isRefreshing && (
+
+
+
Aktualisiere...
+
+ )}
+
+ {lastUpdate && (
+
+ {formatLastUpdate()}
+
+ )}
+
+
+
+ {loading ? (
+
+ ) : (
+ <>
+ {/* Filter */}
+
+
+
Filter
+ {(statusFilter !== 'all' || spaceFilter !== 'all') && (
+
+ )}
+
+
+
+ ({ value: space, label: space }))
+ ]}
+ />
+
+
+
+ {/* Ausstehende Tasks */}
+ {renderQueueTable(pendingQueue, `Ausstehend (${pendingQueue.length})`)}
+
+ {/* Erledigte Tasks */}
+ {renderQueueTable(completedQueue, `Erledigt (${completedQueue.length})`)}
+
+ {/* Keine Einträge */}
+ {filteredAndSortedQueue.length === 0 && (
+
+
+ {queue.length === 0
+ ? 'Keine Einträge in der Renewal Queue'
+ : 'Keine Einträge entsprechen den gewählten Filtern'}
+
+
+ )}
+
+ )}
+
+
+ )
+}
+
+export default RenewalQueue
+
diff --git a/frontend/src/pages/SpaceDetail.jsx b/frontend/src/pages/SpaceDetail.jsx
index 62ed2ee..f024dc6 100644
--- a/frontend/src/pages/SpaceDetail.jsx
+++ b/frontend/src/pages/SpaceDetail.jsx
@@ -11,10 +11,21 @@ const SpaceDetail = () => {
const [space, setSpace] = useState(null)
const [fqdns, setFqdns] = useState([])
const [showForm, setShowForm] = useState(false)
+ const [showRequestManagementModal, setShowRequestManagementModal] = useState(false)
+ const [requestManagementType, setRequestManagementType] = useState(null) // 'acme' or 'manually'
const [formData, setFormData] = useState({
fqdn: '',
description: ''
})
+ const [acmeFormData, setAcmeFormData] = useState({
+ fqdn: '',
+ providerId: '',
+ isWildcard: false,
+ email: ''
+ })
+ const [acmeProviders, setAcmeProviders] = useState([])
+ const [acmeLoading, setAcmeLoading] = useState(false)
+ const [acmeError, setAcmeError] = useState('')
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
const [fetchError, setFetchError] = useState('')
@@ -37,16 +48,50 @@ const SpaceDetail = () => {
const [providerTestResult, setProviderTestResult] = useState(null)
const [signingCSR, setSigningCSR] = useState(false)
const [signResult, setSignResult] = useState(null)
+ const [testingProvider, setTestingProvider] = useState(false) // Für Hintergrund-Verbindungstest
const [showCertificatesModal, setShowCertificatesModal] = useState(false)
const [certificates, setCertificates] = useState([])
const [loadingCertificates, setLoadingCertificates] = useState(false)
const [refreshingCertificate, setRefreshingCertificate] = useState(null)
+ const [copiedCertId, setCopiedCertId] = useState(null)
+ const [expandedPemCerts, setExpandedPemCerts] = useState({}) // Speichert welche PEM-Felder ausgeklappt sind
+ const [expandedDetailsCerts, setExpandedDetailsCerts] = useState({}) // Speichert welche Detail-Boxen ausgeklappt sind
+ const [showCnameModal, setShowCnameModal] = useState(false)
+ const [cnameInfo, setCnameInfo] = useState(null)
+ const [verifyingDns, setVerifyingDns] = useState(false)
+ const [dnsVerifyResult, setDnsVerifyResult] = useState(null)
+ const [showDnsCheckModal, setShowDnsCheckModal] = useState(false)
+ const [dnsCheckFqdn, setDnsCheckFqdn] = useState(null)
+ const [requestingCertificate, setRequestingCertificate] = useState(false)
+ const [certificateRequestResult, setCertificateRequestResult] = useState(null)
+ const [certificateStatus, setCertificateStatus] = useState([])
+ const [showCertConfirmationModal, setShowCertConfirmationModal] = useState(false)
+ const [certConfirmationData, setCertConfirmationData] = useState(null)
+
+ // Schritt-Status für Zertifikatsanfrage
+ const [certificateSteps, setCertificateSteps] = useState({
+ 'ZERTIFIKATSANFRAGE_START': 'pending', // pending, loading, success, error
+ 'KEY_PAAR_ERSTELLUNG': 'pending',
+ 'ACCOUNT_ERSTELLUNG': 'pending',
+ 'ORDER_ERSTELLUNG': 'pending',
+ 'REGISTER_AUFRUF': 'pending',
+ 'CHALLENGE_AKTIVIERUNG': 'pending',
+ 'ZERTIFIKAT_ERSTELLUNG': 'pending',
+ 'ZERTIFIKATSANFRAGE_GESAMT': 'pending'
+ })
useEffect(() => {
fetchSpace()
fetchFqdns()
}, [id])
+ useEffect(() => {
+ if (requestManagementType === 'acme') {
+ fetchAcmeProviders()
+ }
+ }, [requestManagementType])
+
+
const fetchSpace = async () => {
try {
@@ -92,6 +137,27 @@ const SpaceDetail = () => {
}
}
+ const fetchAcmeProviders = async () => {
+ try {
+ const response = await authFetch('/api/providers')
+ if (response.ok) {
+ const providersData = await response.json()
+
+ // Filtere nur Provider mit acme_ready=true
+ // Unterstütze sowohl acme_ready (snake_case) als auch acmeReady (camelCase)
+ const acmeReadyProviders = providersData.filter(p => {
+ const isAcmeReady = p.acme_ready === true || p.acmeReady === true
+ return isAcmeReady
+ })
+
+ setAcmeProviders(acmeReadyProviders)
+ }
+ } catch (err) {
+ console.error('Error fetching ACME providers:', err)
+ setAcmeProviders([])
+ }
+ }
+
const handleSubmit = async (e) => {
e.preventDefault()
setError('')
@@ -125,6 +191,7 @@ const SpaceDetail = () => {
setFqdns([...fqdns, newFqdn])
setFormData({ fqdn: '', description: '' })
setShowForm(false)
+ setRequestManagementType(null)
// Aktualisiere Berechtigungen nach dem Erstellen eines FQDNs
refreshPermissions()
} else {
@@ -370,12 +437,116 @@ const SpaceDetail = () => {
})
}
+ const handleAcmeChange = (e) => {
+ const { name, value, type, checked } = e.target
+ setAcmeFormData({
+ ...acmeFormData,
+ [name]: type === 'checkbox' ? checked : value
+ })
+ }
+
+ const handleAcmeSubmit = async (e) => {
+ e.preventDefault()
+ setAcmeError('')
+ setAcmeLoading(true)
+
+ if (!acmeFormData.fqdn.trim()) {
+ setAcmeError('Bitte geben Sie einen FQDN ein.')
+ setAcmeLoading(false)
+ return
+ }
+
+ if (!acmeFormData.providerId) {
+ setAcmeError('Bitte wählen Sie einen Provider aus.')
+ setAcmeLoading(false)
+ return
+ }
+
+ if (!acmeFormData.email.trim()) {
+ setAcmeError('Bitte geben Sie eine Email-Adresse für den Let\'s Encrypt Account ein.')
+ setAcmeLoading(false)
+ return
+ }
+
+ // Email-Validierung
+ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ if (!emailPattern.test(acmeFormData.email.trim())) {
+ setAcmeError('Bitte geben Sie eine gültige Email-Adresse ein.')
+ setAcmeLoading(false)
+ return
+ }
+
+ // FQDN-Validierung
+ const fqdnPattern = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/
+ const wildcardPattern = /^\*\.([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/
+
+ const fqdnToValidate = acmeFormData.isWildcard ? `*.${acmeFormData.fqdn}` : acmeFormData.fqdn
+ const patternToUse = acmeFormData.isWildcard ? wildcardPattern : fqdnPattern
+
+ if (!patternToUse.test(fqdnToValidate.trim())) {
+ setAcmeError('Bitte geben Sie einen gültigen FQDN ein (z.B. example.com, subdomain.example.com oder *.example.com für Wildcard)')
+ setAcmeLoading(false)
+ return
+ }
+
+ try {
+ const response = await authFetch(`/api/spaces/${id}/fqdns`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ fqdn: fqdnToValidate,
+ description: `ACME FQDN via ${acmeProviders.find(p => p.id === acmeFormData.providerId)?.displayName || acmeFormData.providerId}`,
+ providerId: acmeFormData.providerId,
+ acme: true,
+ acmeEmail: acmeFormData.email.trim()
+ }),
+ })
+
+ if (response.ok) {
+ const newFqdn = await response.json()
+ setFqdns([...fqdns, newFqdn])
+ setAcmeFormData({ fqdn: '', providerId: '', isWildcard: false })
+ setShowForm(false)
+ setRequestManagementType(null)
+ refreshPermissions()
+ } else {
+ let errorMessage = 'Fehler beim Erstellen des ACME FQDN'
+ try {
+ const errorText = await response.text()
+ if (errorText) {
+ try {
+ const errorData = JSON.parse(errorText)
+ errorMessage = errorData.error || errorText
+ } catch {
+ errorMessage = errorText
+ }
+ } else if (response.status === 409) {
+ errorMessage = 'Dieser FQDN existiert bereits'
+ }
+ } catch (err) {
+ if (response.status === 409) {
+ errorMessage = 'Dieser FQDN existiert bereits'
+ }
+ }
+ setAcmeError(errorMessage)
+ }
+ } catch (err) {
+ setAcmeError('Fehler beim Erstellen des ACME FQDN')
+ console.error('Error creating ACME fqdn:', err)
+ } finally {
+ setAcmeLoading(false)
+ }
+ }
+
const handleRequestSigning = async (fqdn) => {
setSelectedFqdn(fqdn)
- setSignCSRStep(1)
+ setSignCSRStep(1) // Start mit CSR-Überprüfung
setSelectedProvider(null)
setProviderTestResult(null)
setSignResult(null)
+ setTestingProvider(false) // Neuer State für Hintergrund-Test
// Lade neuesten CSR
try {
@@ -403,6 +574,7 @@ const SpaceDetail = () => {
}
const handleTestProvider = async (providerId) => {
+ setTestingProvider(true)
setProviderTestResult(null)
try {
const response = await authFetch(`/api/providers/${providerId}/test`, {
@@ -411,11 +583,31 @@ const SpaceDetail = () => {
body: JSON.stringify({})
})
const result = await response.json()
- setProviderTestResult(result)
+ // Speichere Provider-ID im Test-Ergebnis, um zu erkennen, welcher Provider getestet wurde
+ setProviderTestResult({ ...result, providerId })
} catch (err) {
- setProviderTestResult({ success: false, message: 'Fehler beim Testen des Providers' })
+ setProviderTestResult({ success: false, message: 'Fehler beim Testen des Providers', providerId })
+ } finally {
+ setTestingProvider(false)
}
}
+
+ // Automatischer Verbindungstest nach Provider-Auswahl im Hintergrund
+ useEffect(() => {
+ if (selectedProvider && signCSRStep === 2 && !testingProvider) {
+ // Setze altes Test-Ergebnis zurück, wenn Provider gewechselt wird
+ const currentProviderId = selectedProvider.id
+ const lastTestedProviderId = providerTestResult?.providerId
+
+ // Wenn Provider gewechselt wurde oder noch kein Test durchgeführt wurde, starte Test
+ if (currentProviderId !== lastTestedProviderId) {
+ setProviderTestResult(null)
+ // Starte Verbindungstest automatisch im Hintergrund
+ handleTestProvider(selectedProvider.id)
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedProvider?.id, signCSRStep])
const handleSignCSR = async () => {
if (!selectedProvider || !selectedFqdn) return
@@ -441,7 +633,27 @@ const SpaceDetail = () => {
const certResponse = await authFetch(`/api/spaces/${id}/fqdns/${selectedFqdn.id}/certificates`)
if (certResponse.ok) {
const certs = await certResponse.json()
- setCertificates(certs)
+ const certsArray = Array.isArray(certs) ? certs : []
+ setCertificates(certsArray)
+
+ // Setze nur das aktuellste (current) Zertifikat als expandiert (Details und PEM)
+ const sortedCerts = [...certsArray].sort((a, b) => {
+ if (a.expiresAt && b.expiresAt) {
+ return new Date(b.expiresAt) - new Date(a.expiresAt)
+ }
+ if (a.createdAt && b.createdAt) {
+ return new Date(b.createdAt) - new Date(a.createdAt)
+ }
+ return 0
+ })
+
+ if (sortedCerts.length > 0 && sortedCerts[0].id) {
+ setExpandedDetailsCerts({ [sortedCerts[0].id]: true })
+ setExpandedPemCerts({ [sortedCerts[0].id]: true })
+ } else {
+ setExpandedDetailsCerts({})
+ setExpandedPemCerts({})
+ }
}
} catch (err) {
console.error('Fehler beim Laden der Zertifikate nach Signierung:', err)
@@ -461,6 +673,7 @@ const SpaceDetail = () => {
setProviderTestResult(null)
setSignResult(null)
setSelectedFqdn(null)
+ setTestingProvider(false)
}
const handleViewCertificates = async (fqdn) => {
@@ -481,15 +694,41 @@ const SpaceDetail = () => {
try {
const certs = await response.json()
// Stelle sicher, dass certs ein Array ist
- setCertificates(Array.isArray(certs) ? certs : [])
+ const certsArray = Array.isArray(certs) ? certs : []
+ setCertificates(certsArray)
+
+ // Setze nur das aktuellste (current) Zertifikat als expandiert (Details und PEM)
+ // Sortiere nach Ablaufdatum (neueste zuerst) und expandiere nur das erste
+ const sortedCerts = [...certsArray].sort((a, b) => {
+ if (a.expiresAt && b.expiresAt) {
+ return new Date(b.expiresAt) - new Date(a.expiresAt)
+ }
+ if (a.createdAt && b.createdAt) {
+ return new Date(b.createdAt) - new Date(a.createdAt)
+ }
+ return 0
+ })
+
+ // Setze nur das erste (current) Zertifikat als expandiert
+ if (sortedCerts.length > 0 && sortedCerts[0].id) {
+ setExpandedDetailsCerts({ [sortedCerts[0].id]: true })
+ setExpandedPemCerts({ [sortedCerts[0].id]: true })
+ } else {
+ setExpandedDetailsCerts({})
+ setExpandedPemCerts({})
+ }
} catch (parseErr) {
console.error('Error parsing certificates response:', parseErr)
setCertificates([])
+ setExpandedDetailsCerts({})
+ setExpandedPemCerts({})
}
} else {
// Bei Fehler-Response (404, 403, etc.) setze leeres Array
console.error('Fehler beim Laden der Zertifikate:', response.status, response.statusText)
setCertificates([])
+ setExpandedDetailsCerts({})
+ setExpandedPemCerts({})
}
} catch (err) {
console.error('Error fetching certificates:', err)
@@ -536,6 +775,625 @@ const SpaceDetail = () => {
setSelectedFqdn(null)
}
+ const handleViewCnameDetails = (fqdn) => {
+ // Prüfe ob ACME-Daten vorhanden sind
+ const hasAcmeSubdomain = fqdn.acmeSubdomain && fqdn.acmeSubdomain.trim() !== ''
+ const hasAcmeFulldomain = fqdn.acmeFulldomain && fqdn.acmeFulldomain.trim() !== ''
+
+ if (!hasAcmeSubdomain && !hasAcmeFulldomain) {
+ return // Keine ACME-Daten vorhanden
+ }
+
+ // Entferne Wildcard-Präfix falls vorhanden
+ const baseFqdn = fqdn.fqdn.startsWith('*.') ? fqdn.fqdn.substring(2) : fqdn.fqdn
+ // Verwende fulldomain falls vorhanden, sonst subdomain
+ const targetDomain = fqdn.acmeFulldomain || fqdn.acmeSubdomain
+
+ setSelectedFqdn(fqdn)
+ setCnameInfo({
+ fqdn: baseFqdn,
+ subdomain: targetDomain,
+ cnameRecord: `_acme-challenge.${baseFqdn}`
+ })
+ setShowCnameModal(true)
+ }
+
+ const closeCnameModal = () => {
+ setShowCnameModal(false)
+ setCnameInfo(null)
+ setSelectedFqdn(null)
+ setDnsVerifyResult(null)
+ }
+
+ const verifyDnsRecord = async () => {
+ if (!cnameInfo) return
+
+ setVerifyingDns(true)
+ setDnsVerifyResult(null)
+
+ const startTime = Date.now()
+ const cooldownDuration = 5000 // 5 Sekunden Cooldown
+
+ try {
+ // CNAME Record Name: _acme-challenge.{fqdn}
+ const cnameRecordName = cnameInfo.cnameRecord
+ // Erwartete Subdomain: wohin der CNAME zeigen soll
+ const expectedSubdomain = cnameInfo.subdomain
+
+ console.log("[DNS Check] Starte DNS-Verifizierung")
+ console.log("[DNS Check] CNAME Record Name:", cnameRecordName)
+ console.log("[DNS Check] Erwartete Subdomain:", expectedSubdomain)
+
+ // Prüfe CNAME Record bei _acme-challenge.{fqdn}
+ // Wir hängen &t=${Date.now()} an, damit jeder Klick eine einzigartige URL ist (verhindert negatives Caching)
+ const dnsUrl = `https://dns.google/resolve?name=${encodeURIComponent(cnameRecordName)}&type=CNAME&t=${Date.now()}`
+ console.log("[DNS Check] DNS API URL:", dnsUrl)
+
+ const cnameResponse = await fetch(dnsUrl)
+
+ console.log("[DNS Check] Response Status:", cnameResponse.status, cnameResponse.statusText)
+
+ if (!cnameResponse.ok) {
+ throw new Error('DNS-Abfrage fehlgeschlagen')
+ }
+
+ const cnameData = await cnameResponse.json()
+ console.log("[DNS Check] Google DNS Antwort:", cnameData)
+ console.log("[DNS Check] Status Code:", cnameData.Status)
+ console.log("[DNS Check] Answer Array:", cnameData.Answer)
+
+ if (cnameData.Status === 0 && cnameData.Answer && cnameData.Answer.length > 0) {
+ // CNAME Record gefunden
+ const cnameRecord = cnameData.Answer.find(record => record.type === 5) // CNAME Record Type = 5
+
+ console.log("[DNS Check] Gefundener CNAME Record:", cnameRecord)
+ console.log("[DNS Check] Alle Records in Answer:", cnameData.Answer.map(r => ({ type: r.type, name: r.name, data: r.data })))
+
+ if (cnameRecord && cnameRecord.data) {
+ // Entferne den abschließenden Punkt vom CNAME Target
+ const targetDomain = cnameRecord.data.replace(/\.$/, '')
+
+ console.log("[DNS Check] Target Domain (bereinigt):", targetDomain)
+ console.log("[DNS Check] Erwartete Subdomain:", expectedSubdomain)
+ console.log("[DNS Check] Vergleich:", targetDomain, "===", expectedSubdomain, "→", targetDomain === expectedSubdomain)
+
+ // Prüfe ob der CNAME auf die erwartete Subdomain zeigt
+ if (expectedSubdomain && targetDomain !== expectedSubdomain) {
+ console.log("[DNS Check] ❌ FEHLER: CNAME zeigt auf falsche Domain")
+ setDnsVerifyResult({
+ success: false,
+ message: `CNAME zeigt auf falsche Domain: ${targetDomain} (erwartet: ${expectedSubdomain})`
+ })
+ } else {
+ console.log("[DNS Check] ✅ ERFOLG: CNAME Record korrekt")
+ setDnsVerifyResult({
+ success: true,
+ message: `CNAME Record korrekt eingerichtet: ${cnameRecordName} → ${targetDomain}`
+ })
+ }
+ } else {
+ console.log("[DNS Check] ❌ FEHLER: CNAME Record ohne data-Feld")
+ setDnsVerifyResult({
+ success: false,
+ message: 'CNAME Record gefunden, aber keine Ziel-Domain vorhanden'
+ })
+ }
+ } else {
+ console.log("[DNS Check] ❌ FEHLER: Kein CNAME Record gefunden")
+ console.log("[DNS Check] Status:", cnameData.Status, "Answer vorhanden:", !!cnameData.Answer, "Answer Länge:", cnameData.Answer?.length)
+ setDnsVerifyResult({
+ success: false,
+ message: 'Kein CNAME Record gefunden'
+ })
+ }
+ } catch (err) {
+ console.error('[DNS Check] ❌ FEHLER bei DNS-Verifizierung:', err)
+ console.error('[DNS Check] Error Details:', {
+ message: err.message,
+ stack: err.stack,
+ name: err.name
+ })
+ setDnsVerifyResult({
+ success: false,
+ message: 'Fehler bei der DNS Abfrage'
+ })
+ } finally {
+ console.log("[DNS Check] Verifizierung abgeschlossen, Cooldown startet")
+ // Warte bis 5 Sekunden vergangen sind (Cooldown)
+ const elapsedTime = Date.now() - startTime
+ const remainingTime = cooldownDuration - elapsedTime
+
+ if (remainingTime > 0) {
+ setTimeout(() => {
+ setVerifyingDns(false)
+ }, remainingTime)
+ } else {
+ setVerifyingDns(false)
+ }
+ }
+ }
+
+ const handleOpenDnsCheck = (fqdn) => {
+ if (!fqdn || !hasAcmeData(fqdn)) return
+
+ // Prüfe Berechtigung: Nur READ_WRITE oder FULL_ACCESS dürfen DNS prüfen
+ if (!canSignCSR(id)) {
+ alert('Keine Berechtigung: Sie benötigen Lese-/Schreibzugriff, um DNS zu prüfen.')
+ return
+ }
+
+ setDnsCheckFqdn(fqdn)
+ setShowDnsCheckModal(true)
+ setDnsVerifyResult(null)
+ }
+
+ const closeDnsCheckModal = () => {
+ setShowDnsCheckModal(false)
+ setDnsCheckFqdn(null)
+ setDnsVerifyResult(null)
+ setVerifyingDns(false)
+ setCertificateRequestResult(null)
+ setCertificateStatus([])
+ // Reset Schritt-Status
+ setCertificateSteps({
+ 'ZERTIFIKATSANFRAGE_START': 'pending',
+ 'KEY_PAAR_ERSTELLUNG': 'pending',
+ 'ACCOUNT_ERSTELLUNG': 'pending',
+ 'ORDER_ERSTELLUNG': 'pending',
+ 'REGISTER_AUFRUF': 'pending',
+ 'CHALLENGE_AKTIVIERUNG': 'pending',
+ 'ZERTIFIKAT_ERSTELLUNG': 'pending',
+ 'ZERTIFIKATSANFRAGE_GESAMT': 'pending'
+ })
+ }
+
+ const requestCertificate = async (confirmed = false) => {
+ if (!dnsCheckFqdn || !dnsVerifyResult?.success) return
+
+ // Prüfe Berechtigung: Nur READ_WRITE oder FULL_ACCESS dürfen Zertifikate beantragen
+ if (!canSignCSR(id)) {
+ alert('Keine Berechtigung: Sie benötigen Lese-/Schreibzugriff, um Zertifikate zu beantragen.')
+ return
+ }
+
+ // Stelle sicher, dass confirmed ein Boolean ist (nicht ein Event-Objekt)
+ const confirmedValue = typeof confirmed === 'boolean' ? confirmed : false
+
+ // Wenn noch nicht bestätigt, prüfe erst ob Bestätigung nötig ist
+ if (!confirmedValue) {
+ // Starte Schritt-Simulation VOR dem Request, damit User die Schritte während des Requests sieht
+ setRequestingCertificate(true)
+ setCertificateRequestResult(null)
+ setCertificateStatus([])
+
+ // Initialisiere Schritt-Status - Start mit erstem Schritt
+ setCertificateSteps({
+ 'ZERTIFIKATSANFRAGE_START': 'success',
+ 'KEY_PAAR_ERSTELLUNG': 'loading',
+ 'ACCOUNT_ERSTELLUNG': 'pending',
+ 'ORDER_ERSTELLUNG': 'pending',
+ 'REGISTER_AUFRUF': 'pending',
+ 'CHALLENGE_AKTIVIERUNG': 'pending',
+ 'ZERTIFIKAT_ERSTELLUNG': 'pending',
+ 'ZERTIFIKATSANFRAGE_GESAMT': 'pending'
+ })
+
+ // Starte Schritt-Simulation
+ const stepOrder = [
+ 'KEY_PAAR_ERSTELLUNG',
+ 'ACCOUNT_ERSTELLUNG',
+ 'ORDER_ERSTELLUNG',
+ 'REGISTER_AUFRUF',
+ 'CHALLENGE_AKTIVIERUNG',
+ 'ZERTIFIKAT_ERSTELLUNG',
+ 'ZERTIFIKATSANFRAGE_GESAMT'
+ ]
+
+ let currentStepIndex = 0
+ let stepInterval = setInterval(() => {
+ if (currentStepIndex < stepOrder.length) {
+ const currentStep = stepOrder[currentStepIndex]
+ const nextStep = stepOrder[currentStepIndex + 1]
+
+ setCertificateSteps(prev => {
+ const updated = { ...prev }
+ updated[currentStep] = 'success'
+ if (nextStep) {
+ updated[nextStep] = 'loading'
+ }
+ return updated
+ })
+
+ currentStepIndex++
+ } else {
+ clearInterval(stepInterval)
+ }
+ }, 2000)
+
+ try {
+ const response = await authFetch(
+ `/api/spaces/${space.id}/fqdns/${dnsCheckFqdn.id}/request-certificate`,
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ confirmed: false }),
+ }
+ )
+
+ clearInterval(stepInterval)
+ const data = await response.json().catch(() => ({ error: 'Unbekannter Fehler' }))
+
+ // Prüfe ob Bestätigung erforderlich ist (kann auch bei 200 OK kommen)
+ if (data.requiresConfirmation) {
+ setCertConfirmationData({
+ expiresAt: data.expiresAt,
+ expiresAtFormatted: data.expiresAtFormatted,
+ message: data.message,
+ })
+ setShowCertConfirmationModal(true)
+ setRequestingCertificate(false)
+ // Reset Schritte
+ setCertificateSteps({
+ 'ZERTIFIKATSANFRAGE_START': 'pending',
+ 'KEY_PAAR_ERSTELLUNG': 'pending',
+ 'ACCOUNT_ERSTELLUNG': 'pending',
+ 'ORDER_ERSTELLUNG': 'pending',
+ 'REGISTER_AUFRUF': 'pending',
+ 'CHALLENGE_AKTIVIERUNG': 'pending',
+ 'ZERTIFIKAT_ERSTELLUNG': 'pending',
+ 'ZERTIFIKATSANFRAGE_GESAMT': 'pending'
+ })
+ return
+ }
+
+ // Wenn keine Bestätigung nötig und Request erfolgreich
+ if (response.ok && data.success && data.stepStatus) {
+ // Backend hat den Prozess durchgeführt - zeige finale Schritte aus Response
+ setCertificateSteps(data.stepStatus)
+ setCertificateRequestResult({
+ success: true,
+ message: data.message || 'Zertifikat erfolgreich beantragt',
+ certificate: data.certificate,
+ privateKey: data.privateKey,
+ })
+ if (data.status && Array.isArray(data.status)) {
+ setCertificateStatus(data.status)
+ }
+ setRequestingCertificate(false)
+ return
+ }
+
+ // Fehler beim Request
+ if (!response.ok) {
+ throw new Error(data.error || `HTTP ${response.status}`)
+ }
+
+ } catch (err) {
+ clearInterval(stepInterval)
+ console.error('Certificate Request Error:', err)
+ setCertificateRequestResult({
+ success: false,
+ message: err.message || 'Fehler beim Beantragen des Zertifikats',
+ })
+ // Setze alle Schritte auf error
+ setCertificateSteps(prev => {
+ const updated = { ...prev }
+ Object.keys(updated).forEach(key => {
+ if (updated[key] === 'pending' || updated[key] === 'loading') {
+ updated[key] = 'error'
+ }
+ })
+ return updated
+ })
+ setRequestingCertificate(false)
+ return
+ }
+ }
+
+ // Ab hier: confirmed = true oder keine Bestätigung nötig
+ // Starte den eigentlichen Prozess mit allen Schritten
+ setRequestingCertificate(true)
+ setCertificateRequestResult(null)
+ setCertificateStatus([])
+
+ // Reset und initialisiere Schritt-Status - Start mit erstem Schritt
+ setCertificateSteps({
+ 'ZERTIFIKATSANFRAGE_START': 'success', // Start ist sofort erfolgreich
+ 'KEY_PAAR_ERSTELLUNG': 'loading', // Erster Schritt startet
+ 'ACCOUNT_ERSTELLUNG': 'pending',
+ 'ORDER_ERSTELLUNG': 'pending',
+ 'REGISTER_AUFRUF': 'pending',
+ 'CHALLENGE_AKTIVIERUNG': 'pending',
+ 'ZERTIFIKAT_ERSTELLUNG': 'pending',
+ 'ZERTIFIKATSANFRAGE_GESAMT': 'pending'
+ })
+
+ // Simuliere sequenzielles Durchlaufen der Schritte während des Requests
+ const stepOrder = [
+ 'KEY_PAAR_ERSTELLUNG',
+ 'ACCOUNT_ERSTELLUNG',
+ 'ORDER_ERSTELLUNG',
+ 'REGISTER_AUFRUF',
+ 'CHALLENGE_AKTIVIERUNG',
+ 'ZERTIFIKAT_ERSTELLUNG',
+ 'ZERTIFIKATSANFRAGE_GESAMT'
+ ]
+
+ let currentStepIndex = 0
+ let stepInterval = null
+
+ stepInterval = setInterval(() => {
+ if (currentStepIndex < stepOrder.length) {
+ const currentStep = stepOrder[currentStepIndex]
+ const nextStep = stepOrder[currentStepIndex + 1]
+
+ setCertificateSteps(prev => {
+ const updated = { ...prev }
+ // Setze aktuellen Schritt auf success (wird später vom Backend überschrieben)
+ updated[currentStep] = 'success'
+ // Setze nächsten Schritt auf loading
+ if (nextStep) {
+ updated[nextStep] = 'loading'
+ }
+ return updated
+ })
+
+ currentStepIndex++
+ } else {
+ if (stepInterval) clearInterval(stepInterval)
+ }
+ }, 2000) // Wechsle alle 2 Sekunden zum nächsten Schritt
+
+ try {
+ const response = await authFetch(
+ `/api/spaces/${space.id}/fqdns/${dnsCheckFqdn.id}/request-certificate`,
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ confirmed: confirmedValue }),
+ }
+ )
+
+ const data = await response.json().catch(() => ({ error: 'Unbekannter Fehler' }))
+
+ // Prüfe ob Bestätigung erforderlich ist (sollte hier nicht mehr vorkommen, da confirmed=true)
+ if (data.requiresConfirmation && !confirmedValue) {
+ // Stoppe Schritt-Simulation
+ if (stepInterval) clearInterval(stepInterval)
+
+ setCertConfirmationData({
+ expiresAt: data.expiresAt,
+ expiresAtFormatted: data.expiresAtFormatted,
+ message: data.message,
+ })
+ setShowCertConfirmationModal(true)
+ setRequestingCertificate(false)
+ return
+ }
+
+ if (!response.ok) {
+ throw new Error(data.error || `HTTP ${response.status}`)
+ }
+
+ // Stoppe Schritt-Simulation
+ if (stepInterval) clearInterval(stepInterval)
+
+ // Aktualisiere Schritt-Status aus Response (überschreibt Simulation)
+ if (data.stepStatus && typeof data.stepStatus === 'object') {
+ setCertificateSteps(data.stepStatus)
+ }
+
+ setCertificateRequestResult({
+ success: true,
+ message: 'Zertifikat erfolgreich beantragt',
+ certificate: data.certificate,
+ privateKey: data.privateKey,
+ })
+ if (data.status && Array.isArray(data.status)) {
+ setCertificateStatus(data.status)
+ }
+ // Schließe Bestätigungs-Modal falls offen
+ setShowCertConfirmationModal(false)
+ setCertConfirmationData(null)
+ } catch (err) {
+ console.error('Certificate Request Error:', err)
+ // Stoppe Schritt-Simulation
+ if (stepInterval) clearInterval(stepInterval)
+
+ setCertificateRequestResult({
+ success: false,
+ message: err.message || 'Fehler beim Beantragen des Zertifikats',
+ })
+ // Setze alle Schritte auf error, die noch pending oder loading sind
+ setCertificateSteps(prev => {
+ const updated = { ...prev }
+ Object.keys(updated).forEach(key => {
+ if (updated[key] === 'pending' || updated[key] === 'loading') {
+ updated[key] = 'error'
+ }
+ })
+ return updated
+ })
+ } finally {
+ setRequestingCertificate(false)
+ }
+ }
+
+ const verifyDnsRecordForFqdn = async () => {
+ if (!dnsCheckFqdn || !hasAcmeData(dnsCheckFqdn)) return
+
+ // Entferne Wildcard-Präfix falls vorhanden
+ const baseFqdn = dnsCheckFqdn.fqdn.startsWith('*.') ? dnsCheckFqdn.fqdn.substring(2) : dnsCheckFqdn.fqdn
+ const cnameRecordName = `_acme-challenge.${baseFqdn}`
+
+ // Erwartete Subdomain vom ACME Provider
+ const expectedSubdomain = dnsCheckFqdn.acmeFulldomain || dnsCheckFqdn.acmeSubdomain
+
+ console.log("[DNS Check FQDN] Starte DNS-Verifizierung für FQDN")
+ console.log("[DNS Check FQDN] Original FQDN:", dnsCheckFqdn.fqdn)
+ console.log("[DNS Check FQDN] Base FQDN:", baseFqdn)
+ console.log("[DNS Check FQDN] CNAME Record Name:", cnameRecordName)
+ console.log("[DNS Check FQDN] Erwartete Subdomain:", expectedSubdomain)
+ console.log("[DNS Check FQDN] ACME Daten:", {
+ acmeFulldomain: dnsCheckFqdn.acmeFulldomain,
+ acmeSubdomain: dnsCheckFqdn.acmeSubdomain
+ })
+
+ setVerifyingDns(true)
+ setDnsVerifyResult(null)
+
+ const startTime = Date.now()
+ const cooldownDuration = 5000 // 5 Sekunden Cooldown
+
+ try {
+ // Prüfe CNAME Record bei _acme-challenge.{fqdn}
+ // Wir hängen &t=${Date.now()} an, damit jeder Klick eine einzigartige URL ist (verhindert negatives Caching)
+ const dnsUrl = `https://dns.google/resolve?name=${encodeURIComponent(cnameRecordName)}&type=CNAME&t=${Date.now()}`
+ console.log("[DNS Check FQDN] DNS API URL:", dnsUrl)
+
+ const cnameResponse = await fetch(dnsUrl)
+
+ console.log("[DNS Check FQDN] Response Status:", cnameResponse.status, cnameResponse.statusText)
+
+ if (!cnameResponse.ok) {
+ throw new Error('DNS-Abfrage fehlgeschlagen')
+ }
+
+ const cnameData = await cnameResponse.json()
+ console.log("[DNS Check FQDN] Google DNS Antwort:", cnameData)
+ console.log("[DNS Check FQDN] Status Code:", cnameData.Status)
+ console.log("[DNS Check FQDN] Answer Array:", cnameData.Answer)
+
+ if (cnameData.Status === 0 && cnameData.Answer && cnameData.Answer.length > 0) {
+ // CNAME Record gefunden
+ const cnameRecord = cnameData.Answer.find(record => record.type === 5) // CNAME Record Type = 5
+
+ console.log("[DNS Check FQDN] Gefundener CNAME Record:", cnameRecord)
+ console.log("[DNS Check FQDN] Alle Records in Answer:", cnameData.Answer.map(r => ({ type: r.type, name: r.name, data: r.data })))
+
+ if (cnameRecord && cnameRecord.data) {
+ // Entferne den abschließenden Punkt vom CNAME Target
+ const targetDomain = cnameRecord.data.replace(/\.$/, '')
+
+ console.log("[DNS Check FQDN] Target Domain (bereinigt):", targetDomain)
+ console.log("[DNS Check FQDN] Erwartete Subdomain:", expectedSubdomain)
+ console.log("[DNS Check FQDN] Vergleich:", targetDomain, "===", expectedSubdomain, "→", targetDomain === expectedSubdomain)
+
+ // Prüfe ob der CNAME auf die erwartete Subdomain zeigt
+ if (expectedSubdomain && targetDomain !== expectedSubdomain) {
+ console.log("[DNS Check FQDN] ❌ FEHLER: CNAME zeigt auf falsche Domain")
+ setDnsVerifyResult({
+ success: false,
+ message: `CNAME zeigt auf falsche Domain: ${targetDomain} (erwartet: ${expectedSubdomain})`
+ })
+ } else {
+ console.log("[DNS Check FQDN] ✅ ERFOLG: CNAME Record korrekt")
+ setDnsVerifyResult({
+ success: true,
+ message: `CNAME Record korrekt eingerichtet: ${cnameRecordName} → ${targetDomain}`
+ })
+ }
+ } else {
+ console.log("[DNS Check FQDN] ❌ FEHLER: CNAME Record ohne data-Feld")
+ setDnsVerifyResult({
+ success: false,
+ message: 'CNAME Record gefunden, aber keine Ziel-Domain vorhanden'
+ })
+ }
+ } else {
+ console.log("[DNS Check FQDN] ❌ FEHLER: Kein CNAME Record gefunden")
+ console.log("[DNS Check FQDN] Status:", cnameData.Status, "Answer vorhanden:", !!cnameData.Answer, "Answer Länge:", cnameData.Answer?.length)
+ setDnsVerifyResult({
+ success: false,
+ message: 'Kein CNAME Record gefunden'
+ })
+ }
+ } catch (err) {
+ console.error('[DNS Check FQDN] ❌ FEHLER bei DNS-Verifizierung:', err)
+ console.error('[DNS Check FQDN] Error Details:', {
+ message: err.message,
+ stack: err.stack,
+ name: err.name
+ })
+ setDnsVerifyResult({
+ success: false,
+ message: 'Fehler bei der DNS Abfrage'
+ })
+ } finally {
+ console.log("[DNS Check FQDN] Verifizierung abgeschlossen, Cooldown startet")
+ // Warte bis 5 Sekunden vergangen sind (Cooldown)
+ const elapsedTime = Date.now() - startTime
+ const remainingTime = cooldownDuration - elapsedTime
+
+ if (remainingTime > 0) {
+ setTimeout(() => {
+ setVerifyingDns(false)
+ }, remainingTime)
+ } else {
+ setVerifyingDns(false)
+ }
+ }
+ }
+
+ // Prüft ob ein FQDN ein ACME-FQDN ist
+ const isAcmeFqdn = (fqdn) => {
+ return fqdn.description && fqdn.description.toLowerCase().includes('acme')
+ }
+
+ // Prüft ob ein FQDN ACME-Daten hat (für CNAME Button)
+ const hasAcmeData = (fqdn) => {
+ const hasSubdomain = fqdn.acmeSubdomain && fqdn.acmeSubdomain.trim() !== ''
+ const hasFulldomain = fqdn.acmeFulldomain && fqdn.acmeFulldomain.trim() !== ''
+ return hasSubdomain || hasFulldomain
+ }
+
+ // Toggle renewal_enabled für einen FQDN
+ const handleToggleRenewalEnabled = async (fqdn) => {
+ if (!fqdn || !fqdn.id) return
+
+ // Prüfe Berechtigung: Nur READ_WRITE oder FULL_ACCESS dürfen Auto Renewal ändern
+ if (!canSignCSR(id)) {
+ alert('Keine Berechtigung: Sie benötigen Lese-/Schreibzugriff, um Auto-Renewal zu ändern.')
+ return
+ }
+
+ const newValue = !(fqdn.renewalEnabled !== false) // Default ist true, daher prüfe auf !== false
+
+ try {
+ const response = await authFetch(`/api/spaces/${id}/fqdns/${fqdn.id}/renewal-enabled`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ renewalEnabled: newValue }),
+ })
+
+ if (response.ok) {
+ // Update lokal
+ setFqdns(prev => prev.map(f =>
+ f.id === fqdn.id ? { ...f, renewalEnabled: newValue } : f
+ ))
+ // Update auch selectedFqdn, falls es das gleiche FQDN ist
+ setSelectedFqdn(prev => {
+ if (prev && prev.id === fqdn.id) {
+ return { ...prev, renewalEnabled: newValue }
+ }
+ return prev
+ })
+ } else {
+ const errorData = await response.json().catch(() => ({ error: 'Fehler beim Aktualisieren' }))
+ alert(errorData.error || 'Fehler beim Aktualisieren des Renewal-Status')
+ }
+ } catch (err) {
+ console.error('Error toggling renewal enabled:', err)
+ alert('Fehler beim Aktualisieren des Renewal-Status')
+ }
+ }
+
if (loadingSpace) {
return (
@@ -584,68 +1442,365 @@ const SpaceDetail = () => {
- {/* Create FQDN Form */}
- {showForm && (
-
-
- Neuen FQDN erstellen
-
-