Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3405 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3405 Rev 3694
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { useNavigate, Link } from 'react-router-dom'
 2 
import { useNavigate, Link } from 'react-router-dom';
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux';
4 
import { Controller, useForm } from 'react-hook-form'
 4 
import { Controller, useForm } from 'react-hook-form';
5 
import { Button, Typography } from '@mui/material'
 5 
import { Button, Typography } from '@mui/material';
- 
 
 6 
import Mail from '@mui/icons-material/Mail';
6 
import { Mail, Lock } from '@mui/icons-material'
 7 
import Lock from '@mui/icons-material/Lock';
7 
 
 8 
 
8 
import { useMobile } from '@hooks'
 9 
import { useMobile } from '@hooks';
9 
import { asyncLogin } from '@store/auth/auth.actions'
 10 
import { asyncLogin } from '@store/auth/auth.actions';
10 
import { addNotification } from '@store/notification/notification.actions'
 11 
import { addNotification } from '@store/notification/notification.actions';
11 
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format'
 12 
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format';
12 
 
 13 
 
13 
import Captcha from './captcha'
 14 
import Captcha from './captcha';
14 
import Row from '@components/common/Row'
 15 
import Row from '@components/common/Row';
15 
import Form from '@components/common/form'
 16 
import Form from '@components/common/form';
16 
import Input from '@components/UI/inputs/Input'
 17 
import Input from '@components/UI/inputs/Input';
17 
import CheckboxInput from '@components/UI/inputs/Checkbox'
 18 
import CheckboxInput from '@components/UI/inputs/Checkbox';
18 
import LoadingWrapper from '@components/common/loading-wrapper'
 19 
import LoadingWrapper from '@components/common/loading-wrapper';
19 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'
 20 
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
Línea 20... Línea 21...
20 
 
 21 
 
21 
export default function LoginForm() {
 22 
export default function LoginForm() {
22 
  const navigate = useNavigate()
 23 
  const navigate = useNavigate();
Línea 23... Línea 24...
23 
  const dispatch = useDispatch()
 24 
  const dispatch = useDispatch();
24 
 
 25 
 
Línea 25... Línea 26...
25 
  const { aes, jwt } = useSelector((state) => state.auth)
 26 
  const { aes } = useSelector((state) => state.auth);
26 
  const isMobile = useMobile()
 27 
  const isMobile = useMobile();
27 
 
 28 
 
28 
  const {
 29 
  const {
29 
    formState: { errors, isSubmitting, isValid },
 30 
    formState: { errors, isSubmitting, isValid },
30 
    control,
 31 
    control,
Línea 31... Línea -...
31 
    handleSubmit,
 - 
 
32 
    reset
 32 
    handleSubmit,
33 
  } = useForm({ mode: 'all' })
 33 
    reset
34 
 
 34 
  } = useForm({ mode: 'all' });
35 
  const onSubmitHandler = handleSubmit(
 35 
 
36 
    async ({ email, password, remember, captcha }) => {
 36 
  const onSubmitHandler = handleSubmit(async ({ email, password, remember, captcha }) => {
37 
      try {
 37 
    try {
38 
        const response = await dispatch(
 38 
      const response = await dispatch(
39 
          asyncLogin({
 39 
        asyncLogin({
40 
            email: CryptoJSAesJson.encrypt(email, aes),
 40 
          email: CryptoJSAesJson.encrypt(email, aes),
41 
            password: CryptoJSAesJson.encrypt(password, aes),
 41 
          password: CryptoJSAesJson.encrypt(password, aes),
42 
            captcha,
 42 
          captcha,
43 
            remember: remember ? 1 : 0
 43 
          remember: remember ? 1 : 0
44 
          })
 44 
        })
45 
        )
 45 
      );
46 
        reset()
 46 
      reset();
47 
 
 - 
 
48 
        isMobile ? navigate('/apps-navigation') : navigate(response.redirect)
 47 
 
49 
      } catch (error) {
 48 
      isMobile ? navigate('/apps-navigation') : navigate(response.redirect);
Línea 50... Línea 49...
50 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 49 
    } catch (error) {
51 
      }
 50 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
52 
    }
 51 
    }
Línea 85... Línea 84...
85 
        placeholder='Clave'
 84 
        placeholder='Clave'
86 
        control={control}
 85 
        control={control}
87 
        rules={{
 86 
        rules={{
88 
          required: 'Este campo es requerido',
 87 
          required: 'Este campo es requerido',
89 
          pattern: {
 88 
          pattern: {
90 
            value:
 - 
 
91 
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
 89 
            value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
92 
            message:
 90 
            message:
93 
              'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
 91 
              'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
94 
          }
 92 
          }
95 
        }}
 93 
        }}
96 
        error={errors.password?.message}
 94 
        error={errors.password?.message}
Línea 102... Línea 100...
102 
        name='captcha'
 100 
        name='captcha'
103 
        rules={{ required: 'Este campo es requerido' }}
 101 
        rules={{ required: 'Este campo es requerido' }}
104 
        control={control}
 102 
        control={control}
105 
        render={({ field: { ref, onChange } }) => (
 103 
        render={({ field: { ref, onChange } }) => (
106 
          <>
 104 
          <>
107 
            <Captcha
 - 
 
108 
              instanceRef={ref}
 - 
 
109 
              onVerify={onChange}
 - 
 
110 
              onExpired={onChange}
 105 
            <Captcha instanceRef={ref} onVerify={onChange} onExpired={onChange} />
111 
            />
 - 
 
112 
            {errors.captcha && (
 - 
 
113 
              <FormErrorFeedback>{errors.captcha.message}</FormErrorFeedback>
 106 
            {errors.captcha && <FormErrorFeedback>{errors.captcha.message}</FormErrorFeedback>}
114 
            )}
 - 
 
115 
          </>
 107 
          </>
116 
        )}
 108 
        )}
117 
      />
 109 
      />
Línea 118... Línea 110...
118 
 
 110 
 
Línea 123... Línea 115...
123 
 
 115 
 
124 
      <Button color='secondary' type='submit' disabled={!isValid}>
 116 
      <Button color='secondary' type='submit' disabled={!isValid}>
125 
        Entrar
 117 
        Entrar
126 
      </Button>
 118 
      </Button>
127 
    </Form>
 119 
    </Form>
128 
  )
 120 
  );