Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4426 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5697 stevensc 1 
import React, { useRef, useState, useEffect } from 'react'
2 
import { useForm } from 'react-hook-form'
3 
import { axios } from '../../../../utils'
4 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
5 
import Recaptcha from 'react-recaptcha'
6 
import Spinner from '../../../../shared/loading-spinner/Spinner'
7 
import styled from 'styled-components'
8 
import { Link } from 'react-router-dom'
9 
import CryptoJSAesJson from '../../../../utils/crypto-js/cryptojs-aes-format'
10 
import SwitchInput from '../../../../account-settings/account-settings/shared/switch-input/SwitchInput'
1 www 11 
 
12 
const StyledCheck = styled.div`
13 
  display: flex;
14 
  flex-direction: column;
15 
  justify-content: center;
16 
  align-items: center;
17 
  img {
18 
    width: 100px;
19 
    margin-bottom: 1rem;
20 
  }
21 
  p {
22 
    text-align: center;
23 
  }
5697 stevensc 24 
`
1 www 25 
const StyledSpinnerContainer = styled.div`
26 
  position: absolute;
27 
  left: 0;
28 
  top: 0;
29 
  width: 100%;
30 
  height: 100%;
31 
  background: rgba(255, 255, 255, 0.4);
32 
  display: flex;
33 
  justify-content: center;
34 
  align-items: center;
35 
  z-index: 300;
5697 stevensc 36 
`
3727 stevensc 37 
const Signup = ({ captchaKey, addNotification, aes }) => {
5697 stevensc 38 
  const { register, handleSubmit, setError, errors, watch } = useForm({
39 
    mode: 'onBlur',
40 
  })
41 
  const [termsChecked, setTermsChecked] = useState(false)
42 
  const [registered, setRegistered] = useState(false)
43 
  const [isLoading, setIsLoading] = useState(false)
44 
  const [isAdult, setIsAdult] = useState(false)
1 www 45 
 
46 
  // Recaptcha
5697 stevensc 47 
  const [isVerified, setIsVerified] = useState(false)
48 
  const reCaptchaInstance = useRef()
49 
  const reCaptchaToken = useRef('')
1 www 50 
 
51 
  useEffect(() => {
5697 stevensc 52 
    reCaptchaInstance.current.reset()
53 
  }, [])
1 www 54 
 
55 
  const signupVerifyCallbackHandler = (response) => {
56 
    if (response) {
5697 stevensc 57 
      reCaptchaToken.current = response
58 
      setIsVerified(true)
1 www 59 
    }
5697 stevensc 60 
  }
1 www 61 
 
62 
  const signupExpiredCallbackHandler = () => {
5697 stevensc 63 
    reCaptchaToken.current = ''
64 
    setIsVerified(false)
65 
  }
1 www 66 
 
3071 stevensc 67 
  const onSubmitHandler = async (data) => {
5697 stevensc 68 
    setIsLoading(true)
69 
    const formData = new FormData()
3727 stevensc 70 
 
5697 stevensc 71 
    Object.entries(data).map(([key, value]) => {
72 
      if (key === 'email' || key === 'password' || key === 'confirmation')
73 
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes))
74 
      return formData.append(key, value)
75 
    })
76 
    formData.append('captcha', reCaptchaToken.current)
77 
    formData.append('is_adult', isAdult ? 'y' : 'n')
3727 stevensc 78 
 
5697 stevensc 79 
    await axios
80 
      .post('/signup', formData)
3727 stevensc 81 
      .then(({ data }) => {
82 
        if (!data.success) {
5697 stevensc 83 
          if (typeof data.data !== 'string') {
3727 stevensc 84 
            Object.entries(data.data).map(([key, value]) => {
5697 stevensc 85 
              setError(key, {
86 
                type: 'manual',
87 
                message: Array.isArray(value) ? value[0] : value,
88 
              })
3727 stevensc 89 
            })
90 
          }
5697 stevensc 91 
          addNotification({ style: 'danger', msg: data.data })
3727 stevensc 92 
          reCaptchaInstance.current.reset()
93 
          signupVerifyCallbackHandler()
3743 stevensc 94 
          return
3727 stevensc 95 
        }
3743 stevensc 96 
 
5697 stevensc 97 
        reCaptchaInstance.current.reset()
98 
        signupExpiredCallbackHandler()
99 
        setRegistered(true)
3727 stevensc 100 
      })
