Xeewy/xeewy.be
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add data erasure request form and a new backend API endpoint for message submission.

Browse Source
This commit is contained in:
Van Leemput Dayron
2025-12-15 17:40:14 +01:00
parent 6c11cf5213
commit 572159b45a
9 changed files with 617 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.tsx
View File

@@ -2,10 +2,11 @@ import { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
import { LanguageProvider } from './contexts/LanguageContext';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import TravelMate from './components/TravelMate';
import Footer from './components/Footer';
import Policies from './components/Policies';
import TravelMate from './components/TravelMate';
import EraseData from './components/TravelMate/EraseData';
import ScrollToTop from './components/ScrollToTop';
import './styles/main.scss';
@@ -59,8 +60,11 @@ function AppContent() {
<main style={{ flex: 1 }}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="travelmate" element={<TravelMate />} />
<Route path="travelmate/policies" element={<Policies />} />
<Route path="/travelmate" element={<TravelMate />} >
<Route path="policies" element={<Policies />} />
</Route>
<Route path="/travelmate/erasedata" element={<EraseData />} />
<Route path="/policies" element={<Policies />} />
</Routes>
</main>
<Footer />

42
frontend/src/components/TravelMate.tsx
View File

@@ -247,18 +247,36 @@ const TravelMate = () => {
<h3 style={{ marginBottom: '1.5rem' }}>
{t('policies.title')}
</h3>
<Link
to={`/${language}/travelmate/policies`}
className="btn btn-secondary"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '10px',
textDecoration: 'none'
}}
>
{t('travelmate.policies.link')}
</Link>
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
<Link
to={`/${language}/travelmate/policies`}
className="btn btn-secondary"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '10px',
textDecoration: 'none'
}}
>
{t('travelmate.policies.link')}
</Link>
<Link
to={`/${language}/travelmate/erasedata`}
className="btn btn-secondary"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '10px',
textDecoration: 'none',
background: 'rgba(239, 68, 68, 0.1)',
color: '#EF4444',
borderColor: 'rgba(239, 68, 68, 0.2)'
}}
>
<Shield size={18} />
{t('travelmate.erasedata.link')}
</Link>
</div>
</motion.div>
</motion.div>

200
frontend/src/components/TravelMate/EraseData.tsx Normal file
View File

@@ -0,0 +1,200 @@
import { useState } from 'react';
import { motion } from 'framer-motion';
import { useLanguage } from '../../contexts/LanguageContext';
import { ArrowLeft, Send, CheckCircle, AlertCircle } from 'lucide-react';
import { Link } from 'react-router-dom';
import axios from 'axios';
const EraseData = () => {
const { t, language } = useLanguage();
const [formData, setFormData] = useState({
nom: '',
prenom: '',
email: '',
message: '',
confirm: false
});
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
const [errorMessage, setErrorMessage] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.confirm) return;
setStatus('submitting');
setErrorMessage('');
try {
// Using absolute URL for localhost dev, in prod simple /api might work if proxied or configured
// Assuming localhost:3000 for backend based on previous steps
await axios.post('http://localhost:3000/api/messages', {
nom: formData.nom,
prenom: formData.prenom,
email: formData.email,
message: formData.message
});
setStatus('success');
setFormData({ nom: '', prenom: '', email: '', message: '', confirm: false });
} catch (error: any) {
console.error('Submission error', error);
setStatus('error');
setErrorMessage(error.response?.data?.message || 'Une erreur est survenue. Veuillez réessayer.');
}
};
const containerVariants = {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 }
};
return (
<div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
<div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
<Link
to={`/${language}/travelmate`}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '8px',
marginBottom: '2rem',
textDecoration: 'none',
color: 'var(--text-color)',
opacity: 0.8
}}
>
<ArrowLeft size={18} />
{t('policies.back')}
</Link>
<motion.div
initial="hidden"
animate="visible"
variants={containerVariants}
style={{
background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
padding: '2.5rem',
borderRadius: '1.5rem',
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
}}
>
<h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>{t('erasedata.title')}</h1>
<p style={{ marginBottom: '2rem', opacity: 0.8, lineHeight: '1.6' }}>
{t('erasedata.description')}
</p>
{status === 'success' ? (
<div style={{
padding: '2rem',
background: 'rgba(16, 185, 129, 0.1)',
borderRadius: '1rem',
border: '1px solid rgba(16, 185, 129, 0.2)',
textAlign: 'center',
color: '#10B981'
}}>
<CheckCircle size={48} style={{ marginBottom: '1rem' }} />
<h3>{t('erasedata.success.title')}</h3>
<p>{t('erasedata.success.message')}</p>
</div>
) : (
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
<div>
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.lastname')}</label>
<input
type="text"
required
value={formData.nom}
onChange={e => setFormData({ ...formData, nom: e.target.value })}
className="form-input"
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
/>
</div>
<div>
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.firstname')}</label>
<input
type="text"
required
value={formData.prenom}
onChange={e => setFormData({ ...formData, prenom: e.target.value })}
className="form-input"
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
/>
</div>
</div>
<div>
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.email')}</label>
<input
type="email"
required
value={formData.email}
onChange={e => setFormData({ ...formData, email: e.target.value })}
className="form-input"
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
/>
</div>
<div>
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.message')}</label>
<textarea
required={false}
rows={4}
value={formData.message}
onChange={e => setFormData({ ...formData, message: e.target.value })}
className="form-input"
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
placeholder={t('erasedata.form.placeholder')}
/>
</div>
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', cursor: 'pointer', opacity: 0.9 }}>
<input
type="checkbox"
required
checked={formData.confirm}
onChange={e => setFormData({ ...formData, confirm: e.target.checked })}
style={{ marginTop: '4px', width: '18px', height: '18px' }}
/>
<span style={{ fontSize: '0.9rem' }}>
{t('erasedata.form.confirm')}
</span>
</label>
{status === 'error' && (
<div style={{ color: '#EF4444', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem' }}>
<AlertCircle size={16} />
{errorMessage}
</div>
)}
<button
type="submit"
disabled={!formData.confirm || status === 'submitting'}
className="btn btn-primary"
style={{
marginTop: '1rem',
padding: '1rem',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '10px',
opacity: (!formData.confirm || status === 'submitting') ? 0.5 : 1,
cursor: (!formData.confirm || status === 'submitting') ? 'not-allowed' : 'pointer'
}}
>
{status === 'submitting' ? t('erasedata.form.submitting') : (
<>
<Send size={18} />
{t('erasedata.form.submit')}
</>
)}
</button>
</form>
)}
</motion.div>
</div>
</div>
);
};
export default EraseData;

