feat: Cookie-Test tab — 3-phase consent test UI + API proxy
Third tab "Cookie-Test" in Compliance Agent: - Phase A: Before consent (tracking without permission) - Phase B: After rejection (CRITICAL if tracking persists) - Phase C: After acceptance (undocumented services) - CMP badge (Didomi, OneTrust, etc.) - Violation cards with severity badges and legal references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -6,9 +6,10 @@ import { AnalysisResult } from './_components/AnalysisResult'
|
||||
import { AnalysisHistory } from './_components/AnalysisHistory'
|
||||
import { FollowUpQuestions } from './_components/FollowUpQuestions'
|
||||
import { ScanResult } from './_components/ScanResult'
|
||||
import { ConsentTestResult } from './_components/ConsentTestResult'
|
||||
|
||||
type AnalysisMode = 'pre_launch' | 'post_launch'
|
||||
type AnalysisTab = 'quick' | 'scan'
|
||||
type AnalysisTab = 'quick' | 'scan' | 'consent'
|
||||
|
||||
const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] = [
|
||||
{ id: 'pre_launch', label: 'Internes Dokument', desc: 'Vor Veroeffentlichung pruefen', icon: '📋' },
|
||||
@@ -17,7 +18,8 @@ const MODES: { id: AnalysisMode; label: string; desc: string; icon: string }[] =
|
||||
|
||||
const TABS: { id: AnalysisTab; label: string; info: string }[] = [
|
||||
{ id: 'quick', label: 'Schnellanalyse', info: 'Analysiert nur die eingegebene URL. Fuer einen umfassenden Check nutzen Sie den Website-Scan.' },
|
||||
{ id: 'scan', label: 'Website-Scan', info: 'Scannt automatisch 5-10 Unterseiten (Startseite, Datenschutz, Impressum, AGB, Cookies) und gleicht erkannte Dienste mit der Datenschutzerklaerung ab.' },
|
||||
{ id: 'scan', label: 'Website-Scan', info: 'Scannt automatisch 5-10 Unterseiten und gleicht erkannte Dienste mit der Datenschutzerklaerung ab.' },
|
||||
{ id: 'consent', label: 'Cookie-Test', info: 'Testet mit echtem Browser was VOR und NACH Cookie-Einwilligung geladen wird. Erkennt Verstoesse gegen §25 TDDDG.' },
|
||||
]
|
||||
|
||||
export default function AgentPage() {
|
||||
@@ -28,6 +30,9 @@ export default function AgentPage() {
|
||||
const [scanError, setScanError] = useState<string | null>(null)
|
||||
const [scanData, setScanData] = useState<any>(null)
|
||||
const [scanHistory, setScanHistory] = useState<any[]>([])
|
||||
const [consentLoading, setConsentLoading] = useState(false)
|
||||
const [consentError, setConsentError] = useState<string | null>(null)
|
||||
const [consentData, setConsentData] = useState<any>(null)
|
||||
const { analyze, answerFollowUp, loading, error, result, history } = useAgentAnalysis()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
@@ -36,7 +41,7 @@ export default function AgentPage() {
|
||||
|
||||
if (tab === 'quick') {
|
||||
analyze(url.trim(), mode)
|
||||
} else {
|
||||
} else if (tab === 'scan') {
|
||||
setScanLoading(true)
|
||||
setScanError(null)
|
||||
setScanData(null)
|
||||
@@ -55,11 +60,28 @@ export default function AgentPage() {
|
||||
} finally {
|
||||
setScanLoading(false)
|
||||
}
|
||||
} else {
|
||||
setConsentLoading(true)
|
||||
setConsentError(null)
|
||||
setConsentData(null)
|
||||
try {
|
||||
const res = await fetch('/api/sdk/v1/agent/consent-test', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: url.trim() }),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Cookie-Test fehlgeschlagen: ${res.status}`)
|
||||
setConsentData(await res.json())
|
||||
} catch (e) {
|
||||
setConsentError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||||
} finally {
|
||||
setConsentLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isLoading = tab === 'quick' ? loading : scanLoading
|
||||
const currentError = tab === 'quick' ? error : scanError
|
||||
const isLoading = tab === 'quick' ? loading : tab === 'scan' ? scanLoading : consentLoading
|
||||
const currentError = tab === 'quick' ? error : tab === 'scan' ? scanError : consentError
|
||||
const currentTab = TABS.find(t => t.id === tab)!
|
||||
|
||||
return (
|
||||
@@ -105,7 +127,7 @@ export default function AgentPage() {
|
||||
{/* URL Input */}
|
||||
<form onSubmit={handleSubmit} className="flex gap-3">
|
||||
<input type="url" value={url} onChange={e => setUrl(e.target.value)}
|
||||
placeholder={tab === 'scan' ? 'https://www.example.com/' : 'https://example.com/datenschutz'}
|
||||
placeholder={tab === 'consent' ? 'https://www.example.com/' : tab === 'scan' ? 'https://www.example.com/' : 'https://example.com/datenschutz'}
|
||||
className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
|
||||
disabled={isLoading} required />
|
||||
<button type="submit" disabled={isLoading || !url.trim()}
|
||||
@@ -114,8 +136,8 @@ export default function AgentPage() {
|
||||
<><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>{tab === 'scan' ? 'Scanne...' : 'Analysiere...'}</>
|
||||
) : tab === 'scan' ? 'Website scannen' : 'Analysieren'}
|
||||
</svg>{tab === 'consent' ? 'Teste Cookies...' : tab === 'scan' ? 'Scanne...' : 'Analysiere...'}</>
|
||||
) : tab === 'consent' ? 'Cookie-Test starten' : tab === 'scan' ? 'Website scannen' : 'Analysieren'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -143,6 +165,13 @@ export default function AgentPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Consent Test Result */}
|
||||
{tab === 'consent' && consentData && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
|
||||
<ConsentTestResult data={consentData} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* History */}
|
||||
{tab === 'quick' && (
|
||||
<AnalysisHistory history={history} onSelect={r => { setUrl(r.url); analyze(r.url, mode) }} />
|
||||
@@ -152,7 +181,7 @@ export default function AgentPage() {
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h3>
|
||||
<div className="space-y-2">
|
||||
{scanHistory.map((item, i) => (
|
||||
<button key={i} onClick={() => { setUrl(item.url); }}
|
||||
<button key={i} onClick={() => setUrl(item.url)}
|
||||
className="w-full text-left p-3 bg-white border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs font-medium text-gray-500 w-8">{item.pages_scanned}p</span>
|
||||
|
||||
Reference in New Issue
Block a user