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;