Description
Three critical GDPR elements are missing: (1) Cookie consent banner/mechanism - no files exist for cookie management; (2) Privacy policy checkbox on contact form - ContactForm.tsx and index.html forms lack this field despite backend expecting it; (3) reCAPTCHA integration - no script inclusion, no verification logic in frontend or backend.
Current State
The project has contact form implementations in: (1) src/components/ContactForm.tsx - React component with basic form fields (name, email, message), accessibility support, and validation but NO privacy checkbox, NO reCAPTCHA; (2) index.html - static HTML form with same fields but NO GDPR consent elements; (3) server/contact_handler.py - backend handler that checks consent_given flag but frontend doesn't send it; (4) src/api/contact.ts - API utilities with audit logging and consent handling infrastructure. NO cookie consent banner exists anywhere. No reCAPTCHA integration.
Acceptance Criteria
- The gap described above is fully addressed
Technical Details
Implementation steps: 1) Create CookieConsent component (src/components/CookieConsent.tsx) with banner UI, cookie preference storage, and integration into main app; 2) Add privacy checkbox to ContactForm.tsx with required validation, link to privacy policy, proper ARIA attributes per AGENTS.md standards; 3) Update index.html contact form with matching privacy checkbox; 4) Integrate Google reCAPTCHA v3: add script to index.html, create useRecaptcha hook, add token to form submission, implement backend verification in contact_handler.py; 5) Update form state to track and submit privacy consent; 6) Add privacy policy page or modal (optional but recommended).
Estimated Effort
4-6 hours | Complexity: Medium
Part of #262
Description
Three critical GDPR elements are missing: (1) Cookie consent banner/mechanism - no files exist for cookie management; (2) Privacy policy checkbox on contact form - ContactForm.tsx and index.html forms lack this field despite backend expecting it; (3) reCAPTCHA integration - no script inclusion, no verification logic in frontend or backend.
Current State
The project has contact form implementations in: (1) src/components/ContactForm.tsx - React component with basic form fields (name, email, message), accessibility support, and validation but NO privacy checkbox, NO reCAPTCHA; (2) index.html - static HTML form with same fields but NO GDPR consent elements; (3) server/contact_handler.py - backend handler that checks consent_given flag but frontend doesn't send it; (4) src/api/contact.ts - API utilities with audit logging and consent handling infrastructure. NO cookie consent banner exists anywhere. No reCAPTCHA integration.
Acceptance Criteria
Technical Details
Implementation steps: 1) Create CookieConsent component (src/components/CookieConsent.tsx) with banner UI, cookie preference storage, and integration into main app; 2) Add privacy checkbox to ContactForm.tsx with required validation, link to privacy policy, proper ARIA attributes per AGENTS.md standards; 3) Update index.html contact form with matching privacy checkbox; 4) Integrate Google reCAPTCHA v3: add script to index.html, create useRecaptcha hook, add token to form submission, implement backend verification in contact_handler.py; 5) Update form state to track and submit privacy consent; 6) Add privacy policy page or modal (optional but recommended).
Estimated Effort
4-6 hours | Complexity: Medium
Part of #262