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/Login.tsx b/src/pages/Login.tsx index 37fca69..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"; @@ -21,160 +21,306 @@ 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 */} -
- - + + +
+ +
+ +
+
+ E-mail + -
- {/* Email Field */}
+ + {(errors.email || isError) && ( +
- {/* Password Field */} + {errors.email && ( +

+ Digite um e-mail válido +

+ )} +
+ +
+ +
+ + {(errors.password || isError) && ( +
- {/* Shared Error Message as requested */} - {(errors.email || errors.password) && ( -

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

+ Senha incorreta

)} +
+ + {isError && ( +

+ E-mail ou senha inválidos. +

+ )} - {/* Remember Me */} -
+
+
-
- {/* Submit Button */} - - - {/* Forgot Password Link */} -
- - Esqueci a senha - -
- + Esqueci minha senha + +
+ + +
+ +
+

+ Precisa de ajuda? +

+ +
+ + Fale com o nosso suporte + + + + suporte@certify.com.br + +
+
+ +
+ { - {/* Right Panel - Image */} -
+
Imagem de destaque login
-
- ); -}; + + +); +}; \ 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