Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3743 | Rev 4424 | 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 
`;
3727 stevensc 38 
const Signup = ({ captchaKey, addNotification, aes }) => {
1 www 39 
 
3680 stevensc 40 
  const { register, handleSubmit, setError, errors, watch } = useForm({ mode: 'onBlur' });
1 www 41 
  const [termsChecked, setTermsChecked] = useState(false);
42 
  const [registered, setRegistered] = useState(false);
43 
  const [isLoading, setIsLoading] = useState(false);
44 
 
45 
  // Recaptcha
46 
  const [isVerified, setIsVerified] = useState(false);
47 
  const reCaptchaInstance = useRef();
48 
  const reCaptchaToken = useRef("");
49 
 
50 
  useEffect(() => {
51 
    reCaptchaInstance.current.reset();
52 
  }, []);
53 
 
54 
  const signupVerifyCallbackHandler = (response) => {
55 
    if (response) {
56 
      reCaptchaToken.current = response;
57 
      setIsVerified(true);
58 
    }
59 
  };
60 
 
61 
  const signupExpiredCallbackHandler = () => {
62 
    reCaptchaToken.current = "";
63 
    setIsVerified(false);
64 
  };
65 
 
3071 stevensc 66 
  const onSubmitHandler = async (data) => {
1 www 67 
    setIsLoading(true);
68 
    const formData = new FormData();
3727 stevensc 69 
 
70 
    Object.entries(data)
71 
      .map(([key, value]) => {
72 
        if (key === "email" || key === "password" || key === "confirmation")
73 
          return formData.append(key, CryptoJSAesJson.encrypt(value, aes))
74 
        return formData.append(key, value);
75 
      })
1 www 76 
    formData.append("captcha", reCaptchaToken.current);
3727 stevensc 77 
 
78 
    await axios.post("/signup", formData)
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()
3743 stevensc 89 
          return
3727 stevensc 90 
        }
3743 stevensc 91 
 
1 www 92 
        reCaptchaInstance.current.reset();
93 
        signupExpiredCallbackHandler();
94 
        setRegistered(true);
3727 stevensc 95 
      })
3071 stevensc 96 
      .catch(err => {
3784 stevensc 97 
        addNotification({ style: "danger", msg: 'Disculpe, ha ocurrido un error' })
3727 stevensc 98 
        console.log(`Error: ${err}`)
3071 stevensc 99 
      })
3727 stevensc 100 
      .finally(() => setIsLoading(false))
1 www 101 
  };
102 
 
3727 stevensc 103 
  const handleOnRecaptchaLoad = () => reCaptchaToken.current = ""
1 www 104 
 
105 
  if (registered) {
106 
    return (
107 
      <StyledCheck>
108 
        <img src="/images/check.png" alt="check" />
109 
        <p>
110 
          Se ha registrado correctamente. Por favor, active la cuenta desde su
111 
          correo
112 
        </p>
113 
        <Link to="/signin">
114 
          <button id="btn-submit" className="sign_in_sec_button">
115 
            Entrar
116 
          </button>
117 
        </Link>
118 
      </StyledCheck>
119 
    );
120 
  }
121 
  return (
122 
    <React.Fragment>
123 
      <h3>Registrarse</h3>
124 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
125 
        <div className="row">
126 
          <div className="col-lg-12 no-pdd">
127 
            <div className="inputContainer">
128 
              <div className="sn-field">
129 
                <input
130 
                  type="email"
131 
                  name="email"
132 
                  ref={register({
133 
                    required: "Este campo es requerido",
3680 stevensc 134 
                    pattern: {
135 
                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
136 
                      message: "Debe ser una dirección de correo electrónico valida"
137 
                    }
1 www 138 
                  })}
139 
                  maxLength="64"
140 
                  placeholder="Correo electrónico"
141 
                />
142 
                <i className="la la-envelope"></i>
143 
              </div>
144 
              {errors.email && (
145 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
146 
              )}
147 
            </div>
148 
          </div>
149 
 
150 
          <div className="col-lg-12 no-pdd">
151 
            <div className="inputContainer">
152 
              <div className="sn-field">
153 
                <input
154 
                  type="text"
155 
                  name="first_name"
156 
                  ref={register({
157 
                    required: "Este campo es requerido",
3680 stevensc 158 
                    maxLength: {
159 
                      value: 64,
160 
                      message: 'Limite de carateres superior al permitido'
161 
                    }
1 www 162 
                  })}
163 
                  placeholder="Nombre"
164 
                />
165 
                <i className="la la-user"></i>
166 
              </div>
3727 stevensc 167 
              {errors.first_name && <FormErrorFeedback>{errors.first_name.message}</FormErrorFeedback>}
1 www 168 
            </div>
169 
          </div>
170 
          <div className="col-lg-12 no-pdd">
171 
            <div className="inputContainer">
172 
              <div className="sn-field">
173 
                <input
174 
                  type="text"
175 
                  name="last_name"
176 
                  ref={register({
177 
                    required: "Este campo es requerido",
3680 stevensc 178 
                    maxLength: {
179 
                      value: 64,
180 
                      message: 'Limite de carateres superior al permitido'
181 
                    }
1 www 182 
                  })}
183 
                  placeholder="Apellido"
184 
                />
185 
                <i className="la la-user"></i>
186 
              </div>
187 
              {errors.last_name && (
188 
                <FormErrorFeedback>
189 
                  {errors.last_name.message}
190 
                </FormErrorFeedback>
191 
              )}
192 
            </div>
193 
          </div>
194 
 
195 
          <div className="col-lg-12 no-pdd">
196 
            <div className="inputContainer">
197 
              <div className="sn-field">
198 
                <input
199 
                  type="password"
200 
                  name="password"
201 
                  ref={register({
202 
                    required: "Este campo es requerido",
3680 stevensc 203 
                    pattern: {
204 
                      value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
205 
                      message: 'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
206 
                    }
1 www 207 
                  })}
208 
                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
209 
                  placeholder="Clave"
210 
                />
211 
                <i className="la la-lock"></i>
212 
              </div>
3727 stevensc 213 
              {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
1 www 214 
            </div>
215 
          </div>
216 
          <div className="col-lg-12 no-pdd">
217 
            <div className="inputContainer">
218 
              <div className="sn-field">
219 
                <input
220 
                  type="password"
221 
                  name="confirmation"
222 
                  ref={register({
223 
                    required: "Este campo es requerido",
3727 stevensc 224 
                    validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
1 www 225 
                  })}
226 
                  placeholder="Confirme su clave"
227 
                />
3727 stevensc 228 
                <i className="la la-lock" />
1 www 229 
              </div>
3727 stevensc 230 
              {errors.confirmation && <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>}
1 www 231 
            </div>
232 
          </div>
233 
 
234 
          <div className="col-lg-12 no-pdd">
235 
            <div className="inputContainer">
236 
              <div className="checky-sec st2">
237 
                <div className="sn-field fgt-sec">
238 
                  <input
239 
                    type="checkbox"
240 
                    name="terms_and_conditions"
241 
                    id="terms_and_conditions"
242 
                    checked={termsChecked}
243 
                    ref={register({
244 
                      required: "Este campo es requerido",
245 
                    })}
246 
                    value="1"
247 
                    readOnly
248 
                  />
3071 stevensc 249 
                  <label htmlFor="terms_and_conditions" onClick={() => setTermsChecked(!termsChecked)}>
1 www 250 
                    <span></span>
251 
                  </label>
3071 stevensc 252 
                  <small onClick={() => setTermsChecked(!termsChecked)}>
3680 stevensc 253 
                    Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
1 www 254 
                  </small>
255 
                </div>
256 
              </div>
3727 stevensc 257 
              {errors.terms_and_conditions &&
1 www 258 
                <FormErrorFeedback>
259 
                  {errors.terms_and_conditions.message}
260 
                </FormErrorFeedback>
3727 stevensc 261 
              }
1 www 262 
            </div>
263 
          </div>
264 
 
265 
          <div className="col-lg-12 no-pdd">
266 
            <div className="sn-field">
267 
              <Recaptcha
268 
                sitekey={captchaKey}
269 
                verifyCallback={signupVerifyCallbackHandler}
270 
                verifyCallbackName="signupVerifyCallbackHandler"
271 
                expiredCallback={signupExpiredCallbackHandler}
272 
                expiredCallbackName="signupExpiredCallbackHandler"
273 
                ref={reCaptchaInstance}
274 
                render="explicit"
275 
                onloadCallback={handleOnRecaptchaLoad}
276 
                hl="es"
277 
              />
278 
            </div>
279 
          </div>
280 
 
281 
          <div className="col-lg-12 no-pdd">
282 
            <button
283 
              type="submit"
284 
              value="submit"
285 
              id="btn-submit"
286 
              disabled={!isVerified}
287 
            >
288 
              Registrarse
289 
            </button>
290 
          </div>
291 
        </div>
292 
      </form>
3727 stevensc 293 
      {isLoading &&
1 www 294 
        <StyledSpinnerContainer>
295 
          <Spinner />
3727 stevensc 296 
        </StyledSpinnerContainer>}
1 www 297 
    </React.Fragment>
298 
  );
299 
};
300 
 
301 
export default Signup;