Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 662 | Ir a la última revisión | | 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";
10 
 
11 
const StyledCheck = styled.div`
12 
  display: flex;
13 
  flex-direction: column;
14 
  justify-content: center;
15 
  align-items: center;
16 
  img {
17 
    width: 100px;
18 
    margin-bottom: 1rem;
19 
  }
20 
  p {
21 
    text-align: center;
22 
  }
23 
`;
24 
const StyledSpinnerContainer = styled.div`
25 
  position: absolute;
26 
  left: 0;
27 
  top: 0;
28 
  width: 100%;
29 
  height: 100%;
30 
  background: rgba(255, 255, 255, 0.4);
31 
  display: flex;
32 
  justify-content: center;
33 
  align-items: center;
34 
  z-index: 300;
35 
`;
36 
const Signup = (props) => {
37 
  // props destructuging
38 
  const { captchaKey, addNotification, aes } = props;
39 
 
40 
  // React Hook Form
41 
  const { register, handleSubmit, setError, errors } = useForm();
42 
 
43 
  // states
44 
  const [termsChecked, setTermsChecked] = useState(false);
45 
  const [registered, setRegistered] = useState(false);
46 
  const [isLoading, setIsLoading] = useState(false);
47 
 
48 
  // Recaptcha
49 
  const [isVerified, setIsVerified] = useState(false);
50 
  const reCaptchaInstance = useRef();
51 
  const reCaptchaToken = useRef("");
52 
 
53 
  useEffect(() => {
54 
    reCaptchaInstance.current.reset();
55 
  }, []);
56 
 
57 
  const signupVerifyCallbackHandler = (response) => {
58 
    if (response) {
59 
      reCaptchaToken.current = response;
60 
      setIsVerified(true);
61 
    }
62 
  };
63 
 
64 
  const signupExpiredCallbackHandler = () => {
65 
    reCaptchaToken.current = "";
66 
    setIsVerified(false);
67 
  };
68 
 
69 
  const onSubmitHandler = async (data, e) => {
70 
    console.log("data");
71 
    console.log(data);
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()) {
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();
110 
      }
111 
    })
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);
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 
                  />
276 
                  <label
277 
                    forhtml="terms_and_conditions"
278 
                    onClick={() => {
279 
                      setTermsChecked(!termsChecked);
280 
                    }}
281 
                  >
282 
                    <span></span>
283 
                  </label>
284 
                  <small
285 
                    onClick={() => {
286 
                      setTermsChecked(!termsChecked);
287 
                    }}
288 
                  >
289 
                    Si, entiendo y acepto las Condiciones y Términos
290 
                  </small>
291 
                </div>
292 
                {/* <!--fgt-sec end--> */}
293 
              </div>
294 
              {errors.terms_and_conditions && (
295 
                <FormErrorFeedback>
296 
                  {errors.terms_and_conditions.message}
297 
                </FormErrorFeedback>
298 
              )}
299 
            </div>
300 
          </div>
301 
 
302 
          <div className="col-lg-12 no-pdd">
303 
            <div className="sn-field">
304 
              <Recaptcha
305 
                sitekey={captchaKey}
306 
                verifyCallback={signupVerifyCallbackHandler}
307 
                verifyCallbackName="signupVerifyCallbackHandler"
308 
                expiredCallback={signupExpiredCallbackHandler}
309 
                expiredCallbackName="signupExpiredCallbackHandler"
310 
                ref={reCaptchaInstance}
311 
                render="explicit"
312 
                onloadCallback={handleOnRecaptchaLoad}
313 
                hl="es"
314 
              />
315 
            </div>
316 
          </div>
317 
 
318 
          <div className="col-lg-12 no-pdd">
319 
            <button
320 
              type="submit"
321 
              value="submit"
322 
              id="btn-submit"
323 
              disabled={!isVerified}
324 
            >
325 
              Registrarse
326 
            </button>
327 
          </div>
328 
        </div>
329 
        {/* <?php echo $this->form()->closeTag($form); ?> */}
330 
      </form>
331 
      {isLoading ? (
332 
        <StyledSpinnerContainer>
333 
          <Spinner />
334 
        </StyledSpinnerContainer>
335 
      ) : (
336 
        ""
337 
      )}
338 
    </React.Fragment>
339 
  );
340 
};
341 
 
342 
export default Signup;