feat(compliance): Implement COPPA/GDPR compliance UI

Frontend Compliance Features:
- Created compliance API client (data export, account deletion, deletion status)
- Added DataExport component with download functionality
- Added AccountDeletion component with 30-day grace period UI
- Updated Settings page with Privacy & Compliance sections

COPPA Age Verification:
- Added date of birth field to registration
- Age calculation with COPPA compliance (under 13 blocked)
- Parental email and consent for users 13-17
- Dynamic form validation based on age

Privacy & Terms:
- Separate checkboxes for Terms of Service and Privacy Policy
- Required acceptance for registration
- Links to policy pages

Completes GDPR Right to Data Portability and Right to Erasure.
Completes COPPA parental consent requirements.
This commit is contained in:
2025-10-02 17:17:06 +00:00
parent afab67da9f
commit 3335255710
5 changed files with 634 additions and 27 deletions

View File

@@ -11,6 +11,8 @@ import { MFASettings } from '@/components/settings/MFASettings';
import { SessionsManagement } from '@/components/settings/SessionsManagement';
import { DeviceTrustManagement } from '@/components/settings/DeviceTrustManagement';
import { BiometricSettings } from '@/components/settings/BiometricSettings';
import { DataExport } from '@/components/settings/DataExport';
import { AccountDeletion } from '@/components/settings/AccountDeletion';
import { motion } from 'framer-motion';
export default function SettingsPage() {
@@ -265,11 +267,33 @@ export default function SettingsPage() {
</Box>
</motion.div>
{/* Privacy & Compliance - Data Export */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.39 }}
>
<Box sx={{ mb: 3 }}>
<DataExport />
</Box>
</motion.div>
{/* Privacy & Compliance - Account Deletion */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.42 }}
>
<Box sx={{ mb: 3 }}>
<AccountDeletion />
</Box>
</motion.div>
{/* Account Actions */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.4 }}
transition={{ duration: 0.4, delay: 0.45 }}
>
<Card>
<CardContent>