upload all
This commit is contained in:
14
frontend/index.html
Normal file
14
frontend/index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Certigo Addon</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2656
frontend/package-lock.json
generated
Normal file
2656
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
frontend/package.json
Normal file
26
frontend/package.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "certigo-addon-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.20.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"vite": "^5.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
7
frontend/postcss.config.js
Normal file
7
frontend/postcss.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
BIN
frontend/public/logo.webp
Normal file
BIN
frontend/public/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
36
frontend/src/App.jsx
Normal file
36
frontend/src/App.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { useState } from 'react'
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
||||
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'
|
||||
|
||||
function App() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<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="/" element={<Home />} />
|
||||
<Route path="/spaces" element={<Spaces />} />
|
||||
<Route path="/spaces/:id" element={<SpaceDetail />} />
|
||||
<Route path="/impressum" element={<Impressum />} />
|
||||
</Routes>
|
||||
</div>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
42
frontend/src/components/Footer.jsx
Normal file
42
frontend/src/components/Footer.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
function Footer() {
|
||||
const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
|
||||
const [logoError, setLogoError] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentYear(new Date().getFullYear())
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<footer className="bg-slate-800 border-t border-slate-700 mt-auto">
|
||||
<div className="max-w-20xl mx-auto px-8 py-6">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
{!logoError ? (
|
||||
<img
|
||||
src="/logo.webp"
|
||||
alt="Certigo Addon Logo"
|
||||
className="h-8 w-auto"
|
||||
onError={() => setLogoError(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-8 w-8 bg-slate-600 rounded flex items-center justify-center text-white font-bold text-sm">
|
||||
CA
|
||||
</div>
|
||||
)}
|
||||
<span className="text-slate-300 font-semibold text-lg">Certigo Addon</span>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="text-slate-400 text-sm">
|
||||
© {currentYear} Certigo Addon. Alle Rechte vorbehalten.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
341
frontend/src/components/ProvidersSection.jsx
Normal file
341
frontend/src/components/ProvidersSection.jsx
Normal file
@@ -0,0 +1,341 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
const ProvidersSection = () => {
|
||||
const [providers, setProviders] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showConfigModal, setShowConfigModal] = useState(false)
|
||||
const [selectedProvider, setSelectedProvider] = useState(null)
|
||||
const [configValues, setConfigValues] = useState({})
|
||||
const [testing, setTesting] = useState(false)
|
||||
const [testResult, setTestResult] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchProviders()
|
||||
}, [])
|
||||
|
||||
const fetchProviders = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/providers')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
// Definiere feste Reihenfolge der Provider
|
||||
const providerOrder = ['dummy-ca', 'autodns', 'hetzner']
|
||||
const sortedProviders = providerOrder
|
||||
.map(id => data.find(p => p.id === id))
|
||||
.filter(p => p !== undefined)
|
||||
.concat(data.filter(p => !providerOrder.includes(p.id)))
|
||||
setProviders(sortedProviders)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching providers:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleProvider = async (providerId, currentEnabled) => {
|
||||
try {
|
||||
const response = await fetch(`/api/providers/${providerId}/enabled`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ enabled: !currentEnabled }),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
fetchProviders()
|
||||
} else {
|
||||
alert('Fehler beim Ändern des Provider-Status')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error toggling provider:', err)
|
||||
alert('Fehler beim Ändern des Provider-Status')
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenConfig = async (provider) => {
|
||||
setSelectedProvider(provider)
|
||||
setTestResult(null)
|
||||
|
||||
// Lade aktuelle Konfiguration
|
||||
try {
|
||||
const response = await fetch(`/api/providers/${provider.id}`)
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
// Initialisiere Config-Werte
|
||||
const initialValues = {}
|
||||
provider.settings.forEach(setting => {
|
||||
if (data.config && data.config[setting.name] !== undefined) {
|
||||
// Wenn Wert "***" ist, bedeutet das, dass es ein Passwort ist - leer lassen
|
||||
initialValues[setting.name] = data.config[setting.name] === '***' ? '' : data.config[setting.name]
|
||||
} else {
|
||||
initialValues[setting.name] = setting.default || ''
|
||||
}
|
||||
})
|
||||
setConfigValues(initialValues)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching provider config:', err)
|
||||
// Initialisiere mit leeren Werten
|
||||
const initialValues = {}
|
||||
provider.settings.forEach(setting => {
|
||||
initialValues[setting.name] = setting.default || ''
|
||||
})
|
||||
setConfigValues(initialValues)
|
||||
}
|
||||
|
||||
setShowConfigModal(true)
|
||||
}
|
||||
|
||||
const handleCloseConfig = () => {
|
||||
setShowConfigModal(false)
|
||||
setSelectedProvider(null)
|
||||
setConfigValues({})
|
||||
setTestResult(null)
|
||||
}
|
||||
|
||||
const handleConfigChange = (name, value) => {
|
||||
setConfigValues({
|
||||
...configValues,
|
||||
[name]: value,
|
||||
})
|
||||
}
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
if (!selectedProvider) return
|
||||
|
||||
setTesting(true)
|
||||
setTestResult(null)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/providers/${selectedProvider.id}/test`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ settings: configValues }),
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
setTestResult(result)
|
||||
} catch (err) {
|
||||
console.error('Error testing connection:', err)
|
||||
setTestResult({
|
||||
success: false,
|
||||
message: 'Fehler beim Testen der Verbindung',
|
||||
})
|
||||
} finally {
|
||||
setTesting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveConfig = async () => {
|
||||
if (!selectedProvider) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/providers/${selectedProvider.id}/config`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ settings: configValues }),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
handleCloseConfig()
|
||||
fetchProviders()
|
||||
} else {
|
||||
const error = await response.text()
|
||||
alert(`Fehler beim Speichern: ${error}`)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error saving config:', err)
|
||||
alert('Fehler beim Speichern der Konfiguration')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 transition-all duration-300">
|
||||
<h2 className="text-2xl font-semibold text-white mb-4 transition-colors duration-300">
|
||||
SSL Certificate Providers
|
||||
</h2>
|
||||
<p className="text-slate-400 transition-colors duration-300">Lade Provider...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 transition-all duration-300">
|
||||
<h2 className="text-2xl font-semibold text-white mb-4 transition-colors duration-300">
|
||||
SSL Certificate Providers
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{providers.map((provider) => (
|
||||
<div
|
||||
key={provider.id}
|
||||
className="bg-slate-700/50 rounded-lg p-4 border border-slate-600/50 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-white mb-1 transition-colors duration-300">
|
||||
{provider.displayName}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-300 mb-2 transition-colors duration-300">
|
||||
{provider.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleOpenConfig(provider)}
|
||||
className="p-2 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-colors"
|
||||
title="Konfiguration"
|
||||
aria-label="Konfiguration"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={provider.enabled}
|
||||
onChange={() => handleToggleProvider(provider.id, provider.enabled)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-slate-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 transition-all duration-300"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Configuration Modal */}
|
||||
{showConfigModal && selectedProvider && (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 transition-colors duration-300">
|
||||
<div className="bg-slate-800 rounded-xl shadow-2xl border border-slate-600/50 max-w-2xl w-full p-6 transition-all duration-300">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-2xl font-bold text-white transition-colors duration-300">
|
||||
{selectedProvider.displayName} - Konfiguration
|
||||
</h3>
|
||||
<button
|
||||
onClick={handleCloseConfig}
|
||||
className="p-2 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-colors"
|
||||
aria-label="Schließen"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
{selectedProvider.settings.length > 0 ? (
|
||||
selectedProvider.settings.map((setting) => (
|
||||
<div key={setting.name}>
|
||||
<label className="block text-sm font-medium text-slate-200 mb-2 transition-colors duration-300">
|
||||
{setting.label}
|
||||
{setting.required && <span className="text-red-400 ml-1">*</span>}
|
||||
</label>
|
||||
{setting.description && (
|
||||
<p className="text-xs text-slate-400 mb-2 transition-colors duration-300">{setting.description}</p>
|
||||
)}
|
||||
{setting.type === 'password' ? (
|
||||
<input
|
||||
type="password"
|
||||
value={configValues[setting.name] || ''}
|
||||
onChange={(e) => handleConfigChange(setting.name, e.target.value)}
|
||||
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 transition-all duration-300"
|
||||
placeholder={setting.label}
|
||||
required={setting.required}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type={setting.type || 'text'}
|
||||
value={configValues[setting.name] || ''}
|
||||
onChange={(e) => handleConfigChange(setting.name, e.target.value)}
|
||||
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 transition-all duration-300"
|
||||
placeholder={setting.label}
|
||||
required={setting.required}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-slate-300 text-center py-4 transition-colors duration-300">
|
||||
Dieser Provider benötigt keine Konfiguration.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{testResult && (
|
||||
<div
|
||||
className={`mb-4 p-4 rounded-lg border ${
|
||||
testResult.success
|
||||
? 'bg-green-500/20 border-green-500/50'
|
||||
: 'bg-red-500/20 border-red-500/50'
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
testResult.success ? 'text-green-300' : 'text-red-300'
|
||||
}`}
|
||||
>
|
||||
{testResult.success ? '✅' : '❌'} {testResult.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
{selectedProvider.settings.length > 0 && (
|
||||
<button
|
||||
onClick={handleTestConnection}
|
||||
disabled={testing}
|
||||
className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
|
||||
>
|
||||
{testing ? 'Teste...' : 'Verbindung testen'}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleSaveConfig}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCloseConfig}
|
||||
className="px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProvidersSection
|
||||
|
||||
98
frontend/src/components/Sidebar.jsx
Normal file
98
frontend/src/components/Sidebar.jsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
|
||||
const Sidebar = ({ isOpen, setIsOpen }) => {
|
||||
const location = useLocation()
|
||||
|
||||
const menuItems = [
|
||||
{ path: '/', label: 'Home', icon: '🏠' },
|
||||
{ path: '/spaces', label: 'Spaces', icon: '📁' },
|
||||
{ path: '/impressum', label: 'Impressum', icon: 'ℹ️' },
|
||||
]
|
||||
|
||||
const isActive = (path) => {
|
||||
if (path === '/') {
|
||||
return location.pathname === '/'
|
||||
}
|
||||
return location.pathname.startsWith(path)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overlay for mobile */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-300"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`fixed lg:static top-0 left-0 h-full z-40 transform transition-all duration-300 ease-in-out bg-slate-800/95 backdrop-blur-sm border-r border-slate-600/50 shadow-xl ${
|
||||
isOpen ? 'w-64 translate-x-0' : 'w-16 -translate-x-0 lg:translate-x-0'
|
||||
}`}
|
||||
>
|
||||
<div className="p-4 border-b border-slate-700/50 flex items-center justify-between h-16">
|
||||
{isOpen && (
|
||||
<h1 className="text-xl font-bold text-white whitespace-nowrap overflow-hidden">
|
||||
Certigo Addon
|
||||
</h1>
|
||||
)}
|
||||
{/* Burger Menu Button - rechts in der Sidebar */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="ml-auto p-2 rounded-lg transition-all duration-200 flex-shrink-0 bg-slate-700/50 hover:bg-slate-700 text-white"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<div className="w-5 h-4 relative flex flex-col justify-between">
|
||||
<span
|
||||
className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
|
||||
isOpen ? 'rotate-45 translate-y-1.5' : ''
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
|
||||
isOpen ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
|
||||
isOpen ? '-rotate-45 -translate-y-1.5' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<nav className="px-2 py-4 overflow-hidden">
|
||||
<ul className="space-y-2">
|
||||
{menuItems.map((item) => (
|
||||
<li key={item.path}>
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`flex items-center px-3 py-3 rounded-lg transition-all duration-200 ${
|
||||
isActive(item.path)
|
||||
? 'bg-slate-700 text-white font-semibold shadow-md'
|
||||
: 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
|
||||
}`}
|
||||
title={!isOpen ? item.label : ''}
|
||||
>
|
||||
<span className={`text-xl flex-shrink-0 ${isOpen ? 'mr-3' : 'mx-auto'}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
{isOpen && (
|
||||
<span className="whitespace-nowrap overflow-hidden">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
|
||||
57
frontend/src/index.css
Normal file
57
frontend/src/index.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
11
frontend/src/main.jsx
Normal file
11
frontend/src/main.jsx
Normal file
@@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
303
frontend/src/pages/Home.jsx
Normal file
303
frontend/src/pages/Home.jsx
Normal file
@@ -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 (
|
||||
<div className="p-8 min-h-full bg-gradient-to-r from-slate-700 to-slate-900">
|
||||
<div className="max-w-10xl mx-auto">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Willkommen</h1>
|
||||
<p className="text-lg text-slate-200 mb-8">
|
||||
Dies ist die Startseite der Certigo Addon Anwendung.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
{/* Stats Dashboard */}
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-2xl font-semibold text-white">
|
||||
Statistiken
|
||||
</h2>
|
||||
{lastUpdate && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-xs text-slate-400">
|
||||
{new Date(lastUpdate).toLocaleTimeString('de-DE', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!stats && loadingStats ? (
|
||||
<p className="text-slate-400">Lade Statistiken...</p>
|
||||
) : stats ? (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg p-4 border border-blue-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-300 mb-1">Spaces</p>
|
||||
<p className="text-3xl font-bold text-white">{stats.spaces}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-lg p-4 border border-green-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-300 mb-1">FQDNs</p>
|
||||
<p className="text-3xl font-bold text-white">{stats.fqdns}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-lg p-4 border border-purple-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-300 mb-1">CSRs</p>
|
||||
<p className="text-3xl font-bold text-white">{stats.csrs}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-lg p-4 border border-yellow-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-300 mb-1">Zertifikate</p>
|
||||
<p className="text-3xl font-bold text-white">{stats.certificates || 0}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-slate-400">Fehler beim Laden der Statistiken</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* System Status */}
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6">
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">
|
||||
System Status
|
||||
</h2>
|
||||
{data ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-slate-200">
|
||||
<span className="font-medium">Status:</span>{' '}
|
||||
<span className="text-green-400">{data.status}</span>
|
||||
</p>
|
||||
<p className="text-slate-200">
|
||||
<span className="font-medium">Nachricht:</span> {data.message}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-slate-400">Lade Daten...</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* SSL Certificate Providers */}
|
||||
<ProvidersSection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
||||
41
frontend/src/pages/Impressum.jsx
Normal file
41
frontend/src/pages/Impressum.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
const Impressum = () => {
|
||||
return (
|
||||
<div className="p-8 min-h-full bg-gradient-to-r from-slate-700 to-slate-900">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Impressum</h1>
|
||||
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 space-y-6">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-3">
|
||||
Angaben gemäß § 5 TMG
|
||||
</h2>
|
||||
<p className="text-slate-200">
|
||||
Hier können Sie Ihre rechtlichen Angaben eintragen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-3">
|
||||
Kontakt
|
||||
</h2>
|
||||
<p className="text-slate-200">
|
||||
Kontaktinformationen können hier eingetragen werden.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-white mb-3">
|
||||
Haftungsausschluss
|
||||
</h2>
|
||||
<p className="text-slate-200">
|
||||
Haftungsausschluss-Informationen können hier eingetragen werden.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Impressum
|
||||
|
||||
1538
frontend/src/pages/SpaceDetail.jsx
Normal file
1538
frontend/src/pages/SpaceDetail.jsx
Normal file
File diff suppressed because it is too large
Load Diff
460
frontend/src/pages/Spaces.jsx
Normal file
460
frontend/src/pages/Spaces.jsx
Normal file
@@ -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 (
|
||||
<div className="p-8 min-h-full bg-gradient-to-r from-slate-700 to-slate-900">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Spaces</h1>
|
||||
<p className="text-lg text-slate-200">
|
||||
Verwalten Sie Ihre Spaces und Arbeitsbereiche.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200"
|
||||
>
|
||||
{showForm ? 'Abbrechen' : '+ Neuer Space'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create Space Form */}
|
||||
{showForm && (
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 mb-6">
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">
|
||||
Neuen Space erstellen
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-slate-200 mb-2">
|
||||
Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
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"
|
||||
placeholder="Geben Sie einen Namen ein"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-slate-200 mb-2">
|
||||
Beschreibung
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows="4"
|
||||
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 resize-none"
|
||||
placeholder="Geben Sie eine Beschreibung ein (optional)"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
|
||||
>
|
||||
{loading ? 'Wird erstellt...' : 'Space erstellen'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowForm(false)
|
||||
setFormData({ name: '', description: '' })
|
||||
setError('')
|
||||
}}
|
||||
className="px-6 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Spaces List */}
|
||||
<div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6">
|
||||
<h2 className="text-2xl font-semibold text-white mb-4">
|
||||
Ihre Spaces
|
||||
</h2>
|
||||
{fetchError && (
|
||||
<div className="mb-4 p-4 bg-red-500/20 border border-red-500/50 rounded-lg">
|
||||
<p className="text-red-300 mb-2">{fetchError}</p>
|
||||
<button
|
||||
onClick={fetchSpaces}
|
||||
className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all duration-200"
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{!fetchError && spaces.length === 0 ? (
|
||||
<p className="text-slate-300 text-center py-8">
|
||||
Noch keine Spaces vorhanden. Erstellen Sie Ihren ersten Space!
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{spaces.map((space) => (
|
||||
<div
|
||||
key={space.id || Math.random()}
|
||||
className="bg-slate-700/50 rounded-lg p-4 border border-slate-600/50 hover:border-slate-500 transition-colors cursor-pointer shadow-soft"
|
||||
onClick={() => navigate(`/spaces/${space.id}`)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-white mb-2">
|
||||
{space.name || 'Unbenannt'}
|
||||
</h3>
|
||||
{space.description && (
|
||||
<p className="text-slate-300 mb-2">{space.description}</p>
|
||||
)}
|
||||
<p className="text-xs text-slate-400">
|
||||
Erstellt: {space.createdAt ? new Date(space.createdAt).toLocaleString('de-DE') : 'Unbekannt'}
|
||||
</p>
|
||||
{space.id && (
|
||||
<p className="text-xs text-slate-500 font-mono mt-1">
|
||||
ID: {space.id}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<button
|
||||
onClick={(e) => copyToClipboard(space.id, e)}
|
||||
className="p-2 text-blue-400 hover:text-blue-300 hover:bg-blue-500/20 rounded-lg transition-colors"
|
||||
title={copiedId === space.id ? 'Kopiert!' : 'ID kopieren'}
|
||||
aria-label="ID kopieren"
|
||||
>
|
||||
{copiedId === space.id ? (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDelete(space)
|
||||
}}
|
||||
className="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/20 rounded-lg transition-colors"
|
||||
title="Space löschen"
|
||||
aria-label="Space löschen"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{showDeleteModal && spaceToDelete && (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-slate-800 rounded-xl shadow-2xl border border-slate-600/50 max-w-md w-full p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center mr-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-red-400"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white">
|
||||
Space löschen
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-slate-300 mb-4">
|
||||
Möchten Sie den Space <span className="font-semibold text-white">{spaceToDelete.name}</span> wirklich löschen?
|
||||
</p>
|
||||
|
||||
{fqdnCount > 0 ? (
|
||||
<div className="mb-4 p-4 bg-yellow-500/20 border border-yellow-500/50 rounded-lg">
|
||||
<p className="text-yellow-300 text-sm mb-3">
|
||||
⚠️ Dieser Space enthält <span className="font-semibold">{fqdnCount}</span> {fqdnCount === 1 ? 'FQDN' : 'FQDNs'}.
|
||||
Der Space kann nur gelöscht werden, wenn Sie die FQDNs mitlöschen.
|
||||
</p>
|
||||
<label className="flex items-start cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={deleteFqdnsChecked}
|
||||
onChange={(e) => setDeleteFqdnsChecked(e.target.checked)}
|
||||
className="mt-1 w-5 h-5 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-800 cursor-pointer"
|
||||
/>
|
||||
<span className="ml-3 text-sm text-slate-300 group-hover:text-white transition-colors">
|
||||
Alle {fqdnCount} {fqdnCount === 1 ? 'FQDN' : 'FQDNs'} mit diesem Space löschen
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-green-400 mb-4">
|
||||
✓ Dieser Space enthält keine FQDNs und kann gelöscht werden.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-red-400 mb-4">
|
||||
Diese Aktion kann nicht rückgängig gemacht werden.
|
||||
</p>
|
||||
|
||||
<label className="flex items-start cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={confirmChecked}
|
||||
onChange={(e) => setConfirmChecked(e.target.checked)}
|
||||
className="mt-1 w-5 h-5 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-800 cursor-pointer"
|
||||
/>
|
||||
<span className="ml-3 text-sm text-slate-300 group-hover:text-white transition-colors">
|
||||
Ich bestätige, dass ich diesen Space unwiderruflich löschen möchte
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={confirmDelete}
|
||||
disabled={!confirmChecked || (fqdnCount > 0 && !deleteFqdnsChecked)}
|
||||
className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelDelete}
|
||||
className="flex-1 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Spaces
|
||||
|
||||
12
frontend/tailwind.config.js
Normal file
12
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
16
frontend/vite.config.js
Normal file
16
frontend/vite.config.js
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user