Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2760 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5130 stevensc 1 
import { axios } from '../../../utils'
2 
import React, { useEffect, useState } from 'react'
3 
import { useForm } from 'react-hook-form'
4 
import { connect } from 'react-redux'
5 
import styled from 'styled-components'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
8 
import Spinner from '../../../shared/loading-spinner/Spinner'
1 www 9 
 
10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
12 
  left: 0;
13 
  top: 0;
14 
  width: 100%;
15 
  height: 100%;
16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
18 
  justify-content: center;
19 
  align-items: center;
20 
  z-index: 300;
5130 stevensc 21 
`
1 www 22 
 
23 
const ChangePassword = (props) => {
24 
  // redux destructuring
5130 stevensc 25 
  const { addNotification } = props
1 www 26 
 
27 
  const {
28 
    register,
29 
    handleSubmit,
30 
    getValues,
31 
    errors,
32 
    reset,
5130 stevensc 33 
    formState: { isSubmitSuccessful }
34 
  } = useForm()
1 www 35 
 
36 
  // states
5130 stevensc 37 
  const [loading, setLoading] = useState(false)
1 www 38 
 
39 
  // Error password message
5130 stevensc 40 
  const [isErrorPassword, setIsErrorPassword] = useState(false)
41 
  const [isErrorConfirmation, setIsErrorConfirmation] = useState(false)
1 www 42 
 
43 
  const handleOnSubmit = async (data) => {
5130 stevensc 44 
    setLoading(true)
1 www 45 
 
5130 stevensc 46 
    let errorPassword = false
1 www 47 
 
5130 stevensc 48 
    const validPassword = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$')
2633 stevensc 49 
 
1 www 50 
    // se verifica si la clave cumple la expresion regular
51 
    if (!validPassword.test(data.password)) {
5130 stevensc 52 
      setIsErrorPassword(true)
1 www 53 
      setTimeout(() => {
5130 stevensc 54 
        setIsErrorPassword(false)
55 
      }, 10000)
56 
      setLoading(false)
57 
      errorPassword = true
1 www 58 
    }
59 
 
60 
    // se verifica si las dos claves son identicas
61 
    if (data.password !== data.confirmation) {
5130 stevensc 62 
      setIsErrorConfirmation(true)
1 www 63 
      setTimeout(() => {
5130 stevensc 64 
        setIsErrorConfirmation(false)
65 
      }, 10000)
66 
      setLoading(false)
67 
      errorPassword = true
1 www 68 
    }
2633 stevensc 69 
 
70 
    if (!errorPassword) {
5130 stevensc 71 
      const formData = new FormData()
1 www 72 
      Object.entries(data).map(([key, value]) => {
5130 stevensc 73 
        formData.append(key, value)
74 
      })
1 www 75 
      await axios
5130 stevensc 76 
        .post('/account-settings/password', formData)
1 www 77 
        .then((response) => {
5130 stevensc 78 
          const resData = response.data
1 www 79 
          if (resData.success) {
80 
            addNotification({
5130 stevensc 81 
              style: 'success',
82 
              msg: resData.data
83 
            })
1 www 84 
          } else {
5130 stevensc 85 
            if (typeof resData.data === 'object') {
86 
              resData.data
1 www 87 
              Object.entries(resData.data).map(([key, value]) => {
5130 stevensc 88 
                setError(key, { type: 'manual', message: value[0] })
89 
              })
1 www 90 
            } else {
91 
              const errorMessage =
5130 stevensc 92 
                typeof resData.data === 'string'
1 www 93 
                  ? resData.data
5130 stevensc 94 
                  : 'Ha ocurrido un error, Por favor intente mas tarde'
1 www 95 
              addNotification({
5130 stevensc 96 
                style: 'danger',
97 
                msg: errorMessage
98 
              })
1 www 99 
            }
100 
          }
5130 stevensc 101 
        })
102 
      setLoading(false)
1 www 103 
    }
2633 stevensc 104 
 
5130 stevensc 105 
    errorPassword = false
106 
  }
1 www 107 
 
108 
  useEffect(() => {
5130 stevensc 109 
    reset({ ...getValues })
110 
  }, [isSubmitSuccessful])
1 www 111 
 
112 
  return (
2633 stevensc 113 
    <div className="settings-container">
114 
      <h2>Cambiar clave</h2>
2634 stevensc 115 
      <div className="acc-setting_content">
116 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
2643 stevensc 117 
          <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
2636 stevensc 118 
            <div className="cp-field">
119 
              <label htmlFor="password">Clave</label>
120 
              <div className="cpp-fiel">
121 
                <input
122 
                  type="password"
123 
                  name="password"
124 
                  minLength="6"
125 
                  maxLength="16"
126 
                  id="password"
127 
                  ref={register({
5130 stevensc 128 
                    required: 'Por favor ingrese la contraseña'
2636 stevensc 129 
                  })}
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 #?!@$^%*-"
132 
                />
133 
                <i className="fa fa-lock"></i>
134 
              </div>
135 
              {isErrorPassword && (
136 
                <p className="text-danger">Disculpe, La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-</p>
137 
              )}
138 
              {<FormErrorFeedback>{errors?.password?.message}</FormErrorFeedback>}
2634 stevensc 139 
            </div>
2636 stevensc 140 
            <div className="cp-field">
141 
              <label htmlFor="confirmation">Confirmación</label>
142 
              <div className="cpp-fiel">
143 
                <input
144 
                  type="password"
145 
                  name="confirmation"
146 
                  minLength="6"
147 
                  maxLength="16"
148 
                  id="confirmation"
149 
                  ref={register({
5130 stevensc 150 
                    required: 'Por favor ingrese la contraseña',
2636 stevensc 151 
                    validate: (value) =>
5130 stevensc 152 
                      value === getValues('password') ||
153 
                      'La contraseña no coincide'
2636 stevensc 154 
                  })}
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 #?!@$^%*-"
157 
                />
158 
                <i className="fa fa-lock"></i>
159 
              </div>
2760 stevensc 160 
              {isErrorConfirmation &&
2636 stevensc 161 
                <p className="text-danger">Disculpe, las claves tienen que coincidir</p>
2760 stevensc 162 
              }
2636 stevensc 163 
              {
164 
                <FormErrorFeedback>
165 
                  {errors?.confirmation?.message}
166 
                </FormErrorFeedback>
167 
              }
2634 stevensc 168 
            </div>
1 www 169 
          </div>
2639 stevensc 170 
          <div className="pt-4 d-flex align-items-center justify-content-center">
2637 stevensc 171 
            <button type="submit" className="btn btn-secondary">
172 
              Guardar
173 
            </button>
174 
          </div>
2634 stevensc 175 
        </form>
176 
      </div>
2637 stevensc 177 
      {
178 
        loading &&
1 www 179 
        <StyledSpinnerContainer>
2636 stevensc 180 
          <Spinner />
1 www 181 
        </StyledSpinnerContainer>
2636 stevensc 182 
      }
2637 stevensc 183 
    </div >
5130 stevensc 184 
  )
185 
}
1 www 186 
 
187 
const mapDispatchToProps = {
5130 stevensc 188 
  addNotification: (notification) => addNotification(notification)
189 
}
1 www 190 
 
5130 stevensc 191 
export default connect(null, mapDispatchToProps)(ChangePassword)