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