Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'

import { useForm } from 'react-hook-form'

import { connect } from 'react-redux'

import { styled } from '@mui/material'

import { axios } from 'utils'

import { addNotification } from '@app/redux/notification/notification.actions'

import Spinner from '@components/UI/Spinner'

import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'

const StyledSpinnerContainer = styled('div')`

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 300;

`

const ChangePassword = ({ addNotification }) => {

  const [loading, setLoading] = useState(false)

  const [isErrorPassword, setIsErrorPassword] = useState(false)

  const [isErrorConfirmation, setIsErrorConfirmation] = useState(false)

  const {

    register,

    handleSubmit,

    getValues,

    reset,

    setError,

    formState: { isSubmitSuccessful, errors }

  } = useForm()

  const handleOnSubmit = async (data) => {

    setLoading(true)

    let errorPassword = false

    const validPassword =

      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/

    if (!validPassword.test(data.password)) {

      setIsErrorPassword(true)

      setTimeout(() => {

        setIsErrorPassword(false)

      }, 10000)

      setLoading(false)

      errorPassword = true

    }

    if (data.password !== data.confirmation) {

      setIsErrorConfirmation(true)

      setTimeout(() => {

        setIsErrorConfirmation(false)

      }, 10000)

      setLoading(false)

      errorPassword = true

    }

    if (!errorPassword) {

      const formData = new FormData()

      Object.entries(data).forEach(([key, value]) => {

        formData.append(key, value)

      })

      await axios

        .post('/account-settings/password', formData)

        .then((response) => {

          const resData = response.data

          if (resData.success) {

            addNotification({

              style: 'success',

              msg: resData.data

            })

          } else {

            if (typeof resData.data === 'object') {

              Object.entries(resData.data).forEach(([key, value]) => {

                setError(key, { type: 'manual', message: value[0] })

              })

            } else {

              const errorMessage =

                typeof resData.data === 'string'

                  ? resData.data

                  : 'Ha ocurrido un error, Por favor intente mas tarde'

              addNotification({

                style: 'danger',

                msg: errorMessage

              })

            }

          }

        })

      setLoading(false)

    }

    errorPassword = false

  }

  useEffect(() => {

    reset({ ...getValues })

  }, [isSubmitSuccessful])

  return (

    <div className='settings-container'>

      <h2>Cambiar clave</h2>

      <div className='acc-setting_content'>

        <form onSubmit={handleSubmit(handleOnSubmit)}>

          <div className='d-flex flex-wrap' style={{ gap: '1rem' }}>

            <div className='cp-field'>

              <label htmlFor='password'>Clave</label>

              <div className='cpp-fiel'>

                <input

                  type='password'

                  name='password'

                  minLength='6'

                  maxLength='16'

                  id='password'

                  ref={register({

                    required: 'Por favor ingrese la contraseña'

                  })}

                  pattern='^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$'

                  title='La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'

                />

                <i className='fa fa-lock'></i>

              </div>

              {isErrorPassword && (

                <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>

              )}

              {

                <FormErrorFeedback>

                  {errors?.password?.message}

                </FormErrorFeedback>

              }

            </div>

            <div className='cp-field'>

              <label htmlFor='confirmation'>Confirmación</label>

              <div className='cpp-fiel'>

                <input

                  type='password'

                  name='confirmation'

                  minLength='6'

                  maxLength='16'

                  id='confirmation'

                  ref={register({

                    required: 'Por favor ingrese la contraseña',

                    validate: (value) =>

                      value === getValues('password') ||

                      'La contraseña no coincide'

                  })}

                  pattern='^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$'

                  title='La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'

                />

                <i className='fa fa-lock'></i>

              </div>

              {isErrorConfirmation && (

                <p className='text-danger'>

                  Disculpe, las claves tienen que coincidir

                </p>

              )}

              {

                <FormErrorFeedback>

                  {errors?.confirmation?.message}

                </FormErrorFeedback>

              }

            </div>

          </div>

          <div className='pt-4 d-flex align-items-center justify-content-center'>

            <button type='submit' className='btn btn-secondary'>

              Guardar

            </button>

          </div>

        </form>

      </div>

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </div>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

}

export default connect(null, mapDispatchToProps)(ChangePassword)