setIsOpen(false)}
+ />
+ )}
+
+ {/* Sidebar */}
+
+
+ )
+}
+
+export default Sidebar
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..e5f05bf
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Checkmark Animation */
+.checkmark-animated {
+ animation: checkmarkScale 0.6s ease-in-out;
+}
+
+.circle-draw {
+ stroke-dasharray: 62.83;
+ stroke-dashoffset: 62.83;
+ animation: drawCircle 0.6s ease-in-out forwards;
+}
+
+.check-draw {
+ stroke-dasharray: 10;
+ stroke-dashoffset: 10;
+ animation: drawCheck 0.4s ease-in-out 0.3s forwards;
+}
+
+@keyframes drawCircle {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes drawCheck {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes checkmarkScale {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..299bc52
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+ ,
+)
+
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 0000000..a86a53b
--- /dev/null
+++ b/frontend/src/pages/Home.jsx
@@ -0,0 +1,303 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import ProvidersSection from '../components/ProvidersSection'
+
+const Home = () => {
+ const [data, setData] = useState(null)
+ const [stats, setStats] = useState(null)
+ const [loadingStats, setLoadingStats] = useState(true)
+ const [lastUpdate, setLastUpdate] = useState(null)
+ const intervalRef = useRef(null)
+ const isMountedRef = useRef(true)
+
+ // Fetch stats function
+ const fetchStats = useCallback(async (isInitial = false) => {
+ try {
+ if (isInitial) {
+ setLoadingStats(true)
+ }
+ const response = await fetch('/api/stats')
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ const statsData = await response.json()
+ if (isMountedRef.current) {
+ setStats(statsData)
+ setLoadingStats(false)
+ setLastUpdate(new Date())
+ }
+ } catch (err) {
+ console.error('Error fetching stats:', err)
+ if (isMountedRef.current) {
+ setLoadingStats(false)
+ }
+ }
+ }, [])
+
+ // Fetch health function
+ const fetchHealth = useCallback(async () => {
+ try {
+ const response = await fetch('/api/health')
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ const healthData = await response.json()
+ if (isMountedRef.current) {
+ setData(healthData)
+ }
+ } catch (err) {
+ console.error('Error fetching health:', err)
+ }
+ }, [])
+
+ // Handle visibility change - pause polling when tab is hidden
+ useEffect(() => {
+ const handleVisibilityChange = () => {
+ if (document.hidden) {
+ // Tab is hidden, clear interval
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current)
+ intervalRef.current = null
+ }
+ } else {
+ // Tab is visible, resume polling
+ if (!intervalRef.current && isMountedRef.current) {
+ // Fetch immediately when tab becomes visible
+ fetch('/api/stats')
+ .then(res => res.json())
+ .then(statsData => {
+ if (isMountedRef.current) {
+ setStats(statsData)
+ setLastUpdate(new Date())
+ }
+ })
+ .catch(err => console.error('Error fetching stats:', err))
+
+ fetch('/api/health')
+ .then(res => res.json())
+ .then(healthData => {
+ if (isMountedRef.current) {
+ setData(healthData)
+ }
+ })
+ .catch(err => console.error('Error fetching health:', err))
+
+ // Resume polling
+ intervalRef.current = setInterval(() => {
+ if (isMountedRef.current) {
+ fetch('/api/stats')
+ .then(res => res.json())
+ .then(statsData => {
+ if (isMountedRef.current) {
+ setStats(statsData)
+ setLastUpdate(new Date())
+ }
+ })
+ .catch(err => console.error('Error fetching stats:', err))
+
+ fetch('/api/health')
+ .then(res => res.json())
+ .then(healthData => {
+ if (isMountedRef.current) {
+ setData(healthData)
+ }
+ })
+ .catch(err => console.error('Error fetching health:', err))
+ }
+ }, 5000)
+ }
+ }
+ }
+
+ document.addEventListener('visibilitychange', handleVisibilityChange)
+ return () => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange)
+ }
+ }, [])
+
+ useEffect(() => {
+ isMountedRef.current = true
+
+ // Define fetch functions inside useEffect to avoid dependency issues
+ const fetchStatsInternal = async (isInitial = false) => {
+ try {
+ if (isInitial) {
+ setLoadingStats(true)
+ }
+ const response = await fetch('/api/stats')
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ const statsData = await response.json()
+ if (isMountedRef.current) {
+ setStats(statsData)
+ setLoadingStats(false)
+ setLastUpdate(new Date())
+ }
+ } catch (err) {
+ console.error('Error fetching stats:', err)
+ if (isMountedRef.current) {
+ setLoadingStats(false)
+ }
+ }
+ }
+
+ const fetchHealthInternal = async () => {
+ try {
+ const response = await fetch('/api/health')
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ const healthData = await response.json()
+ if (isMountedRef.current) {
+ setData(healthData)
+ }
+ } catch (err) {
+ console.error('Error fetching health:', err)
+ }
+ }
+
+ // Initial fetch
+ fetchHealthInternal()
+ fetchStatsInternal(true) // Pass true for initial load to show loading state
+
+ // Set up polling interval (5 seconds)
+ intervalRef.current = setInterval(() => {
+ if (isMountedRef.current) {
+ fetchStatsInternal(false) // Pass false for background updates
+ fetchHealthInternal()
+ }
+ }, 5000)
+
+ // Cleanup on unmount
+ return () => {
+ isMountedRef.current = false
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current)
+ intervalRef.current = null
+ }
+ }
+ }, []) // Empty dependency array - only run on mount
+
+ return (
+
+
+
Willkommen
+
+ Dies ist die Startseite der Certigo Addon Anwendung.
+
+
+
+ {/* Stats Dashboard */}
+
+
+
+ Statistiken
+
+ {lastUpdate && (
+
+
+
+ {new Date(lastUpdate).toLocaleTimeString('de-DE', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ })}
+
+
+ )}
+
+ {!stats && loadingStats ? (
+
Lade Statistiken...
+ ) : stats ? (
+
+
+
+
+
Spaces
+
{stats.spaces}
+
+
+
+
+
+
+
+
+
FQDNs
+
{stats.fqdns}
+
+
+
+
+
+
+
+
+
+
+
Zertifikate
+
{stats.certificates || 0}
+
+
+
+
+
+ ) : (
+
Fehler beim Laden der Statistiken
+ )}
+
+
+ {/* System Status */}
+
+
+ System Status
+
+ {data ? (
+
+
+ Status:{' '}
+ {data.status}
+
+
+ Nachricht: {data.message}
+
+
+ ) : (
+
Lade Daten...
+ )}
+
+
+ {/* SSL Certificate Providers */}
+
+
+
+
+ )
+}
+
+export default Home
+
diff --git a/frontend/src/pages/Impressum.jsx b/frontend/src/pages/Impressum.jsx
new file mode 100644
index 0000000..391dd05
--- /dev/null
+++ b/frontend/src/pages/Impressum.jsx
@@ -0,0 +1,41 @@
+const Impressum = () => {
+ return (
+
+
+
Impressum
+
+
+
+
+ Angaben gemäß § 5 TMG
+
+
+ Hier können Sie Ihre rechtlichen Angaben eintragen.
+
+
+
+
+
+ Kontakt
+
+
+ Kontaktinformationen können hier eingetragen werden.
+
+
+
+
+
+ Haftungsausschluss
+
+
+ Haftungsausschluss-Informationen können hier eingetragen werden.
+
+
+
+
+
+ )
+}
+
+export default Impressum
+
diff --git a/frontend/src/pages/SpaceDetail.jsx b/frontend/src/pages/SpaceDetail.jsx
new file mode 100644
index 0000000..da656b4
--- /dev/null
+++ b/frontend/src/pages/SpaceDetail.jsx
@@ -0,0 +1,1538 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+
+const SpaceDetail = () => {
+ const { id } = useParams()
+ const navigate = useNavigate()
+ const [space, setSpace] = useState(null)
+ const [fqdns, setFqdns] = useState([])
+ const [showForm, setShowForm] = useState(false)
+ const [formData, setFormData] = useState({
+ fqdn: '',
+ description: ''
+ })
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState('')
+ const [fetchError, setFetchError] = useState('')
+ const [loadingSpace, setLoadingSpace] = useState(true)
+ const [showDeleteModal, setShowDeleteModal] = useState(false)
+ const [fqdnToDelete, setFqdnToDelete] = useState(null)
+ const [confirmChecked, setConfirmChecked] = useState(false)
+ const [selectedFqdn, setSelectedFqdn] = useState(null)
+ const [csrData, setCsrData] = useState(null)
+ const [csrHistory, setCsrHistory] = useState([])
+ const [uploadingCSR, setUploadingCSR] = useState(false)
+ const [csrError, setCsrError] = useState('')
+ const [showCSRModal, setShowCSRModal] = useState(false)
+ const [showCSRDropdown, setShowCSRDropdown] = useState({})
+ const [copiedFqdnId, setCopiedFqdnId] = useState(null)
+ const [showSignCSRModal, setShowSignCSRModal] = useState(false)
+ const [signCSRStep, setSignCSRStep] = useState(1)
+ const [selectedProvider, setSelectedProvider] = useState(null)
+ const [providers, setProviders] = useState([])
+ const [providerTestResult, setProviderTestResult] = useState(null)
+ const [signingCSR, setSigningCSR] = useState(false)
+ const [signResult, setSignResult] = useState(null)
+ const [showCertificatesModal, setShowCertificatesModal] = useState(false)
+ const [certificates, setCertificates] = useState([])
+ const [loadingCertificates, setLoadingCertificates] = useState(false)
+ const [refreshingCertificate, setRefreshingCertificate] = useState(null)
+
+ useEffect(() => {
+ fetchSpace()
+ fetchFqdns()
+ }, [id])
+
+
+ const fetchSpace = async () => {
+ try {
+ setLoadingSpace(true)
+ const response = await fetch('/api/spaces')
+ if (response.ok) {
+ const spaces = await response.json()
+ const foundSpace = spaces.find(s => s.id === id)
+ if (foundSpace) {
+ setSpace(foundSpace)
+ } else {
+ setFetchError('Space nicht gefunden')
+ }
+ } else {
+ setFetchError('Fehler beim Laden des Space')
+ }
+ } catch (err) {
+ console.error('Error fetching space:', err)
+ setFetchError('Fehler beim Laden des Space')
+ } finally {
+ setLoadingSpace(false)
+ }
+ }
+
+ const fetchFqdns = async () => {
+ try {
+ setFetchError('')
+ const response = await fetch(`/api/spaces/${id}/fqdns`)
+ if (response.ok) {
+ const data = await response.json()
+ setFqdns(Array.isArray(data) ? data : [])
+ } else {
+ if (response.status !== 404) {
+ const errorText = `Fehler beim Abrufen der FQDNs: ${response.status}`
+ console.error(errorText)
+ setFetchError(errorText)
+ }
+ setFqdns([])
+ }
+ } catch (err) {
+ console.error('Error fetching fqdns:', err)
+ setFqdns([])
+ }
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setError('')
+ setLoading(true)
+
+ if (!formData.fqdn.trim()) {
+ setError('Bitte geben Sie einen FQDN ein.')
+ setLoading(false)
+ return
+ }
+
+ // Einfache FQDN-Validierung
+ const fqdnPattern = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/
+ if (!fqdnPattern.test(formData.fqdn.trim())) {
+ setError('Bitte geben Sie einen gültigen FQDN ein (z.B. example.com, subdomain.example.com)')
+ setLoading(false)
+ return
+ }
+
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(formData),
+ })
+
+ if (response.ok) {
+ const newFqdn = await response.json()
+ setFqdns([...fqdns, newFqdn])
+ setFormData({ fqdn: '', description: '' })
+ setShowForm(false)
+ } else {
+ let errorMessage = 'Fehler beim Erstellen des FQDN'
+ try {
+ const errorText = await response.text()
+ if (errorText) {
+ // Versuche JSON zu parsen
+ try {
+ const errorData = JSON.parse(errorText)
+ errorMessage = errorData.error || errorText
+ } catch {
+ // Wenn kein JSON, verwende den Text direkt
+ errorMessage = errorText
+ }
+ } else if (response.status === 409) {
+ errorMessage = 'Dieser FQDN existiert bereits'
+ }
+ } catch (err) {
+ // Fallback auf Standard-Fehlermeldung
+ if (response.status === 409) {
+ errorMessage = 'Dieser FQDN existiert bereits'
+ }
+ }
+ setError(errorMessage)
+ }
+ } catch (err) {
+ setError('Fehler beim Erstellen des FQDN')
+ console.error('Error creating fqdn:', err)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleDelete = (fqdn) => {
+ setFqdnToDelete(fqdn)
+ setShowDeleteModal(true)
+ setConfirmChecked(false)
+ }
+
+ const confirmDelete = async () => {
+ if (!confirmChecked || !fqdnToDelete) {
+ return
+ }
+
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${fqdnToDelete.id}`, {
+ method: 'DELETE',
+ })
+
+ if (response.ok) {
+ setFqdns(fqdns.filter(fqdn => fqdn.id !== fqdnToDelete.id))
+ setShowDeleteModal(false)
+ setFqdnToDelete(null)
+ setConfirmChecked(false)
+ } else {
+ const errorData = await response.json().catch(() => ({ error: 'Fehler beim Löschen' }))
+ alert(errorData.error || 'Fehler beim Löschen des FQDN')
+ }
+ } catch (err) {
+ console.error('Error deleting fqdn:', err)
+ alert('Fehler beim Löschen des FQDN')
+ }
+ }
+
+ const cancelDelete = () => {
+ setShowDeleteModal(false)
+ setFqdnToDelete(null)
+ setConfirmChecked(false)
+ }
+
+ const copyFqdnIdToClipboard = async (fqdnId, e) => {
+ e.stopPropagation()
+ try {
+ await navigator.clipboard.writeText(fqdnId)
+ setCopiedFqdnId(fqdnId)
+ setTimeout(() => setCopiedFqdnId(null), 2000)
+ } catch (err) {
+ console.error('Fehler beim Kopieren:', err)
+ }
+ }
+
+ const handleCSRUpload = async (fqdn, file) => {
+ if (!file) {
+ setCsrError('Bitte wählen Sie eine Datei aus')
+ return
+ }
+
+ setUploadingCSR(true)
+ setCsrError('')
+
+ const formData = new FormData()
+ formData.append('csr', file)
+ formData.append('spaceId', id)
+ formData.append('fqdn', fqdn.fqdn)
+
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr`, {
+ method: 'POST',
+ body: formData,
+ })
+
+ if (response.ok) {
+ const csr = await response.json()
+
+ // Füge den neuen CSR zur History hinzu (nur wenn der Bereich bereits geöffnet ist)
+ if (showCSRDropdown[fqdn.id]) {
+ const newCsrWithFqdnId = { ...csr, fqdnId: fqdn.id }
+ setCsrHistory(prev => {
+ const filtered = prev.filter(csrItem => csrItem.fqdnId !== fqdn.id)
+ // Füge den neuen CSR am Anfang hinzu (neuester zuerst)
+ return [newCsrWithFqdnId, ...filtered]
+ })
+ }
+
+ setCsrData(csr)
+ setSelectedFqdn(fqdn)
+ setShowCSRModal(true)
+
+ // Aktualisiere die FQDN-Liste
+ fetchFqdns()
+ } else {
+ const errorText = await response.text()
+ setCsrError(errorText || 'Fehler beim Hochladen des CSR')
+ }
+ } catch (err) {
+ console.error('Error uploading CSR:', err)
+ setCsrError('Fehler beim Hochladen des CSR')
+ } finally {
+ setUploadingCSR(false)
+ }
+ }
+
+ const fetchCSR = async (fqdn) => {
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr`)
+ if (response.ok) {
+ const csr = await response.json()
+ if (csr) {
+ setCsrData(csr)
+ setSelectedFqdn(fqdn)
+ } else {
+ setCsrData(null)
+ setSelectedFqdn(fqdn)
+ }
+ }
+ } catch (err) {
+ console.error('Error fetching CSR:', err)
+ }
+ }
+
+ const handleViewCSR = async (fqdn) => {
+ setSelectedFqdn(fqdn)
+ setCsrError('')
+ setShowCSRModal(true)
+
+ // Lade neuesten CSR und alle CSRs für History
+ try {
+ // Lade neuesten CSR
+ const latestResponse = await fetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr?latest=true`)
+ if (latestResponse.ok) {
+ const csr = await latestResponse.json()
+ setCsrData(csr || null)
+ } else {
+ setCsrData(null)
+ }
+
+ // Lade alle CSRs für History
+ const historyResponse = await fetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr`)
+ if (historyResponse.ok) {
+ const history = await historyResponse.json()
+ setCsrHistory(Array.isArray(history) ? history : [])
+ } else {
+ setCsrHistory([])
+ }
+ } catch (err) {
+ console.error('Error fetching CSR:', err)
+ setCsrData(null)
+ setCsrHistory([])
+ }
+ }
+
+ const handleSelectCSR = (csr) => {
+ setCsrData(csr)
+ setShowCSRDropdown({})
+ }
+
+ const closeCSRModal = () => {
+ setShowCSRModal(false)
+ setSelectedFqdn(null)
+ setCsrData(null)
+ setCsrError('')
+ setCsrHistory([])
+ }
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ })
+ }
+
+ const handleRequestSigning = async (fqdn) => {
+ setSelectedFqdn(fqdn)
+ setSignCSRStep(1)
+ setSelectedProvider(null)
+ setProviderTestResult(null)
+ setSignResult(null)
+
+ // Lade neuesten CSR
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr?latest=true`)
+ if (response.ok) {
+ const csr = await response.json()
+ setCsrData(csr)
+ }
+ } catch (err) {
+ console.error('Error fetching CSR:', err)
+ }
+
+ // Lade Provider
+ try {
+ const response = await fetch('/api/providers')
+ if (response.ok) {
+ const providersData = await response.json()
+ setProviders(providersData.filter(p => p.enabled))
+ }
+ } catch (err) {
+ console.error('Error fetching providers:', err)
+ }
+
+ setShowSignCSRModal(true)
+ }
+
+ const handleTestProvider = async (providerId) => {
+ setProviderTestResult(null)
+ try {
+ const response = await fetch(`/api/providers/${providerId}/test`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({})
+ })
+ const result = await response.json()
+ setProviderTestResult(result)
+ } catch (err) {
+ setProviderTestResult({ success: false, message: 'Fehler beim Testen des Providers' })
+ }
+ }
+
+ const handleSignCSR = async () => {
+ if (!selectedProvider || !selectedFqdn) return
+
+ setSigningCSR(true)
+ setSignResult(null)
+
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${selectedFqdn.id}/csr/sign`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ providerId: selectedProvider.id
+ })
+ })
+
+ const result = await response.json()
+ setSignResult(result)
+
+ if (result.success) {
+ // Lade Zertifikate automatisch neu, um das neue Zertifikat anzuzeigen
+ try {
+ const certResponse = await fetch(`/api/spaces/${id}/fqdns/${selectedFqdn.id}/certificates`)
+ if (certResponse.ok) {
+ const certs = await certResponse.json()
+ setCertificates(certs)
+ }
+ } catch (err) {
+ console.error('Fehler beim Laden der Zertifikate nach Signierung:', err)
+ }
+ }
+ } catch (err) {
+ setSignResult({ success: false, message: 'Fehler beim Signieren des CSR' })
+ } finally {
+ setSigningCSR(false)
+ }
+ }
+
+ const closeSignCSRModal = () => {
+ setShowSignCSRModal(false)
+ setSignCSRStep(1)
+ setSelectedProvider(null)
+ setProviderTestResult(null)
+ setSignResult(null)
+ setSelectedFqdn(null)
+ }
+
+ const handleViewCertificates = async (fqdn) => {
+ setSelectedFqdn(fqdn)
+ setLoadingCertificates(true)
+ setCertificates([])
+
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${fqdn.id}/certificates`)
+ if (response.ok) {
+ const certs = await response.json()
+ setCertificates(certs)
+ } else {
+ console.error('Fehler beim Laden der Zertifikate')
+ }
+ } catch (err) {
+ console.error('Error fetching certificates:', err)
+ } finally {
+ setLoadingCertificates(false)
+ setShowCertificatesModal(true)
+ }
+ }
+
+ const handleRefreshCertificate = async (cert) => {
+ setRefreshingCertificate(cert.id)
+ try {
+ const response = await fetch(`/api/spaces/${id}/fqdns/${selectedFqdn.id}/certificates/${cert.id}/refresh`, {
+ method: 'POST'
+ })
+ if (response.ok) {
+ const result = await response.json()
+ // Aktualisiere Zertifikat in der Liste
+ setCertificates(prev => prev.map(c =>
+ c.id === cert.id
+ ? { ...c, certificatePEM: result.certificatePEM }
+ : c
+ ))
+ }
+ } catch (err) {
+ console.error('Error refreshing certificate:', err)
+ } finally {
+ setRefreshingCertificate(null)
+ }
+ }
+
+ const closeCertificatesModal = () => {
+ setShowCertificatesModal(false)
+ setCertificates([])
+ setSelectedFqdn(null)
+ }
+
+ if (loadingSpace) {
+ return (
+
+ )
+ }
+
+ if (!space) {
+ return (
+
+
+
+
{fetchError || 'Space nicht gefunden'}
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+
{space.name}
+ {space.description && (
+
{space.description}
+ )}
+
+
+
+ {/* Create FQDN Form */}
+ {showForm && (
+
+
+ Neuen FQDN erstellen
+
+
+
+ )}
+
+ {/* FQDNs List */}
+
+
+
+ FQDN-Liste
+
+
+
+ {fetchError && (
+
+
{fetchError}
+
+
+ )}
+ {!fetchError && fqdns.length === 0 ? (
+
+ Noch keine FQDNs vorhanden. Erstellen Sie Ihren ersten FQDN!
+
+ ) : (
+
+ {fqdns.map((fqdn) => (
+
+
+
+
+
+ {fqdn.fqdn || 'Unbenannt'}
+
+ {fqdn.description && (
+
{fqdn.description}
+ )}
+
+ Erstellt: {fqdn.createdAt ? new Date(fqdn.createdAt).toLocaleString('de-DE') : 'Unbekannt'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Erweiterter Bereich für CSR History */}
+ {showCSRDropdown[fqdn.id] && (
+
+
CSR History
+ {(() => {
+ const fqdnHistory = csrHistory
+ .filter(csr => csr.fqdnId === fqdn.id)
+ .sort((a, b) => {
+ // Sortiere nach created_at, neueste zuerst
+ const dateA = new Date(a.createdAt).getTime()
+ const dateB = new Date(b.createdAt).getTime()
+ return dateB - dateA
+ })
+ return fqdnHistory.length > 0 ? (
+
+ {fqdnHistory.map((csr) => (
+
+ ))}
+
+ ) : (
+
+ Keine CSRs vorhanden. Laden Sie einen CSR hoch.
+
+ )
+ })()}
+
+ )}
+
+ ))}
+
+ )}
+
+
+
+ {/* CSR Details Modal */}
+ {showCSRModal && selectedFqdn && (
+
+
+
+
+
+
+ CSR Details: {selectedFqdn.fqdn}
+
+
+
+
+
+ {uploadingCSR ? (
+
+
CSR wird hochgeladen...
+
+ ) : csrError ? (
+
+ ) : csrData ? (
+
+
+
Subject
+
+ {csrData.subject}
+
+
+
+
+
+
Public Key Algorithm
+
{csrData.publicKeyAlgorithm}
+
+
+
Signature Algorithm
+
{csrData.signatureAlgorithm}
+
+
+
Key Size
+
{csrData.keySize} bits
+
+
+
Upload Timestamp
+
+ {new Date(csrData.createdAt).toLocaleString('de-DE')}
+
+
+
+
+ {csrData.dnsNames && csrData.dnsNames.length > 0 && (
+
+
DNS Names (SAN)
+
+ {csrData.dnsNames.map((dns, idx) => (
+ - {dns}
+ ))}
+
+
+ )}
+
+ {csrData.emailAddresses && csrData.emailAddresses.length > 0 && (
+
+
Email Addresses
+
+ {csrData.emailAddresses.map((email, idx) => (
+ - {email}
+ ))}
+
+
+ )}
+
+ {csrData.ipAddresses && csrData.ipAddresses.length > 0 && (
+
+
IP Addresses
+
+ {csrData.ipAddresses.map((ip, idx) => (
+ - {ip}
+ ))}
+
+
+ )}
+
+ {csrData.uris && csrData.uris.length > 0 && (
+
+
URIs
+
+ {csrData.uris.map((uri, idx) => (
+ - {uri}
+ ))}
+
+
+ )}
+
+ {csrData.extensions && csrData.extensions.length > 0 && (
+
+
Requested Extensions:
+
+ {csrData.extensions.map((ext, idx) => (
+
+
+
+ {ext.name || ext.oid || ext.id}:
+
+ {ext.critical && (
+
+ critical
+
+ )}
+
+ {ext.description && (
+
+ {ext.description.includes('\n') ? (
+ ext.description.split('\n').map((line, i) => (
+
+ {line.trim()}
+
+ ))
+ ) : (
+ ext.description.split(', ').map((item, i) => (
+
+ {item}
+
+ ))
+ )}
+
+ )}
+ {!ext.description && ext.purposes && ext.purposes.length > 0 && (
+
+ {ext.purposes.map((purpose, pIdx) => (
+
+ {purpose}
+
+ ))}
+
+ )}
+ {!ext.description && !ext.purposes && (
+
+ {ext.value}
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+
CSR PEM
+
+ {csrData.csrPem}
+
+
+
+ ) : (
+
+
+ Kein CSR für diesen FQDN vorhanden.
+
+
+ Laden Sie einen CSR über den Upload-Button hoch.
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+ {/* Delete Confirmation Modal */}
+ {showDeleteModal && fqdnToDelete && (
+
+
+
+
+
+
+ Möchten Sie den FQDN {fqdnToDelete.fqdn} wirklich löschen?
+
+
+ Diese Aktion kann nicht rückgängig gemacht werden.
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Sign CSR Modal */}
+ {showSignCSRModal && selectedFqdn && (
+
+
+
+
+
CSR signieren lassen
+
+
+
+ {/* Step Indicator */}
+
+ {[1, 2, 3, 4].map((step) => (
+
+
= step
+ ? 'bg-purple-600 border-purple-600 text-white'
+ : 'border-slate-600 text-slate-400'
+ }`}>
+ {signCSRStep > step ? (
+
+ ) : (
+
{step}
+ )}
+
+ {step < 4 && (
+
step ? 'bg-purple-600' : 'bg-slate-600'
+ }`} />
+ )}
+
+ ))}
+
+
+ {/* Step 1: CSR Details */}
+ {signCSRStep === 1 && (
+
+
1. CSR Details überprüfen
+ {csrData ? (
+
+
+
Subject
+
{csrData.subject}
+
+
+
+
Public Key Algorithm
+
{csrData.publicKeyAlgorithm}
+
+
+
Key Size
+
{csrData.keySize} bits
+
+
+ {csrData.dnsNames && csrData.dnsNames.length > 0 && (
+
+
DNS Names
+
+ {csrData.dnsNames.map((dns, idx) => (
+ - {dns}
+ ))}
+
+
+ )}
+
+ ) : (
+
Kein CSR gefunden für diesen FQDN.
+ )}
+
+
+
+
+ )}
+
+ {/* Step 2: Provider Selection */}
+ {signCSRStep === 2 && (
+
+
2. Provider auswählen
+
+ {providers.length > 0 ? (
+ providers.map((provider) => (
+
+ ))
+ ) : (
+
Keine aktivierten Provider verfügbar.
+ )}
+
+
+
+
+
+
+ )}
+
+ {/* Step 3: Quick Check */}
+ {signCSRStep === 3 && (
+
+
3. Provider-Verbindung testen
+ {selectedProvider && (
+
+
{selectedProvider.displayName}
+
{selectedProvider.description}
+
+ )}
+
+ {providerTestResult && (
+
+
+ {providerTestResult.message || (providerTestResult.success ? 'Verbindung erfolgreich' : 'Verbindung fehlgeschlagen')}
+
+
+ )}
+
+
+
+
+
+ )}
+
+ {/* Step 4: Submit */}
+ {signCSRStep === 4 && (
+
+
4. CSR einreichen
+
+
Bereit zum Einreichen:
+
+ - • FQDN: {selectedFqdn?.fqdn}
+ - • Provider: {selectedProvider?.displayName}
+ - • CSR: {csrData?.subject}
+
+
+
+ {signResult && !signResult.success && (
+
+
+ {signResult.message || 'Fehler beim Signieren'}
+
+
+ )}
+
+
+ {signResult?.success ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+
+ )}
+
+ {/* Certificates Modal */}
+ {showCertificatesModal && selectedFqdn && (
+
+
+
+
+
Zertifikate für {selectedFqdn.fqdn}
+
+
+
+ {loadingCertificates ? (
+
Lade Zertifikate...
+ ) : certificates.length === 0 ? (
+
Keine Zertifikate vorhanden
+ ) : (
+
+
+
Zertifikat-History
+
+ {certificates.length} {certificates.length === 1 ? 'Zertifikat' : 'Zertifikate'} gefunden
+
+
+ {certificates.map((cert, index) => (
+
+
+
+
+
+ #{certificates.length - index}
+
+
CA-Zertifikat-ID: {cert.certificateId}
+
+
+
+ Interne UID:{' '}
+ {cert.id}
+
+
+ Erstellt:{' '}
+ {new Date(cert.createdAt).toLocaleString('de-DE')}
+
+
+ Status:{' '}
+
+ {cert.status}
+
+
+ {cert.providerId && (
+
+ Provider:{' '}
+ {cert.providerId}
+
+ )}
+
+
+
+
+ {cert.certificatePEM && (
+
+
Zertifikat (PEM):
+
+ {cert.certificatePEM}
+
+
+ )}
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+ )
+}
+
+export default SpaceDetail
+
diff --git a/frontend/src/pages/Spaces.jsx b/frontend/src/pages/Spaces.jsx
new file mode 100644
index 0000000..a67551d
--- /dev/null
+++ b/frontend/src/pages/Spaces.jsx
@@ -0,0 +1,460 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+const Spaces = () => {
+ const navigate = useNavigate()
+ const [spaces, setSpaces] = useState([])
+ const [showForm, setShowForm] = useState(false)
+ const [formData, setFormData] = useState({
+ name: '',
+ description: ''
+ })
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState('')
+ const [fetchError, setFetchError] = useState('')
+ const [showDeleteModal, setShowDeleteModal] = useState(false)
+ const [spaceToDelete, setSpaceToDelete] = useState(null)
+ const [fqdnCount, setFqdnCount] = useState(0)
+ const [confirmChecked, setConfirmChecked] = useState(false)
+ const [deleteFqdnsChecked, setDeleteFqdnsChecked] = useState(false)
+ const [copiedId, setCopiedId] = useState(null)
+
+ useEffect(() => {
+ fetchSpaces()
+ }, [])
+
+ const fetchSpaces = async () => {
+ try {
+ setFetchError('')
+ const response = await fetch('/api/spaces')
+ if (response.ok) {
+ const data = await response.json()
+ // Stelle sicher, dass data ein Array ist
+ setSpaces(Array.isArray(data) ? data : [])
+ } else {
+ const errorText = `Fehler beim Abrufen der Spaces: ${response.status}`
+ console.error(errorText)
+ setFetchError(errorText)
+ setSpaces([])
+ }
+ } catch (err) {
+ const errorText = 'Fehler beim Abrufen der Spaces. Bitte stellen Sie sicher, dass das Backend läuft.'
+ console.error('Error fetching spaces:', err)
+ setFetchError(errorText)
+ setSpaces([])
+ }
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setError('')
+ setLoading(true)
+
+ if (!formData.name.trim()) {
+ setError('Bitte geben Sie einen Namen ein.')
+ setLoading(false)
+ return
+ }
+
+ try {
+ const response = await fetch('/api/spaces', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(formData),
+ })
+
+ if (response.ok) {
+ const newSpace = await response.json()
+ setSpaces([...spaces, newSpace])
+ setFormData({ name: '', description: '' })
+ setShowForm(false)
+ } else {
+ const errorData = await response.json()
+ setError(errorData.error || 'Fehler beim Erstellen des Space')
+ }
+ } catch (err) {
+ setError('Fehler beim Erstellen des Space')
+ console.error('Error creating space:', err)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ })
+ }
+
+ const handleDelete = async (space) => {
+ // Hole die Anzahl der FQDNs für diesen Space
+ let count = 0
+ try {
+ const countResponse = await fetch(`/api/spaces/${space.id}/fqdns/count`)
+ if (countResponse.ok) {
+ const countData = await countResponse.json()
+ count = countData.count || 0
+ }
+ } catch (err) {
+ console.error('Error fetching FQDN count:', err)
+ count = 0
+ }
+
+ // Setze State und öffne Modal erst nach dem Laden der FQDN-Anzahl
+ setFqdnCount(count)
+ setSpaceToDelete(space)
+ setConfirmChecked(false)
+ setDeleteFqdnsChecked(false)
+ setShowDeleteModal(true)
+ }
+
+ const confirmDelete = async () => {
+ if (!confirmChecked || !spaceToDelete) {
+ return
+ }
+
+ // Wenn FQDNs vorhanden sind, muss die Checkbox aktiviert sein
+ if (fqdnCount > 0 && !deleteFqdnsChecked) {
+ alert('Bitte aktivieren Sie die Checkbox, um die FQDNs mitzulöschen.')
+ return
+ }
+
+ try {
+ const url = fqdnCount > 0 && deleteFqdnsChecked
+ ? `/api/spaces/${spaceToDelete.id}?deleteFqdns=true`
+ : `/api/spaces/${spaceToDelete.id}`
+
+ const response = await fetch(url, {
+ method: 'DELETE',
+ })
+
+ if (response.ok) {
+ setSpaces(spaces.filter(space => space.id !== spaceToDelete.id))
+ setShowDeleteModal(false)
+ setSpaceToDelete(null)
+ setConfirmChecked(false)
+ setDeleteFqdnsChecked(false)
+ setFqdnCount(0)
+ } else {
+ const errorText = await response.text()
+ let errorMessage = 'Fehler beim Löschen des Space'
+ try {
+ const errorData = JSON.parse(errorText)
+ errorMessage = errorData.error || errorText
+ } catch {
+ errorMessage = errorText || errorMessage
+ }
+ alert(errorMessage)
+ }
+ } catch (err) {
+ console.error('Error deleting space:', err)
+ alert('Fehler beim Löschen des Space')
+ }
+ }
+
+ const cancelDelete = () => {
+ setShowDeleteModal(false)
+ setSpaceToDelete(null)
+ setConfirmChecked(false)
+ setDeleteFqdnsChecked(false)
+ setFqdnCount(0)
+ }
+
+ const copyToClipboard = async (id, e) => {
+ e.stopPropagation()
+ try {
+ await navigator.clipboard.writeText(id)
+ setCopiedId(id)
+ setTimeout(() => setCopiedId(null), 2000)
+ } catch (err) {
+ console.error('Fehler beim Kopieren:', err)
+ }
+ }
+
+ return (
+
+
+
+
+
Spaces
+
+ Verwalten Sie Ihre Spaces und Arbeitsbereiche.
+
+
+
+
+
+ {/* Create Space Form */}
+ {showForm && (
+
+
+ Neuen Space erstellen
+
+
+
+ )}
+
+ {/* Spaces List */}
+
+
+ Ihre Spaces
+
+ {fetchError && (
+
+
{fetchError}
+
+
+ )}
+ {!fetchError && spaces.length === 0 ? (
+
+ Noch keine Spaces vorhanden. Erstellen Sie Ihren ersten Space!
+
+ ) : (
+
+ {spaces.map((space) => (
+
navigate(`/spaces/${space.id}`)}
+ >
+
+
+
+ {space.name || 'Unbenannt'}
+
+ {space.description && (
+
{space.description}
+ )}
+
+ Erstellt: {space.createdAt ? new Date(space.createdAt).toLocaleString('de-DE') : 'Unbekannt'}
+
+ {space.id && (
+
+ ID: {space.id}
+
+ )}
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
+ {/* Delete Confirmation Modal */}
+ {showDeleteModal && spaceToDelete && (
+
+
+
+
+
+
+ Möchten Sie den Space {spaceToDelete.name} wirklich löschen?
+
+
+ {fqdnCount > 0 ? (
+
+
+ ⚠️ Dieser Space enthält {fqdnCount} {fqdnCount === 1 ? 'FQDN' : 'FQDNs'}.
+ Der Space kann nur gelöscht werden, wenn Sie die FQDNs mitlöschen.
+
+
+
+ ) : (
+
+ ✓ Dieser Space enthält keine FQDNs und kann gelöscht werden.
+
+ )}
+
+
+ Diese Aktion kann nicht rückgängig gemacht werden.
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ )
+}
+
+export default Spaces
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..d37737f
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..a9a53fa
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 3000,
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8080',
+ changeOrigin: true
+ }
+ }
+ }
+})
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..ee5c21f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "certigo-addon",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}