Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 3681 Rev 3727
Línea 33... Línea 33...
33 
  display: flex;
 33 
  display: flex;
34 
  justify-content: center;
 34 
  justify-content: center;
35 
  align-items: center;
 35 
  align-items: center;
36 
  z-index: 300;
 36 
  z-index: 300;
37 
`;
 37 
`;
38 
const Signup = (props) => {
 - 
 
39 
  // props destructuging
 - 
 
40 
  const { captchaKey, addNotification, aes } = props;
 38 
const Signup = ({ captchaKey, addNotification, aes }) => {
Línea 41... Línea -...
41 
 
 - 
 
42 
  // React Hook Form
 39 
 
43 
  const { register, handleSubmit, setError, errors, watch } = useForm({ mode: 'onBlur' });
 - 
 
44 
 
 - 
 
45 
  // states
 40 
  const { register, handleSubmit, setError, errors, watch } = useForm({ mode: 'onBlur' });
46 
  const [termsChecked, setTermsChecked] = useState(false);
 41 
  const [termsChecked, setTermsChecked] = useState(false);
47 
  const [registered, setRegistered] = useState(false);
 42 
  const [registered, setRegistered] = useState(false);
Línea 48... Línea 43...
48 
  const [isLoading, setIsLoading] = useState(false);
 43 
  const [isLoading, setIsLoading] = useState(false);
Línea 69... Línea 64...
69 
  };
 64 
  };
Línea 70... Línea 65...
70 
 
 65 
 
71 
  const onSubmitHandler = async (data) => {
 66 
  const onSubmitHandler = async (data) => {
72 
    setIsLoading(true);
 67 
    setIsLoading(true);
- 
 
 68 
    const formData = new FormData();
73 
    const formData = new FormData();
 69 
 
74 
    Object.entries(data).map(([key, value]) => {
 70 
    Object.entries(data)
75 
      if (key === "email" && value)
 - 
 
76 
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
 71 
      .map(([key, value]) => {
77 
      if (key === "password" && value)
 - 
 
78 
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
 - 
 
79 
      if (key === "confirmation" && value)
 72 
        if (key === "email" || key === "password" || key === "confirmation")
80 
        return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
 73 
          return formData.append(key, CryptoJSAesJson.encrypt(value, aes))
81 
      formData.append(key, value);
 74 
        return formData.append(key, value);
82 
    });
 75 
      })
- 
 
 76 
    formData.append("captcha", reCaptchaToken.current);
83 
    formData.append("captcha", reCaptchaToken.current);
 77 
 
84 
    await axios.post("/signup", formData).then((response) => {
 78 
    await axios.post("/signup", formData)
85 
      const resData = response.data;
 79 
      .then(({ data }) => {
- 
 
 80 
        if (!data.success) {
- 
 
 81 
          if (typeof data.data !== "string") {
- 
 
 82 
            Object.entries(data.data).map(([key, value]) => {
- 
 
 83 
              setError(key, { type: "manual", message: Array.isArray(value) ? value[0] : value })
- 
 
 84 
            })
- 
 
 85 
          }
- 
 
 86 
          addNotification({ style: "danger", msg: data.data })
- 
 
 87 
          reCaptchaInstance.current.reset()
- 
 
 88 
          signupVerifyCallbackHandler()
86 
      if (resData.success) {
 89 
        }
87 
        // window.location.replace(resData.data);
 90 
        window.location.replace(data.data);
88 
        reCaptchaInstance.current.reset();
 91 
        reCaptchaInstance.current.reset();
89 
        signupExpiredCallbackHandler();
 92 
        signupExpiredCallbackHandler();
90 
        setRegistered(true);
 - 
 
91 
      } else {
 - 
 
92 
        const resError = resData.data;
 - 
 
93 
        if (resError.constructor.name === "Object") {
 - 
 
94 
          Object.entries(resError).map(([key, value]) => {
 - 
 
95 
            // if (key in getValues()) {
 - 
 
96 
            setError(key, {
 - 
 
97 
              type: "manual",
 - 
 
98 
              message: Array.isArray(value) ? value[0] : value,
 - 
 
99 
            });
 - 
 
100 
            // }
 - 
 
101 
          });
 - 
 
102 
        } else {
 - 
 
103 
          addNotification({
 - 
 
104 
            style: "danger",
 - 
 
105 
            msg: resError,
 - 
 
106 
          });
 - 
 
107 
        }
 - 
 
108 
        reCaptchaInstance.current.reset();
 - 
 
109 
        signupVerifyCallbackHandler();
 93 
        setRegistered(true);
110 
      }
 - 
 
111 
    })
 94 
      })
112 
      .catch(err => {
 - 
 
113 
        ('>>: err > ', err)
 - 
 
114 
        addNotification({
 - 
 
115 
          style: "error",
 95 
      .catch(err => {
116 
          msg: 'Disculpe, ha ocurrido un error',
 96 
        addNotification({ style: "error", msg: 'Disculpe, ha ocurrido un error' })
117 
        });
 97 
        console.log(`Error: ${err}`)
118 
      })
 - 
 
119 
      .finally(() => {
 98 
      })
120 
        setIsLoading(false);
 - 
 
121 
      });
 99 
      .finally(() => setIsLoading(false))
Línea 122... Línea 100...
122 
  };
 100 
  };
123 
 
 - 
 
124 
  const handleOnRecaptchaLoad = () => {
 - 
 
Línea 125... Línea 101...
125 
    reCaptchaToken.current = "";
 101 
 
126 
  };
 102 
  const handleOnRecaptchaLoad = () => reCaptchaToken.current = ""
127 
 
 103 
 
