feat: display 8 banner text checks in consent test UI

Shows: Impressum link ✓/✗, DSE link ✓/✗, plus violation cards for
wrong DSE consent wording, pre-ticked checkboxes, dark patterns,
missing reject button, no settings re-access.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-02 15:38:07 +02:00
parent 0a6ec9235e
commit ca21feedc8
@@ -34,6 +34,11 @@ interface ConsentData {
category_violations?: number category_violations?: number
categories_tested?: number categories_tested?: number
} }
banner_checks?: {
has_impressum_link: boolean
has_dse_link: boolean
violations: { service: string; severity: string; text: string; legal_ref: string }[]
}
category_tests?: { category_tests?: {
category: string category: string
category_label: string category_label: string
@@ -162,6 +167,42 @@ export function ConsentTestResult({ data }: { data: ConsentData }) {
)} )}
</div> </div>
{/* Banner Text Checks */}
{data.banner_checks && (data.banner_checks.violations?.length > 0 || data.banner_checks.has_impressum_link !== undefined) && (
<div className="border rounded-lg p-4 border-gray-200 bg-gray-50">
<h4 className="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
<span>📝</span> Banner-Text Pruefung
</h4>
<div className="flex gap-3 mb-3 text-xs">
<span className={data.banner_checks.has_impressum_link ? 'text-green-600' : 'text-red-600'}>
{data.banner_checks.has_impressum_link ? '✓' : '✗'} Impressum-Link
</span>
<span className={data.banner_checks.has_dse_link ? 'text-green-600' : 'text-red-600'}>
{data.banner_checks.has_dse_link ? '✓' : '✗'} DSE-Link
</span>
</div>
{data.banner_checks.violations?.map((v: any, i: number) => {
const isHigh = v.severity === 'HIGH' || v.severity === 'CRITICAL'
return (
<div key={i} className={`mb-2 p-2 rounded border ${isHigh ? 'border-red-300 bg-red-50' : 'border-yellow-300 bg-yellow-50'}`}>
<div className="flex items-start gap-2">
<span className={`text-[10px] px-1.5 py-0.5 rounded text-white ${isHigh ? 'bg-red-600' : 'bg-yellow-600'}`}>
{v.severity}
</span>
<div>
<p className="text-xs text-gray-800">{v.text}</p>
<p className="text-[10px] text-gray-500 mt-0.5">{v.legal_ref}</p>
</div>
</div>
</div>
)
})}
{(!data.banner_checks.violations || data.banner_checks.violations.length === 0) && (
<p className="text-xs text-green-700"> Keine Banner-Text-Verstoesse erkannt</p>
)}
</div>
)}
{/* Category Tests (Phase D-F) */} {/* Category Tests (Phase D-F) */}
{data.category_tests && data.category_tests.length > 0 && ( {data.category_tests && data.category_tests.length > 0 && (
<div className="space-y-3"> <div className="space-y-3">