Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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