Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState, useRef } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import { useDispatch, useSelector } from 'react-redux'
import { Button, Typography } from '@mui/material'
import { Lock } from '@mui/icons-material'
import Recaptcha from 'react-recaptcha'

import { axios } from '@utils'
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format'
import { addNotification } from '@store/notification/notification.actions'

import Form from '@components/common/form'
import Input from '@components/UI/inputs/Input'

const ResetPassword = () => {
  const [isVerified, setIsVerified] = useState(false)
  const reCaptchaToken = useRef('')
  const reCaptchaInstance = useRef()
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const { uuid } = useParams()
  const { site_key, aes } = useSelector(({ auth }) => auth)

  const {
    control,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm({
    mode: 'all'
  })

  const loginVerifyCallbackHandler = (response) => {
    reCaptchaToken.current = response
    setIsVerified(true)
  }

  const loginExpiredCallbackHandler = () => {
    reCaptchaToken.current = ''
    setIsVerified(false)
  }

  const handleOnRecaptchaLoad = () => {
    reCaptchaToken.current = ''
  }

  const resetCaptcha = () => {
    reCaptchaInstance.current?.reset()
  }

  const resetPassword = handleSubmit(async (data) => {
    const formData = new FormData()

    Object.entries(data).map(([key, value]) =>
      (key === 'confirmation' || key === 'password') && value
        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))
        : formData.append(key, value)
    )

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

    try {
      const { data: response } = await axios.post(
        `/reset-password/${uuid}`,
        formData
      )
      const { data, success } = response

      if (!success) {
        const errorMessage =
          typeof data === 'string' ? data : data.confirmation[0]
        throw new Error(errorMessage)
      }

      dispatch(addNotification({ style: 'success', msg: data }))
      navigate('/signin')
    } catch (error) {
      console.log(error)
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    } finally {
      loginExpiredCallbackHandler()
      resetCaptcha()
    }
  })

  useEffect(() => {
    resetCaptcha()
  }, [])

  return (
    <Form onSubmit={resetPassword}>
      <Typography variant='h3'>Reiniciar clave</Typography>

      <Input
        type='password'
        name='password'
        icon={<Lock />}
        placeholder='Clave'
        error={errors.password?.message}
        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 #?!@$^%*-'
          }
        }}
      />

      <Input
        type='password'
        name='confirmation'
        icon={<Lock />}
        placeholder='Repita nueva clave'
        error={errors.confirmation?.message}
        control={control}
        rules={{
          required: 'Este campo es requerido',
          validate: (v) =>
            v === watch('password') ||
            'Disculpe, las claves tienen que coincidir'
        }}
      />

      <Recaptcha
        sitekey={site_key}
        verifyCallback={loginVerifyCallbackHandler}
        verifyCallbackName='loginVerifyCallbackHandler'
        expiredCallback={loginExpiredCallbackHandler}
        expiredCallbackName='loginExpiredCallbackHandler'
        ref={reCaptchaInstance}
        render='explicit'
        onloadCallback={handleOnRecaptchaLoad}
        hl='es'
      />

      <div className='links'>
        <Link to='/signin'>Inicia sesión</Link>
        <Link to='/signup'>¿No tienes cuenta?</Link>
      </div>

      <Button color='primary' type='submit' disabled={!isVerified}>
        Guardar
      </Button>
    </Form>
  )
}

export default ResetPassword