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

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

          dispatch(addNotification({ style: 'danger', msg: data.data }))
          reCaptchaInstance.current.reset()
          signupVerifyCallbackHandler()
          return
        }

        reCaptchaInstance.current.reset()
        signupExpiredCallbackHandler()
        setRegistered(true)
      })
      .catch((err) => {
        dispatch(
          addNotification({
            style: 'danger',
            msg: 'Disculpe, ha ocurrido un error',
          })
        )
        console.log(`Error: ${err}`)
        throw new 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