WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/auth/signin-section/signin-section/signup/Signup.js

-/* eslint-disable react/prop-types */
-import React from "react";
-import { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from 'react'
-import { useForm } from "react-hook-form";
+import { useForm } from 'react-hook-form'
-import styled from "styled-components";
-import { axios } from "../../../../utils";
+import { axios } from '../../../../utils'
-import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
+import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
-import Recaptcha from "react-recaptcha";
+import Recaptcha from 'react-recaptcha'
-import Spinner from "../../../../shared/loading-spinner/Spinner";
+import Spinner from '../../../../shared/loading-spinner/Spinner'
+import styled from 'styled-components'
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom'
-import CryptoJSAesJson from "../../../../utils/crypto-js/cryptojs-aes-format";
+import CryptoJSAesJson from '../../../../utils/crypto-js/cryptojs-aes-format'
-import SwitchInput from "../../../../account-settings/account-settings/shared/switch-input/SwitchInput";
+import SwitchInput from '../../../../account-settings/account-settings/shared/switch-input/SwitchInput'
 const StyledCheck = styled.div`
   display: flex;
   flex-direction: column;
     margin-bottom: 1rem;
+  }
   p {
     text-align: center;
+  }
-`;
+`
 const StyledSpinnerContainer = styled.div`
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   background: rgba(255, 255, 255, 0.4);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 300;
-`;
+`
 const Signup = ({ captchaKey, addNotification, aes }) => {
-  const { register, handleSubmit, setError, errors, watch } = useForm({ mode: 'onBlur' });
+  const { register, handleSubmit, setError, errors, watch } = useForm({
+    mode: 'onBlur',
+  })
-  const [termsChecked, setTermsChecked] = useState(false);
+  const [termsChecked, setTermsChecked] = useState(false)
-  const [registered, setRegistered] = useState(false);
+  const [registered, setRegistered] = useState(false)
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false)
-  const [isAdult, setIsAdult] = useState(false);
+  const [isAdult, setIsAdult] = useState(false)
   // Recaptcha
-  const [isVerified, setIsVerified] = useState(false);
+  const [isVerified, setIsVerified] = useState(false)
-  const reCaptchaInstance = useRef();
+  const reCaptchaInstance = useRef()
-  const reCaptchaToken = useRef("");
+  const reCaptchaToken = useRef('')
   useEffect(() => {
-    reCaptchaInstance.current.reset();
+    reCaptchaInstance.current.reset()
-  }, []);
+  }, [])
   const signupVerifyCallbackHandler = (response) => {
     if (response) {
-      reCaptchaToken.current = response;
+      reCaptchaToken.current = response
-      setIsVerified(true);
+      setIsVerified(true)
     }
-  };
+  }
   const signupExpiredCallbackHandler = () => {
-    reCaptchaToken.current = "";
+    reCaptchaToken.current = ''
-    setIsVerified(false);
+    setIsVerified(false)
-  };
+  }
-  const onSubmitHandler = async (data) => {
-    setIsLoading(true);
+  const onSubmitHandler = async (data) => {
-    const formData = new FormData();
+    setIsLoading(true)
+    const formData = new FormData()
-    Object.entries(data)
-      .map(([key, value]) => {
+    Object.entries(data).map(([key, value]) => {
+      if (key === 'email' || key === 'password' || key === 'confirmation')
-        if (key === "email" || key === "password" || key === "confirmation")
+        return formData.append(key, CryptoJSAesJson.encrypt(value, aes))
-          return formData.append(key, CryptoJSAesJson.encrypt(value, aes))
+      return formData.append(key, value)
-        return formData.append(key, value);
+    })
-      })
+    formData.append('captcha', reCaptchaToken.current)
-    formData.append("captcha", reCaptchaToken.current);
+    formData.append('is_adult', isAdult ? 'y' : 'n')
+    await axios
-    formData.append("is_adult", isAdult ? 'y' : 'n');
+      .post('/signup', formData)
+      .then(({ data }) => {
         if (!data.success) {
-    await axios.post("/signup", formData)
+          if (typeof data.data !== 'string') {
-      .then(({ data }) => {
+            Object.entries(data.data).map(([key, value]) => {
-        if (!data.success) {
+              setError(key, {
-          if (typeof data.data !== "string") {
+                type: 'manual',
-            Object.entries(data.data).map(([key, value]) => {
+                message: Array.isArray(value) ? value[0] : value,
-              setError(key, { type: "manual", message: Array.isArray(value) ? value[0] : value })
+              })
             })
           }
-          addNotification({ style: "danger", msg: data.data })
+          addNotification({ style: 'danger', msg: data.data })
           reCaptchaInstance.current.reset()
           signupVerifyCallbackHandler()
+          return
+        }
-          return
+        reCaptchaInstance.current.reset()
         signupExpiredCallbackHandler()
         setRegistered(true)
-        reCaptchaInstance.current.reset();
+      })
-        signupExpiredCallbackHandler();
+      .catch((err) => {
-        setRegistered(true);
+        addNotification({
-      })
+          style: 'danger',
-      .catch(err => {
+          msg: 'Disculpe, ha ocurrido un error',
-        addNotification({ style: "danger", msg: 'Disculpe, ha ocurrido un error' })
+        })
         console.log(`Error: ${err}`)
           <button id="btn-submit" className="sign_in_sec_button">
             Entrar
           </button>
         </Link>
       </StyledCheck>
-    );
+    )
+  }
   return (
     <React.Fragment>
       <h3>Registrarse</h3>
       <form onSubmit={handleSubmit(onSubmitHandler)}>
         <div className="row">
               <div className="sn-field">
                 <input
                   type="email"
                   name="email"
                   ref={register({
-                    required: "Este campo es requerido",
+                    required: 'Este campo es requerido',
                     pattern: {
                       value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
+                      message:
-                      message: "Debe ser una dirección de correo electrónico valida"
+                        'Debe ser una dirección de correo electrónico valida',
-                    }
+                    },
                   })}
                   maxLength="64"
                   placeholder="Correo electrónico"
                 />
                 <i className="la la-envelope"></i>
               <div className="sn-field">
                 <input
                   type="text"
                   name="first_name"
                   ref={register({
-                    required: "Este campo es requerido",
+                    required: 'Este campo es requerido',
                     maxLength: {
                       value: 64,
-                      message: 'Limite de carateres superior al permitido'
+                      message: 'Limite de carateres superior al permitido',
-                    }
+                    },
                   })}
                   placeholder="Nombre"
                 />
                 <i className="la la-user"></i>
               </div>
+              {errors.first_name && (
+                <FormErrorFeedback>
-              {errors.first_name && <FormErrorFeedback>{errors.first_name.message}</FormErrorFeedback>}
+                  {errors.first_name.message}
+                </FormErrorFeedback>
+              )}
             </div>
           </div>
           <div className="col-lg-12 no-pdd">
             <div className="inputContainer">
               <div className="sn-field">
                 <input
                   type="text"
                   name="last_name"
                   ref={register({
-                    required: "Este campo es requerido",
+                    required: 'Este campo es requerido',
                     maxLength: {
                       value: 64,
-                      message: 'Limite de carateres superior al permitido'
+                      message: 'Limite de carateres superior al permitido',
-                    }
+                    },
                   })}
                   placeholder="Apellido"
                 />
                 <i className="la la-user"></i>
               </div>
               <div className="sn-field">
                 <input
                   type="password"
                   name="password"
                   ref={register({
-                    required: "Este campo es requerido",
+                    required: 'Este campo es requerido',
                     pattern: {
+                      value:
-                      value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
+                        /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
+                      message:
-                      message: 'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
+                        'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-',
-                    }
+                    },
                   })}
                   title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                   placeholder="Clave"
                 />
                 <i className="la la-lock"></i>
               </div>
+              {errors.password && (
-              {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
+                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
+              )}
             </div>
           </div>
           <div className="col-lg-12 no-pdd">
             <div className="inputContainer">
               <div className="sn-field">
                 <input
                   type="password"
                   name="confirmation"
                   ref={register({
-                    required: "Este campo es requerido",
+                    required: 'Este campo es requerido',
+                    validate: (v) =>
+                      v === watch('password') ||
-                    validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
+                      'Disculpe, las claves tienen que coincidir',
                   })}
                   placeholder="Confirme su clave"
                 />
                 <i className="la la-lock" />
               </div>
+              {errors.confirmation && (
+                <FormErrorFeedback>
-              {errors.confirmation && <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>}
+                  {errors.confirmation.message}
+                </FormErrorFeedback>
+              )}
             </div>
           </div>
           <div className="col-lg-12 no-pdd">
             <div className="d-flex flex-column" style={{ gap: '.5rem' }}>
               <label>Eres mayor de 18</label>
                     type="checkbox"
                     name="terms_and_conditions"
                     id="terms_and_conditions"
                     checked={termsChecked}
                     ref={register({
-                      required: "Este campo es requerido",
+                      required: 'Este campo es requerido',
                     })}
                     value="1"
                     readOnly
                   />
+                  <label
+                    htmlFor="terms_and_conditions"
-                  <label htmlFor="terms_and_conditions" onClick={() => setTermsChecked(!termsChecked)}>
+                    onClick={() => setTermsChecked(!termsChecked)}
+                  >
                     <span></span>
                   </label>
                   <small onClick={() => setTermsChecked(!termsChecked)}>
+                    Si, acepto los{' '}
-                    Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
+                    <a href="/terms-and-conditions">Términos y Condiciones.</a>
                   </small>
                 </div>
               </div>
-              {errors.terms_and_conditions &&
+              {errors.terms_and_conditions && (
                 <FormErrorFeedback>
                   {errors.terms_and_conditions.message}
                 </FormErrorFeedback>
-              }
+              )}
             </div>
           </div>
           <div className="col-lg-12 no-pdd">
               Registrarse
             </button>
           </div>
         </div>
       </form>
-      {isLoading &&
+      {isLoading && (
         <StyledSpinnerContainer>
           <Spinner />
-        </StyledSpinnerContainer>}
+        </StyledSpinnerContainer>
+      )}
     </React.Fragment>
-  );
+  )
-};
+}

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/auth/signin-section/signin-section/signup/Signup.js – Rev 4426 → 5697