68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { useI18n } from '../../components/I18nProvider';
|
|
|
|
export default function ResetPasswordPage() {
|
|
const { t } = useI18n();
|
|
const searchParams = useSearchParams();
|
|
const [password, setPassword] = useState('');
|
|
const [token, setToken] = useState('');
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const tok = searchParams.get('token') || '';
|
|
setToken(tok);
|
|
}, [searchParams]);
|
|
|
|
async function onSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setMessage(null);
|
|
setError(null);
|
|
if (!token) {
|
|
setError(t('resetMissingToken'));
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('/api/auth/reset', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ token, password }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setError(data.error || t('resetError'));
|
|
} else {
|
|
setMessage(t('resetSuccess'));
|
|
setPassword('');
|
|
}
|
|
} catch (err) {
|
|
setError(t('resetError'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="panel" style={{ maxWidth: 480, margin: '40px auto' }}>
|
|
<h1>{t('resetTitle')}</h1>
|
|
<p style={{ color: '#cbd5e1', marginTop: 6 }}>{t('resetLead')}</p>
|
|
<form onSubmit={onSubmit} style={{ display: 'grid', gap: 12, marginTop: 14 }}>
|
|
<label>
|
|
{t('passwordLabel')}
|
|
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} minLength={8} required />
|
|
</label>
|
|
<button className="button" type="submit" disabled={loading}>
|
|
{loading ? t('saving') : t('resetSubmit')}
|
|
</button>
|
|
</form>
|
|
{message ? <p style={{ marginTop: 12, color: 'green' }}>{message}</p> : null}
|
|
{error ? <p style={{ marginTop: 12, color: 'red' }}>{error}</p> : null}
|
|
{!token ? <p style={{ marginTop: 12, color: '#f59e0b' }}>{t('resetMissingToken')}</p> : null}
|
|
</main>
|
|
);
|
|
}
|