Proyectos de Subversion LeadersLinked - SPA

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

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

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

import { useDispatch, useSelector } from 'react-redux'

import { styled, Typography } from '@mui/material'

import { Mail, Lock, Person, CheckCircleOutline } from '@mui/icons-material'

import Recaptcha from 'react-recaptcha'

import { axios } from '@utils'

import { useFetchHelper } from '@hooks'

import { addNotification } from '@store/notification/notification.actions'

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

import Input from '@components/UI/inputs/Input'

import Button from '@components/UI/buttons/Buttons'

import Select from '@components/UI/inputs/Select'

import Spinner from '@components/UI/Spinner'

import Form from '@components/common/form'

import SwitchInput from '@components/UI/SwitchInput'

import CheckboxInput from '@components/UI/inputs/Checkbox'

const StyledCheck = styled('div')`

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

  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 [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 { site_key, aes } = useSelector(({ auth }) => auth)

  const { data: timezones } = useFetchHelper('timezones')

  const {

    control,

    handleSubmit,

    setError,

    watch,

    formState: { errors }

  } = useForm({

    mode: 'all'

  })

  const signupVerifyCallbackHandler = (response) => {

    if (!response) return

    reCaptchaToken.current = response

    setIsVerified(true)

  }

  const signupExpiredCallbackHandler = () => {

    reCaptchaToken.current = ''

    setIsVerified(false)

  }

  const handleOnRecaptchaLoad = () => {

    reCaptchaToken.current = ''

  }

  const onSubmitHandler = handleSubmit(

    async ({

      email,

      first_name,

      last_name,

      password,

      confirmation,

      terms_and_conditions

    }) => {

      setIsLoading(true)

      const formData = new FormData()

      formData.append('first_name', first_name)

      formData.append('last_name', last_name)

      formData.append('email', CryptoJSAesJson.encrypt(email, aes))

      formData.append('password', CryptoJSAesJson.encrypt(password, aes))

      formData.append(

        'confirmation',

        CryptoJSAesJson.encrypt(confirmation, aes)

      )

      formData.append('terms_and_conditions', terms_and_conditions ? 1 : 0)

      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).forEach(([key, value]) => {

                setError(key, {

                  type: 'manual',

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

                })

              })

              return

            }

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

            reCaptchaInstance.current.reset()

            signupVerifyCallbackHandler()

            return

          }

          reCaptchaInstance.current.reset()

          signupExpiredCallbackHandler()

          setRegistered(true)

        })

        .catch((err) => {

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

          dispatch(

            addNotification({

              style: 'danger',

              msg: 'Disculpe, ha ocurrido un error'

            })

          )

        })

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

    }

  )

  useEffect(() => {

    reCaptchaInstance.current?.reset()

  }, [])

  if (registered) {

    return (

      <StyledCheck>

        <CheckCircleOutline sx={{ color: '#7FFF00', fontSize: '3rem' }} />

        <Typography>

          Se ha registrado correctamente. Por favor, active la cuenta desde su

          correo

        </Typography>

        <Link to='/signin'>

          <button className='btn btn-primary'>Entrar</button>

        </Link>

      </StyledCheck>

    )

  }

  return (

    <Form onSubmit={onSubmitHandler}>

      <Typography variant='h3'>Registrarse</Typography>

      <Input

        type='email'

        name='email'

        placeholder='Correo electrónico'

        icon={<Mail />}

        control={control}

        rules={{

          required: 'Este campo es requerido',

          pattern: {

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

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

          }

        }}

        error={errors.email?.message}

      />

      <Input

        type='text'

        name='first_name'

        icon={<Person />}

        placeholder='Nombre'

        control={control}

        rules={{

          required: 'Este campo es requerido',

          maxLength: {

            value: 64,

            message: 'Limite de carateres superior al permitido'

          }

        }}

        error={errors.first_name?.message}

      />

      <Input

        type='text'

        name='last_name'

        icon={<Person />}

        placeholder='Apellido'

        control={control}

        rules={{

          required: 'Este campo es requerido',

          maxLength: {

            value: 64,

            message: 'Limite de carateres superior al permitido'

          }

        }}

        error={errors.last_name?.message}

      />

      <Input

        type='password'

        name='password'

        icon={<Lock />}

        placeholder='Clave'

        control={control}

        rules={{

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

          }

        }}

        error={errors.password?.message}

      />

      <Input

        type='password'

        name='confirmation'

        icon={<Lock />}

        placeholder='Confirme su clave'

        control={control}

        rules={{

          required: 'Este campo es requerido',

          validate: (v) =>

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

            'Disculpe, las claves tienen que coincidir'

        }}

        error={errors.confirmation?.message}

      />

      <Select

        label='Zona horaria'

        name='timezone'

        control={control}

        rules={{ required: 'Este campo es requerido' }}

        error={errors.timezone?.message}

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

          name: key,

          value

        }))}

      />

      <SwitchInput

        label='Eres mayor de 18'

        setValue={(value) => setIsAdult(value)}

      />

      <CheckboxInput

        name='terms_and_conditions'

        control={control}

        label='Si, acepto los Términos y Condiciones.'

        rules={{ required: 'Este campo es requerido' }}

        error={errors.terms_and_conditions?.message}

      />

      <Recaptcha

        sitekey={site_key}

        verifyCallback={signupVerifyCallbackHandler}

        verifyCallbackName='signupVerifyCallbackHandler'

        expiredCallback={signupExpiredCallbackHandler}

        expiredCallbackName='signupExpiredCallbackHandler'

        ref={reCaptchaInstance}

        render='explicit'

        onloadCallback={handleOnRecaptchaLoad}

        hl='es'

      />

      <div className='links'>

        <Link to='/signin'>¿Ya tienes cuenta?</Link>

      </div>

      <Button color='secondary' type='submit' disabled={!isVerified}>

        Registrarse

      </Button>

      {isLoading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </Form>

  )

}

export default Signup