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 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 = (props) => {

  // props destructuring

  const {

    captchaKey,

    addNotification,

    facebookOauth,

    twitterOauth,

    googleOauth,

    aes,

  } = props;

  const {

    register,

    handleSubmit,

    errors,

    setError,

    clearErrors,

    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((response) => {

        const resData = response.data;

        if (resData.success) {

          window.location.replace(resData.data);

          event.target.reset();

        } 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,

            });

          }

        }

      })

      .catch((error) => {

        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",

                    minLength: 6,

                    maxLength: 16,

                    pattern: {

                      value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/,

                      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') && (

          <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;