5ff65b3402
Phase 3 (Cookie Banner): Backend + Frontend existierten bereits — keine Aenderungen noetig. Phase 4 (Deadlines): DeadlineTab mit Fristen-Timeline (30 Tage, 4 Erinnerungen, Auto-Sperrung). Backend-Cron in Production via Core. Phase 5 (Public DSR): PublicFormConfig im DSR Settings-Tab — konfigurierbare Anfragetypen, Identitaetspflicht, Embed-Code. Phase 6 (Integrations): IntegrationStubs fuer Matrix, Jitsi, OAuth, 2FA, Notifications — vorbereitet fuer Core-Service-Anbindung. Consent Management: 2 neue Tabs (Fristen, Integrationen). DSR: Settings-Tab mit Public Form statt Platzhalter. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
interface PublicFormSettings {
|
|
enabled: boolean
|
|
formUrl: string
|
|
allowedTypes: string[]
|
|
requireIdentity: boolean
|
|
customCss: string
|
|
}
|
|
|
|
const DSR_TYPES = [
|
|
{ value: 'access', label: 'Auskunft (Art. 15)' },
|
|
{ value: 'rectification', label: 'Berichtigung (Art. 16)' },
|
|
{ value: 'erasure', label: 'Loeschung (Art. 17)' },
|
|
{ value: 'restriction', label: 'Einschraenkung (Art. 18)' },
|
|
{ value: 'portability', label: 'Datenportabilitaet (Art. 20)' },
|
|
{ value: 'objection', label: 'Widerspruch (Art. 21)' },
|
|
]
|
|
|
|
export function PublicFormConfig() {
|
|
const [settings, setSettings] = useState<PublicFormSettings>({
|
|
enabled: false,
|
|
formUrl: '',
|
|
allowedTypes: ['access', 'erasure', 'portability'],
|
|
requireIdentity: true,
|
|
customCss: '',
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-base font-semibold text-slate-900">Oeffentliches DSR-Formular</h3>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" checked={settings.enabled}
|
|
onChange={e => setSettings({ ...settings, enabled: e.target.checked })}
|
|
className="rounded border-gray-300 text-purple-600" />
|
|
<span className="text-sm text-slate-600">Aktiviert</span>
|
|
</label>
|
|
</div>
|
|
|
|
{!settings.enabled ? (
|
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 text-sm text-gray-600">
|
|
Das oeffentliche DSR-Formular ermoeglicht Betroffenen, Datenschutzanfragen direkt
|
|
ueber Ihre Website einzureichen — ohne Anmeldung. Aktivieren Sie es, um den
|
|
Embed-Code zu generieren.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Erlaubte Anfragetypen</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{DSR_TYPES.map(type => (
|
|
<label key={type.value} className="flex items-center gap-2 text-sm text-slate-600">
|
|
<input type="checkbox"
|
|
checked={settings.allowedTypes.includes(type.value)}
|
|
onChange={e => {
|
|
const types = e.target.checked
|
|
? [...settings.allowedTypes, type.value]
|
|
: settings.allowedTypes.filter(t => t !== type.value)
|
|
setSettings({ ...settings, allowedTypes: types })
|
|
}}
|
|
className="rounded border-gray-300 text-purple-600" />
|
|
{type.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" checked={settings.requireIdentity}
|
|
onChange={e => setSettings({ ...settings, requireIdentity: e.target.checked })}
|
|
className="rounded border-gray-300 text-purple-600" />
|
|
<span className="text-sm text-slate-600">Identitaetsnachweis erforderlich</span>
|
|
</label>
|
|
|
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
|
|
<h4 className="text-sm font-medium text-slate-700 mb-2">Embed-Code</h4>
|
|
<pre className="text-xs font-mono bg-white border border-slate-200 rounded p-3 overflow-x-auto">
|
|
{`<iframe
|
|
src="https://ihre-domain.breakpilot.ai/dsr/public-form"
|
|
width="100%"
|
|
height="600"
|
|
frameborder="0"
|
|
title="Datenschutzanfrage"
|
|
></iframe>`}
|
|
</pre>
|
|
<p className="text-xs text-slate-500 mt-2">
|
|
Embed-Code wird nach Anbindung an Production generiert.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|