251 lines
12 KiB
TypeScript
251 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { Button, Input } from "@/components/ui";
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
|
|
export default function RecuperarSenhaPage() {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [email, setEmail] = useState("");
|
|
const [emailSent, setEmailSent] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
// Validações básicas
|
|
if (!email) {
|
|
toast.error('Por favor, insira seu email');
|
|
return;
|
|
}
|
|
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
toast.error('Por favor, insira um email válido');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// Simular envio de email
|
|
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
|
|
setEmailSent(true);
|
|
toast.success('Email de recuperação enviado com sucesso!');
|
|
} catch (error) {
|
|
toast.error('Erro ao enviar email. Tente novamente.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Toaster
|
|
position="top-center"
|
|
toastOptions={{
|
|
duration: 5000,
|
|
style: {
|
|
background: '#FFFFFF',
|
|
color: '#000000',
|
|
padding: '16px',
|
|
borderRadius: '8px',
|
|
border: '1px solid #E5E5E5',
|
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
},
|
|
error: {
|
|
icon: '⚠️',
|
|
style: {
|
|
background: '#ff3a05',
|
|
color: '#FFFFFF',
|
|
border: 'none',
|
|
},
|
|
},
|
|
success: {
|
|
icon: '✓',
|
|
style: {
|
|
background: '#10B981',
|
|
color: '#FFFFFF',
|
|
border: 'none',
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
<div className="flex min-h-screen">
|
|
{/* Lado Esquerdo - Formulário */}
|
|
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
|
<div className="w-full max-w-md">
|
|
{/* Logo mobile */}
|
|
<div className="lg:hidden text-center mb-8">
|
|
<div className="inline-block px-6 py-3 rounded-2xl" style={{ background: 'var(--gradient-primary)' }}>
|
|
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{!emailSent ? (
|
|
<>
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white">
|
|
Recuperar Senha
|
|
</h2>
|
|
<p className="text-[14px] text-zinc-600 dark:text-zinc-400 mt-2">
|
|
Digite seu email e enviaremos um link para redefinir sua senha
|
|
</p>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<Input
|
|
label="Email"
|
|
type="email"
|
|
placeholder="seu@email.com"
|
|
leftIcon="ri-mail-line"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
className="w-full"
|
|
size="lg"
|
|
isLoading={isLoading}
|
|
>
|
|
Enviar link de recuperação
|
|
</Button>
|
|
</form>
|
|
|
|
{/* Back to login */}
|
|
<div className="mt-6 text-center">
|
|
<Link
|
|
href="/login"
|
|
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
|
>
|
|
<i className="ri-arrow-left-line" />
|
|
Voltar para o login
|
|
</Link>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Success Message */}
|
|
<div className="text-center">
|
|
<div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
|
|
<i className="ri-mail-check-line text-4xl text-[#10B981]" />
|
|
</div>
|
|
|
|
<h2 className="text-[28px] font-bold text-zinc-900 dark:text-white mb-4">
|
|
Email enviado!
|
|
</h2>
|
|
|
|
<p className="text-[14px] text-zinc-600 dark:text-zinc-400 mb-2">
|
|
Enviamos um link de recuperação para:
|
|
</p>
|
|
|
|
<p className="text-[16px] font-semibold text-zinc-900 dark:text-white mb-6">
|
|
{email}
|
|
</p>
|
|
|
|
<div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
|
|
<div className="flex gap-4">
|
|
<i className="ri-information-line text-[#0EA5E9] text-xl mt-0.5" />
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-zinc-900 dark:text-white mb-1">
|
|
Verifique sua caixa de entrada
|
|
</h4>
|
|
<p className="text-xs text-zinc-600 dark:text-zinc-400">
|
|
Clique no link que enviamos para redefinir sua senha.
|
|
Se não receber em alguns minutos, verifique sua pasta de spam.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="w-full mb-4"
|
|
onClick={() => setEmailSent(false)}
|
|
>
|
|
Enviar novamente
|
|
</Button>
|
|
|
|
<Link
|
|
href="/login"
|
|
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
|
>
|
|
<i className="ri-arrow-left-line" />
|
|
Voltar para o login
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lado Direito - Branding */}
|
|
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'var(--gradient-primary)' }}>
|
|
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
|
{/* Logo */}
|
|
<div className="mb-8">
|
|
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
|
<h1 className="text-5xl font-bold tracking-tight text-white">
|
|
aggios
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conteúdo */}
|
|
<div className="max-w-lg text-center">
|
|
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
|
<i className="ri-lock-password-line text-4xl" />
|
|
</div>
|
|
<h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
|
|
<p className="text-white/80 text-lg mb-8">
|
|
Protegemos seus dados com os mais altos padrões de segurança.
|
|
Seu link de recuperação é único e expira em 24 horas.
|
|
</p>
|
|
|
|
{/* Features */}
|
|
<div className="space-y-4 text-left">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
|
<i className="ri-shield-check-line text-sm" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-1">Criptografia de ponta</h4>
|
|
<p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
|
<i className="ri-time-line text-sm" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-1">Link temporário</h4>
|
|
<p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
|
<i className="ri-customer-service-2-line text-sm" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-1">Suporte disponível</h4>
|
|
<p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Círculos decorativos */}
|
|
<div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|