Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2760 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2760 Rev 5130
Línea 1... Línea 1...
1 
import { axios } from "../../../utils";
 1 
import { axios } from '../../../utils'
2 
import React, { useEffect, useState } from "react";
 2 
import React, { useEffect, useState } from 'react'
3 
import { useForm } from "react-hook-form";
 3 
import { useForm } from 'react-hook-form'
4 
import { connect } from "react-redux";
 4 
import { connect } from 'react-redux'
5 
import styled from "styled-components";
 5 
import styled from 'styled-components'
6 
import { addNotification } from "../../../redux/notification/notification.actions";
 6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
 7 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
8 
import Spinner from "../../../shared/loading-spinner/Spinner";
 8 
import Spinner from '../../../shared/loading-spinner/Spinner'
Línea 9... Línea 9...
9 
 
 9 
 
10 
const StyledSpinnerContainer = styled.div`
 10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
 11 
  position: absolute;
12 
  left: 0;
 12 
  left: 0;
Línea 16... Línea 16...
16 
  background: rgba(255, 255, 255, 0.4);
 16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
 17 
  display: flex;
18 
  justify-content: center;
 18 
  justify-content: center;
19 
  align-items: center;
 19 
  align-items: center;
20 
  z-index: 300;
 20 
  z-index: 300;
21 
`;
 21 
