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