feat: Add data erasure request form and a new backend API endpoint for message submission.
This commit is contained in:
Van Leemput Dayron
@@ -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
200
frontend/src/components/TravelMate/EraseData.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user