Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3072 | Rev 3680 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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