Modification des pages d'authentification
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
export default function ResetPassword() {
|
||||
const [params] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const token = params.get('token') || '';
|
||||
|
||||
const [password, setPassword] = useState('');
|
||||
const [password2, setPassword2] = useState('');
|
||||
const [status, setStatus] = useState(null); // null | 'done' | 'error'
|
||||
const [errMsg, setErrMsg] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [appInfo, setAppInfo] = useState({ appName: 'Crowdlending Tracker', iconUrl: null });
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/app-info')
|
||||
.then(r => r.json())
|
||||
.then(d => setAppInfo(d))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const submit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (password !== password2) { setErrMsg('Les mots de passe ne correspondent pas.'); setStatus('error'); return; }
|
||||
setErrMsg(''); setBusy(true);
|
||||
try {
|
||||
const res = await fetch('/api/auth/reset-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ token, password }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) { setErrMsg(data.error || 'Une erreur est survenue.'); setStatus('error'); }
|
||||
else { setStatus('done'); setTimeout(() => navigate('/login'), 3000); }
|
||||
} catch {
|
||||
setErrMsg('Impossible de joindre le serveur.'); setStatus('error');
|
||||
} finally { setBusy(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', minHeight: '100dvh' }}>
|
||||
|
||||
{/* ── Colonne gauche — image ───────────────────────────── */}
|
||||
<div className="login-bg-col" style={{
|
||||
flex: '1 1 50%',
|
||||
display: 'none',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
background: '#0d0d0d',
|
||||
}}>
|
||||
<img
|
||||
src="/login-bg.jpg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
onError={e => { e.target.style.display = 'none'; }}
|
||||
style={{
|
||||
position: 'absolute', inset: 0,
|
||||
width: '100%', height: '100%',
|
||||
objectFit: 'cover', opacity: 0.85,
|
||||
}}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 40, left: 40,
|
||||
color: '#fff',
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
{appInfo.iconUrl && (
|
||||
<img src={appInfo.iconUrl} alt="" width={36} height={36}
|
||||
style={{ borderRadius: 8, flexShrink: 0 }} />
|
||||
)}
|
||||
<span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.3px' }}>
|
||||
{appInfo.appName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Colonne droite — formulaire ──────────────────────── */}
|
||||
<div style={{
|
||||
flex: '1 1 50%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '48px 24px',
|
||||
background: 'var(--background, #fff)',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
|
||||
{/* Logo + nom */}
|
||||
<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 }}>
|
||||
|
||||
{!token ? (
|
||||
/* ── Lien invalide ── */
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p style={{ color: 'var(--danger)', marginBottom: 20 }}>
|
||||
Lien de réinitialisation invalide ou manquant.
|
||||
</p>
|
||||
<Link to="/forgot-password" style={{
|
||||
color: 'var(--text)', fontWeight: 500, textDecoration: 'underline',
|
||||
}}>
|
||||
Faire une nouvelle demande
|
||||
</Link>
|
||||
</div>
|
||||
) : status === 'done' ? (
|
||||
/* ── Succès ── */
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{
|
||||
width: 52, height: 52, borderRadius: '50%',
|
||||
background: 'var(--success-bg, #f0fdf4)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
margin: '0 auto 20px',
|
||||
}}>
|
||||
<svg width="24" height="24" 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: 22, fontWeight: 700,
|
||||
letterSpacing: '-0.4px', color: 'var(--text)',
|
||||
}}>Mot de passe mis à jour</h1>
|
||||
<p style={{ margin: '0 0 28px', color: 'var(--text-muted)', fontSize: 14 }}>
|
||||
Redirection vers la connexion dans quelques secondes…
|
||||
</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', textAlign: 'center',
|
||||
}}>
|
||||
Se connecter
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
/* ── Formulaire ── */
|
||||
<>
|
||||
<div style={{ marginBottom: 28 }}>
|
||||
<h1 style={{
|
||||
margin: '0 0 6px', fontSize: 26, fontWeight: 700,
|
||||
letterSpacing: '-0.5px', color: 'var(--text)',
|
||||
}}>
|
||||
Nouveau mot de passe
|
||||
</h1>
|
||||
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14 }}>
|
||||
Choisissez un mot de passe d'au moins 8 caractères.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
|
||||
{status === 'error' && (
|
||||
<div style={{
|
||||
padding: '10px 14px', borderRadius: 8, fontSize: 14,
|
||||
background: 'var(--danger-bg, #fef2f2)',
|
||||
color: 'var(--danger, #dc2626)',
|
||||
border: '1px solid var(--danger-light, #fca5a5)',
|
||||
}}>
|
||||
{errMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
|
||||
Nouveau mot de passe
|
||||
</label>
|
||||
<input
|
||||
className="form-input"
|
||||
type="password" required minLength={8}
|
||||
autoComplete="new-password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={e => { setPassword(e.target.value); setStatus(null); }}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
|
||||
Confirmer le mot de passe
|
||||
</label>
|
||||
<input
|
||||
className="form-input"
|
||||
type="password" required minLength={8}
|
||||
autoComplete="new-password"
|
||||
placeholder="••••••••"
|
||||
value={password2}
|
||||
onChange={e => { setPassword2(e.target.value); setStatus(null); }}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
style={{
|
||||
marginTop: 4, width: '100%',
|
||||
padding: '11px 0',
|
||||
background: busy ? 'var(--text-muted)' : 'var(--primary, #1e40af)',
|
||||
color: '#fff',
|
||||
border: 'none', borderRadius: 8,
|
||||
fontSize: 15, fontWeight: 600,
|
||||
cursor: busy ? 'not-allowed' : 'pointer',
|
||||
transition: 'background 0.15s',
|
||||
}}
|
||||
>
|
||||
{busy ? 'Enregistrement…' : 'Réinitialiser le mot de passe'}
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<p style={{
|
||||
marginTop: 24, textAlign: 'center',
|
||||
fontSize: 13, color: 'var(--text-muted)',
|
||||
}}>
|
||||
<Link to="/login" style={{
|
||||
color: 'var(--text)', fontWeight: 500, textDecoration: 'underline',
|
||||
}}>
|
||||
Retour à la connexion
|
||||
</Link>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@media (min-width: 768px) {
|
||||
.login-bg-col { display: block !important; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user