Proyectos de Subversion LeadersLinked - SPA

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

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

import Form from '@components/common/form'
import Spinner from '@components/UI/Spinner'
import Input from '@components/UI/inputs/Input'
import Button from '@components/UI/buttons/Buttons'

const StyledCheck = styled('div')`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 100px !important;
    margin-bottom: 1rem !important;
  }
  p {
    text-align: center;
  }
`

const ForgotPassword = () => {
  const { site_key, aes } = useSelector(({ auth }) => auth)
  const [forgotSent, setForgotSent] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [isVerified, setIsVerified] = useState(false)
  const reCaptchaInstance = useRef(null)
  const reCaptchaToken = useRef('')
  const dispatch = useDispatch()

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

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

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

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

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

  const onSubmitHandler = handleSubmit(async ({ email }) => {
    setIsLoading(true)
    const formData = new FormData()

    formData.append('email', CryptoJSAesJson.encrypt(email, aes))
    formData.append('captcha', reCaptchaToken.current)

    axios
      .post('/forgot-password', formData)
      .then(({ data: response }) => {
        const { success, data } = response

        if (!success) {
          throw new Error(data)
        }

        reCaptchaInstance.current.reset()
        forgotPasswordExpiredCallbackHandler()
        loginExpiredCallbackHandler()
        setForgotSent(true)
      })
      .catch((err) => {
        console.log(`Error: ${err}`)
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
      .finally(() => setIsLoading(false))
  })

  useEffect(() => {
    reCaptchaInstance.current?.reset()
  }, [])

  if (forgotSent) {
    return (
      <StyledCheck>
        <img src='/images/check.png' alt='check' />

        <p>El enlace de recuperación fue enviado a su correo electrónico</p>

        <Link to='/signin'>
          <Button color='secondary' type='button'>
            Volver a Iniciar Sesión
          </Button>
        </Link>
      </StyledCheck>
    )
  }

  return (
    <Form onSubmit={onSubmitHandler}>
      {isLoading && <Spinner absolute />}

      <Typography variant='h3'>Olvide mi Clave</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,4}$/i,
            message: 'Debe ser una dirección de correo electrónico valida'
          }
        }}
        error={errors.email?.message}
      />

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

      <Button color='secondary' type='submit' disabled={!isVerified}>
        Nueva Clave
      </Button>
    </Form>
  )
}

export default ForgotPassword