Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6509 Rev 6510
Línea 2... Línea 2...
2 
import { axios } from '../../../../utils'
 2 
import { axios } from '../../../../utils'
3 
import { Link } from 'react-router-dom'
 3 
import { Link } from 'react-router-dom'
4 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from 'react-hook-form'
5 
import { useSelector } from 'react-redux'
 5 
import { useSelector } from 'react-redux'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
 
 - 
 
8 
import styled from 'styled-components'
 7 
import styled from 'styled-components'
9 
import Recaptcha from 'react-recaptcha'
 8 
import Recaptcha from 'react-recaptcha'
10 
 
 - 
 
11 
import CryptoJSAesJson from '../../../utils/crypto-js/cryptojs-aes-format'
 9 
import CryptoJSAesJson from '../../../utils/crypto-js/cryptojs-aes-format'
- 
 
 10 
 
- 
 
 11 
import Spinner from '../../UI/Spinner'
12 
import SwitchInput from '../../UI/SwitchInput'
 12 
import SwitchInput from '../../UI/SwitchInput'
13 
import FormErrorFeedback from '../../UI/FormErrorFeedback'
 13 
import FormErrorFeedback from '../../UI/FormErrorFeedback'
14 
import Spinner from '../../UI/Spinner'
 - 
 
Línea 15... Línea 14...
15 
 
 14 
 
16 
const StyledCheck = styled.div`
 15 
const StyledCheck = styled.div`
17 
  display: flex;
 16 
  display: flex;
18 
  flex-direction: column;
 17 
  flex-direction: column;
Línea 50... Línea 49...
50 
  const [isVerified, setIsVerified] = useState(false)
 49 
  const [isVerified, setIsVerified] = useState(false)
Línea 51... Línea 50...
51 
 
 50 
 
52 
  const reCaptchaInstance = useRef(null)
 51 
  const reCaptchaInstance = useRef(null)
Línea 53... Línea -...
53 
  const reCaptchaToken = useRef('')
 - 
 
54 
 
 - 
 
55 
  useEffect(() => {
 - 
 
56 
    reCaptchaInstance.current.reset()
 - 
 
57 
  }, [])
 52 
  const reCaptchaToken = useRef('')
58 
 
 53 
 
