Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3230 Rev 3416
Línea 1... Línea 1...
1 
import React, { useRef, useState, useEffect } from 'react'
 1 
import React, { useRef, useState, useEffect } from "react";
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from "react-router-dom";
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from "react-redux";
4 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from "react-hook-form";
5 
import { styled, Typography } from '@mui/material'
 5 
import { styled, Typography } from "@mui/material";
6 
import { Mail } from '@mui/icons-material'
 6 
import { Mail } 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 { addNotification } from '@store/notification/notification.actions'
 10 
import { addNotification } from "@store/notification/notification.actions";
11 
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format'
 11 
import CryptoJSAesJson from "@utils/crypto-js/cryptojs-aes-format";
12 
 
 12 
 
13 
import Form from '@components/common/form'
 13 
import Form from "@components/common/form";
14 
import Spinner from '@components/UI/Spinner'
 14 
import Spinner from "@components/UI/Spinner";
15 
import Input from '@components/UI/inputs/Input'
 15 
import Input from "@components/UI/inputs/Input";
16 
import Button from '@components/UI/buttons/Buttons'
 16 
import Button from "@components/UI/buttons/Buttons";
Línea 17... Línea 17...
17 
 
 17 
 
18 
const StyledCheck = styled('div')`
 18 
const StyledCheck = styled("div")`
19 
  display: flex;
 19 
  display: flex;
20 
  flex-direction: column;
 20 
  flex-direction: column;
21 
  justify-content: center;
 21 
  justify-content: center;
22 
  align-items: center;
 22 
  align-items: center;
Línea 25... Línea 25...
25 
    margin-bottom: 1rem !important;
 25 
    margin-bottom: 1rem !important;
26 
  }
 26 
  }
27 
  p {
 27 
  p {
28 
    text-align: center;
 28 
    text-align: center;
29 
  }
 29 
  }
30 
`
 30 
`;
Línea 31... Línea 31...
31 
 
 31 
 
