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/Mail';
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((response) => {
        const { success, data } = response.data;

        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,}$/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;