30
frontend/src/contexts/LanguageContext.tsx
View File

@@ -172,7 +172,22 @@ const translations = {
'travelmate.tech.api.3': 'CI/CD avec Gitea Actions',
'travelmate.viewCode': 'Voir le code',
// Erase Data Page
'erasedata.title': 'Demande de suppression de données',
'erasedata.description': 'Conformément au RGPD et à notre politique de confidentialité, vous pouvez demander la suppression de vos données personnelles associées à Travel Mate. Veuillez remplir le formulaire ci-dessous.',
'erasedata.success.title': 'Demande envoyée avec succès',
'erasedata.success.message': 'Nous traiterons votre demande dans les plus brefs délais.',
'erasedata.form.lastname': 'Nom',
'erasedata.form.firstname': 'Prénom',
'erasedata.form.email': 'Email du compte à supprimer',
'erasedata.form.message': 'Message / Raison (Optionnel)',
'erasedata.form.placeholder': 'Je souhaite supprimer mon compte car...',
'erasedata.form.confirm': 'Je confirme vouloir supprimer mes données personnelles. Je comprends que cette action est irréversible et entraînera la perte de l\'accès à mon compte Travel Mate.',
'erasedata.form.submit': 'Envoyer la demande',
'erasedata.form.submitting': 'Envoi en cours...',
'travelmate.policies.link': 'Voir les politiques de confidentialité',
'travelmate.erasedata.link': 'Supprimer mes données',
// Policies Page
'policies.back': 'Retour',
@@ -378,7 +393,22 @@ const translations = {
'travelmate.tech.api.3': 'CI/CD with Gitea Actions',
'travelmate.viewCode': 'View Code',
// Erase Data Page
'erasedata.title': 'Data Erasure Request',
'erasedata.description': 'In accordance with GDPR and our privacy policy, you can request the deletion of your personal data associated with Travel Mate. Please fill out the form below.',
'erasedata.success.title': 'Request sent successfully',
'erasedata.success.message': 'We will process your request as soon as possible.',
'erasedata.form.lastname': 'Last Name',
'erasedata.form.firstname': 'First Name',
'erasedata.form.email': 'Account Email to Delete',
'erasedata.form.message': 'Message / Reason (Optional)',
'erasedata.form.placeholder': 'I wish to delete my account because...',
'erasedata.form.confirm': 'I confirm that I want to delete my personal data. I understand that this action is irreversible and will result in the loss of access to my Travel Mate account.',
'erasedata.form.submit': 'Send Request',
'erasedata.form.submitting': 'Sending...',
'travelmate.policies.link': 'View Privacy Policy',
'travelmate.erasedata.link': 'Request Data Erasure',
// Policies Page
'policies.back': 'Back',

13
frontend/src/styles/_global.scss
View File

@@ -134,6 +134,19 @@ p {
max-width: 65ch;
}
// Classes globales pour les boutons
.btn {
@include button-base();
&-primary {
@include button-primary();
}
&-secondary {
@include button-secondary();
}
}
// Classes utilitaires
.container {
max-width: map-get($breakpoints, xl);