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 MailIcon from '@mui/icons-material/Mail'
import Recaptcha from 'react-recaptcha'
import styled from 'styled-components'

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

import AuthForm from '../../components/auth/AuthForm'
import Input from 'components/UI/form/FormInputText'
import Spinner from 'components/UI/Spinner'
import Button from '@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 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 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, 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 variant='secondary' type='button'>
            Volver a Iniciar Sesión
          </Button>
        </Link>
      </StyledCheck>
    )
  }

  return (
    <AuthForm onSubmit={onSubmitHandler}>
      <h3>Olvide mi Clave</h3>

      <Input
        control={control}
        name='email'
        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'
          }
        }}
        placeholder='Correo electrónico'
        type='email'
        error={errors.email?.message}
        icon={MailIcon}
      />

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

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

      {isLoading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </AuthForm>
  )
}

export default ForgotPassword