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

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

  // states
  const [termsChecked, setTermsChecked] = useState(false);
  const [registered, setRegistered] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

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

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

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

  const signupExpiredCallbackHandler = () => {
    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));
      if (key === "password" && value)
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
      if (key === "confirmation" && value)
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
      formData.append(key, value);
    });
    formData.append("captcha", reCaptchaToken.current);
    await axios.post("/signup", formData).then((response) => {
      const resData = response.data;
      if (resData.success) {
        // window.location.replace(resData.data);
        reCaptchaInstance.current.reset();
        signupExpiredCallbackHandler();
        setRegistered(true);
      } else {
        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();
        signupVerifyCallbackHandler();
      }
    })
      .catch(err => {
        ('>>: err > ', err)
        addNotification({
          style: "error",
          msg: 'Disculpe, ha ocurrido un error',
        });
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

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

  if (registered) {
    return (
      <StyledCheck>
        <img src="/images/check.png" alt="check" />
        <p>
          Se ha registrado correctamente. Por favor, active la cuenta desde su
          correo
        </p>
        <Link to="/signin">
          <button id="btn-submit" className="sign_in_sec_button">
            Entrar
          </button>
        </Link>
      </StyledCheck>
    );
  }
  return (
    <React.Fragment>
      <h3>Registrarse</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",
                  })}
                  maxLength="64"
                  placeholder="Correo electrónico"
                />
                <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">
                <input
                  type="text"
                  name="first_name"
                  ref={register({
                    required: "Este campo es requerido",
                  })}
                  placeholder="Nombre"
                  maxLength="64"
                />
                <i className="la la-user"></i>
              </div>
              {errors.first_name && (
                <FormErrorFeedback>
                  {errors.first_name.message}
                </FormErrorFeedback>
              )}
            </div>
          </div>
          <div className="col-lg-12 no-pdd">
            <div className="inputContainer">
              <div className="sn-field">
                <input
                  type="text"
                  name="last_name"
                  maxLength="64"
                  ref={register({
                    required: "Este campo es requerido",
                  })}
                  placeholder="Apellido"
                />
                <i className="la la-user"></i>
              </div>
              {errors.last_name && (
                <FormErrorFeedback>
                  {errors.last_name.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="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                  placeholder="Clave"
                  minLength="6"
                  maxLength="16"
                />
                <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="sn-field">
                <input
                  type="password"
                  name="confirmation"
                  ref={register({
                    required: "Este campo es requerido",
                  })}
                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                  placeholder="Confirme su clave"
                  minLength="6"
                  maxLength="16"
                />
                <i className="la la-lock"></i>
              </div>
              {errors.confirmation && (
                <FormErrorFeedback>
                  {errors.confirmation.message}
                </FormErrorFeedback>
              )}
            </div>
          </div>

          <div className="col-lg-12 no-pdd">
            <div className="inputContainer">
              <div className="checky-sec st2">
                <div className="sn-field fgt-sec">
                  <input
                    type="checkbox"
                    name="terms_and_conditions"
                    id="terms_and_conditions"
                    checked={termsChecked}
                    ref={register({
                      required: "Este campo es requerido",
                    })}
                    value="1"
                    readOnly
                  />
                  <label htmlFor="terms_and_conditions" onClick={() => setTermsChecked(!termsChecked)}>
                    <span></span>
                  </label>
                  <small onClick={() => setTermsChecked(!termsChecked)}>
                  Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
                  </small>
                </div>
                {/* <!--fgt-sec end--> */}
              </div>
              {errors.terms_and_conditions && (
                <FormErrorFeedback>
                  {errors.terms_and_conditions.message}
                </FormErrorFeedback>
              )}
            </div>
          </div>

          <div className="col-lg-12 no-pdd">
            <div className="sn-field">
              <Recaptcha
                sitekey={captchaKey}
                verifyCallback={signupVerifyCallbackHandler}
                verifyCallbackName="signupVerifyCallbackHandler"
                expiredCallback={signupExpiredCallbackHandler}
                expiredCallbackName="signupExpiredCallbackHandler"
                ref={reCaptchaInstance}
                render="explicit"
                onloadCallback={handleOnRecaptchaLoad}
                hl="es"
              />
            </div>
          </div>

          <div className="col-lg-12 no-pdd">
            <button
              type="submit"
              value="submit"
              id="btn-submit"
              disabled={!isVerified}
            >
              Registrarse
            </button>
          </div>
        </div>
        {/* <?php echo $this->form()->closeTag($form); ?> */}
      </form>
      {isLoading ? (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      ) : (
        ""
      )}
    </React.Fragment>
  );
};

export default Signup;