Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useState, useEffect } from 'react'
import { axios } from '../../../utils'
import { useForm } from 'react-hook-form'
import { useDispatch, useSelector } from 'react-redux'
import Recaptcha from 'react-recaptcha'
import cryptoJsAesJson from '../../../utils/crypto-js/cryptojs-aes-format'

import { login } from '../../../redux/auth/auth.actions'
import { addNotification } from '../../../redux/notification/notification.actions'

import Spinner from '../../../components/UI/Spinner'
import FormErrorFeedback from '../../../components/UI/FormErrorFeedback'

const Login = ({
  facebookOauth = '/signin/facebook',
  twitterOauth = '/signin/twitter',
  googleOauth = '/signin/google',
}) => {
  const { site_key, aes, access_usign_social_networks } = useSelector(
    ({ auth }) => auth
  )
  const [rememberChecked, setRememberChecked] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [isVerified, setIsVerified] = useState(false)

  const reCaptchaToken = useRef('')
  const reCaptchaInstance = useRef(null)

  const dispatch = useDispatch()

  const {
    register,
    handleSubmit,
    errors,
    setError,
    getValues,
    setValue,
    reset,
  } = useForm({ mode: 'onBlur' })

  useEffect(() => {
    reCaptchaInstance.current?.reset()
  }, [])

  const onSubmitHandler = async (data, event) => {
    const formData = new FormData()
    Object.entries(data).map(([key, value]) => {
      if (key === 'email' && value)
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes))
      if (key === 'password' && value)
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes))
      if (value) formData.append(key, value)
    })
    formData.append('captcha', reCaptchaToken.current)
    await axios
      .post('/signin', formData)
      .then(({ data: response }) => {
        const { success, data } = response
        if (!success) {
          if (data.constructor.name === 'Object') {
            Object.entries(data).map(([key, value]) => {
              if (key in getValues()) {
                setError(key, {
                  type: 'manual',
                  message: Array.isArray(value) ? value[0] : value,
                })
              }
            })
            return
          }
          dispatch(addNotification({ style: 'danger', msg: data }))
          return
        }

        reCaptchaInstance.current.reset()
        loginExpiredCallbackHandler()
        reset()
        dispatch(login())
        // window.location.replace('/dashboard')
      })
      .catch((err) => {
        reCaptchaInstance.current.reset()
        loginExpiredCallbackHandler()
        setValue('password', '')

        dispatch(
          addNotification({
            style: 'danger',
            msg: 'Disculpe, ha ocurrido un error',
          })
        )
        console.log(`Error: ${err}`)
        throw new Error(err)
      })
      .finally(() => setIsLoading(false))
  }

  const loginVerifyCallbackHandler = (response) => {
    reCaptchaToken.current = response
    setIsVerified(true)
  }

  const loginExpiredCallbackHandler = () => {
    reCaptchaToken.current = ''
    setIsVerified(false)
  }

  const handleOnRecaptchaLoad = () => {
    reCaptchaToken.current = ''
  }

  const getRedirectUrl = async (endpoint) => {
    try {
      const res = await axios.get(endpoint)
      if (res.data && res.data.data) {
        window.location.href = res.data.data
      }
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  return (
    <>
      <h3>Entrar</h3>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <div className="inputContainer">
          <div className="sn-field">
            <input
              type="email"
              name="email"
              ref={register({
                required: 'Este campo es requerido',
                pattern: {
                  value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
                  message:
                    'Debe ser una dirección de correo electrónico valida',
                },
              })}
              placeholder="Correo electrónico"
              maxLength="64"
            />
            <i className="la la-envelope" />
          </div>
          {errors.email && (
            <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
          )}
        </div>
        <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 #?!@$^%*-',
                },
              })}
              placeholder="Clave"
            />
            <i className="la la-lock"></i>
          </div>
          {errors.password && (
            <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
          )}
        </div>
        <div className="checky-sec">
          <div className="fgt-sec">
            <input
              type="checkbox"
              name="remember"
              id="remember"
              checked={rememberChecked}
              ref={register}
              value="1"
              readOnly
            />
            <label onClick={() => setRememberChecked(!rememberChecked)}>
              <span></span>
            </label>
            <small onClick={() => setRememberChecked(!rememberChecked)}>
              Recuerdame
            </small>
          </div>
        </div>
        <div className="sn-field">
          {site_key && (
            <Recaptcha
              sitekey={site_key}
              verifyCallback={loginVerifyCallbackHandler}
              verifyCallbackName="loginVerifyCallbackHandler"
              expiredCallback={loginExpiredCallbackHandler}
              expiredCallbackName="loginExpiredCallbackHandler"
              ref={reCaptchaInstance}
              render="explicit"
              onloadCallback={handleOnRecaptchaLoad}
              hl="es"
            />
          )}
        </div>
        <button
          type="submit"
          value="submit"
          id="btn-submit"
          disabled={!isVerified}
        >
          Entrar
        </button>
      </form>
      {access_usign_social_networks === 'y' && (
        <div className="login-resources">
          <h4>Entrar usando su red social</h4>
          <ul>
            <li>
              <a
                onClick={() => getRedirectUrl(facebookOauth)}
                className="cursor-pointer fb text-white"
                title=""
              >
                <i className="fa fa-facebook"></i> FACEBOOK
              </a>
            </li>
            <li>
              <a
                onClick={() => getRedirectUrl(twitterOauth)}
                className="cursor-pointer tw btn-connect-social-media text-white"
                title=""
              >
                <i className="fa fa-twitter"></i> TWITTER
              </a>
            </li>
            <li className="bg-secondary">
              <a
                onClick={() => getRedirectUrl(googleOauth)}
                className="cursor-pointer go btn-connect-social-media text-white"
                title=""
              >
                <i className="fa fa-google"></i> GOOGLE
              </a>
            </li>
          </ul>
        </div>
      )}
      {isLoading && <Spinner />}
    </>
  )
}

export default Login