email de mudar senha

This commit is contained in:
2026-05-05 17:12:08 +01:00
parent fc030aef60
commit b5e0d5fc8a
2 changed files with 87 additions and 15 deletions

View File

@@ -12,7 +12,7 @@ import {
import {
signInWithEmailAndPassword, createUserWithEmailAndPassword,
onAuthStateChanged, signOut, signInWithCustomToken
onAuthStateChanged, signOut, signInWithCustomToken, sendPasswordResetEmail
} from 'firebase/auth';
import {
collection, doc, onSnapshot, addDoc, updateDoc,
@@ -39,6 +39,8 @@ export default function App() {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [authMode, setAuthMode] = useState('login');
const [authError, setAuthError] = useState('');
const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false);
const [forgotPasswordEmail, setForgotPasswordEmail] = useState('');
const [categoryFilter, setCategoryFilter] = useState('Todos');
const [colorFilter, setColorFilter] = useState('');
const [ageFilter, setAgeFilter] = useState('any');
@@ -723,6 +725,30 @@ export default function App() {
} finally { setLoading(false); }
};
const handleForgotPassword = () => {
setAuthError('');
setShowForgotPasswordModal(true);
};
const handleForgotPasswordSubmit = async (e) => {
e.preventDefault();
const email = forgotPasswordEmail;
if (!email) return;
setLoading(true);
setAuthError('');
try {
await sendPasswordResetEmail(auth, email);
setShowForgotPasswordModal(false);
setForgotPasswordEmail('');
setToastMessage(t('passwordResetSent') || "E-mail de recuperação enviado! Verifique a sua caixa de entrada.");
} catch (err) {
console.error(err);
setAuthError(err.message);
} finally {
setLoading(false);
}
};
const emptyTrashPermanently = async () => {
@@ -888,6 +914,13 @@ export default function App() {
<form onSubmit={handleAuth} className="space-y-4">
<input name="email" type="email" placeholder={t('emailPlaceholder')} required className="w-full p-5 rounded-2xl bg-gray-50 dark:bg-gray-800 border-none focus:ring-2 focus:ring-primary-500 outline-none font-bold" />
<input name="password" type="password" placeholder={t('passwordPlaceholder')} required className="w-full p-5 rounded-2xl bg-gray-50 dark:bg-gray-800 border-none focus:ring-2 focus:ring-primary-500 outline-none font-bold" />
{authMode === 'login' && (
<div className="text-right">
<button type="button" onClick={handleForgotPassword} className="text-[10px] font-black text-primary-500 hover:text-primary-600 uppercase tracking-widest transition-colors">
{t('forgotPassword') || 'Esqueceu-se da palavra-passe?'}
</button>
</div>
)}
<button className="w-full py-5 bg-primary-600 text-white rounded-[2rem] font-black text-lg shadow-2xl hover:scale-[1.02] active:scale-95 transition-all">
{authMode === 'login' ? t('loginBtn') : t('registerBtn')}
</button>
@@ -900,6 +933,25 @@ export default function App() {
</div>
</div>
</Card>
{/* Modal de Forgot Password */}
{showForgotPasswordModal && (
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/60 backdrop-blur-sm p-6" onClick={() => setShowForgotPasswordModal(false)}>
<Card className="w-full max-w-md p-8 animate-in zoom-in-95" darkMode={darkMode} onClick={e => e.stopPropagation()}>
<h3 className="text-2xl font-black mb-4 text-center text-inherit">{t('forgotPassword')}</h3>
<p className="text-center opacity-70 mb-8 text-sm text-inherit">{t('forgotPasswordPrompt')}</p>
<form onSubmit={handleForgotPasswordSubmit} className="space-y-4">
<input name="resetEmail" type="email" placeholder={t('emailPlaceholder')} required value={forgotPasswordEmail} onChange={e => setForgotPasswordEmail(e.target.value)} className="w-full p-5 rounded-2xl bg-gray-50 dark:bg-gray-800 border-none focus:ring-2 focus:ring-primary-500 outline-none font-bold text-inherit" />
<button type="submit" disabled={loading} className="w-full py-5 bg-primary-600 text-white rounded-[2rem] font-black text-lg shadow-2xl hover:scale-[1.02] active:scale-95 transition-all disabled:opacity-50">
{loading ? t('saving') : t('sendEmailBtn')}
</button>
</form>
<button type="button" onClick={() => setShowForgotPasswordModal(false)} className="w-full mt-6 py-4 uppercase font-black text-[10px] tracking-widest text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
{t('cancel')}
</button>
</Card>
</div>
)}
</div>
);
}