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;