Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3694
Línea 1... Línea 1...
1 
import React, { useRef, useState, useEffect } from 'react'
 1 
import React, { useRef, useState, useEffect } from 'react';
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom';
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form';
4 
import { useDispatch, useSelector } from 'react-redux'
 4 
import { useDispatch, useSelector } from 'react-redux';
5 
import { styled, Typography } from '@mui/material'
 5 
import { styled, Typography } from '@mui/material';
- 
 
 6 
import Mail from '@mui/icons-material/Mail';
- 
 
 7 
import Lock from '@mui/icons-material/Lock';
- 
 
 8 
import Person from '@mui/icons-material/Person';
6 
import { Mail, Lock, Person, CheckCircleOutline } from '@mui/icons-material'
 9 
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
7 
import Recaptcha from 'react-recaptcha'
 10 
import Recaptcha from 'react-recaptcha';
8 
 
 11 
 
9 
import { axios } from '@utils'
 12 
import { axios } from '@utils';
10 
import { useFetchHelper } from '@hooks'
 13 
import { useFetchHelper } from '@hooks';
11 
import { addNotification } from '@store/notification/notification.actions'
 14 
import { addNotification } from '@store/notification/notification.actions';
12 
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format'
 15 
import CryptoJSAesJson from '@utils/crypto-js/cryptojs-aes-format';
13 
 
 16 
 
14 
import Input from '@components/UI/inputs/Input'
 17 
import Input from '@components/UI/inputs/Input';
15 
import Button from '@components/UI/buttons/Buttons'
 18 
import Button from '@components/UI/buttons/Buttons';
16 
import Select from '@components/UI/inputs/Select'
 19 
import Select from '@components/UI/inputs/Select';
17 
import Spinner from '@components/UI/Spinner'
 20 
import Spinner from '@components/UI/Spinner';
18 
import Form from '@components/common/form'
 21 
import Form from '@components/common/form';
19 
import SwitchInput from '@components/UI/SwitchInput'
 22 
import SwitchInput from '@components/UI/SwitchInput';
20 
import CheckboxInput from '@components/UI/inputs/Checkbox'
 23 
import CheckboxInput from '@components/UI/inputs/Checkbox';
Línea 21... Línea 24...
21 
 
 24 
 
22 
const StyledCheck = styled('div')`
 25 
const StyledCheck = styled('div')`
23 
  display: flex;
 26 
  display: flex;
24 
  flex-direction: column;
 27 
  flex-direction: column;
25 
  justify-content: center;
 28 
  justify-content: center;
26 
  align-items: center;
 29 
  align-items: center;
27 
  gap: 0.5rem;
 30 
  gap: 0.5rem;
28 
  p {
 31 
  p {
29 
    text-align: center;
 32 
    text-align: center;
30 
  }
 33 
  }
31 
`
 34 
`;
32 
const StyledSpinnerContainer = styled('div')`
 35 
const StyledSpinnerContainer = styled('div')`
33 
  position: absolute;
 36 
  position: absolute;
34 
  left: 0;
 37 
  left: 0;
35 
  top: 0;
 38 
  top: 0;
Línea 38... Línea 41...
38 
  background: rgba(255, 255, 255, 0.4);
 41 
  background: rgba(255, 255, 255, 0.4);
39 
  display: flex;
 42 
  display: flex;
40 
  justify-content: center;
 43 
  justify-content: center;
41 
  align-items: center;
 44 
  align-items: center;
42 
  z-index: 300;
 45 
  z-index: 300;
43 
`
 46 
`;
Línea 44... Línea 47...
44 
 
 47 
 
