refactor: Admin-Layout komplett entfernt — SDK als einziges Layout
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 32s
CI / test-python-backend-compliance (push) Successful in 31s
CI / test-python-document-crawler (push) Successful in 21s
CI / test-python-dsms-gateway (push) Successful in 19s
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 32s
CI / test-python-backend-compliance (push) Successful in 31s
CI / test-python-document-crawler (push) Successful in 21s
CI / test-python-dsms-gateway (push) Successful in 19s
Kaputtes (admin) Layout geloescht (Role-Selection, 404-Sidebar, localhost-Dashboard). SDK-Flow nach /sdk/sdk-flow verschoben. Route-Gruppe (sdk) aufgeloest. Root-Seite redirected auf /sdk. ~25 ungenutzte Dateien/Verzeichnisse entfernt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
508
admin-compliance/app/sdk/cookie-banner/page.tsx
Normal file
508
admin-compliance/app/sdk/cookie-banner/page.tsx
Normal file
@@ -0,0 +1,508 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useSDK } from '@/lib/sdk'
|
||||
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
||||
|
||||
// =============================================================================
|
||||
// TYPES
|
||||
// =============================================================================
|
||||
|
||||
interface CookieCategory {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
required: boolean
|
||||
enabled: boolean
|
||||
cookies: Cookie[]
|
||||
}
|
||||
|
||||
interface Cookie {
|
||||
name: string
|
||||
provider: string
|
||||
purpose: string
|
||||
expiry: string
|
||||
type: 'first-party' | 'third-party'
|
||||
}
|
||||
|
||||
interface BannerConfig {
|
||||
position: 'bottom' | 'top' | 'center'
|
||||
style: 'bar' | 'popup' | 'modal'
|
||||
primaryColor: string
|
||||
showDeclineAll: boolean
|
||||
showSettings: boolean
|
||||
blockScripts: boolean
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// DEFAULT DATA (Fallback wenn DB leer oder nicht erreichbar)
|
||||
// =============================================================================
|
||||
|
||||
const DEFAULT_COOKIE_CATEGORIES: CookieCategory[] = [
|
||||
{
|
||||
id: 'necessary',
|
||||
name: 'Notwendig',
|
||||
description: 'Diese Cookies sind fuer die Grundfunktionen der Website erforderlich.',
|
||||
required: true,
|
||||
enabled: true,
|
||||
cookies: [
|
||||
{ name: 'session_id', provider: 'Eigene', purpose: 'Session-Verwaltung', expiry: 'Session', type: 'first-party' },
|
||||
{ name: 'csrf_token', provider: 'Eigene', purpose: 'Sicherheit', expiry: 'Session', type: 'first-party' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'analytics',
|
||||
name: 'Analyse',
|
||||
description: 'Diese Cookies helfen uns, die Nutzung der Website zu verstehen.',
|
||||
required: false,
|
||||
enabled: true,
|
||||
cookies: [
|
||||
{ name: '_ga', provider: 'Google Analytics', purpose: 'Nutzeranalyse', expiry: '2 Jahre', type: 'third-party' },
|
||||
{ name: '_gid', provider: 'Google Analytics', purpose: 'Nutzeranalyse', expiry: '24 Stunden', type: 'third-party' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'marketing',
|
||||
name: 'Marketing',
|
||||
description: 'Diese Cookies werden fuer personalisierte Werbung verwendet.',
|
||||
required: false,
|
||||
enabled: false,
|
||||
cookies: [
|
||||
{ name: '_fbp', provider: 'Meta (Facebook)', purpose: 'Werbung', expiry: '3 Monate', type: 'third-party' },
|
||||
{ name: 'IDE', provider: 'Google Ads', purpose: 'Werbung', expiry: '1 Jahr', type: 'third-party' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'preferences',
|
||||
name: 'Praeferenzen',
|
||||
description: 'Diese Cookies speichern Ihre Einstellungen und Praeferenzen.',
|
||||
required: false,
|
||||
enabled: true,
|
||||
cookies: [
|
||||
{ name: 'language', provider: 'Eigene', purpose: 'Spracheinstellung', expiry: '1 Jahr', type: 'first-party' },
|
||||
{ name: 'theme', provider: 'Eigene', purpose: 'Design-Einstellung', expiry: '1 Jahr', type: 'first-party' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const defaultConfig: BannerConfig = {
|
||||
position: 'bottom',
|
||||
style: 'bar',
|
||||
primaryColor: '#6366f1',
|
||||
showDeclineAll: true,
|
||||
showSettings: true,
|
||||
blockScripts: true,
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// COMPONENTS
|
||||
// =============================================================================
|
||||
|
||||
interface BannerTexts {
|
||||
title: string
|
||||
description: string
|
||||
privacyLink: string
|
||||
}
|
||||
|
||||
function BannerPreview({ config, categories, bannerTexts }: { config: BannerConfig; categories: CookieCategory[]; bannerTexts: BannerTexts }) {
|
||||
return (
|
||||
<div className="relative bg-gray-100 rounded-xl p-8 min-h-64 flex items-end justify-center">
|
||||
<div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
|
||||
Website-Vorschau
|
||||
</div>
|
||||
<div
|
||||
className={`w-full max-w-2xl bg-white rounded-xl shadow-xl p-6 border-2 ${
|
||||
config.position === 'center' ? 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' : ''
|
||||
}`}
|
||||
style={{ borderColor: config.primaryColor }}
|
||||
>
|
||||
<h4 className="font-semibold text-gray-900">{bannerTexts.title}</h4>
|
||||
<p className="text-sm text-gray-600 mt-2">
|
||||
{bannerTexts.description}
|
||||
</p>
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<button
|
||||
className="px-4 py-2 rounded-lg text-white text-sm font-medium"
|
||||
style={{ backgroundColor: config.primaryColor }}
|
||||
>
|
||||
Alle akzeptieren
|
||||
</button>
|
||||
{config.showDeclineAll && (
|
||||
<button className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 text-sm font-medium">
|
||||
Alle ablehnen
|
||||
</button>
|
||||
)}
|
||||
{config.showSettings && (
|
||||
<button className="px-4 py-2 text-sm text-gray-600 hover:underline">
|
||||
Einstellungen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CategoryCard({
|
||||
category,
|
||||
onToggle,
|
||||
}: {
|
||||
category: CookieCategory
|
||||
onToggle: (enabled: boolean) => void
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-semibold text-gray-900">{category.name}</h4>
|
||||
{category.required && (
|
||||
<span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded">Erforderlich</span>
|
||||
)}
|
||||
<span className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
|
||||
{category.cookies.length} Cookies
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">{category.description}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="text-sm text-purple-600 hover:underline"
|
||||
>
|
||||
{expanded ? 'Ausblenden' : 'Details'}
|
||||
</button>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={category.enabled}
|
||||
onChange={(e) => onToggle(e.target.checked)}
|
||||
disabled={category.required}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className={`w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-100 rounded-full peer ${
|
||||
category.enabled ? 'peer-checked:bg-purple-600' : ''
|
||||
} peer-disabled:opacity-50 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all ${
|
||||
category.enabled ? 'after:translate-x-full' : ''
|
||||
}`} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="border-t border-gray-100 p-4 bg-gray-50">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-gray-500">
|
||||
<th className="pb-2">Cookie</th>
|
||||
<th className="pb-2">Anbieter</th>
|
||||
<th className="pb-2">Zweck</th>
|
||||
<th className="pb-2">Ablauf</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-700">
|
||||
{category.cookies.map(cookie => (
|
||||
<tr key={cookie.name}>
|
||||
<td className="py-1 font-mono text-xs">{cookie.name}</td>
|
||||
<td className="py-1">{cookie.provider}</td>
|
||||
<td className="py-1">{cookie.purpose}</td>
|
||||
<td className="py-1">{cookie.expiry}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MAIN PAGE
|
||||
// =============================================================================
|
||||
|
||||
const defaultBannerTexts: BannerTexts = {
|
||||
title: 'Wir verwenden Cookies',
|
||||
description: 'Wir nutzen Cookies, um Ihnen die bestmoegliche Nutzung unserer Website zu ermoeglichen.',
|
||||
privacyLink: '/datenschutz',
|
||||
}
|
||||
|
||||
export default function CookieBannerPage() {
|
||||
const { state } = useSDK()
|
||||
const [categories, setCategories] = useState<CookieCategory[]>([])
|
||||
const [config, setConfig] = useState<BannerConfig>(defaultConfig)
|
||||
const [bannerTexts, setBannerTexts] = useState<BannerTexts>(defaultBannerTexts)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [exportToast, setExportToast] = useState<string | null>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/sdk/v1/einwilligungen/cookie-banner/config')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
// DB-Kategorien haben immer Vorrang — Defaults nur wenn DB wirklich leer
|
||||
setCategories(data.categories?.length > 0 ? data.categories : DEFAULT_COOKIE_CATEGORIES)
|
||||
if (data.config && Object.keys(data.config).length > 0) {
|
||||
setConfig(prev => ({ ...prev, ...data.config }))
|
||||
const savedTexts = data.config.banner_texts || data.config.texts
|
||||
if (savedTexts) {
|
||||
setBannerTexts(prev => ({ ...prev, ...savedTexts }))
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setCategories(DEFAULT_COOKIE_CATEGORIES)
|
||||
}
|
||||
} catch {
|
||||
setCategories(DEFAULT_COOKIE_CATEGORIES)
|
||||
}
|
||||
}
|
||||
loadConfig()
|
||||
}, [])
|
||||
|
||||
const handleCategoryToggle = async (categoryId: string, enabled: boolean) => {
|
||||
setCategories(prev =>
|
||||
prev.map(cat => cat.id === categoryId ? { ...cat, enabled } : cat)
|
||||
)
|
||||
try {
|
||||
await fetch('/api/sdk/v1/einwilligungen/cookie-banner/config', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ categoryId, enabled }),
|
||||
})
|
||||
} catch {
|
||||
// Silently ignore — local state already updated
|
||||
}
|
||||
}
|
||||
|
||||
const handleExportCode = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/sdk/v1/einwilligungen/cookie-banner/embed-code')
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
const code = data.embed_code || data.script || ''
|
||||
await navigator.clipboard.writeText(code)
|
||||
setExportToast('Embed-Code in Zwischenablage kopiert!')
|
||||
setTimeout(() => setExportToast(null), 3000)
|
||||
} else {
|
||||
setExportToast('Fehler beim Laden des Embed-Codes')
|
||||
setTimeout(() => setExportToast(null), 3000)
|
||||
}
|
||||
} catch {
|
||||
setExportToast('Fehler beim Kopieren in die Zwischenablage')
|
||||
setTimeout(() => setExportToast(null), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveConfig = async () => {
|
||||
setIsSaving(true)
|
||||
try {
|
||||
await fetch('/api/sdk/v1/einwilligungen/cookie-banner/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ categories, config: { ...config, banner_texts: bannerTexts } }),
|
||||
})
|
||||
} catch {
|
||||
// Silently ignore
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const totalCookies = categories.reduce((sum, cat) => sum + cat.cookies.length, 0)
|
||||
const thirdPartyCookies = categories.reduce(
|
||||
(sum, cat) => sum + cat.cookies.filter(c => c.type === 'third-party').length,
|
||||
0
|
||||
)
|
||||
|
||||
const stepInfo = STEP_EXPLANATIONS['cookie-banner']
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Toast notification */}
|
||||
{exportToast && (
|
||||
<div className="fixed top-4 right-4 z-50 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-lg text-sm">
|
||||
{exportToast}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step Header */}
|
||||
<StepHeader
|
||||
stepId="cookie-banner"
|
||||
title={stepInfo.title}
|
||||
description={stepInfo.description}
|
||||
explanation={stepInfo.explanation}
|
||||
tips={stepInfo.tips}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleExportCode}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
Code exportieren
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveConfig}
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? 'Speichern...' : 'Veroeffentlichen'}
|
||||
</button>
|
||||
</div>
|
||||
</StepHeader>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div className="text-sm text-gray-500">Kategorien</div>
|
||||
<div className="text-3xl font-bold text-gray-900">{categories.length}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-blue-200 p-6">
|
||||
<div className="text-sm text-blue-600">Cookies gesamt</div>
|
||||
<div className="text-3xl font-bold text-blue-600">{totalCookies}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-orange-200 p-6">
|
||||
<div className="text-sm text-orange-600">Third-Party</div>
|
||||
<div className="text-3xl font-bold text-orange-600">{thirdPartyCookies}</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-green-200 p-6">
|
||||
<div className="text-sm text-green-600">Aktive Kategorien</div>
|
||||
<div className="text-3xl font-bold text-green-600">
|
||||
{categories.filter(c => c.enabled).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Banner-Vorschau</h3>
|
||||
<BannerPreview config={config} categories={categories} bannerTexts={bannerTexts} />
|
||||
</div>
|
||||
|
||||
{/* Configuration */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Banner-Einstellungen</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Position</label>
|
||||
<select
|
||||
value={config.position}
|
||||
onChange={(e) => setConfig({ ...config, position: e.target.value as any })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="bottom">Unten</option>
|
||||
<option value="top">Oben</option>
|
||||
<option value="center">Zentriert</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Stil</label>
|
||||
<select
|
||||
value={config.style}
|
||||
onChange={(e) => setConfig({ ...config, style: e.target.value as any })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="bar">Balken</option>
|
||||
<option value="popup">Popup</option>
|
||||
<option value="modal">Modal</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Primaerfarbe</label>
|
||||
<input
|
||||
type="color"
|
||||
value={config.primaryColor}
|
||||
onChange={(e) => setConfig({ ...config, primaryColor: e.target.value })}
|
||||
className="w-full h-10 rounded-lg cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.showDeclineAll}
|
||||
onChange={(e) => setConfig({ ...config, showDeclineAll: e.target.checked })}
|
||||
className="w-4 h-4 text-purple-600"
|
||||
/>
|
||||
<span className="text-sm">"Alle ablehnen" anzeigen</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.showSettings}
|
||||
onChange={(e) => setConfig({ ...config, showSettings: e.target.checked })}
|
||||
className="w-4 h-4 text-purple-600"
|
||||
/>
|
||||
<span className="text-sm">Einstellungen-Link anzeigen</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.blockScripts}
|
||||
onChange={(e) => setConfig({ ...config, blockScripts: e.target.checked })}
|
||||
className="w-4 h-4 text-purple-600"
|
||||
/>
|
||||
<span className="text-sm">Skripte vor Einwilligung blockieren</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Texte anpassen</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Ueberschrift</label>
|
||||
<input
|
||||
type="text"
|
||||
value={bannerTexts.title}
|
||||
onChange={(e) => setBannerTexts({ ...bannerTexts, title: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={bannerTexts.description}
|
||||
onChange={(e) => setBannerTexts({ ...bannerTexts, description: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Link zur Datenschutzerklaerung</label>
|
||||
<input
|
||||
type="text"
|
||||
value={bannerTexts.privacyLink}
|
||||
onChange={(e) => setBannerTexts({ ...bannerTexts, privacyLink: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cookie Categories */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gray-900">Cookie-Kategorien</h3>
|
||||
<button className="text-sm text-purple-600 hover:text-purple-700">
|
||||
+ Kategorie hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{categories.map(category => (
|
||||
<CategoryCard
|
||||
key={category.id}
|
||||
category={category}
|
||||
onToggle={(enabled) => handleCategoryToggle(category.id, enabled)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user