Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3199 | Rev 3694 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3199 Rev 3432
Línea 1... Línea 1...
1 
import React, { useEffect, useState, useRef } from 'react'
 1 
import React, { useEffect, useState, useRef } from "react";
2 
import { Link, useNavigate, useParams } from 'react-router-dom'
 2 
import { Link, useNavigate, useParams } from "react-router-dom";
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from "react-hook-form";
4 
import { useDispatch, useSelector } from 'react-redux'
 4 
import { useDispatch, useSelector } from "react-redux";
5 
import { Button, Typography } from '@mui/material'
 5 
import { Button, Typography } from "@mui/material";
6 
import { Lock } from '@mui/icons-material'
 6 
import { Lock } from "@mui/icons-material";
7 
import Recaptcha from 'react-recaptcha'
 7 
import Recaptcha from "react-recaptcha";
8 
 
 8 
 
9 
import { axios } from '@utils'
 9 
import { axios } from "@utils";
10 
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format'
 10 
import CryptoJSAesJson from "@utils/crypto-js/cryptojs-aes-format";
11 
import { addNotification } from '@store/notification/notification.actions'
 11 
import { addNotification } from "@store/notification/notification.actions";
Línea 12... Línea 12...
12 
 
 12 
 
13 
import Form from '@components/common/form'
 13 
import Form from "@components/common/form";
Línea 14... Línea 14...
14 
import Input from '@components/UI/inputs/Input'
 14 
import Input from "@components/UI/inputs/Input";
15 
 
 15 
 
16 
const ResetPassword = () => {
 16 
const ResetPassword = () => {
17 
  const [isVerified, setIsVerified] = useState(false)
 17 
  const [isVerified, setIsVerified] = useState(false);
18 
  const reCaptchaToken = useRef('')
 18 
  const reCaptchaToken = useRef("");
19 
  const reCaptchaInstance = useRef()
 19 
  const reCaptchaInstance = useRef();
20 
  const dispatch = useDispatch()
 20 
  const dispatch = useDispatch();
21 
  const navigate = useNavigate()
 21 
  const navigate = useNavigate();
Línea 22... Línea 22...
22 
  const { uuid } = useParams()
 22 
  const { uuid } = useParams();
23 
  const { site_key, aes } = useSelector(({ auth }) => auth)
 23 
  const { site_key, aes } = useSelector(({ auth }) => auth);
24 
 
 24 
 
25 
  const {
 25 
  const {
26 
    control,
 26 
    control,
27 
    handleSubmit,
 27 
    handleSubmit,
28 
    watch,
 28 
    watch,
29 
    formState: { errors }
 29 
    formState: { errors },
Línea 30... Línea 30...
30 
  } = useForm({
 30 
  } = useForm({
31 
    mode: 'all'
 31 
    mode: "all",
32 
  })
 32 
  });
33 
 
 33 
 
Línea 34... Línea 34...
34 
  const loginVerifyCallbackHandler = (response) => {
 34 
  const loginVerifyCallbackHandler = (response) => {
35 
    reCaptchaToken.current = response
 35 
    reCaptchaToken.current = response;
36 
    setIsVerified(true)
 36 
    setIsVerified(true);
37 
  }
 37 
  };
Línea 38... Línea 38...
38 
 
 38 
 
39 
  const loginExpiredCallbackHandler = () => {
 39 
  const loginExpiredCallbackHandler = () => {
40 
    reCaptchaToken.current = ''
 40 
    reCaptchaToken.current = "";
Línea 41... Línea 41...
41 
    setIsVerified(false)
 41 
    setIsVerified(false);
42 
  }
 42 
  };
43 
 
 43 
 
Línea 44... Línea 44...
44 
  const handleOnRecaptchaLoad = () => {
 44 
  const handleOnRecaptchaLoad = () => {
45 
    reCaptchaToken.current = ''
 45 
    reCaptchaToken.current = "";
Línea 46... Línea 46...
46 
  }
 46 
  };
47 
 
 47 
 
48 
  const resetCaptcha = () => {
 48 
  const resetCaptcha = () => {
49 
    reCaptchaInstance.current?.reset()
 49 
    reCaptchaInstance.current?.reset();
50 
  }
 50 
  };
Línea 51... Línea 51...
51 
 
 51 
 
Línea 52... Línea 52...
52 
  const resetPassword = handleSubmit(async (data) => {
 52 
  const resetPassword = handleSubmit(async (data) => {
53 
    const formData = new FormData()
 53 
    const formData = new FormData();
54 
 
 - 
 
55 
    Object.entries(data).map(([key, value]) =>
 - 
 
56 
      (key === 'confirmation' || key === 'password') && value
 - 
 
57 
        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))
 54 
 
Línea 58... Línea 55...
58 
        : formData.append(key, value)
 55 
    Object.entries(data).map(([key, value]) =>
59 
    )
 56 
      (key === "confirmation" || key === "password") && value
60 
 
 57 
        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))
61 
    formData.append('captcha', reCaptchaToken.current)
 58 
        : formData.append(key, value)
62 
 
 59 
    );
Línea 63... Línea 60...
63 
    try {
 60 
 
64 
      const { data: response } = await axios.post(
 61 
    formData.append("captcha", reCaptchaToken.current);
65 
        `/reset-password/${uuid}`,
 62 
 
66 
        formData
 63 
    try {
67 
      )
 64 
      const response = await axios.post(`/reset-password/${uuid}`, formData);
68 
      const { data, success } = response
 65 
      const { data, success } = response.data;
69 
 
 66 
 
70 
      if (!success) {
 67 
      if (!success) {
71 
        const errorMessage =
 68 
        const errorMessage =
72 
          typeof data === 'string' ? data : data.confirmation[0]
 69 
          typeof data === "string" ? data : data.confirmation[0];
Línea 73... Línea 70...
73 
        throw new Error(errorMessage)
 70 
        throw new Error(errorMessage);
74 
      }
 71 
      }
75 
 
 72 
 
Línea 76... Línea 73...
76 
      dispatch(addNotification({ style: 'success', msg: data }))
 73 
      dispatch(addNotification({ style: "success", msg: data }));
77 
      navigate('/signin')
 74 
      navigate("/signin");
78 
    } catch (error) {
 75 
    } catch (error) {
Línea 79... Línea 76...
79 
      console.log(error)
 76 
      console.log(error);
80 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 77 
      dispatch(addNotification({ style: "danger", msg: error.message }));
81 
    } finally {
 78 
    } finally {
82 
      loginExpiredCallbackHandler()
 79 
      loginExpiredCallbackHandler();
83 
      resetCaptcha()
 80 
      resetCaptcha();
84 
    }
 81 
    }
85 
  })
 82 
  });
