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