Feature/forgot password

[gabrielviol]

• Pagina estilizada de acordo com o figma.
• Integração com o back-end.
• Adição da biblioteca "React-toastify" para um feedback visual mais agradável.

[klsio22]

@gabrielviol aqui algumas possibilidades que vi de melhorias no código:

poderia criar uma pasta utils com uma função ex: function createToast(message: string, success = false); onde poderia ser reutilizada em outras partes do código do projeto.

type FormData = {
  email: string;
};

const emailSchema = z.object({
  email: z.string().email({ message: 'Por favor, digite um e-mail válido.' }),
});

function createToast(message: string, success = false) {
  const position = 'bottom-right';
  const autoClose = 5000;
  const hideProgressBar = false;
  const closeOnClick = true;
  const pauseOnHover = false;
  const draggable = true;
  const theme = 'light';

  if (success) {
    toast.success(message, {
      position,
      autoClose,
      hideProgressBar,
      closeOnClick,
      pauseOnHover,
      draggable,
      theme,
    });
  } else {
    toast.error(message, {
      position,
      autoClose,
      hideProgressBar,
      closeOnClick,
      pauseOnHover,
      draggable,
      theme,
    });
  }
}

function ForgotPasswordForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<FormData>({
    resolver: zodResolver(emailSchema),
    mode: 'onChange',
  });

  const [loading, setLoading] = useState(false);
  const [isButtonDisabled, setIsButtonDisabled] = useState(!isValid);
  const [submissionMsg, setSubmissionMsg] = useState('');

  useEffect(() => {
    setIsButtonDisabled(!isValid);
    setSubmissionMsg('');
  }, [isValid]);

  const handleFormSubmit: SubmitHandler<FormData> = (data) => {
    setLoading(true);
    setIsButtonDisabled(true);
    axios
      .post('/forget-password', data)
      .then((response) => {
        const message = response
          ? response.data.message
          : 'Erro ao processar a solicitação.';

        createToast(message, message === 'Email sent successfully');

        setLoading(false);
        setIsButtonDisabled(false);
      })
      .catch((err) => {
        const error = err.response
          ? err.response.data.error
          : 'Erro ao processar a solicitação.';

        createToast(error, error === 'Not found: email');

        setLoading(false);
        setIsButtonDisabled(false);
      });
  };

  const { push } = useRouter();

  const handleRedirectToLogin = () => {
    push('/login');
  };

  return (
    <form
      className="flex flex-col gap-y-4 mt-6"
      onSubmit={handleSubmit(handleFormSubmit)}
    >
      <label>
        <span className="mb-1 block text-custom-purple font-medium">
          Qual o seu e-mail de cadastro?
        </span>
        <div>
          <div className="flex h-[47px] items-center border border-[#7A7A7A] rounded-[5px] py-2 px-2">
            <input
              type="text"
              className="w-full outline-0 text-[#292929] font-medium placeholder:text-[#BFBFBF]"
              placeholder="Digite seu e-mail"
              {...register('email', { required: 'Este campo é obrigatório.' })}
            />
          </div>
          {errors.email && (
            <span className="text-center text-xs text-red-600">
              {errors.email.message}
            </span>
          )}
          {!errors.email && submissionMsg && (
            <span className="text-center text-xs text-red-600">
              {submissionMsg}
            </span>
          )}
        </div>
      </label>

      <div className="flex flex-col gap-2">
        <button
          type="submit"
          className={`w-[154px] h-[48px] flex self-center font-medium
        items-center justify-center rounded-[16px] mt-16 ${
          isButtonDisabled
            ? 'bg-transparent border-2 border-[#B2B2B2] text-[#B2B2B2]'
            : 'bg-custom-purple text-white'
        }`}
          disabled={isButtonDisabled}
        >
          {loading ? 'Enviando...' : 'Enviar'}
        </button>
        <button
          type="reset"
          onClick={handleRedirectToLogin}
          className={`w-[154px] h-[48px] flex self-center font-medium
        items-center justify-center rounded-[16px] 'bg-transparent border-2 border-custom-purple text-custom-purple`}
        >
          Cancelar
        </button>
      </div>
      <ToastContainer
        position="bottom-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
      />
    </form>
  );
}

export default ForgotPasswordForm;

[gabrielviol]

Código refatorado, extração da função de toast para um componente reutilizável. @klsio22

[klsio22]

Beleza @gabrielviol fiz os testes aqui estão de acordo!

[gabrielviol]

Acho que não subiu pra develop