128 
  if (registered) {
 104 
  if (registered) {
Línea 166... Línea 142...
166 
              </div>
 142 
              </div>
167 
              {errors.email && (
 143 
              {errors.email && (
168 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
 144 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
169 
              )}
 145 
              )}
170 
            </div>
 146 
            </div>
171 
 
 - 
 
172 
            {/* <!--sn-field end--> */}
 - 
 
173 
          </div>
 147 
          </div>
Línea 174... Línea 148...
174 
 
 148 
 
175 
          <div className="col-lg-12 no-pdd">
 149 
          <div className="col-lg-12 no-pdd">
176 
            <div className="inputContainer">
 150 
            <div className="inputContainer">
Línea 187... Línea 161...
187 
                  })}
 161 
                  })}
188 
                  placeholder="Nombre"
 162 
                  placeholder="Nombre"
189 
                />
 163 
                />
190 
                <i className="la la-user"></i>
 164 
                <i className="la la-user"></i>
191 
              </div>
 165 
              </div>
192 
              {errors.first_name && (
 - 
 
193 
                <FormErrorFeedback>
 - 
 
194 
                  {errors.first_name.message}
 166 
              {errors.first_name && <FormErrorFeedback>{errors.first_name.message}</FormErrorFeedback>}
195 
                </FormErrorFeedback>
 - 
 
196 
              )}
 - 
 
197 
            </div>
 167 
            </div>
198 
          </div>
 168 
          </div>
199 
          <div className="col-lg-12 no-pdd">
 169 
          <div className="col-lg-12 no-pdd">
200 
            <div className="inputContainer">
 170 
            <div className="inputContainer">
201 
              <div className="sn-field">
 171 
              <div className="sn-field">
Línea 237... Línea 207...
237 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
 207 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
238 
                  placeholder="Clave"
 208 
                  placeholder="Clave"
239 
                />
 209 
                />
240 
                <i className="la la-lock"></i>
 210 
                <i className="la la-lock"></i>
241 
              </div>
 211 
              </div>
242 
              {errors.password && (
 - 
 
243 
                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 212 
              {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
244 
              )}
 - 
 
245 
            </div>
 213 
            </div>
246 
          </div>
 214 
          </div>
247 
          <div className="col-lg-12 no-pdd">
 215 
          <div className="col-lg-12 no-pdd">
248 
            <div className="inputContainer">
 216 
            <div className="inputContainer">
249 
              <div className="sn-field">
 217 
              <div className="sn-field">
250 
                <input
 218 
                <input
251 
                  type="password"
 219 
                  type="password"
252 
                  name="confirmation"
 220 
                  name="confirmation"
253 
                  ref={register({
 221 
                  ref={register({
254 
                    required: "Este campo es requerido",
 222 
                    required: "Este campo es requerido",
255 
                    validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
223 
                    validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
256 
                  })}
 224 
                  })}
257 
                  placeholder="Confirme su clave"
 225 
                  placeholder="Confirme su clave"
258 
                />
 226 
                />
259 
                <i className="la la-lock"></i>
 227 
                <i className="la la-lock" />
260 
              </div>
 228 
              </div>
261 
              {errors.confirmation && (
 - 
 
262 
                <FormErrorFeedback>
 - 
 
263 
                  {errors.confirmation.message}
 229 
              {errors.confirmation && <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>}
264 
                </FormErrorFeedback>
 - 
 
265 
              )}
 - 
 
266 
            </div>
 230 
            </div>
267 
          </div>
 231 
          </div>
Línea 268... Línea 232...
268 
 
 232 
 
269 
          <div className="col-lg-12 no-pdd">
 233 
          <div className="col-lg-12 no-pdd">
Línea 286... Línea 250...
286 
                  </label>
 250 
                  </label>
287 
                  <small onClick={() => setTermsChecked(!termsChecked)}>
 251 
                  <small onClick={() => setTermsChecked(!termsChecked)}>
288 
                    Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
 252 
                    Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
289 
                  </small>
 253 
                  </small>
290 
                </div>
 254 
                </div>
291 
                {/* <!--fgt-sec end--> */}
 - 
 
292 
              </div>
 255 
              </div>
293 
              {errors.terms_and_conditions && (
 256 
              {errors.terms_and_conditions &&
294 
                <FormErrorFeedback>
 257 
                <FormErrorFeedback>
295 
                  {errors.terms_and_conditions.message}
 258 
                  {errors.terms_and_conditions.message}
296 
                </FormErrorFeedback>
 259 
                </FormErrorFeedback>
297 
              )}
 260 
              }
298 
            </div>
 261 
            </div>
299 
          </div>
 262 
          </div>
Línea 300... Línea 263...
300 
 
 263 
 
301 
          <div className="col-lg-12 no-pdd">
 264 
          <div className="col-lg-12 no-pdd">
Línea 323... Línea 286...
323 
            >
 286 
            >
324 
              Registrarse
 287 
              Registrarse
325 
            </button>
 288 
            </button>
326 
          </div>
 289 
          </div>
327 
        </div>
 290 
        </div>
328 
        {/* <?php echo $this->form()->closeTag($form); ?> */}
 - 
 
329 
      </form>
 291 
      </form>
330 
      {isLoading ? (
 292 
      {isLoading &&
331 
        <StyledSpinnerContainer>
 293 
        <StyledSpinnerContainer>
332 
          <Spinner />
 294 
          <Spinner />
333 
        </StyledSpinnerContainer>
 295 
        </StyledSpinnerContainer>}
334 
      ) : (
 - 
 
335 
        ""
 - 
 
336 
      )}
 - 
 
337 
    </React.Fragment>
 296 
    </React.Fragment>
338 
  );
 297 
  );
339 
};
 298 
};
Línea 340... Línea 299...
340 
 
 299