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 cryptoJsAesJson from "../../../../utils/crypto-js/cryptojs-aes-format";

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 Login = ({
  captchaKey,
  addNotification,
  facebookOauth,
  twitterOauth,
  googleOauth,
  aes,
  defaultNetwork
}) => {

  const {
    register,
    handleSubmit,
    errors,
    setError,
    getValues,
    setValue,
  } = useForm({ mode: 'onBlur' });

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

  // states
  const [rememberChecked, setRememberChecked] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

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

  const onSubmitHandler = async (data, event) => {
    // setIsLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      if (key === "email" && value)
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes));
      if (key === "password" && value)
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes));
      if (value) formData.append(key, value);
    });
    formData.append("captcha", reCaptchaToken.current);
    await axios
      .post("/signin", formData)
      .then(({ data: response }) => {
        const { success, data } = response
        if (!success) {
          if (data.constructor.name === "Object") {
            Object.entries(data).map(([key, value]) => {
              if (key in getValues()) {
                setError(key, {
                  type: "manual",
                  message: Array.isArray(value) ? value[0] : value,
                });
              }
            });
            return
          }
          addNotification({
            style: "danger",
            msg: data,
          });
          return
        }
        window.location.replace(data);
        event.target.reset();
      })
      .catch((err) => console.log(`Error: ${err}`))
      .finally(() => setIsLoading(false))
    reCaptchaInstance.current.reset();
    loginExpiredCallbackHandler();
    // setIsLoading(false);
    setValue("password", "");
  };

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

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

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

  const getRedirectUrl = async (endpoint) => {
    try {
      const res = await axios.get(endpoint)
      if (res.data && res.data.data) {
        window.location.href = res.data.data
      }
    } catch (error) {
      ('>>: error > ', error)
    }
  }
  return (
    <React.Fragment>
      <h3>Entrar</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"
                  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"
                    }
                  })}
                  placeholder="Correo electrónico"
                  maxLength="64"
                />
                <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">
                <input
                  type="password"
                  name="password"
                  ref={register({
                    required: "Este campo es requerido",
                    pattern: {
                      value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
                      message: 'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
                    }
                  })}
                  placeholder="Clave"
                />
                <i className="la la-lock"></i>
              </div>
              {errors.password && (
                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
              )}
            </div>
          </div>

          <div className="col-lg-12 no-pdd">
            <div className="inputContainer">
              <div className="checky-sec">
                <div className="fgt-sec">
                  <input
                    type="checkbox"
                    name="remember"
                    id="remember"
                    checked={rememberChecked}
                    ref={register}
                    value="1"
                    readOnly
                  />
                  <label onClick={() => setRememberChecked(!rememberChecked)}>
                    <span></span>
                  </label>
                  <small onClick={() => setRememberChecked(!rememberChecked)}>
                    Recuerdame
                  </small>
                </div>
              </div>
            </div>
          </div>

          <div className="col-lg-12 no-pdd">
            <div className="sn-field">
              <Recaptcha
                sitekey={captchaKey}
                verifyCallback={loginVerifyCallbackHandler}
                verifyCallbackName="loginVerifyCallbackHandler"
                expiredCallback={loginExpiredCallbackHandler}
                expiredCallbackName="loginExpiredCallbackHandler"
                ref={reCaptchaInstance}
                render="explicit"
                onloadCallback={handleOnRecaptchaLoad}
                hl="es"
              />
            </div>
          </div>
          <div className="col-lg-12 no-pdd"></div>
          <div className="col-lg-12 no-pdd">
            <button
              type="submit"
              value="submit"
              id="btn-submit"
              disabled={!isVerified}
            >
              Entrar
            </button>
          </div>
        </div>
      </form>
      {(window.location.hostname.includes('dev') && Boolean(defaultNetwork === 'y')) &&
        <div className="login-resources">
          <h4>Entrar usando su red social</h4>
          <ul>
            <li>
              <a onClick={() => getRedirectUrl(facebookOauth)}
                title=""
                className="cursor-pointer fb text-white">
                <i className="fa fa-facebook"></i> FACEBOOK
              </a>
            </li>
            <li>
              <a
                onClick={() => getRedirectUrl(twitterOauth)}
                title=""
                className="cursor-pointer tw btn-connect-social-media text-white"
              >
                <i className="fa fa-twitter"></i> TWITTER
              </a>
            </li>
            <li
              className="bg-secondary"
            >
              <a
                onClick={() => getRedirectUrl(googleOauth)}
                title=""
                className="cursor-pointer go btn-connect-social-media text-white"
              >
                <i className="fa fa-google"></i> GOOGLE
              </a>
            </li>
          </ul>
        </div>
      }
      {isLoading ? (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      ) : (
        ""
      )}
    </React.Fragment>
  );
};

export default Login;