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, { 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/Mail';
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 33... Línea 33...
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 [isLoading, setIsLoading] = 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('');
39 
  const dispatch = useDispatch();
 39 
  const dispatch = useDispatch();
Línea 40... Línea 40...
40 
 
 40 
 
41 
  const {
 41 
  const {
42 
    handleSubmit,
 42 
    handleSubmit,
43 
    control,
 43 
    control,
44 
    formState: { errors },
 44 
    formState: { errors }
Línea 45... Línea 45...
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;
50 
      setIsVerified(true);
 50 
      setIsVerified(true);
Línea 51... Línea 51...
51 
    }
 51 
    }
52 
  };
 52 
  };
53 
 
 53 
 
54 
  const forgotPasswordExpiredCallbackHandler = () => {
 54 
  const forgotPasswordExpiredCallbackHandler = () => {
Línea 55... Línea 55...
55 
    reCaptchaToken.current = "";
 55 
    reCaptchaToken.current = '';
56 
    setIsVerified(false);
 56 
    setIsVerified(false);
57 
  };
 57 
  };
Línea 58... Línea 58...
58 
 
 58 
 
59 
  const handleOnRecaptchaLoad = () => {
 59 
  const handleOnRecaptchaLoad = () => {
60 
    reCaptchaToken.current = "";
 60 
    reCaptchaToken.current = '';
61 
  };
 61 
  };
Línea 62... Línea 62...
62 
 
 62 
 
63 
  const loginExpiredCallbackHandler = () => {
 63 
  const loginExpiredCallbackHandler = () => {
64 
    reCaptchaToken.current = "";
 64 
    reCaptchaToken.current = '';
Línea 65... Línea 65...
65 
    setIsVerified(false);
 65 
    setIsVerified(false);
66 
  };
 66 
  };
Línea 67... Línea 67...
67 
 
 67 
 
68 
  const onSubmitHandler = handleSubmit(async ({ email }) => {
 68 
  const onSubmitHandler = handleSubmit(async ({ email }) => {
69 
    setIsLoading(true);
 69 
    setIsLoading(true);
70 
    const formData = new FormData();
 70 
    const formData = new FormData();
Línea 71... Línea 71...
71 
 
 71 
 
72 
    formData.append("email", CryptoJSAesJson.encrypt(email, aes));
 72 
    formData.append('email', CryptoJSAesJson.encrypt(email, aes));
Línea 86... Línea 86...
86 
        loginExpiredCallbackHandler();
 86 
        loginExpiredCallbackHandler();
87 
        setForgotSent(true);
 87 
        setForgotSent(true);
88 
      })
 88 
      })
89 
      .catch((err) => {
 89 
      .catch((err) => {
90 
        console.log(`Error: ${err}`);
 90 
        console.log(`Error: ${err}`);
91 
        dispatch(addNotification({ style: "danger", msg: err.message }));
 91 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
92 
      })
 92 
      })
93 
      .finally(() => setIsLoading(false));
 93 
      .finally(() => setIsLoading(false));
94 
  });
 94 
  });
Línea 95... Línea 95...
95 
 
 95 
 
Línea 98... Línea 98...
98 
  }, []);
 98 
  }, []);
Línea 99... Línea 99...
99 
 
 99 
 
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>
Línea 115... Línea 115...
115 
 
 115 
 
116 
  return (
 116 
  return (
117 
    <Form onSubmit={onSubmitHandler}>
 117 
    <Form onSubmit={onSubmitHandler}>
Línea 118... Línea 118...
118 
      {isLoading && <Spinner absolute />}
 118 
      {isLoading && <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',
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 
          }
Línea 134... Línea 134...
134 
        }}
 134 
        }}
135 
        error={errors.email?.message}
 135 
        error={errors.email?.message}
136 
      />
 136 
      />
137 
 
 137 
 
138 
      <Recaptcha
 138 
      <Recaptcha
139 
        sitekey={site_key}
 139 
        sitekey={site_key}
140 
        verifyCallback={forgotPasswordVerifyCallbackHandler}
 140 
        verifyCallback={forgotPasswordVerifyCallbackHandler}
141 
        verifyCallbackName="forgotPasswordVerifyCallbackHandler"
 141 
        verifyCallbackName='forgotPasswordVerifyCallbackHandler'
142 
        expiredCallback={forgotPasswordExpiredCallbackHandler}
 142 
        expiredCallback={forgotPasswordExpiredCallbackHandler}
143 
        expiredCallbackName="forgotPasswordExpiredCallbackHandler"
 143 
        expiredCallbackName='forgotPasswordExpiredCallbackHandler'
144 
        ref={reCaptchaInstance}
 144 
        ref={reCaptchaInstance}
Línea 145... Línea 145...
145 
        render="explicit"
 145 
        render='explicit'
146 
        onloadCallback={handleOnRecaptchaLoad}
 146 
        onloadCallback={handleOnRecaptchaLoad}
147 
        hl="es"
 147 
        hl='es'
148 
      />
 148 
      />
149 
 
 149 
 
150 
      <Button color="secondary" type="submit" disabled={!isVerified}>
 150 
      <Button color='secondary' type='submit' disabled={!isVerified}>