From 8a3881ca39bc26d9cc09dc571b7ab9715d3ad533 Mon Sep 17 00:00:00 2001 From: marcus-oss Date: Wed, 19 Aug 2026 18:04:23 -0300 Subject: [PATCH 1/3] feat: Enhance login form with improved UI and error handling --- src/pages/Login.tsx | 460 ++++++++++++++++++++++++++++++++------------ 1 file changed, 341 insertions(+), 119 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 37fca69..fd68870 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -21,160 +21,382 @@ export const FormLogin = () => { const { auth } = useAuthStoreData(); const navigation = useNavigate(); - useEffect(() => { - if (!auth?._id) return; - if ((auth.role as string) === "empresa") { - navigation("/"); // Placeholder, redirect according to your existing structure - } else { - navigation("/meus-certificados"); - } - }, [auth, navigation]); - - useEffect(() => { - if (isError) { - toast.error('E-mail ou senha inválidos.', { - position: "top-center", - autoClose: 5000, - ...TOAST_STYLES.error - }); - } - - if (isSuccess) { - toast.success('Login realizado com sucesso!', { - position: "top-center", - autoClose: 3000, - ...TOAST_STYLES.success - }); - } - }, [isError, isSuccess]); - - const onSubmit = handleSubmit((formData: any) => { - const authData = { - ...formData, - role - }; - mutate(authData); - }); - - return ( -
- - - {/* Left Panel - Form */} -
-
- {/* Logo */} -
- Certify Logo -
+useEffect(() => { + if (!auth?._id) return; -

Acesse sua conta

-

- Você pode acessar sua conta com e-mail, {role === "empresa" ? "CNPJ" : "CPF"} ou telefone e senha cadastrados -

+ if ((auth.role as string) === "empresa") { + navigation("/"); + } else { + navigation("/meus-certificados"); + } +}, [auth, navigation]); -

Login / Selecione se você é empresa ou aluno

+useEffect(() => { + if (isError) { + toast.error("E-mail ou senha inválidos.", { + position: "top-center", + autoClose: 5000, + ...TOAST_STYLES.error, + }); + } - {/* Role Selector */} -
- - + + {/* Empresa */} + +
+ + {/* ================================================= + FORMULÁRIO + ================================================== */} +
+ + {/* ================================================= + E-MAIL + ================================================== */} +
+
+ E-mail + - - {/* Email Field */}
+ + {errors.email && ( +
- {/* Password Field */} + {errors.email && ( + + )} +
+ + {/* ================================================= + SENHA + ================================================== */} +
+ +
+ + {/* Olho */}
- {/* Shared Error Message as requested */} - {(errors.email || errors.password) && ( -

- E-mail ou senha inválidos. + {errors.password && ( +

)} +
- {/* Remember Me */} -
+ {/* Erro geral de autenticação */} + {isError && ( +

+ E-mail ou senha inválidos. +

+ )} + + {/* ================================================= + LEMBRAR SENHA / ESQUECI MINHA SENHA + ================================================== */} +
+ + {/* Lembrar senha */} +
-
- {/* Submit Button */} - - - {/* Forgot Password Link */} -
- - Esqueci a senha - -
- -
+ Esqueci minha senha + +
+ + {/* ================================================= + BOTÃO ENTRAR + ================================================== */} + +{/* ================================================= + SUPORTE +================================================== */} +
+ +

+ Precisa de ajuda? +

+ +
+ + + Fale com o nosso suporte + + + + suporte@certify.com.br + + +
+ +
+
+ + +
+ + {/* Imagem do perfil */} + { - {/* Right Panel - Image */} -
+ {/* Logo sobre a imagem */} +
Imagem de destaque login
-
- ); -}; + + +); +} \ No newline at end of file From a8fb9d572818f6fb2b05f919e67426cffbac1c03 Mon Sep 17 00:00:00 2001 From: marcus-oss Date: Thu, 20 Aug 2026 17:33:55 -0300 Subject: [PATCH 2/3] feat: Improve login form UI and enhance error handling with visual feedback --- src/pages/Login.tsx | 222 +++++++++++++++----------------------------- 1 file changed, 73 insertions(+), 149 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index fd68870..4b84610 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { Link, useNavigate } from "react-router-dom"; import { BiLoader } from "react-icons/bi"; -import { FiEye, FiEyeOff } from "react-icons/fi"; +import { FiEye, FiEyeOff, FiAlertCircle } from "react-icons/fi"; import { ToastContainer, toast } from 'react-toastify'; import { useLoginAuth } from "@/hooks/Auth/useLoginAuth"; import { useFormValidation } from "@/hooks/useForm"; @@ -59,88 +59,71 @@ const onSubmit = handleSubmit((formData: any) => { }); return ( -
+
-
-
+
+
-
+
- Ainda Não tem conta? + Ainda não tem conta? Criar conta
- {/* ================================================= - TÍTULO - ================================================== */}
-

- Login

+

+ Login +

- {/* ================================================= - ALUNO / EMPRESA - ================================================== */}
- {/* Aluno */} - {/* Empresa */}
- {/* ================================================= - FORMULÁRIO - ================================================== */} -
+
- {/* ================================================= - E-MAIL - ================================================== */}
@@ -149,24 +132,20 @@ return ( - {errors.email && ( + {(errors.email || isError) && (
- {/* ================================================= - SENHA - ================================================== */}
@@ -202,54 +176,46 @@ return ( - {/* Olho */} + {(errors.password || isError) && ( +
{errors.password && (
- {/* Erro geral de autenticação */} {isError && (

E-mail ou senha inválidos.

)} - {/* ================================================= - LEMBRAR SENHA / ESQUECI MINHA SENHA - ================================================== */} -
- - {/* Lembrar senha */} +
- {/* Esqueci minha senha */} Esqueci minha senha
- {/* ================================================= - BOTÃO ENTRAR - ================================================== */} -{/* ================================================= - SUPORTE -================================================== */} -
- -

- Precisa de ajuda? -

- -
- - - Fale com o nosso suporte - +
- - suporte@certify.com.br - +
+

+ Precisa de ajuda? +

-
+
+ + Fale com o nosso suporte + -
- + + suporte@certify.com.br + +
+
-
- - {/* Imagem do perfil */} +
{ - {/* Logo sobre a imagem */} -
+
Logo Certify
); -} \ No newline at end of file +}; \ No newline at end of file From d29744885852f8e9892bacd59bf18364bd76c04d Mon Sep 17 00:00:00 2001 From: marcus-oss Date: Fri, 21 Aug 2026 17:29:49 -0300 Subject: [PATCH 3/3] feat: Update UI and improve user experience for password recovery and verification screens --- src/pages/ForgotPassword.tsx | 165 +++++++++++++++------- src/pages/ResetPassword.tsx | 265 +++++++++++++++++++++++++++-------- src/pages/VerifyCode.tsx | 258 ++++++++++++++++++++++++---------- 3 files changed, 500 insertions(+), 188 deletions(-) diff --git a/src/pages/ForgotPassword.tsx b/src/pages/ForgotPassword.tsx index aff86a6..03e7ba6 100644 --- a/src/pages/ForgotPassword.tsx +++ b/src/pages/ForgotPassword.tsx @@ -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"; @@ -40,68 +40,125 @@ export const ForgotPassword = () => { mutate(formData.identifier); }); - return ( -
- +return ( +
+ - {/* Left Panel - Form */} -
-
- {/* Logo */} -
- Certify Logo + + +
+
+

+ Esqueci minha senha +

+ +

+ {subtitleText} +

+ +
+
+ + + + + {errors.identifier && ( +

+ {errors.identifier.message as string} +

+ )}
-

Esqueci minha senha

-

- {subtitleText} + +

+ +
+

+ Precisa de ajuda?

-
- {/* Input Field */} -
- - {errors.identifier && ( -

- {errors.identifier.message as string} -

- )} -
- - {/* Submit Button */} - - - {/* Back to Login Link */} -
- - Voltar ao Login - -
- + suporte@certify.com.br +
+
+
+ +
+ Imagem de destaque recuperar senha + +
- {/* Right Panel - Image */} -
+
Imagem de destaque recuperar senha
-
- ); -}; + +
+); +}; \ No newline at end of file diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx index fc6003e..a565376 100644 --- a/src/pages/ResetPassword.tsx +++ b/src/pages/ResetPassword.tsx @@ -48,112 +48,253 @@ export const ResetPassword = () => { mutate(formData.password); }); - return ( -
- - - {/* Left Panel - Form */} -
-
- {/* Logo */} -
- Certify Logo -
+return ( +
+ + + + +
+
+

+ Redefinir senha +

-

Redefinir senha

-

- Insira seu e-mail cadastrado e receba o código de verificação para alteração. -

+

+ Digite abaixo sua nova senha. +

+ +
+
+ - - {/* New Password Field */}
+
+ {errors.password && ( -

+

)} +
+ +
+ - {/* Confirm New Password Field */}
+
+ {errors.confirmPassword && ( -

+

)} +
- {/* Submit Button */} - +
+

+ Sua senha deve conter: +

-
- Sua senha deve conter: +
{rules.map((rule) => ( -
- {rule.valid - ? - : - } - +
+ {rule.valid ? ( +
))}
+
- {/* Back to Login Link */} -
- - Voltar ao Login - -
- + + + +
+ + Precisa de ajuda? Fale com o nosso suporte{" "} + + + + suporte@certify.com.br +
+
+ +
+ Imagem de destaque redefinir senha + +
- {/* Right Panel - Image */} -
+
Imagem de destaque redefinir senha
-
- ); -}; +
+
+); +}; \ No newline at end of file diff --git a/src/pages/VerifyCode.tsx b/src/pages/VerifyCode.tsx index 485b7a0..fc7170a 100644 --- a/src/pages/VerifyCode.tsx +++ b/src/pages/VerifyCode.tsx @@ -111,106 +111,220 @@ export const VerifyCode = () => { // Em um cenário real, chamaria uma API de reenvio de código aqui } }; + const email = + location.state?.email || + location.state?.identifier || + "seunome@empresa.com.br"; - return ( -
- +return ( +
+ - {/* Left Panel - Form */} -
-
- {/* Logo */} -
- Certify Logo -
+ + +
+
+

+ Confirmar e-mail +

+ +

+ Enviamos um código de 6 dígitos para o e-mail cadastrado. + Digite para confirmar e continuar. +

-

Esqueci minha senha

-

- Insira o código de verificação que foi enviado ao seu e-mail +

+

+ Código enviado para{" "} + + {email} +

-
- {/* OTP Inputs */} -
+ +
+ + +
+ + +
{code.map((digit, index) => ( (inputRefs.current[index] = el)} type="text" inputMode="numeric" + pattern="[0-9]*" maxLength={1} value={digit} onChange={(e) => handleChange(index, e)} onKeyDown={(e) => handleKeyDown(index, e)} onPaste={handlePaste} disabled={isPending || maxAttemptsReached} - className={`w-full h-14 md:h-[90px] text-center text-2xl font-bold rounded-xl border focus:outline-none transition-all ${hasError - ? "border-red-500 text-red-500" - : "border-[#4F46E5] text-[#1A1551] focus:ring-2 focus:ring-[#4F46E5]/50" - } ${isPending || maxAttemptsReached ? "opacity-50 cursor-not-allowed" : ""}`} + tabIndex={index + 2} + aria-label={`Dígito ${index + 1} de 6`} + aria-invalid={hasError} + className={`w-full h-12 sm:h-16 md:h-20 text-center text-lg sm:text-2xl font-bold rounded-lg sm:rounded-xl border bg-white focus:outline-none transition-all ${ + hasError + ? "border-red-500 text-red-500 ring-1 ring-red-500" + : "border-[#D1D5DB] text-[#1A1551] focus:border-[#0069A8] focus:ring-2 focus:ring-[#0069A8]/30" + } ${ + isPending || maxAttemptsReached + ? "opacity-50 cursor-not-allowed" + : "" + }`} /> ))}
+
+ + {hasError && ( +
+ Código inválido ou expirado. Verifique o código + digitado ou solicite um novo token para continuar. +
+ )} - {/* Error Message */} - {hasError && ( -

- {error?.message || "Código incorreto! Verifique seu e-mail."} -

+ {maxAttemptsReached && ( +
+ Limite de tentativas atingido. Solicite um novo + código. +
+ )} + + - {/* Max Attempts Error */} - {maxAttemptsReached && ( -

- Limite de tentativas atingido. Solicite um novo código. -

+
+ {countdown > 0 ? ( +
+ Reenviar código em{" "} + {countdown} seg +
+ ) : ( + )} +
+
- {/* Submit Button */} - - - {/* Resend Code */} -
- Reenviar o código em: - {countdown > 0 ? ( - {countdown} seg - ) : ( - - )} -
+
+

+ Precisa de ajuda? +

- {/* Back to Login Link */} -
- - Voltar ao Login - -
- -
+
+ + Fale com o nosso suporte + + + + suporte@certify.com.br + +
+
+
+ +
+ Imagem de destaque confirmação de e-mail + +
- {/* Right Panel - Image */} -
+
Imagem de destaque verificação de código
-
- ); -}; + +
+); +}; \ No newline at end of file