Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState, useRef } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useForm } from "react-hook-form";
import { useDispatch, useSelector } from "react-redux";
import { Button, Typography } from "@mui/material";
import { Lock } from "@mui/icons-material";
import Recaptcha from "react-recaptcha";

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

import Form from "@components/common/form";
import Input from "@components/UI/inputs/Input";

const ResetPassword = () => {
  const [isVerified, setIsVerified] = useState(false);
  const reCaptchaToken = useRef("");
  const reCaptchaInstance = useRef();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { uuid } = useParams();
  const { site_key, aes } = useSelector(({ auth }) => auth);

  const {
    control,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm({
    mode: "all",
  });

  const loginVerifyCallbackHandler = (response) => {
    reCaptchaToken.current = response;
    setIsVerified(true);
  };

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

  const handleOnRecaptchaLoad = () => {
    reCaptchaToken.current = "";
  };

  const resetCaptcha = () => {
    reCaptchaInstance.current?.reset();
  };

  const resetPassword = handleSubmit(async (data) => {
    const formData = new FormData();

    Object.entries(data).map(([key, value]) =>
      (key === "confirmation" || key === "password") && value
        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))
        : formData.append(key, value)
    );

    formData.append("captcha", reCaptchaToken.current);

    try {
      const response = await axios.post(`/reset-password/${uuid}`, formData);
      const { data, success } = response.data;

      if (!success) {
        const errorMessage =
          typeof data === "string" ? data : data.confirmation[0];
        throw new Error(errorMessage);
      }

      dispatch(addNotification({ style: "success", msg: data }));
      navigate("/signin");
    } catch (error) {
      console.log(error);
      dispatch(addNotification({ style: "danger", msg: error.message }));
    } finally {
      loginExpiredCallbackHandler();
      resetCaptcha();
    }
  });

  useEffect(() => {
    resetCaptcha();
  }, []);

  return (
    <Form onSubmit={resetPassword}>
      <Typography variant="h3">Reiniciar clave</Typography>

      <Input
        type="password"
        name="password"
        icon={<Lock />}
        placeholder="Clave"
        error={errors.password?.message}
        control={control}
        rules={{
          required: "Este campo es requerido",
          pattern: {
            value:
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
            message:
              "Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-",
          },
        }}
      />

      <Input
        type="password"
        name="confirmation"
        icon={<Lock />}
        placeholder="Repita nueva clave"
        error={errors.confirmation?.message}
        control={control}
        rules={{
          required: "Este campo es requerido",
          validate: (v) =>
            v === watch("password") ||
            "Disculpe, las claves tienen que coincidir",
        }}
      />

      <Recaptcha
        sitekey={site_key}
        verifyCallback={loginVerifyCallbackHandler}
        verifyCallbackName="loginVerifyCallbackHandler"
        expiredCallback={loginExpiredCallbackHandler}
        expiredCallbackName="loginExpiredCallbackHandler"
        ref={reCaptchaInstance}
        render="explicit"
        onloadCallback={handleOnRecaptchaLoad}
        hl="es"
      />

      <div className="links">
        <Link to="/signin">Inicia sesión</Link>
        <Link to="/signup">¿No tienes cuenta?</Link>
      </div>

      <Button color="primary" type="submit" disabled={!isVerified}>
        Guardar
      </Button>
    </Form>
  );
};

export default ResetPassword;