59 
  const signupVerifyCallbackHandler = (response) => {
 54 
  const signupVerifyCallbackHandler = (response) => {
60 
    if (!response) return
 55 
    if (!response) return
61 
    reCaptchaToken.current = response
 56 
    reCaptchaToken.current = response
Línea 113... Línea 108...
113 
 
 108 
 
114 
  const handleOnRecaptchaLoad = () => {
 109 
  const handleOnRecaptchaLoad = () => {
115 
    reCaptchaToken.current = ''
 110 
    reCaptchaToken.current = ''
Línea -... Línea 111...
- 
 
 111 
  }
- 
 
 112 
 
- 
 
 113 
  useEffect(() => {
- 
 
 114 
    reCaptchaInstance.current?.reset()
116 
  }
 115 
  }, [])
117 
 
 116 
 
118 
  if (registered) {
 117 
  if (registered) {
119 
    return (
 118 
    return (
120 
      <StyledCheck>
 119 
      <StyledCheck>
Línea 131... Línea 130...
131 
      </StyledCheck>
 130 
      </StyledCheck>
132 
    )
 131 
    )
133 
  }
 132 
  }
Línea 134... Línea 133...
134 
 
 133 
 
135 
  return (
 134 
  return (
136 
    <React.Fragment>
 135 
    <>
137 
      <h3>Registrarse</h3>
 136 
      <h3>Registrarse</h3>
138 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 - 
 
139 
        <div className="row">
 - 
 
140 
          <div className="col-lg-12 no-pdd">
 137 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
141 
            <div className="inputContainer">
 138 
        <div className="inputContainer">
142 
              <div className="sn-field">
 139 
          <div className="sn-field">
143 
                <input
 140 
            <input
144 
                  type="email"
 141 
              type="email"
145 
                  name="email"
 142 
              name="email"
146 
                  ref={register({
 143 
              ref={register({
147 
                    required: 'Este campo es requerido',
 144 
                required: 'Este campo es requerido',
148 
                    pattern: {
 145 
                pattern: {
149 
                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
 146 
                  value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
150 
                      message:
 147 
                  message:
151 
                        'Debe ser una dirección de correo electrónico valida',
 148 
                    'Debe ser una dirección de correo electrónico valida',
152 
                    },
 149 
                },
153 
                  })}
 150 
              })}
154 
                  maxLength="64"
 151 
              maxLength="64"
155 
                  placeholder="Correo electrónico"
 152 
              placeholder="Correo electrónico"
156 
                />
 153 
            />
157 
                <i className="la la-envelope"></i>
 - 
 
158 
              </div>
 - 
 
159 
              {errors.email && (
 - 
 
160 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
 - 
 
161 
              )}
 - 
 
162 
            </div>
 154 
            <i className="la la-envelope"></i>
- 
 
 155 
          </div>
- 
 
 156 
          {errors.email && (
- 
 
 157 
            <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
- 
 
 158 
          )}
Línea 163... Línea -...
163 
          </div>
 - 
 
164 
 
 159 
        </div>
165 
          <div className="col-lg-12 no-pdd">
 160 
 
166 
            <div className="inputContainer">
 161 
        <div className="inputContainer">
167 
              <div className="sn-field">
 162 
          <div className="sn-field">
168 
                <input
 163 
            <input
169 
                  type="text"
 164 
              type="text"
170 
                  name="first_name"
 165 
              name="first_name"
171 
                  ref={register({
 166 
              ref={register({
172 
                    required: 'Este campo es requerido',
 167 
                required: 'Este campo es requerido',
173 
                    maxLength: {
 168 
                maxLength: {
174 
                      value: 64,
 - 
 
175 
                      message: 'Limite de carateres superior al permitido',
 - 
 
176 
                    },
 - 
 
177 
                  })}
 169 
                  value: 64,
178 
                  placeholder="Nombre"
 - 
 
179 
                />
 - 
 
180 
                <i className="la la-user"></i>
 - 
 
181 
              </div>
 - 
 
182 
              {errors.first_name && (
 - 
 
183 
                <FormErrorFeedback>
 - 
 
184 
                  {errors.first_name.message}
 170 
                  message: 'Limite de carateres superior al permitido',
185 
                </FormErrorFeedback>
 - 
 
186 
              )}
 - 
 
187 
            </div>
 - 
 
188 
          </div>
 - 
 
189 
          <div className="col-lg-12 no-pdd">
 - 
 
190 
            <div className="inputContainer">
 - 
 
191 
              <div className="sn-field">
 - 
 
192 
                <input
 - 
 
193 
                  type="text"
 - 
 
194 
                  name="last_name"
 - 
 
195 
                  ref={register({
 - 
 
196 
                    required: 'Este campo es requerido',
 - 
 
197 
                    maxLength: {
 - 
 
198 
                      value: 64,
 - 
 
199 
                      message: 'Limite de carateres superior al permitido',
 - 
 
200 
                    },
 171 
                },
201 
                  })}
 172 
              })}
202 
                  placeholder="Apellido"
 173 
              placeholder="Nombre"
203 
                />
 - 
 
204 
                <i className="la la-user"></i>
 - 
 
205 
              </div>
 - 
 
206 
              {errors.last_name && (
 - 
 
207 
                <FormErrorFeedback>
 - 
 
208 
                  {errors.last_name.message}
 - 
 
209 
                </FormErrorFeedback>
 - 
 
210 
              )}
 174 
            />
- 
 
 175 
            <i className="la la-user"></i>
- 
 
 176 
          </div>
- 
 
 177 
          {errors.first_name && (
- 
 
 178 
            <FormErrorFeedback>{errors.first_name.message}</FormErrorFeedback>
Línea 211... Línea -...
211 
            </div>
 - 
 
212 
          </div>
 179 
          )}
213 
 
 180 
        </div>
214 
          <div className="col-lg-12 no-pdd">
 181 
 
215 
            <div className="inputContainer">
 182 
        <div className="inputContainer">
216 
              <div className="sn-field">
 183 
          <div className="sn-field">
217 
                <input
 184 
            <input
218 
                  type="password"
 185 
              type="text"
219 
                  name="password"
 186 
              name="last_name"
220 
                  ref={register({
 187 
              ref={register({
221 
                    required: 'Este campo es requerido',
 - 
 
222 
                    pattern: {
 - 
 
223 
                      value:
 - 
 
224 
                        /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
 - 
 
225 
                      message:
 - 
 
226 
                        'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-',
 - 
 
227 
                    },
 188 
                required: 'Este campo es requerido',
228 
                  })}
 189 
                maxLength: {
229 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
 - 
 
230 
                  placeholder="Clave"
 - 
 
231 
                />
 - 
 
232 
                <i className="la la-lock"></i>
 - 
 
233 
              </div>
 190 
                  value: 64,
234 
              {errors.password && (
 - 
 
235 
                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 - 
 
236 
              )}
 - 
 
237 
            </div>
 - 
 
238 
          </div>
 - 
 
239 
          <div className="col-lg-12 no-pdd">
 - 
 
240 
            <div className="inputContainer">
 - 
 
241 
              <div className="sn-field">
 - 
 
242 
                <input
 - 
 
243 
                  type="password"
 - 
 
244 
                  name="confirmation"
 - 
 
245 
                  ref={register({
 - 
 
246 
                    required: 'Este campo es requerido',
 - 
 
247 
                    validate: (v) =>
 - 
 
248 
                      v === watch('password') ||
 191 
                  message: 'Limite de carateres superior al permitido',
249 
                      'Disculpe, las claves tienen que coincidir',
 192 
                },
250 
                  })}
 193 
              })}
251 
                  placeholder="Confirme su clave"
 - 
 
252 
                />
 - 
 
253 
                <i className="la la-lock" />
 - 
 
254 
              </div>
 - 
 
255 
              {errors.confirmation && (
 - 
 
256 
                <FormErrorFeedback>
 - 
 
257 
                  {errors.confirmation.message}
 - 
 
258 
                </FormErrorFeedback>
 194 
              placeholder="Apellido"
- 
 
 195 
            />
- 
 
 196 
            <i className="la la-user"></i>
- 
 
 197 
          </div>
- 
 
 198 
          {errors.last_name && (
- 
 
 199 
            <FormErrorFeedback>{errors.last_name.message}</FormErrorFeedback>
259 
              )}
 200 
          )}
260 
            </div>
 201 
        </div>
- 
 
 202 
 
- 
 
 203 
        <div className="inputContainer">
261 
          </div>
 204 
          <div className="sn-field">
- 
 
 205 
            <input
262 
          <div className="col-lg-12 no-pdd">
 206 
              type="password"
- 
 
 207 
              name="password"
- 
 
 208 
              ref={register({
- 
 
 209 
                required: 'Este campo es requerido',
- 
 
 210 
                pattern: {
- 
 
 211 
                  value:
- 
 
 212 
                    /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
- 
 
 213 
                  message:
- 
 
 214 
                    'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-',
- 
 
 215 
                },
263 
            <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
 216 
              })}
- 
 
 217 
              title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
264 
              <label>Eres mayor de 18</label>
 218 
              placeholder="Clave"
- 
 
 219 
            />
- 
 
 220 
            <i className="la la-lock"></i>
- 
 
 221 
          </div>
- 
 
 222 
          {errors.password && (
Línea 265... Línea -...
265 
              <SwitchInput setValue={(value) => setIsAdult(value)} />
 - 
 
266 
            </div>
 223 
            <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
267 
          </div>
 - 
 
268 
 
 224 
          )}
269 
          <div className="col-lg-12 no-pdd">
 225 
        </div>
270 
            <div className="inputContainer">
 226 
 
271 
              <div className="checky-sec st2">
 227 
        <div className="inputContainer">
272 
                <div className="sn-field fgt-sec">
 - 
 
273 
                  <input
 - 
 
274 
                    type="checkbox"
 228 
          <div className="sn-field">
275 
                    name="terms_and_conditions"
 229 
            <input
276 
                    id="terms_and_conditions"
 - 
 
277 
                    checked={termsChecked}
 230 
              type="password"
278 
                    ref={register({
 - 
 
279 
                      required: 'Este campo es requerido',
 - 
 
280 
                    })}
 - 
 
281 
                    value="1"
 231 
              name="confirmation"
282 
                    readOnly
 232 
              ref={register({
283 
                  />
 233 
                required: 'Este campo es requerido',
284 
                  <label
 - 
 
285 
                    htmlFor="terms_and_conditions"
 - 
 
286 
                    onClick={() => setTermsChecked(!termsChecked)}
 - 
 
287 
                  >
 234 
                validate: (v) =>
288 
                    <span></span>
 - 
 
289 
                  </label>
 - 
 
290 
                  <small onClick={() => setTermsChecked(!termsChecked)}>
 - 
 
291 
                    Si, acepto los{' '}
 235 
                  v === watch('password') ||
292 
                    <a href="/terms-and-conditions">Términos y Condiciones.</a>
 - 
 
293 
                  </small>
 - 
 
294 
                </div>
 - 
 
295 
              </div>
 236 
                  'Disculpe, las claves tienen que coincidir',
296 
              {errors.terms_and_conditions && (
 - 
 
297 
                <FormErrorFeedback>
 - 
 
298 
                  {errors.terms_and_conditions.message}
 237 
              })}
- 
 
 238 
              placeholder="Confirme su clave"
- 
 
 239 
            />
- 
 
 240 
            <i className="la la-lock" />
- 
 
 241 
          </div>
- 
 
 242 
          {errors.confirmation && (
- 
 
 243 
            <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>
- 
 
 244 
          )}
- 
 
 245 
        </div>
- 
 
 246 
 
Línea -... Línea 247...
- 
 
 247 
        <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
299 
                </FormErrorFeedback>
 248 
          <label>Eres mayor de 18</label>
300 
              )}
 249 
          <SwitchInput setValue={(value) => setIsAdult(value)} />
301 
            </div>
 250 
        </div>
302 
          </div>
 251 
 
303 
 
 252 
        <div className="inputContainer">
304 
          <div className="col-lg-12 no-pdd">
 253 
          <div className="checky-sec st2">
305 
            <div className="sn-field">
 254 
            <div className="sn-field fgt-sec">
306 
              <Recaptcha
 255 
              <input
307 
                sitekey={site_key}
 256 
                type="checkbox"
308 
                verifyCallback={signupVerifyCallbackHandler}
 257 
                name="terms_and_conditions"
309 
                verifyCallbackName="signupVerifyCallbackHandler"
 258 
                id="terms_and_conditions"
310 
                expiredCallback={signupExpiredCallbackHandler}
 259 
                checked={termsChecked}
311 
                expiredCallbackName="signupExpiredCallbackHandler"
 260 
                ref={register({
- 
 
 261 
                  required: 'Este campo es requerido',
- 
 
 262 
                })}
- 
 
 263 
                value="1"
- 
 
 264 
                readOnly
- 
 
 265 
              />
- 
 
 266 
              <label
- 
 
 267 
                htmlFor="terms_and_conditions"
- 
 
 268 
                onClick={() => setTermsChecked(!termsChecked)}
- 
 
 269 
              >
- 
 
 270 
                <span></span>
312 
                ref={reCaptchaInstance}
 271 
              </label>
313 
                render="explicit"
 272 
              <small onClick={() => setTermsChecked(!termsChecked)}>
- 
 
 273 
                Si, acepto los{' '}
- 
 
 274 
                <a href="/terms-and-conditions">Términos y Condiciones.</a>
- 
 
 275 
              </small>
- 
 
 276 
            </div>
- 
 
 277 
          </div>
- 
 
 278 
          {errors.terms_and_conditions && (
Línea 314... Línea 279...
314 
                onloadCallback={handleOnRecaptchaLoad}
 279 
            <FormErrorFeedback>
315 
                hl="es"
 280 
              {errors.terms_and_conditions.message}
316 
              />
 281 
            </FormErrorFeedback>
- 
 
 282 
          )}
317 
            </div>
 283 
        </div>
318 
          </div>
 284 
 
- 
 
 285 
        <div className="sn-field">
319 
 
 286 
          <Recaptcha
320 
          <div className="col-lg-12 no-pdd">
 287 
            sitekey={site_key}
321 
            <button
 288 
            verifyCallback={signupVerifyCallbackHandler}
322 
              type="submit"
 289 
            verifyCallbackName="signupVerifyCallbackHandler"
323 
              value="submit"
 290 
            expiredCallback={signupExpiredCallbackHandler}
324 
              id="btn-submit"
 291 
            expiredCallbackName="signupExpiredCallbackHandler"
- 
 
 292 
            ref={reCaptchaInstance}
- 
 
 293 
            render="explicit"
- 
 
 294 
            onloadCallback={handleOnRecaptchaLoad}
- 
 
 295 
            hl="es"
- 
 
 296 
          />
- 
 
 297 
        </div>
- 
 
 298 
 
- 
 
 299 
        <button
- 
 
 300 
          type="submit"
325 
              disabled={!isVerified}
 301 
          value="submit"
326 
            >
 302 
          id="btn-submit"
327 
              Registrarse
 303 
          disabled={!isVerified}
328 
            </button>
 304 
        >
329 
          </div>
 305 
          Registrarse
330 
        </div>
 306 
        </button>
331 
      </form>
 307 
      </form>
332 
      {isLoading && (
 308 
      {isLoading && (
333 
        <StyledSpinnerContainer>
 309 
        <StyledSpinnerContainer>
Línea 334... Línea 310...
334 
          <Spinner />
 310 
          <Spinner />