Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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

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

import Recaptcha from 'react-recaptcha'

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

import Spinner from '../../../../shared/loading-spinner/Spinner'

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

const Login = ({

  site_key,

  facebookOauth,

  twitterOauth,

  googleOauth,

  aes,

  defaultNetwork,

}) => {

  const [rememberChecked, setRememberChecked] = useState(false)

  const [isLoading, setIsLoading] = useState(false)

  const [isVerified, setIsVerified] = useState(false)

  const reCaptchaToken = useRef('')

  const reCaptchaInstance = useRef()

  const { register, handleSubmit, errors, setError, getValues, setValue } =

    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

          }

          addNotification({ style: 'danger', msg: data })

          return

        }

        window.location.replace(data)

        event.target.reset()

      })

      .catch((err) => console.log(`Error: ${err}`))

      .finally(() => setIsLoading(false))

    reCaptchaInstance.current.reset()

    loginExpiredCallbackHandler()

    setValue('password', '')

  }

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

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

      {defaultNetwork && (

        <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