Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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