Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3694
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/Lock';
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 
 
 54 
 
Línea 55... Línea 55...
55 
    Object.entries(data).map(([key, value]) =>
 55 
    Object.entries(data).map(([key, value]) =>
56 
      (key === "confirmation" || key === "password") && value
 - 
 
57 
        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))
 56 
      (key === 'confirmation' || key === 'password') && value
58 
        : formData.append(key, value)
 57 
        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))
59 
    );
 58 
        : formData.append(key, value)
Línea 60... Línea 59...
60 
 
 59 
    );
61 
    formData.append("captcha", reCaptchaToken.current);
 60 
 
62 
 
 61 
    formData.append('captcha', reCaptchaToken.current);
63 
    try {
 62 
 
64 
      const response = await axios.post(`/reset-password/${uuid}`, formData);
 63 
    try {
65 
      const { data, success } = response.data;
 64 
      const response = await axios.post(`/reset-password/${uuid}`, formData);
66 
 
 65 
      const { data, success } = response.data;
67 
      if (!success) {
 66 
 
68 
        const errorMessage =
 67 
      if (!success) {
69 
          typeof data === "string" ? data : data.confirmation[0];
 68 
        const errorMessage = typeof data === 'string' ? data : data.confirmation[0];
Línea 85... Línea 84...
85 
    resetCaptcha();
 84 
    resetCaptcha();
86 
  }, []);
 85 
  }, []);
Línea 87... Línea 86...
87 
 
 86 
 
88 
  return (
 87 
  return (
89 
    <Form onSubmit={resetPassword}>
 88 
    <Form onSubmit={resetPassword}>
Línea 90... Línea 89...
90 
      <Typography variant="h3">Reiniciar clave</Typography>
 89 
      <Typography variant='h3'>Reiniciar clave</Typography>
91 
 
 90 
 
92 
      <Input
 91 
      <Input
93 
        type="password"
 92 
        type='password'
94 
        name="password"
 93 
        name='password'
95 
        icon={<Lock />}
 94 
        icon={<Lock />}
96 
        placeholder="Clave"
 95 
        placeholder='Clave'
97 
        error={errors.password?.message}
 96 
        error={errors.password?.message}
98 
        control={control}
 97 
        control={control}
99 
        rules={{
 98 
        rules={{
100 
          required: "Este campo es requerido",
 - 
 
101 
          pattern: {
 99 
          required: 'Este campo es requerido',
102 
            value:
 100 
          pattern: {
103 
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
 101 
            value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
104 
            message:
 102 
            message:
105 
              "Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-",
 103 
              'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
106 
          },
 104 
          }
Línea 107... Línea 105...
107 
        }}
 105 
        }}
108 
      />
 106 
      />
109 
 
 107 
 
110 
      <Input
 108 
      <Input
111 
        type="password"
 109 
        type='password'
112 
        name="confirmation"
 110 
        name='confirmation'
113 
        icon={<Lock />}
 111 
        icon={<Lock />}
114 
        placeholder="Repita nueva clave"
 112 
        placeholder='Repita nueva clave'
115 
        error={errors.confirmation?.message}
 113 
        error={errors.confirmation?.message}
116 
        control={control}
 - 
 
117 
        rules={{
 - 
 
118 
          required: "Este campo es requerido",
 114 
        control={control}
119 
          validate: (v) =>
 115 
        rules={{
120 
            v === watch("password") ||
 116 
          required: 'Este campo es requerido',
Línea 121... Línea 117...
121 
            "Disculpe, las claves tienen que coincidir",
 117 
          validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
122 
        }}
 118 
        }}
123 
      />
 119 
      />
124 
 
 120 
 
125 
      <Recaptcha
 121 
      <Recaptcha
126 
        sitekey={site_key}
 122 
        sitekey={site_key}
127 
        verifyCallback={loginVerifyCallbackHandler}
 123 
        verifyCallback={loginVerifyCallbackHandler}
128 
        verifyCallbackName="loginVerifyCallbackHandler"
 124 
        verifyCallbackName='loginVerifyCallbackHandler'
129 
        expiredCallback={loginExpiredCallbackHandler}
 125 
        expiredCallback={loginExpiredCallbackHandler}
130 
        expiredCallbackName="loginExpiredCallbackHandler"
 126 
        expiredCallbackName='loginExpiredCallbackHandler'
131 
        ref={reCaptchaInstance}
 127 
        ref={reCaptchaInstance}
Línea 132... Línea 128...
132 
        render="explicit"
 128 
        render='explicit'
133 
        onloadCallback={handleOnRecaptchaLoad}
 129 
        onloadCallback={handleOnRecaptchaLoad}
134 
        hl="es"
 130 
        hl='es'
135 
      />
 131 
      />
Línea 136... Línea 132...
136 
 
 132 
 
137 
      <div className="links">
 133 
      <div className='links'>
138 
        <Link to="/signin">Inicia sesión</Link>
 134 
        <Link to='/signin'>Inicia sesión</Link>
139 
        <Link to="/signup">¿No tienes cuenta?</Link>
 135 
        <Link to='/signup'>¿No tienes cuenta?</Link>
140 
      </div>
 136 
      </div>
141 
 
 137