45 
const Signup = () => {
 48 
const Signup = () => {
46 
  const [registered, setRegistered] = useState(false)
 49 
  const [registered, setRegistered] = useState(false);
47 
  const [isLoading, setIsLoading] = useState(false)
 50 
  const [isLoading, setIsLoading] = useState(false);
48 
  const [isAdult, setIsAdult] = useState(false)
 51 
  const [isAdult, setIsAdult] = useState(false);
49 
  const [isVerified, setIsVerified] = useState(false)
 52 
  const [isVerified, setIsVerified] = useState(false);
50 
  const reCaptchaInstance = useRef(null)
 53 
  const reCaptchaInstance = useRef(null);
51 
  const reCaptchaToken = useRef('')
 54 
  const reCaptchaToken = useRef('');
52 
  const dispatch = useDispatch()
 55 
  const dispatch = useDispatch();
Línea 53... Línea 56...
53 
  const { site_key, aes } = useSelector(({ auth }) => auth)
 56 
  const { site_key, aes } = useSelector(({ auth }) => auth);
Línea 54... Línea 57...
54 
 
 57 
 
55 
  const { data: timezones } = useFetchHelper('timezones')
 58 
  const { data: timezones } = useFetchHelper('timezones');
56 
 
 59 
 
57 
  const {
 60 
  const {
58 
    control,
 61 
    control,
59 
    handleSubmit,
 62 
    handleSubmit,
60 
    setError,
 63 
    setError,
61 
    watch,
 64 
    watch,
62 
    formState: { errors }
 65 
    formState: { errors }
Línea 63... Línea 66...
63 
  } = useForm({
 66 
  } = useForm({
64 
    mode: 'all'
 67 
    mode: 'all'
65 
  })
 68 
  });
66 
 
 69 
 
67 
  const signupVerifyCallbackHandler = (response) => {
 70 
  const signupVerifyCallbackHandler = (response) => {
Línea 68... Línea 71...
68 
    if (!response) return
 71 
    if (!response) return;
69 
    reCaptchaToken.current = response
 72 
    reCaptchaToken.current = response;
70 
    setIsVerified(true)
 73 
    setIsVerified(true);
71 
  }
 74 
  };
Línea 72... Línea 75...
72 
 
 75 
 
73 
  const signupExpiredCallbackHandler = () => {
 76 
  const signupExpiredCallbackHandler = () => {
74 
    reCaptchaToken.current = ''
 77 
    reCaptchaToken.current = '';
Línea 75... Línea 78...
75 
    setIsVerified(false)
 78 
    setIsVerified(false);
76 
  }
 - 
 
77 
 
 - 
 
78 
  const handleOnRecaptchaLoad = () => {
 - 
 
79 
    reCaptchaToken.current = ''
 - 
 
80 
  }
 - 
 
81 
 
 - 
 
82 
  const onSubmitHandler = handleSubmit(
 79 
  };
83 
    async ({
 - 
 
84 
      email,
 80 
 
85 
      first_name,
 81 
  const handleOnRecaptchaLoad = () => {
86 
      last_name,
 82 
    reCaptchaToken.current = '';
87 
      password,
 83 
  };
88 
      confirmation,
 84 
 
89 
      terms_and_conditions
 85 
  const onSubmitHandler = handleSubmit(
90 
    }) => {
 - 
 
91 
      setIsLoading(true)
 - 
 
92 
      const formData = new FormData()
 86 
    async ({ email, first_name, last_name, password, confirmation, terms_and_conditions }) => {
93 
      formData.append('first_name', first_name)
 - 
 
94 
      formData.append('last_name', last_name)
 87 
      setIsLoading(true);
Línea 95... Línea 88...
95 
      formData.append('email', CryptoJSAesJson.encrypt(email, aes))
 88 
      const formData = new FormData();
96 
      formData.append('password', CryptoJSAesJson.encrypt(password, aes))
 89 
      formData.append('first_name', first_name);
Línea 97... Línea 90...
97 
      formData.append(
 90 
      formData.append('last_name', last_name);
98 
        'confirmation',
 91 
      formData.append('email', CryptoJSAesJson.encrypt(email, aes));
99 
        CryptoJSAesJson.encrypt(confirmation, aes)
 92 
      formData.append('password', CryptoJSAesJson.encrypt(password, aes));
100 
      )
 93 
      formData.append('confirmation', CryptoJSAesJson.encrypt(confirmation, aes));
101 
      formData.append('terms_and_conditions', terms_and_conditions ? 1 : 0)
 94 
      formData.append('terms_and_conditions', terms_and_conditions ? 1 : 0);
102 
 
 95 
 
103 
      formData.append('captcha', reCaptchaToken.current)
 96 
      formData.append('captcha', reCaptchaToken.current);
104 
      formData.append('is_adult', isAdult ? 'y' : 'n')
 97 
      formData.append('is_adult', isAdult ? 'y' : 'n');
105 
 
 98 
 
106 
      await axios
 99 
      await axios
107 
        .post('/signup', formData)
 100 
        .post('/signup', formData)
108 
        .then(({ data }) => {
 101 
        .then(({ data }) => {
109 
          if (!data.success) {
 102 
          if (!data.success) {
Línea 110... Línea 103...
110 
            if (typeof data.data !== 'string') {
 103 
            if (typeof data.data !== 'string') {
111 
              Object.entries(data.data).forEach(([key, value]) => {
 104 
              Object.entries(data.data).forEach(([key, value]) => {
112 
                setError(key, {
 105 
                setError(key, {
113 
                  type: 'manual',
 106 
                  type: 'manual',
114 
                  message: Array.isArray(value) ? value[0] : value
 107 
                  message: Array.isArray(value) ? value[0] : value
Línea 115... Línea 108...
115 
                })
 108 
                });
116 
              })
 109 
              });
117 
              return
 110 
              return;
118 
            }
 111 
            }
119 
 
 112 
 
120 
            dispatch(addNotification({ style: 'danger', msg: data.data }))
 113 
            dispatch(addNotification({ style: 'danger', msg: data.data }));
121 
            reCaptchaInstance.current.reset()
 114 
            reCaptchaInstance.current.reset();
122 
            signupVerifyCallbackHandler()
 115 
            signupVerifyCallbackHandler();
123 
            return
 116 
            return;
124 
          }
 117 
          }
125 
 
 118 
 
126 
          reCaptchaInstance.current.reset()
 119 
          reCaptchaInstance.current.reset();
127 
          signupExpiredCallbackHandler()
 120 
          signupExpiredCallbackHandler();
128 
          setRegistered(true)
 121 
          setRegistered(true);
129 
        })
 122 
        })
130 
        .catch((err) => {
 123 
        .catch((err) => {
Línea 131... Línea 124...
131 
          console.log(`Error: ${err}`)
 124 
          console.log(`Error: ${err}`);
132 
          dispatch(
 125 
          dispatch(
133 
            addNotification({
 126 
            addNotification({
Línea 134... Línea 127...
134 
              style: 'danger',
 127 
              style: 'danger',
135 
              msg: 'Disculpe, ha ocurrido un error'
 128 
              msg: 'Disculpe, ha ocurrido un error'
136 
            })
 129 
            })
137 
          )
 130 
          );
Línea 138... Línea 131...
138 
        })
 131 
        })
139 
        .finally(() => setIsLoading(false))
 132 
        .finally(() => setIsLoading(false));
140 
    }
 - 
 
141 
  )
 133 
    }
Línea 142... Línea 134...
142 
 
 134 
  );
143 
  useEffect(() => {
 135 
 
144 
    reCaptchaInstance.current?.reset()
 136 
  useEffect(() => {
145 
  }, [])
 137 
    reCaptchaInstance.current?.reset();
146 
 
 138 
  }, []);
147 
  if (registered) {
 139 
 
Línea 148... Línea 140...
148 
    return (
 140 
  if (registered) {
149 
      <StyledCheck>
 141 
    return (
150 
        <CheckCircleOutline sx={{ color: '#7FFF00', fontSize: '3rem' }} />
 142 
      <StyledCheck>
Línea 220... Línea 212...
220 
        placeholder='Clave'
 212 
        placeholder='Clave'
221 
        control={control}
 213 
        control={control}
222 
        rules={{
 214 
        rules={{
223 
          required: 'Este campo es requerido',
 215 
          required: 'Este campo es requerido',
224 
          pattern: {
 216 
          pattern: {
225 
            value:
 - 
 
226 
              /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
 217 
            value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
227 
            message:
 218 
            message:
228 
              'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
 219 
              'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
229 
          }
 220 
          }
230 
        }}
 221 
        }}
231 
        error={errors.password?.message}
 222 
        error={errors.password?.message}
Línea 237... Línea 228...
237 
        icon={<Lock />}
 228 
        icon={<Lock />}
238 
        placeholder='Confirme su clave'
 229 
        placeholder='Confirme su clave'
239 
        control={control}
 230 
        control={control}
240 
        rules={{
 231 
        rules={{
241 
          required: 'Este campo es requerido',
 232 
          required: 'Este campo es requerido',
242 
          validate: (v) =>
 - 
 
243 
            v === watch('password') ||
 - 
 
244 
            'Disculpe, las claves tienen que coincidir'
 233 
          validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
245 
        }}
 234 
        }}
246 
        error={errors.confirmation?.message}
 235 
        error={errors.confirmation?.message}
247 
      />
 236 
      />
Línea 248... Línea 237...
248 
 
 237 
 
Línea 256... Línea 245...
256 
          name: key,
 245 
          name: key,
257 
          value
 246 
          value
258 
        }))}
 247 
        }))}
259 
      />
 248 
      />
Línea 260... Línea -...
260 
 
 - 
 
261 
      <SwitchInput
 - 
 
262 
        label='Eres mayor de 18'
 249 
 
263 
        setValue={(value) => setIsAdult(value)}
 - 
 
Línea 264... Línea 250...
264 
      />
 250 
      <SwitchInput label='Eres mayor de 18' setValue={(value) => setIsAdult(value)} />
265 
 
 251 
 
266 
      <CheckboxInput
 252 
      <CheckboxInput
267 
        name='terms_and_conditions'
 253 
        name='terms_and_conditions'
Línea 295... Línea 281...
295 
        <StyledSpinnerContainer>
 281 
        <StyledSpinnerContainer>
296 
          <Spinner />
 282 
          <Spinner />
297 
        </StyledSpinnerContainer>
 283 
        </StyledSpinnerContainer>
298 
      )}
 284 
      )}
299 
    </Form>
 285 
    </Form>
300 
  )
 286 
  );
301 
}
 287 
};
Línea 302... Línea 288...
302 
 
 288