32 
const ForgotPassword = () => {
 32 
const ForgotPassword = () => {
33 
  const { site_key, aes } = useSelector(({ auth }) => auth)
 33 
  const { site_key, aes } = useSelector(({ auth }) => auth);
34 
  const [forgotSent, setForgotSent] = useState(false)
 34 
  const [forgotSent, setForgotSent] = useState(false);
35 
  const [isLoading, setIsLoading] = useState(false)
 35 
  const [loading, setloading] = useState(false);
36 
  const [isVerified, setIsVerified] = useState(false)
 36 
  const [isVerified, setIsVerified] = useState(false);
37 
  const reCaptchaInstance = useRef(null)
 37 
  const reCaptchaInstance = useRef(null);
38 
  const reCaptchaToken = useRef('')
 38 
  const reCaptchaToken = useRef("");
Línea 39... Línea 39...
39 
  const dispatch = useDispatch()
 39 
  const dispatch = useDispatch();
40 
 
 40 
 
41 
  const {
 41 
  const {
42 
    handleSubmit,
 42 
    handleSubmit,
43 
    control,
 43 
    control,
Línea 44... Línea 44...
44 
    formState: { errors }
 44 
    formState: { errors },
45 
  } = useForm({ mode: 'all' })
 45 
  } = useForm({ mode: "all" });
46 
 
 46 
 
47 
  const forgotPasswordVerifyCallbackHandler = (response) => {
 47 
  const forgotPasswordVerifyCallbackHandler = (response) => {
48 
    if (response) {
 48 
    if (response) {
49 
      reCaptchaToken.current = response
 49 
      reCaptchaToken.current = response;
Línea 50... Línea 50...
50 
      setIsVerified(true)
 50 
      setIsVerified(true);
51 
    }
 51 
    }
52 
  }
 52 
  };
53 
 
 53 
 
Línea 54... Línea 54...
54 
  const forgotPasswordExpiredCallbackHandler = () => {
 54 
  const forgotPasswordExpiredCallbackHandler = () => {
55 
    reCaptchaToken.current = ''
 55 
    reCaptchaToken.current = "";
56 
    setIsVerified(false)
 56 
    setIsVerified(false);
Línea 57... Línea 57...
57 
  }
 57 
  };
58 
 
 58 
 
59 
  const handleOnRecaptchaLoad = () => {
 59 
  const handleOnRecaptchaLoad = () => {
60 
    reCaptchaToken.current = ''
 60 
    reCaptchaToken.current = "";
Línea 61... Línea 61...
61 
  }
 61 
  };
62 
 
 62 
 
63 
  const loginExpiredCallbackHandler = () => {
 63 
  const loginExpiredCallbackHandler = () => {
Línea 64... Línea 64...
64 
    reCaptchaToken.current = ''
 64 
    reCaptchaToken.current = "";
65 
    setIsVerified(false)
 65 
    setIsVerified(false);
Línea 66... Línea 66...
66 
  }
 66 
  };
67 
 
 67 
 
68 
  const onSubmitHandler = handleSubmit(async ({ email }) => {
 68 
  const onSubmitHandler = handleSubmit(async ({ email }) => {
69 
    setIsLoading(true)
 69 
    setloading(true);
Línea 70... Línea 70...
70 
    const formData = new FormData()
 70 
    const formData = new FormData();
71 
 
 71 
 
72 
    formData.append('email', CryptoJSAesJson.encrypt(email, aes))
 72 
    formData.append("email", CryptoJSAesJson.encrypt(email, aes));
Línea 73... Línea 73...
73 
    formData.append('captcha', reCaptchaToken.current)
 73 
    formData.append("captcha", reCaptchaToken.current);
74 
 
 74 
 
75 
    axios
 75 
    axios
76 
      .post('/forgot-password', formData)
 76 
      .post("/forgot-password", formData)
77 
      .then(({ data: response }) => {
 77 
      .then(({ data: response }) => {
78 
        const { success, data } = response
 78 
        const { success, data } = response;
79 
 
 79 
 
80 
        if (!success) {
 80 
        if (!success) {
81 
          throw new Error(data)
 81 
          throw new Error(data);
82 
        }
 82 
        }
83 
 
 83 
 
Línea 84... Línea 84...
84 
        reCaptchaInstance.current.reset()
 84 
        reCaptchaInstance.current.reset();
85 
        forgotPasswordExpiredCallbackHandler()
 85 
        forgotPasswordExpiredCallbackHandler();
86 
        loginExpiredCallbackHandler()
 86 
        loginExpiredCallbackHandler();
Línea 87... Línea 87...
87 
        setForgotSent(true)
 87 
        setForgotSent(true);
88 
      })
 88 
      })
89 
      .catch((err) => {
 89 
      .catch((err) => {
90 
        console.log(`Error: ${err}`)
 90 
        console.log(`Error: ${err}`);
Línea 91... Línea 91...
91 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 91 
        dispatch(addNotification({ style: "danger", msg: err.message }));
Línea 92... Línea 92...
92 
      })
 92 
      })
93 
      .finally(() => setIsLoading(false))
 93 
      .finally(() => setloading(false));
94 
  })
 94 
  });
95 
 
 95 
 
96 
  useEffect(() => {
 96 
  useEffect(() => {
97 
    reCaptchaInstance.current?.reset()
 97 
    reCaptchaInstance.current?.reset();
98 
  }, [])
 98 
  }, []);
99 
 
 99 
 
Línea 100... Línea 100...
100 
  if (forgotSent) {
 100 
  if (forgotSent) {
101 
    return (
 101 
    return (
102 
      <StyledCheck>
 102 
      <StyledCheck>
Línea 103... Línea 103...
103 
        <img src='/images/check.png' alt='check' />
 103 
        <img src="/images/check.png" alt="check" />
Línea 104... Línea 104...
104 
 
 104 
 
105 
        <p>El enlace de recuperación fue enviado a su correo electrónico</p>
 105 
        <p>El enlace de recuperación fue enviado a su correo electrónico</p>
106 
 
 106 
 
107 
        <Link to='/signin'>
 107 
        <Link to="/signin">
108 
          <Button color='secondary' type='button'>
 108 
          <Button color="secondary" type="button">
109 
            Volver a Iniciar Sesión
 109 
            Volver a Iniciar Sesión
110 
          </Button>
 110 
          </Button>
111 
        </Link>
 111 
        </Link>
112 
      </StyledCheck>
 112 
      </StyledCheck>
113 
    )
 113 
    );
114 
  }
 114 
  }
115 
 
 115 
 
116 
  return (
 116 
  return (
117 
    <Form onSubmit={onSubmitHandler}>
 117 
    <Form onSubmit={onSubmitHandler}>
118 
      {isLoading && <Spinner absolute />}
 118 
      {loading && <Spinner absolute />}
Línea 119... Línea 119...
119 
 
 119 
 
120 
      <Typography variant='h3'>Olvide mi Clave</Typography>
 120 
      <Typography variant="h3">Olvide mi Clave</Typography>
121 
 
 121 
 
122 
      <Input
 122 
      <Input
123 
        type='email'
 123 
        type="email"
124 
        name='email'
 124 
        name="email"
125 
        placeholder='Correo electrónico'
 125 
        placeholder="Correo electrónico"
126 
        icon={<Mail />}
 126 
        icon={<Mail />}
127 
        control={control}
 127 
        control={control}
128 
        rules={{
 128 
        rules={{
129 
          required: 'Este campo es requerido',
 129 
          required: "Este campo es requerido",
Línea 130... Línea 130...
130 
          pattern: {
 130 
          pattern: {
131 
            value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,}$/i,
 131 
            value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,}$/i,
132 
            message: 'Debe ser una dirección de correo electrónico valida'
 132 
            message: "Debe ser una dirección de correo electrónico valida",
133 
          }
 133 
          },
134 
        }}
 134 
        }}
135 
        error={errors.email?.message}
 135 
        error={errors.email?.message}
Línea 136... Línea 136...
136 
      />
 136 
      />