201 lines
10 KiB
TypeScript
201 lines
10 KiB
TypeScript
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:4000/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;
|