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 [loading, setloading] = 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 }) => {

    setloading(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(() => setloading(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}>

      {loading && <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;