86 
 
 83 
 
87 
  useEffect(() => {
 84 
  useEffect(() => {
88 
    resetCaptcha()
 85 
    resetCaptcha();
89 
  }, [])
 86 
  }, []);
90 
 
 87 
 
91 
  return (
 88 
  return (
92 
    <Form onSubmit={resetPassword}>
 89 
    <Form onSubmit={resetPassword}>
93 
      <Typography variant='h3'>Reiniciar clave</Typography>
 90 
      <Typography variant="h3">Reiniciar clave</Typography>
94 
 
 91 
 
95 
      <Input
 92 
      <Input
Línea 96... Línea 93...
96 
        type='password'
 93 
        type="password"
97 
        name='password'
 94 
        name="password"
98 
        icon={<Lock />}
 95 
        icon={<Lock />}
99 
        placeholder='Clave'
 96 
        placeholder="Clave"
100 
        error={errors.password?.message}
 97 
        error={errors.password?.message}
101 
        control={control}
 98 
        control={control}
102 
        rules={{
 99 
        rules={{
103 
          required: 'Este campo es requerido',
 100 
          required: "Este campo es requerido",
104 
          pattern: {
 101 
          pattern: {
105 
            value:
 102 
            value:
106 
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
 103 
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
107 
            message:
 104 
            message:
108 
              'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
 105 
              "Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-",
109 
          }
 106 
          },
Línea 110... Línea 107...
110 
        }}
 107 
        }}
111 
      />
 108 
      />
112 
 
 109 
 
113 
      <Input
 110 
      <Input
114 
        type='password'
 111 
        type="password"
115 
        name='confirmation'
 112 
        name="confirmation"
116 
        icon={<Lock />}
 113 
        icon={<Lock />}
117 
        placeholder='Repita nueva clave'
 114 
        placeholder="Repita nueva clave"
118 
        error={errors.confirmation?.message}
 115 
        error={errors.confirmation?.message}
119 
        control={control}
 116 
        control={control}
120 
        rules={{
 117 
        rules={{
Línea 121... Línea 118...
121 
          required: 'Este campo es requerido',
 118 
          required: "Este campo es requerido",
122 
          validate: (v) =>
 119 
          validate: (v) =>
123 
            v === watch('password') ||
 120 
            v === watch("password") ||
124 
            'Disculpe, las claves tienen que coincidir'
 121 
            "Disculpe, las claves tienen que coincidir",
Línea 125... Línea 122...
125 
        }}
 122 
        }}
126 
      />
 123 
      />
127 
 
 124 
 
128 
      <Recaptcha
 125 
      <Recaptcha
129 
        sitekey={site_key}
 126 
        sitekey={site_key}
130 
        verifyCallback={loginVerifyCallbackHandler}
 127 
        verifyCallback={loginVerifyCallbackHandler}
Línea 131... Línea 128...
131 
        verifyCallbackName='loginVerifyCallbackHandler'
 128 
        verifyCallbackName="loginVerifyCallbackHandler"