upload all

frontend/src/components/Footer.jsx

@@ -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

frontend/src/components/ProvidersSection.jsx

@@ -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
+

frontend/src/components/Sidebar.jsx

@@ -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
+