Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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