Proyectos de Subversion LeadersLinked - Antes de SPA

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 = (props) => {
  // props destructuring
  const { captchaKey, addNotification, aes } = props;

  // 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();

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

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

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

  const onSubmitHandler = async (data, e) => {
    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 = "";
  };

  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",
                  })}
                  maxLength="64"
                />
                <i className="la la-envelope"></i>
              </div>
              {errors.email && (
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
              )}
            </div>

            {/* <!--sn-field end--> */}
          </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;