142 lines
4.5 KiB
JavaScript
142 lines
4.5 KiB
JavaScript
import Pristine from 'pristinejs'
|
|
import { useEffect, useState } from 'react'
|
|
import { UserIcon, EyeIcon, EyeSlashIcon, KeyIcon } from '@heroicons/react/24/solid'
|
|
import functions from 'v-functions'
|
|
import useI18n from '@/hooks/useI18n'
|
|
import presets from '@/utils/globalPresets'
|
|
import useHasMounted from '@/hooks/useHasMounted'
|
|
|
|
let validateLogin = null
|
|
|
|
const FormLogin = ({ onLogin }) => {
|
|
const i18n = useI18n()
|
|
const hasMounted = useHasMounted()
|
|
const [viewPassword, setViewPassword] = useState(false)
|
|
const [isInputValid, setIsInputValid] = useState(false)
|
|
|
|
const validate = (event) => {
|
|
if (event) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
if (validateLogin && validateLogin !== null) {
|
|
const resulValidate = validateLogin.validate()
|
|
setIsInputValid(resulValidate)
|
|
}
|
|
}
|
|
|
|
const doLogin = (event) => {
|
|
if (event) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
if (isInputValid === true) {
|
|
const emailLogin = document.getElementById('usuario')
|
|
const passwordLogin = document.getElementById('clave')
|
|
const datos = {
|
|
email: functions.toUpperCaseAndTrim(emailLogin.value),
|
|
password: functions.trim(passwordLogin.value)
|
|
}
|
|
setIsInputValid(false) // para prevenir doble click
|
|
onLogin(datos)
|
|
}
|
|
}
|
|
|
|
// when page is mounted
|
|
useEffect(() => {
|
|
if (hasMounted) {
|
|
const helem = document.getElementById('frmLogin')
|
|
validateLogin = new Pristine(helem, presets.pristine, false)
|
|
const helemUsuario = document.getElementById('usuario')
|
|
helemUsuario.focus()
|
|
}
|
|
}, [hasMounted])
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (event) => {
|
|
if (event.key === 'Enter') {
|
|
validate(event)
|
|
if (isInputValid === true) {
|
|
doLogin(event)
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => {
|
|
document.removeEventListener('keydown', handleKeyDown)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<form id="frmLogin" name="frmLogin" method="post" onSubmit={(event) => doLogin(event)} noValidate >
|
|
<div className="flex w-full flex-col space-y-4 px-4 ">
|
|
<div className="form-group flex flex-col">
|
|
<div className="via-label">
|
|
{ i18n.t('login.user') }
|
|
<div className="inline-flex font-semibold text-red-500">(*)</div>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<input
|
|
id="usuario"
|
|
name="usuario"
|
|
required
|
|
placeholder=" "
|
|
type="email"
|
|
data-pristine-required-message={i18n.t('login.validacion_correo')}
|
|
className={'via-input'}
|
|
onChange={(e) => { validate(e) }}
|
|
/>
|
|
<button
|
|
className={'via-append-input'}
|
|
onClick={(e) => { e.stopPropagation() }}
|
|
disabled
|
|
>
|
|
<UserIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="form-group flex flex-col">
|
|
<div className={'via-label'}>
|
|
{ i18n.t('login.password') }
|
|
<div className="inline-flex font-semibold text-red-500">(*)</div>
|
|
</div>
|
|
<div className="relative w-full">
|
|
<input
|
|
id="clave"
|
|
name="clave"
|
|
required
|
|
placeholder=" "
|
|
type={viewPassword === false ? 'password' : 'text'}
|
|
data-pristine-required-message={i18n.t('login.validacion_password')}
|
|
className={'via-input'}
|
|
onChange={(e) => { validate(e) }}
|
|
/>
|
|
<button
|
|
className={'via-append-input'}
|
|
onClick={(e) => { e.stopPropagation(); e.preventDefault(); setViewPassword(!viewPassword) }}
|
|
>
|
|
{ viewPassword === false && <EyeIcon className="h-5 w-5" /> }
|
|
{ viewPassword === true && <EyeSlashIcon className="h-5 w-5" /> }
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={'via-div-actions'}>
|
|
<button
|
|
type="submit"
|
|
disabled={!isInputValid}
|
|
className={`${'via-button'} ${(isInputValid ? 'bg-cyan-900' : 'bg-red-400')} mx-0 w-full justify-center`}
|
|
>
|
|
<KeyIcon className="h-5 w-5 pr-2" />
|
|
{ i18n.t('login.connect') }
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default FormLogin
|