114 lines
4.8 KiB
React
114 lines
4.8 KiB
React
import { useState, useEffect } from 'react';
|
|
import { Link, useSearchParams } from 'react-router-dom';
|
|
import AuthBgCol from '../components/AuthBgCol.jsx';
|
|
|
|
export default function VerifyEmail() {
|
|
const [params] = useSearchParams();
|
|
const token = params.get('token') || '';
|
|
const [status, setStatus] = useState('loading'); // 'loading' | 'ok' | 'error'
|
|
const [errMsg, setErrMsg] = useState('');
|
|
const [appInfo, setAppInfo] = useState({ appName: 'Crowdlending Tracker', iconUrl: null });
|
|
|
|
useEffect(() => {
|
|
fetch('/api/app-info').then(r => r.json()).then(d => setAppInfo(d)).catch(() => {});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!token) { setStatus('error'); setErrMsg('Lien de vérification invalide ou manquant.'); return; }
|
|
fetch(`/api/auth/verify-email?token=${encodeURIComponent(token)}`)
|
|
.then(async r => {
|
|
const data = await r.json();
|
|
if (!r.ok) { setErrMsg(data.error || 'Lien invalide.'); setStatus('error'); }
|
|
else setStatus('ok');
|
|
})
|
|
.catch(() => { setErrMsg('Impossible de joindre le serveur.'); setStatus('error'); });
|
|
}, [token]);
|
|
|
|
return (
|
|
<div style={{ display: 'flex', minHeight: '100dvh' }}>
|
|
|
|
<AuthBgCol appInfo={appInfo} />
|
|
|
|
|
|
<div style={{
|
|
flex: '1 1 50%', display: 'flex', flexDirection: 'column',
|
|
alignItems: 'center', justifyContent: 'center',
|
|
padding: '48px 24px', background: 'var(--background, #fff)', minWidth: 0,
|
|
}}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, marginBottom: 32 }}>
|
|
{appInfo.iconUrl && <img src={appInfo.iconUrl} alt={appInfo.appName} width={52} height={52} style={{ borderRadius: 12 }} />}
|
|
<span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.4px' }}>{appInfo.appName}</span>
|
|
</div>
|
|
|
|
<div style={{ width: '100%', maxWidth: 360, textAlign: 'center' }}>
|
|
|
|
{status === 'loading' && (
|
|
<p style={{ color: 'var(--text-muted)' }}>Vérification en cours…</p>
|
|
)}
|
|
|
|
{status === 'ok' && (
|
|
<>
|
|
<div style={{
|
|
width: 56, height: 56, borderRadius: '50%',
|
|
background: 'var(--success-bg, #f0fdf4)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
margin: '0 auto 20px',
|
|
}}>
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20 6L9 17l-5-5" stroke="var(--success, #16a34a)" strokeWidth="2.2"
|
|
strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h1 style={{ margin: '0 0 10px', fontSize: 24, fontWeight: 700, color: 'var(--text)' }}>
|
|
Email vérifié !
|
|
</h1>
|
|
<p style={{ margin: '0 0 28px', color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.6 }}>
|
|
Votre adresse email a bien été confirmée. Vous pouvez maintenant vous connecter.
|
|
</p>
|
|
<Link to="/login" style={{
|
|
display: 'block', width: '100%', padding: '11px 0',
|
|
background: 'var(--primary, #1e40af)', color: '#fff',
|
|
borderRadius: 8, fontSize: 15, fontWeight: 600,
|
|
textDecoration: 'none',
|
|
}}>
|
|
Se connecter
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{status === 'error' && (
|
|
<>
|
|
<div style={{
|
|
width: 56, height: 56, borderRadius: '50%',
|
|
background: 'var(--danger-bg, #fef2f2)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
margin: '0 auto 20px',
|
|
}}>
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
|
|
stroke="var(--danger, #dc2626)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h1 style={{ margin: '0 0 10px', fontSize: 22, fontWeight: 700, color: 'var(--text)' }}>
|
|
Lien invalide
|
|
</h1>
|
|
<p style={{ margin: '0 0 28px', color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.6 }}>
|
|
{errMsg}
|
|
</p>
|
|
<Link to="/login" style={{
|
|
display: 'block', width: '100%', padding: '11px 0',
|
|
background: 'var(--primary, #1e40af)', color: '#fff',
|
|
borderRadius: 8, fontSize: 15, fontWeight: 600,
|
|
textDecoration: 'none',
|
|
}}>
|
|
Retour à la connexion
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|