Spaces:
Sleeping
Sleeping
File size: 5,970 Bytes
cd99321 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import React, { ChangeEvent } from 'react'
import { Mail, ArrowLeft, CheckCircle2, Terminal } from 'lucide-react'
import { useTranslation } from '../i18n'
import { useForgotPassword } from './forgotPassword/useForgotPassword'
const inputBase: React.CSSProperties = {
width: '100%', padding: '11px 12px 11px 38px', borderRadius: 12,
border: '1px solid #e5e7eb', fontSize: 14, fontFamily: 'inherit',
outline: 'none', transition: 'border-color 120ms',
background: 'white', color: '#111827',
}
const ForgotPasswordPage: React.FC = () => {
const { t } = useTranslation()
// Page = wiring container: form state, the SMTP probe and submit live in the hook.
const { navigate, email, setEmail, submitted, isLoading, smtpConfigured, handleSubmit } = useForgotPassword()
return (
<div style={{
minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
background: 'linear-gradient(180deg, #f9fafb, #ffffff)', padding: 24, fontFamily: 'inherit',
}}>
<div style={{
width: '100%', maxWidth: 420, background: 'white', borderRadius: 20,
boxShadow: '0 12px 40px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04)',
padding: '32px 28px',
}}>
<button type="button" onClick={() => navigate('/login')} style={{
display: 'flex', alignItems: 'center', gap: 6,
background: 'none', border: 'none', cursor: 'pointer', padding: 0,
color: '#6b7280', fontSize: 13, fontFamily: 'inherit', marginBottom: 22,
}}>
<ArrowLeft size={14} />{t('login.backToLogin')}
</button>
{submitted ? (
<div style={{ textAlign: 'center', padding: '12px 0' }}>
<div style={{
width: 56, height: 56, borderRadius: '50%', background: '#ecfdf5',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
color: '#059669', marginBottom: 16,
}}>
<CheckCircle2 size={28} />
</div>
<h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 10px 0' }}>
{t('login.forgotPasswordSentTitle')}
</h1>
<p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.55, margin: 0 }}>
{t('login.forgotPasswordSentBody')}
</p>
{smtpConfigured === false && (
<div style={{
marginTop: 18, padding: '12px 14px',
background: '#fffbeb', border: '1px solid #fde68a',
borderRadius: 10, textAlign: 'left',
display: 'flex', alignItems: 'flex-start', gap: 10,
}}>
<Terminal size={16} className="text-[#92400e]" style={{ marginTop: 1, flexShrink: 0 }} />
<p style={{ fontSize: 12.5, color: '#92400e', lineHeight: 1.55, margin: 0 }}>
{t('login.forgotPasswordSmtpHintOff')}
</p>
</div>
)}
<button type="button" onClick={() => navigate('/login')} style={{
marginTop: 24, padding: '11px 22px', background: '#111827', color: 'white',
border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
cursor: 'pointer', fontFamily: 'inherit',
}}>{t('login.backToLogin')}</button>
</div>
) : (
<>
<h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 8px 0' }}>
{t('login.forgotPasswordTitle')}
</h1>
<p style={{ fontSize: 13.5, color: '#6b7280', lineHeight: 1.55, margin: '0 0 16px 0' }}>
{t('login.forgotPasswordBody')}
</p>
{smtpConfigured === false && (
<div style={{
padding: '10px 12px', marginBottom: 18,
background: '#fffbeb', border: '1px solid #fde68a',
borderRadius: 10, display: 'flex', alignItems: 'flex-start', gap: 10,
}}>
<Terminal size={15} className="text-[#92400e]" style={{ marginTop: 1, flexShrink: 0 }} />
<p style={{ fontSize: 12.5, color: '#92400e', lineHeight: 1.5, margin: 0 }}>
{t('login.forgotPasswordSmtpHintOff')}
</p>
</div>
)}
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<div>
<label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
{t('common.email')}
</label>
<div style={{ position: 'relative' }}>
<Mail size={15} className="text-[#9ca3af]" style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
<input
type="email" value={email}
onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
required placeholder={t('login.emailPlaceholder')} style={inputBase}
onFocus={(e) => { e.currentTarget.style.borderColor = '#111827' }}
onBlur={(e) => { e.currentTarget.style.borderColor = '#e5e7eb' }}
/>
</div>
</div>
<button type="submit" disabled={isLoading} style={{
width: '100%', padding: '12px', background: '#111827', color: 'white',
border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
cursor: isLoading ? 'default' : 'pointer', fontFamily: 'inherit',
opacity: isLoading ? 0.7 : 1, transition: 'opacity 0.15s',
}}>
{isLoading ? t('login.signingIn') : t('login.forgotPasswordSubmit')}
</button>
</form>
</>
)}
</div>
</div>
)
}
export default ForgotPasswordPage
|