3263 |
stevensc |
1 |
import React from 'react'
|
|
|
2 |
import { useNavigate, Link } from 'react-router-dom'
|
|
|
3 |
import { useDispatch, useSelector } from 'react-redux'
|
|
|
4 |
import { Controller, useForm } from 'react-hook-form'
|
|
|
5 |
import { Button, Typography } from '@mui/material'
|
|
|
6 |
import { Mail, Lock } from '@mui/icons-material'
|
|
|
7 |
|
|
|
8 |
import { useMobile } from '@hooks'
|
|
|
9 |
import { asyncLogin } from '@store/auth/auth.actions'
|
|
|
10 |
import { addNotification } from '@store/notification/notification.actions'
|
|
|
11 |
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format'
|
|
|
12 |
|
|
|
13 |
import Captcha from './captcha'
|
|
|
14 |
import Form from '@components/common/form'
|
|
|
15 |
import Input from '@components/UI/inputs/Input'
|
|
|
16 |
import CheckboxInput from '@components/UI/inputs/Checkbox'
|
|
|
17 |
import LoadingWrapper from '@components/common/loading-wrapper'
|
|
|
18 |
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'
|
|
|
19 |
import Row from '@components/common/Row'
|
|
|
20 |
|
|
|
21 |
export default function LoginForm() {
|
|
|
22 |
const navigate = useNavigate()
|
|
|
23 |
const dispatch = useDispatch()
|
|
|
24 |
|
|
|
25 |
const aes = useSelector((state) => state.auth.aes)
|
|
|
26 |
const isMobile = useMobile()
|
|
|
27 |
|
|
|
28 |
const {
|
|
|
29 |
formState: { errors, isSubmitting, isValid },
|
|
|
30 |
control,
|
|
|
31 |
handleSubmit,
|
|
|
32 |
reset
|
|
|
33 |
} = useForm({ mode: 'all' })
|
|
|
34 |
|
|
|
35 |
const onSubmitHandler = handleSubmit(
|
|
|
36 |
async ({ email, password, remember, token }) => {
|
|
|
37 |
try {
|
|
|
38 |
const response = await dispatch(
|
|
|
39 |
asyncLogin({
|
|
|
40 |
email: CryptoJSAesJson.encrypt(email, aes),
|
|
|
41 |
password: CryptoJSAesJson.encrypt(password, aes),
|
|
|
42 |
captcha: token,
|
|
|
43 |
remember: remember ? 1 : 0
|
|
|
44 |
})
|
|
|
45 |
)
|
|
|
46 |
reset()
|
|
|
47 |
|
|
|
48 |
isMobile ? navigate('/apps-navigation') : navigate(response.redirect)
|
|
|
49 |
} catch (error) {
|
|
|
50 |
dispatch(addNotification({ style: 'danger', msg: error.message }))
|
|
|
51 |
}
|
|
|
52 |
}
|
|
|
53 |
)
|
|
|
54 |
|
|
|
55 |
return (
|
|
|
56 |
<Form onSubmit={onSubmitHandler}>
|
|
|
57 |
<LoadingWrapper loading={isSubmitting} displayChildren></LoadingWrapper>
|
|
|
58 |
|
|
|
59 |
<Typography variant='h3'>Entrar</Typography>
|
|
|
60 |
|
|
|
61 |
<Input
|
|
|
62 |
type='email'
|
|
|
63 |
name='email'
|
|
|
64 |
icon={<Mail />}
|
|
|
65 |
placeholder='Correo electrónico'
|
|
|
66 |
rules={{
|
|
|
67 |
required: 'Este campo es requerido',
|
|
|
68 |
pattern: {
|
|
|
69 |
value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,}$/i,
|
|
|
70 |
message: 'Debe ser una dirección de correo electrónico valida'
|
|
|
71 |
},
|
|
|
72 |
maxLength: {
|
|
|
73 |
value: 64,
|
|
|
74 |
message: 'Debe ser menor a 64 caracteres'
|
|
|
75 |
}
|
|
|
76 |
}}
|
|
|
77 |
control={control}
|
|
|
78 |
error={errors.email?.message}
|
|
|
79 |
/>
|
|
|
80 |
|
|
|
81 |
<Input
|
|
|
82 |
type='password'
|
|
|
83 |
name='password'
|
|
|
84 |
icon={<Lock />}
|
|
|
85 |
placeholder='Clave'
|
|
|
86 |
control={control}
|
|
|
87 |
rules={{
|
|
|
88 |
required: 'Este campo es requerido',
|
|
|
89 |
pattern: {
|
|
|
90 |
value:
|
|
|
91 |
/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
|
|
|
92 |
message:
|
|
|
93 |
'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
|
|
|
94 |
}
|
|
|
95 |
}}
|
|
|
96 |
error={errors.password?.message}
|
|
|
97 |
/>
|
|
|
98 |
|
|
|
99 |
<CheckboxInput control={control} name='remember' label='Recuerdame' />
|
|
|
100 |
|
|
|
101 |
<Controller
|
|
|
102 |
name='captcha'
|
|
|
103 |
rules={{ required: 'Este campo es requerido' }}
|
|
|
104 |
control={control}
|
|
|
105 |
render={({ field: { ref, onChange } }) => (
|
|
|
106 |
<>
|
|
|
107 |
<Captcha instanceRef={ref} onVerify={onChange} />
|
|
|
108 |
{errors.captcha && (
|
|
|
109 |
<FormErrorFeedback>{errors.captcha.message}</FormErrorFeedback>
|
|
|
110 |
)}
|
|
|
111 |
</>
|
|
|
112 |
)}
|
|
|
113 |
/>
|
|
|
114 |
|
|
|
115 |
<Row>
|
|
|
116 |
<Link to='/forgot-password'>¿Has olvidado tu contraseña?</Link>
|
|
|
117 |
<Link to='/signup'>¿No tienes cuenta?</Link>
|
|
|
118 |
</Row>
|
|
|
119 |
|
|
|
120 |
<Button color='secondary' type='submit' disabled={!isValid}>
|
|
|
121 |
Entrar
|
|
|
122 |
</Button>
|
|
|
123 |
</Form>
|
|
|
124 |
)
|
|
|
125 |
}
|