Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useState, useEffect } from 'react'

import { axios } from '../../../../utils'

import { Link } from 'react-router-dom'

import { useForm } from 'react-hook-form'

import { useSelector } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

import styled from 'styled-components'

import Recaptcha from 'react-recaptcha'

import CryptoJSAesJson from '../../../utils/crypto-js/cryptojs-aes-format'

import Spinner from '../../UI/Spinner'

import SwitchInput from '../../UI/SwitchInput'

import FormErrorFeedback from '../../UI/FormErrorFeedback'

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

  const { site_key, aes } = useSelector(({ auth }) => auth)

  const { register, handleSubmit, setError, errors, watch } = useForm({

    mode: 'onBlur',

  })

  const [termsChecked, setTermsChecked] = useState(false)

  const [registered, setRegistered] = useState(false)

  const [isLoading, setIsLoading] = useState(false)

  const [isAdult, setIsAdult] = useState(false)

  const [isVerified, setIsVerified] = useState(false)

  const reCaptchaInstance = useRef(null)

  const reCaptchaToken = useRef('')

  const signupVerifyCallbackHandler = (response) => {

    if (!response) return

    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' || key === 'password' || key === 'confirmation')

        return formData.append(key, CryptoJSAesJson.encrypt(value, aes))

      return formData.append(key, value)

    })

    formData.append('captcha', reCaptchaToken.current)

    formData.append('is_adult', isAdult ? 'y' : 'n')

    await axios

      .post('/signup', formData)

      .then(({ data }) => {

        if (!data.success) {

          if (typeof data.data !== 'string') {

            Object.entries(data.data).map(([key, value]) => {

              setError(key, {

                type: 'manual',

                message: Array.isArray(value) ? value[0] : value,

              })

            })

          }

          addNotification({ style: 'danger', msg: data.data })

          reCaptchaInstance.current.reset()

          signupVerifyCallbackHandler()

          return

        }

        reCaptchaInstance.current.reset()

        signupExpiredCallbackHandler()

        setRegistered(true)

      })

      .catch((err) => {

        addNotification({

          style: 'danger',

          msg: 'Disculpe, ha ocurrido un error',

        })

        console.log(`Error: ${err}`)

      })

      .finally(() => setIsLoading(false))

  }

  const handleOnRecaptchaLoad = () => {

    reCaptchaToken.current = ''

  }

  useEffect(() => {

    reCaptchaInstance.current?.reset()

  }, [])

  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 (

    <>

      <h3>Registrarse</h3>

      <form onSubmit={handleSubmit(onSubmitHandler)}>

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

        <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 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 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 className="inputContainer">

          <div className="sn-field">

            <input

              type="password"

              name="confirmation"

              ref={register({

                required: 'Este campo es requerido',

                validate: (v) =>

                  v === watch('password') ||

                  'Disculpe, las claves tienen que coincidir',

              })}

              placeholder="Confirme su clave"

            />

            <i className="la la-lock" />

          </div>

          {errors.confirmation && (

            <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>

          )}

        </div>

        <div className="d-flex flex-column" style={{ gap: '.5rem' }}>

          <label>Eres mayor de 18</label>

          <SwitchInput setValue={(value) => setIsAdult(value)} />

        </div>

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

          </div>

          {errors.terms_and_conditions && (

            <FormErrorFeedback>

              {errors.terms_and_conditions.message}

            </FormErrorFeedback>

          )}

        </div>

        <div className="sn-field">

          <Recaptcha

            sitekey={site_key}

            verifyCallback={signupVerifyCallbackHandler}

            verifyCallbackName="signupVerifyCallbackHandler"

            expiredCallback={signupExpiredCallbackHandler}

            expiredCallbackName="signupExpiredCallbackHandler"

            ref={reCaptchaInstance}

            render="explicit"

            onloadCallback={handleOnRecaptchaLoad}

            hl="es"

          />

        </div>

        <button

          type="submit"

          value="submit"

          id="btn-submit"

          disabled={!isVerified}

        >

          Registrarse

        </button>

      </form>

      {isLoading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </>

  )

}

export default Signup