Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react";
import { useRef, useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import { axios } from "../../../../utils";
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
import Recaptcha from "react-recaptcha";
import Spinner from "../../../../shared/loading-spinner/Spinner";
import { Link } from 'react-router-dom'
import CryptoJSAesJson from "../../../../utils/crypto-js/cryptojs-aes-format";

const StyledCheck = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 100px;
    margin-bottom: 1rem;
  }
  p {
    text-align: center;
  }
`;
const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;
const ForgotPassword = ({ captchaKey, addNotification, aes }) => {

  // states
  const [forgotSent, setForgotSent] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  // recaptcha
  const reCaptchaInstance = useRef();
  const reCaptchaToken = useRef("");
  const [isVerified, setIsVerified] = useState(false);

  // React Hook Form
  const { register, handleSubmit, setError, errors } = useForm({ mode: 'all' });

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

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

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

  const onSubmitHandler = async (data) => {
    setIsLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      if (key === "email" && value)
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
      formData.append(key, value);
    });
    formData.append("captcha", reCaptchaToken.current);
    await axios.post("/forgot-password", formData).then((response) => {
      const resData = response.data;
      if (resData.success) {
        // window.location.replace(resData.data);
        reCaptchaInstance.current.reset();
        forgotPasswordExpiredCallbackHandler();
        setForgotSent(true);
      } else {
        setIsLoading(false);
        const resError = resData.data;
        if (resError.constructor.name === "Object") {
          Object.entries(resError).map(([key, value]) => {
            if (key in getValues()) {
              setError(key, {
                type: "manual",
                message: Array.isArray(value) ? value[0] : value,
              });
            }
          });
        } else {
          addNotification({
            style: "danger",
            msg: resError,
          });
        }
        reCaptchaInstance.current.reset();
        loginExpiredCallbackHandler();
      }
    });
    setIsLoading(false);
  };
  const handleOnRecaptchaLoad = () => reCaptchaToken.current = ""
  const loginExpiredCallbackHandler = () => {
    reCaptchaToken.current = "";
    setIsVerified(false);
  };

  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 id="btn-submit" className="sign_in_sec_button">
            Entrar
          </button>
        </Link>
      </StyledCheck>
    );
  }

  return (
    <React.Fragment>
      <h3>Olvide mi Clave</h3>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <div className="row">
          <div className="col-lg-12 no-pdd">
            <div className="inputContainer">
              <div className="sn-field">
                <input
                  type="email"
                  name="email"
                  placeholder="Correo electrónico"
                  ref={register({
                    required: "Este campo es requerido",
                    pattern: {
                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
                      message: "Debe ser una dirección de correo electrónico valida"
                    }
                  })}
                />
                <i className="la la-envelope" />
              </div>
              {errors.email && <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>}
            </div>
          </div>
          <div className="col-lg-12 no-pdd">
            <div className="inputContainer">
              <div className="sn-field">
                <Recaptcha
                  sitekey={captchaKey}
                  verifyCallback={forgotPasswordVerifyCallbackHandler}
                  verifyCallbackName="forgotPasswordVerifyCallbackHandler"
                  expiredCallback={forgotPasswordExpiredCallbackHandler}
                  expiredCallbackName="forgotPasswordExpiredCallbackHandler"
                  ref={reCaptchaInstance}
                  render="explicit"
                  onloadCallback={handleOnRecaptchaLoad}
                  hl="es"
                />
              </div>
            </div>
          </div>
          <div className="col-lg-12 no-pdd">
            <button type="submit" value="submit" disabled={!isVerified}>
              Nueva Clave
            </button>
          </div>
        </div>
      </form>
      {isLoading &&
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>}
    </React.Fragment>
  );
};

export default ForgotPassword;