Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

import Recaptcha from 'react-recaptcha'

import { axios } from '../../../utils'

import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'

import CryptoJSAesJson from '../../../utils/crypto-js/cryptojs-aes-format'

import { useSelector } from 'react-redux'

const ResetPassword = () => {

  const { site_key, aes } = useSelector(({ auth }) => auth)

  const { register, handleSubmit, errors, setError, watch } = useForm({

    mode: 'all',

  })

  const reCaptchaToken = useRef('')

  const [isVerified, setIsVerified] = useState(false)

  const reCaptchaInstance = useRef()

  const loginVerifyCallbackHandler = (response) => {

    reCaptchaToken.current = response

    setIsVerified(true)

  }

  const loginExpiredCallbackHandler = () => {

    reCaptchaToken.current = ''

    setIsVerified(false)

  }

  const handleOnRecaptchaLoad = () => {

    reCaptchaToken.current = ''

  }

  const resetCaptcha = () => {

    reCaptchaInstance.current?.reset()

  }

  useEffect(() => {

    resetCaptcha()

  }, [])

  const submit = (data) => {

    const formData = new FormData()

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

      (key === 'confirmation' || key === 'password') && value

        ? formData.append(key, CryptoJSAesJson.encrypt(value, aes))

        : formData.append(key, value)

    )

    formData.append('captcha', reCaptchaToken.current)

    axios

      .post(window.location.href, formData)

      .then(({ data: response }) => {

        const { data, success } = response

        if (!success) {

          setError('password', {

            type: 'manual',

            message: typeof data === 'string' ? data : data.confirmation[0],

          })

          return

        }

        window.location.href = '/'

      })

      .catch((err) => {

        console.log('Error: ', err)

        throw new Error(err)

      })

      .finally(() => {

        formData.append('captcha', reCaptchaToken.current)

        resetCaptcha()

      })

  }

  return (

    <div className="sign_in_sec current">

      <div className="row">

        <div className="col-lg-12">

          <div className="login-sec">

            <div className="sign_in_sec current" id="tab-1">

              <h3>Reiniciar clave</h3>

              <form onSubmit={handleSubmit(submit)}>

                <div className="row">

                  <div className="col-lg-12 no-pdd">

                    <div className="inputContainer">

                      <div className="sn-field">

                        <input

                          type="password"

                          name="password"

                          ref={register({

                            required: 'Este campo es requerido',

                            pattern: {

                              value:

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

                              message:

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

                            },

                          })}

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

                          placeholder="Nueva clave"

                        />

                        <i className="la la-lock" />

                      </div>

                      {errors.password && (

                        <FormErrorFeedback>

                          {errors.password.message}

                        </FormErrorFeedback>

                      )}

                    </div>

                  </div>

                  <div className="col-lg-12 no-pdd">

                    <div className="inputContainer">

                      <div className="sn-field">

                        <input

                          type="password"

                          name="confirmation"

                          ref={register({

                            required: 'Este campo es requerido',

                            validate: (v) =>

                              v === watch('password') ||

                              'Disculpe, las claves tienen que coincidir',

                          })}

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

                          placeholder="Repita nueva clave"

                        />

                        <i className="la la-lock" />

                      </div>

                      {errors.confirmation && (

                        <FormErrorFeedback>

                          {errors.confirmation.message}

                        </FormErrorFeedback>

                      )}

                    </div>

                  </div>

                  <div className="col-lg-12 no-pdd">

                    <div className="sn-field">

                      <Recaptcha

                        sitekey={site_key}

                        verifyCallback={loginVerifyCallbackHandler}

                        verifyCallbackName="loginVerifyCallbackHandler"

                        expiredCallback={loginExpiredCallbackHandler}

                        expiredCallbackName="loginExpiredCallbackHandler"

                        ref={reCaptchaInstance}

                        render="explicit"

                        onloadCallback={handleOnRecaptchaLoad}

                        hl="es"

                      />

                    </div>

                  </div>

                  <div className="col-lg-12 no-pdd">

                    <button

                      type="submit"

                      value="submit"

                      id="btn-submit"

                      disabled={!isVerified}

                    >

                      Guardar

                    </button>

                  </div>

                </div>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

  )

}

export default ResetPassword