Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useForm } from "react-hook-form";
import { styled, Typography } from "@mui/material";
import { Mail } from "@mui/icons-material";
import Recaptcha from "react-recaptcha";

import { axios } from "@utils";
import { addNotification } from "@store/notification/notification.actions";
import CryptoJSAesJson from "@utils/crypto-js/cryptojs-aes-format";

import Form from "@components/common/form";
import Spinner from "@components/UI/Spinner";
import Input from "@components/UI/inputs/Input";
import Button from "@components/UI/buttons/Buttons";

const StyledCheck = styled("div")`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 100px !important;
    margin-bottom: 1rem !important;
  }
  p {
    text-align: center;
  }
`;

const ForgotPassword = () => {
  const { site_key, aes } = useSelector(({ auth }) => auth);
  const [forgotSent, setForgotSent] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isVerified, setIsVerified] = useState(false);
  const reCaptchaInstance = useRef(null);
  const reCaptchaToken = useRef("");
  const dispatch = useDispatch();

  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({ mode: "all" });

  const forgotPasswordVerifyCallbackHandler = (response) => {
    if (response) {
      reCaptchaToken.current = response;
      setIsVerified(true);
    }
  };

  const forgotPasswordExpiredCallbackHandler = () => {
    reCaptchaToken.current = "";
    setIsVerified(false);
  };

  const handleOnRecaptchaLoad = () => {
    reCaptchaToken.current = "";
  };

  const loginExpiredCallbackHandler = () => {
    reCaptchaToken.current = "";
    setIsVerified(false);
  };

  const onSubmitHandler = handleSubmit(async ({ email }) => {
    setIsLoading(true);
    const formData = new FormData();

    formData.append("email", CryptoJSAesJson.encrypt(email, aes));
    formData.append("captcha", reCaptchaToken.current);

    axios
      .post("/forgot-password", formData)
      .then((response) => {
        const { success, data } = response.data;

        if (!success) {
          throw new Error(data);
        }

        reCaptchaInstance.current.reset();
        forgotPasswordExpiredCallbackHandler();
        loginExpiredCallbackHandler();
        setForgotSent(true);
      })
      .catch((err) => {
        console.log(`Error: ${err}`);
        dispatch(addNotification({ style: "danger", msg: err.message }));
      })
      .finally(() => setIsLoading(false));
  });

  useEffect(() => {
    reCaptchaInstance.current?.reset();
  }, []);

  if (forgotSent) {
    return (
      <StyledCheck>
        <img src="/images/check.png" alt="check" />

        <p>El enlace de recuperación fue enviado a su correo electrónico</p>

        <Link to="/signin">
          <Button color="secondary" type="button">
            Volver a Iniciar Sesión
          </Button>
        </Link>
      </StyledCheck>
    );
  }

  return (
    <Form onSubmit={onSubmitHandler}>
      {isLoading && <Spinner absolute />}

      <Typography variant="h3">Olvide mi Clave</Typography>

      <Input
        type="email"
        name="email"
        placeholder="Correo electrónico"
        icon={<Mail />}
        control={control}
        rules={{
          required: "Este campo es requerido",
          pattern: {
            value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,}$/i,
            message: "Debe ser una dirección de correo electrónico valida",
          },
        }}
        error={errors.email?.message}
      />

      <Recaptcha
        sitekey={site_key}
        verifyCallback={forgotPasswordVerifyCallbackHandler}
        verifyCallbackName="forgotPasswordVerifyCallbackHandler"
        expiredCallback={forgotPasswordExpiredCallbackHandler}
        expiredCallbackName="forgotPasswordExpiredCallbackHandler"
        ref={reCaptchaInstance}
        render="explicit"
        onloadCallback={handleOnRecaptchaLoad}
        hl="es"
      />

      <Button color="secondary" type="submit" disabled={!isVerified}>
        Nueva Clave
      </Button>
    </Form>
  );
};

export default ForgotPassword;