5697 stevensc 101 
      .catch((err) => {
102 
        addNotification({
103 
          style: 'danger',
104 
          msg: 'Disculpe, ha ocurrido un error',
105 
        })
3727 stevensc 106 
        console.log(`Error: ${err}`)
3071 stevensc 107 
      })
3727 stevensc 108 
      .finally(() => setIsLoading(false))
5697 stevensc 109 
  }
1 www 110 
 
5697 stevensc 111 
  const handleOnRecaptchaLoad = () => (reCaptchaToken.current = '')
1 www 112 
 
113 
  if (registered) {
114 
    return (
115 
      <StyledCheck>
116 
        <img src="/images/check.png" alt="check" />
117 
        <p>
118 
          Se ha registrado correctamente. Por favor, active la cuenta desde su
119 
          correo
120 
        </p>
121 
        <Link to="/signin">
122 
          <button id="btn-submit" className="sign_in_sec_button">
123 
            Entrar
124 
          </button>
125 
        </Link>
126 
      </StyledCheck>
5697 stevensc 127 
    )
1 www 128 
  }
5697 stevensc 129 
 
1 www 130 
  return (
131 
    <React.Fragment>
132 
      <h3>Registrarse</h3>
133 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
134 
        <div className="row">
135 
          <div className="col-lg-12 no-pdd">
136 
            <div className="inputContainer">
137 
              <div className="sn-field">
138 
                <input
139 
                  type="email"
140 
                  name="email"
141 
                  ref={register({
5697 stevensc 142 
                    required: 'Este campo es requerido',
3680 stevensc 143 
                    pattern: {
144 
                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
5697 stevensc 145 
                      message:
146 
                        'Debe ser una dirección de correo electrónico valida',
147 
                    },
1 www 148 
                  })}
149 
                  maxLength="64"
150 
                  placeholder="Correo electrónico"
151 
                />
152 
                <i className="la la-envelope"></i>
153 
              </div>
154 
              {errors.email && (
155 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
156 
              )}
157 
            </div>
158 
          </div>
159 
 
160 
          <div className="col-lg-12 no-pdd">
161 
            <div className="inputContainer">
162 
              <div className="sn-field">
163 
                <input
164 
                  type="text"
165 
                  name="first_name"
166 
                  ref={register({
5697 stevensc 167 
                    required: 'Este campo es requerido',
3680 stevensc 168 
                    maxLength: {
169 
                      value: 64,
5697 stevensc 170 
                      message: 'Limite de carateres superior al permitido',
171 
                    },
1 www 172 
                  })}
173 
                  placeholder="Nombre"
174 
                />
175 
                <i className="la la-user"></i>
176 
              </div>
5697 stevensc 177 
              {errors.first_name && (
178 
                <FormErrorFeedback>
179 
                  {errors.first_name.message}
180 
                </FormErrorFeedback>
181 
              )}
1 www 182 
            </div>
183 
          </div>
184 
          <div className="col-lg-12 no-pdd">
185 
            <div className="inputContainer">
186 
              <div className="sn-field">
187 
                <input
188 
                  type="text"
189 
                  name="last_name"
190 
                  ref={register({
5697 stevensc 191 
                    required: 'Este campo es requerido',
3680 stevensc 192 
                    maxLength: {
193 
                      value: 64,
5697 stevensc 194 
                      message: 'Limite de carateres superior al permitido',
195 
                    },
1 www 196 
                  })}
197 
                  placeholder="Apellido"
198 
                />
199 
                <i className="la la-user"></i>
200 
              </div>
201 
              {errors.last_name && (
202 
                <FormErrorFeedback>
203 
                  {errors.last_name.message}
204 
                </FormErrorFeedback>
205 
              )}
206 
            </div>
207 
          </div>
208 
 
209 
          <div className="col-lg-12 no-pdd">
210 
            <div className="inputContainer">
211 
              <div className="sn-field">
212 
                <input
213 
                  type="password"
214 
                  name="password"
215 
                  ref={register({
5697 stevensc 216 
                    required: 'Este campo es requerido',
3680 stevensc 217 
                    pattern: {
5697 stevensc 218 
                      value:
219 
                        /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
220 
                      message:
221 
                        'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-',
222 
                    },
1 www 223 
                  })}
224 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
225 
                  placeholder="Clave"
226 
                />
227 
                <i className="la la-lock"></i>
228 
              </div>
5697 stevensc 229 
              {errors.password && (
230 
                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
231 
              )}
1 www 232 
            </div>
233 
          </div>
234 
          <div className="col-lg-12 no-pdd">
235 
            <div className="inputContainer">
236 
              <div className="sn-field">
237 
                <input
238 
                  type="password"
239 
                  name="confirmation"
240 
                  ref={register({
5697 stevensc 241 
                    required: 'Este campo es requerido',
242 
                    validate: (v) =>
243 
                      v === watch('password') ||
244 
                      'Disculpe, las claves tienen que coincidir',
1 www 245 
                  })}
246 
                  placeholder="Confirme su clave"
247 
                />
3727 stevensc 248 
                <i className="la la-lock" />
1 www 249 
              </div>
5697 stevensc 250 
              {errors.confirmation && (
251 
                <FormErrorFeedback>
252 
                  {errors.confirmation.message}
253 
                </FormErrorFeedback>
254 
              )}
1 www 255 
            </div>
256 
          </div>
4424 stevensc 257 
          <div className="col-lg-12 no-pdd">
4426 stevensc 258 
            <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
4425 stevensc 259 
              <label>Eres mayor de 18</label>
260 
              <SwitchInput setValue={(value) => setIsAdult(value)} />
4424 stevensc 261 
            </div>
262 
          </div>
1 www 263 
 
264 
          <div className="col-lg-12 no-pdd">
265 
            <div className="inputContainer">
266 
              <div className="checky-sec st2">
267 
                <div className="sn-field fgt-sec">
268 
                  <input
269 
                    type="checkbox"
270 
                    name="terms_and_conditions"
271 
                    id="terms_and_conditions"
272 
                    checked={termsChecked}
273 
                    ref={register({
5697 stevensc 274 
                      required: 'Este campo es requerido',
1 www 275 
                    })}
276 
                    value="1"
277 
                    readOnly
278 
                  />
5697 stevensc 279 
                  <label
280 
                    htmlFor="terms_and_conditions"
281 
                    onClick={() => setTermsChecked(!termsChecked)}
282 
                  >
1 www 283 
                    <span></span>
284 
                  </label>
3071 stevensc 285 
                  <small onClick={() => setTermsChecked(!termsChecked)}>
5697 stevensc 286 
                    Si, acepto los{' '}
287 
                    <a href="/terms-and-conditions">Términos y Condiciones.</a>
1 www 288 
                  </small>
289 
                </div>
290 
              </div>
5697 stevensc 291 
              {errors.terms_and_conditions && (
1 www 292 
                <FormErrorFeedback>
293 
                  {errors.terms_and_conditions.message}
294 
                </FormErrorFeedback>
5697 stevensc 295 
              )}
1 www 296 
            </div>
297 
          </div>
298 
 
299 
          <div className="col-lg-12 no-pdd">
300 
            <div className="sn-field">
301 
              <Recaptcha
302 
                sitekey={captchaKey}
303 
                verifyCallback={signupVerifyCallbackHandler}
304 
                verifyCallbackName="signupVerifyCallbackHandler"
305 
                expiredCallback={signupExpiredCallbackHandler}
306 
                expiredCallbackName="signupExpiredCallbackHandler"
307 
                ref={reCaptchaInstance}
308 
                render="explicit"
309 
                onloadCallback={handleOnRecaptchaLoad}
310 
                hl="es"
311 
              />
312 
            </div>
313 
          </div>
314 
 
315 
          <div className="col-lg-12 no-pdd">
316 
            <button
317 
              type="submit"
318 
              value="submit"
319 
              id="btn-submit"
320 
              disabled={!isVerified}
321 
            >
322 
              Registrarse
323 
            </button>
324 
          </div>
325 
        </div>
326 
      </form>
5697 stevensc 327 
      {isLoading && (
1 www 328 
        <StyledSpinnerContainer>
329 
          <Spinner />
5697 stevensc 330 
        </StyledSpinnerContainer>
331 
      )}
1 www 332 
    </React.Fragment>
5697 stevensc 333 
  )
334 
}
1 www 335 
 
5697 stevensc 336 
export default Signup