`
Línea 22... Línea 22...
22 
 
 22 
 
23 
const ChangePassword = (props) => {
 23 
const ChangePassword = (props) => {
24 
  // redux destructuring
 24 
  // redux destructuring
Línea 25... Línea 25...
25 
  const { addNotification } = props;
 25 
  const { addNotification } = props
26 
 
 26 
 
27 
  const {
 27 
  const {
28 
    register,
 28 
    register,
29 
    handleSubmit,
 29 
    handleSubmit,
30 
    getValues,
 30 
    getValues,
31 
    errors,
 31 
    errors,
32 
    reset,
 32 
    reset,
Línea 33... Línea 33...
33 
    formState: { isSubmitSuccessful },
 33 
    formState: { isSubmitSuccessful }
34 
  } = useForm();
 34 
  } = useForm()
Línea 35... Línea 35...
35 
 
 35 
 
36 
  // states
 36 
  // states
37 
  const [loading, setLoading] = useState(false);
 37 
  const [loading, setLoading] = useState(false)
Línea 38... Línea 38...
38 
 
 38 
 
39 
  // Error password message
 39 
  // Error password message
Línea 40... Línea 40...
40 
  const [isErrorPassword, setIsErrorPassword] = useState(false);
 40 
  const [isErrorPassword, setIsErrorPassword] = useState(false)
Línea 41... Línea 41...
41 
  const [isErrorConfirmation, setIsErrorConfirmation] = useState(false);
 41 
  const [isErrorConfirmation, setIsErrorConfirmation] = useState(false)
Línea 42... Línea 42...
42 
 
 42 
 
43 
  const handleOnSubmit = async (data) => {
 43 
  const handleOnSubmit = async (data) => {
44 
    setLoading(true);
 44 
    setLoading(true)
45 
 
 45 
 
46 
    let errorPassword = false;
 46 
    let errorPassword = false
47 
 
 47 
 
48 
    const validPassword = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$');
 48 
    const validPassword = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$')
49 
 
 49 
 
50 
    // se verifica si la clave cumple la expresion regular
 50 
    // se verifica si la clave cumple la expresion regular
Línea 51... Línea 51...
51 
    if (!validPassword.test(data.password)) {
 51 
    if (!validPassword.test(data.password)) {
52 
      setIsErrorPassword(true);
 52 
      setIsErrorPassword(true)
53 
      setTimeout(() => {
 53 
      setTimeout(() => {
54 
        setIsErrorPassword(false);
 54 
        setIsErrorPassword(false)
55 
      }, 10000);
 55 
      }, 10000)
56 
      setLoading(false);
 56 
      setLoading(false)
57 
      errorPassword = true;
 57 
      errorPassword = true
58 
    }
 58 
    }
59 
 
 59 
 
Línea 60... Línea 60...
60 
    // se verifica si las dos claves son identicas
 60 
    // se verifica si las dos claves son identicas
61 
    if (data.password !== data.confirmation) {
 61 
    if (data.password !== data.confirmation) {
62 
      setIsErrorConfirmation(true);
 62 
      setIsErrorConfirmation(true)
63 
      setTimeout(() => {
 63 
      setTimeout(() => {
64 
        setIsErrorConfirmation(false);
 64 
        setIsErrorConfirmation(false)
65 
      }, 10000);
 65 
      }, 10000)
66 
      setLoading(false);
 66 
      setLoading(false)
67 
      errorPassword = true;
 67 
      errorPassword = true
68 
    }
 68 
    }
69 
 
 69 
 
70 
    if (!errorPassword) {
 70 
    if (!errorPassword) {
71 
      const formData = new FormData();
 71 
      const formData = new FormData()
72 
      Object.entries(data).map(([key, value]) => {
 72 
      Object.entries(data).map(([key, value]) => {
73 
        formData.append(key, value);
 73 
        formData.append(key, value)
74 
      });
 74 
      })
75 
      await axios
 75 
      await axios
76 
        .post("/account-settings/password", formData)
 76 
        .post('/account-settings/password', formData)
77 
        .then((response) => {
 77 
        .then((response) => {
78 
          const resData = response.data;
 78 
          const resData = response.data
79 
          if (resData.success) {
 79 
          if (resData.success) {
80 
            addNotification({
 80 
            addNotification({
81 
              style: "success",
 81 
              style: 'success',
82 
              msg: resData.data,
 82 
              msg: resData.data
83 
            });
 83 
            })
84 
          } else {
 84 
          } else {
85 
            if (typeof resData.data === "object") {
 85 
            if (typeof resData.data === 'object') {
86 
              resData.data;
 86 
              resData.data
87 
              Object.entries(resData.data).map(([key, value]) => {
 87 
              Object.entries(resData.data).map(([key, value]) => {
88 
                setError(key, { type: "manual", message: value[0] });
 88 
                setError(key, { type: 'manual', message: value[0] })
89 
              });
 89 
              })
90 
            } else {
 90 
            } else {
91 
              const errorMessage =
 91 
              const errorMessage =
92 
                typeof resData.data === "string"
 92 
                typeof resData.data === 'string'
93 
                  ? resData.data
 93 
                  ? resData.data
Línea 94... Línea 94...
94 
                  : "Ha ocurrido un error, Por favor intente mas tarde";
 94 
                  : 'Ha ocurrido un error, Por favor intente mas tarde'
95 
              addNotification({
 95 
              addNotification({
Línea 96... Línea 96...
96 
                style: "danger",
 96 
                style: 'danger',
97 
                msg: errorMessage,
 97 
                msg: errorMessage
98 
              });
 98 
              })
Línea 99... Línea 99...
99 
            }
 99 
            }
100 
          }
 100 
          }
101 
        });
 101 
        })
102 
      setLoading(false);
 102 
      setLoading(false)
Línea 123... Línea 123...
123 
                  name="password"
 123 
                  name="password"
124 
                  minLength="6"
 124 
                  minLength="6"
125 
                  maxLength="16"
 125 
                  maxLength="16"
126 
                  id="password"
 126 
                  id="password"
127 
                  ref={register({
 127 
                  ref={register({
128 
                    required: "Por favor ingrese la contraseña",
 128 
                    required: 'Por favor ingrese la contraseña'
129 
                  })}
 129 
                  })}
130 
                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
 130 
                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
131 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
 131 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
132 
                />
 132 
                />
133 
                <i className="fa fa-lock"></i>
 133 
                <i className="fa fa-lock"></i>
Línea 145... Línea 145...
145 
                  name="confirmation"
 145 
                  name="confirmation"
146 
                  minLength="6"
 146 
                  minLength="6"
147 
                  maxLength="16"
 147 
                  maxLength="16"
148 
                  id="confirmation"
 148 
                  id="confirmation"
149 
                  ref={register({
 149 
                  ref={register({
150 
                    required: "Por favor ingrese la contraseña",
 150 
                    required: 'Por favor ingrese la contraseña',
151 
                    validate: (value) =>
 151 
                    validate: (value) =>
152 
                      value === getValues("password") ||
 152 
                      value === getValues('password') ||
153 
                      "La contraseña no coincide",
 153 
                      'La contraseña no coincide'
154 
                  })}
 154 
                  })}
155 
                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
 155 
                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
156 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
 156 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
157 
                />
 157 
                />
158 
                <i className="fa fa-lock"></i>
 158 
                <i className="fa fa-lock"></i>
Línea 179... Línea 179...
179 
        <StyledSpinnerContainer>
 179 
        <StyledSpinnerContainer>
180 
          <Spinner />
 180 
          <Spinner />
181 
        </StyledSpinnerContainer>
 181 
        </StyledSpinnerContainer>
182 
      }
 182 
      }
183 
    </div >
 183 
    </div >
184 
  );
 184 
  )
185 
};
 185 
}
Línea 186... Línea 186...
186 
 
 186 
 
187 
const mapDispatchToProps = {
 187 
const mapDispatchToProps = {
188 
  addNotification: (notification) => addNotification(notification),
 188 
  addNotification: (notification) => addNotification(notification)
Línea 189... Línea 189...
189 
};
 189 
}