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, watch } = useForm({ mode: 'onBlur' });

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

                    pattern: {

                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,

                      message: "Debe ser una dirección de correo electrónico valida"

                    }

                  })}

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

                    maxLength: {

                      value: 64,

                      message: 'Limite de carateres superior al permitido'

                    }

                  })}

                  placeholder="Nombre"

                />

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

                  ref={register({

                    required: "Este campo es requerido",

                    maxLength: {

                      value: 64,

                      message: 'Limite de carateres superior al permitido'

                    }

                  })}

                  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: {

                      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 #?!@$^%*-'

                    }

                  })}

                  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"

                />

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

                    validate: (v) => v === watch('password') || 'Las contraseñas deben coincidir'

                  })}

                  placeholder="Confirme su clave"

                />

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