Skip to content

feat: Enhance login form with improved UI and error handling #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marcus-oss wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Enhance login form with improved UI and error handling #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a3881c
feat: Enhance login form with improved UI and error handling
marcus-oss Aug 19, 2026
a8fb9d5
feat: Improve login form UI and enhance error handling with visual fe…
marcus-oss Aug 20, 2026
d297448
feat: Update UI and improve user experience for password recovery and…
marcus-oss Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 111 additions & 54 deletions src/pages/ForgotPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const ForgotPassword = () => {

const subtitleText = role === "empresa"
? "Insira seu e-mail cadastrado e receba o código para alteração"
: "Insira seu e-mail cadastrado e receba o código de verificação para alteração";
: "Insira seu e-mail ou cpf cadastrado e receba o codigo de verificacação para alteração da sua senha";

const placeholderText = role === "empresa" ? "E-mail ou CNPJ" : "E-mail ou CPF";

Expand All @@ -40,68 +40,125 @@ export const ForgotPassword = () => {
mutate(formData.identifier);
});

return (
<section className="flex min-h-screen w-full font-inter bg-[#F4F5F9] lg:bg-white text-[#1A1551]">
<ToastContainer />
return (
<section className="flex min-h-screen w-full font-inter bg-[#F4F5F9] text-[#1A1551]">
<ToastContainer />

{/* Left Panel - Form */}
<div className="flex-1 flex flex-col justify-center px-6 py-12 lg:px-16 xl:px-32 relative bg-[#f7f7f7e6]">
<div className="max-w-md w-full mx-auto lg:mx-0 xl:mx-auto">
{/* Logo */}
<div className="mb-12 flex justify-center w-full">
<img src={Logo} alt="Certify Logo" className="h-[4.5rem]" />
<button
type="button"
onClick={() => navigate("/login")}
aria-label="Voltar para a página de login"
className="absolute top-4 left-4 sm:top-6 sm:left-6 z-50 flex items-center gap-2 text-sm font-bold text-[#0069A8] hover:text-[#005582] transition-colors"
>
<span className="text-xl" aria-hidden="true">
</span>
Voltar
</button>

<div className="w-full md:w-1/2 lg:w-[52%] min-h-screen flex flex-col justify-center px-4 py-20 sm:px-6 sm:py-16 md:px-8 lg:px-12 xl:px-16 2xl:px-24 bg-[#F7F7F7]">
<div className="w-full max-w-md mx-auto">
<h1 className="text-2xl sm:text-3xl font-bold mb-3 text-[#000000]">
Esqueci minha senha
</h1>

<p className="text-gray-600 mb-6 sm:mb-8 text-sm sm:text-base leading-relaxed">
{subtitleText}
</p>

<form onSubmit={onSubmit} className="space-y-4">
<div className="relative">
<label
htmlFor="identifier"
className="block text-sm font-semibold mb-2 text-[#1A1551]"
>
{placeholderText}
</label>

<input
{...register("identifier")}
id="identifier"
type="text"
inputMode="text"
placeholder={placeholderText}
aria-invalid={Boolean(errors.identifier)}
className={`w-full bg-[#E8E8E8] px-4 py-3.5 sm:py-4 rounded-xl border focus:outline-none focus:ring-2 focus:ring-[#0069A8]/50 transition-all font-medium ${
errors.identifier
? "border-red-500 ring-1 ring-red-500"
: "border-transparent"
}`}
/>

{errors.identifier && (
<p
role="alert"
aria-live="polite"
className="text-red-500 text-sm mt-1 font-medium"
>
{errors.identifier.message as string}
</p>
)}
</div>

<h1 className="text-2xl lg:text-3xl font-bold mb-3 text-[#0e0393]">Esqueci minha senha</h1>
<p className="text-gray-600 mb-8 text-sm lg:text-base leading-relaxed">
{subtitleText}
<button
type="submit"
disabled={!isValid || isPending}
className="w-full py-3.5 sm:py-4 bg-[#0069A8] text-white text-base rounded-xl font-bold mt-2 disabled:bg-[#0069A8]/50 disabled:cursor-not-allowed hover:bg-[#005582] active:bg-[#005582] transition-colors flex justify-center items-center gap-2"
>
{isPending ? (
<>
<BiLoader
size={24}
className="animate-spin"
aria-hidden="true"
/>
<span>Carregando</span>
</>
) : (
"Enviar"
)}
</button>
</form>

<div className="mt-8 sm:mt-10 px-2 text-left leading-relaxed">
<p className="text-sm font-bold text-gray-600 mb-1">
Precisa de ajuda?
</p>

<form onSubmit={onSubmit} className="space-y-4">
{/* Input Field */}
<div className="relative">
<input
{...register("identifier")}
type="text"
placeholder={placeholderText}
className={`w-full bg-[#E8E8E8] px-4 py-4 rounded-xl border focus:outline-none focus:ring-2 focus:ring-[#4F46E5]/50 transition-all font-medium ${
errors.identifier ? "border-red-500 ring-1 ring-red-500" : "border-transparent"
}`}
/>
{errors.identifier && (
<p className="text-red-500 text-sm mt-1 font-medium">
{errors.identifier.message as string}
</p>
)}
</div>

{/* Submit Button */}
<button
type="submit"
disabled={!isValid || isPending}
className="w-full py-4 bg-[#362dea] text-white text-base rounded-xl font-bold mt-2 disabled:bg-[#4139e8]/50 disabled:cursor-not-allowed hover:bg-[#2d22f8] transition-colors flex justify-center items-center"
<div className="flex flex-wrap items-center gap-x-1 gap-y-1 text-sm">
<span className="text-gray-500">
Fale com o nosso suporte
</span>

<a
href="mailto:suporte@certify.com.br"
className="font-bold text-[#0069A8] hover:underline whitespace-nowrap"
>
{isPending ? <BiLoader size={24} className="animate-spin" /> : "Recuperar senha"}
</button>

{/* Back to Login Link */}
<div className="text-center mt-6">
<Link to="/login" className="text-sm text-[#4F46E5] font-bold hover:underline transition-all block mt-4">
Voltar ao Login
</Link>
</div>
</form>
suporte@certify.com.br
</a>
</div>
</div>
</div>
</div>

<div className="hidden md:block md:w-1/2 lg:w-[48%] min-h-screen relative overflow-hidden bg-black">
<img
src={sideImage}
alt="Imagem de destaque recuperar senha"
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ${
role === "empresa" ? "grayscale" : ""
}`}
/>

<div className="absolute inset-0 bg-gradient-to-b from-black/45 via-black/10 to-black/30" />

{/* Right Panel - Image */}
<div className="hidden lg:block lg:flex-1 relative bg-black">
<div className="absolute top-6 right-6 sm:top-8 sm:right-8 lg:right-10 z-10">
<img
src={sideImage}
alt="Imagem de destaque recuperar senha"
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ${role === "empresa" ? "grayscale" : ""}`}
src={Logo}
alt="Certify Logo"
className="h-12 sm:h-14 lg:h-[4.5rem] w-auto object-contain"
/>
</div>
</section>
);
};
</div>
</section>
);
};
Loading