Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4421 | Rev 5756 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4421 Rev 5697
Línea 1... Línea -...
1 
/* eslint-disable react/prop-types */
 - 
 
2 
import React from "react";
 - 
 
3 
import { useRef, useState, useEffect } from "react";
 1 
import React, { useRef, useState, useEffect } from 'react'
4 
import { useForm } from "react-hook-form";
 2 
import { useForm } from 'react-hook-form'
5 
import styled from "styled-components";
 - 
 
6 
import { axios } from "../../../../utils";
 3 
import { axios } from '../../../../utils'
7 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
 4 
import { addNotification } from '../../../../redux/notification/notification.actions'
8 
import Recaptcha from "react-recaptcha";
 5 
import Recaptcha from 'react-recaptcha'
9 
import Spinner from "../../../../shared/loading-spinner/Spinner";
 - 
 
10 
import cryptoJsAesJson from "../../../../utils/crypto-js/cryptojs-aes-format";
 6 
import cryptoJsAesJson from '../../../../utils/crypto-js/cryptojs-aes-format'
11 
 
 7 
 
12 
const StyledSpinnerContainer = styled.div`
 8 
import Spinner from '../../../../shared/loading-spinner/Spinner'
13 
  position: absolute;
 - 
 
14 
  left: 0;
 - 
 
15 
  top: 0;
 - 
 
16 
  width: 100%;
 - 
 
17 
  height: 100%;
 - 
 
18 
  background: rgba(255, 255, 255, 0.4);
 9 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
19 
  display: flex;
 - 
 
20 
  justify-content: center;
 - 
 
21 
  align-items: center;
 - 
 
22 
  z-index: 300;
 - 
 
23 
`;
 - 
 
Línea 24... Línea 10...
24 
 
 10 
 
25 
const Login = ({
 11 
const Login = ({
26 
  captchaKey,
 - 
 
27 
  addNotification,
 12 
  captchaKey,
28 
  facebookOauth,
 13 
  facebookOauth,
29 
  twitterOauth,
 14 
  twitterOauth,
30 
  googleOauth,
 15 
  googleOauth,
31 
  aes,
 16 
  aes,
32 
  defaultNetwork
 17 
  defaultNetwork,
- 
 
 18 
}) => {
- 
 
 19 
  const [rememberChecked, setRememberChecked] = useState(false)
- 
 
 20 
  const [isLoading, setIsLoading] = useState(false)
- 
 
 21 
  const [isVerified, setIsVerified] = useState(false)
- 
 
 22 
 
- 
 
 23 
  const reCaptchaToken = useRef('')
Línea 33... Línea -...
33 
}) => {
 - 
 
34 
 
 - 
 
35 
  const {
 24 
  const reCaptchaInstance = useRef()
36 
    register,
 - 
 
37 
    handleSubmit,
 - 
 
38 
    errors,
 - 
 
39 
    setError,
 - 
 
40 
    getValues,
 25 
 
41 
    setValue,
 - 
 
42 
  } = useForm({ mode: 'onBlur' });
 - 
 
43 
 
 - 
 
44 
  // Recaptcha
 - 
 
45 
  const reCaptchaToken = useRef("");
 - 
 
46 
  const [isVerified, setIsVerified] = useState(false);
 - 
 
47 
  const reCaptchaInstance = useRef();
 - 
 
48 
 
 - 
 
49 
  // states
 - 
 
Línea 50... Línea 26...
50 
  const [rememberChecked, setRememberChecked] = useState(false);
 26 
  const { register, handleSubmit, errors, setError, getValues, setValue } =
51 
  const [isLoading, setIsLoading] = useState(false);
 27 
    useForm({ mode: 'onBlur' })
52 
 
 28 
 
Línea 53... Línea 29...
53 
  useEffect(() => {
 29 
  useEffect(() => {
54 
    reCaptchaInstance.current.reset();
 - 
 
55 
  }, []);
 30 
    reCaptchaInstance.current.reset()
56 
 
 31 
  }, [])
57 
  const onSubmitHandler = async (data, event) => {
 32 
 
58 
    // setIsLoading(true);
 33 
  const onSubmitHandler = async (data, event) => {
59 
    const formData = new FormData();
 34 
    const formData = new FormData()
60 
    Object.entries(data).map(([key, value]) => {
 35 
    Object.entries(data).map(([key, value]) => {
61 
      if (key === "email" && value)
 36 
      if (key === 'email' && value)
62 
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes));
 37 
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes))
63 
      if (key === "password" && value)
 38 
      if (key === 'password' && value)
64 
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes));
 39 
        return formData.append(key, cryptoJsAesJson.encrypt(value, aes))
65 
      if (value) formData.append(key, value);
 40 
      if (value) formData.append(key, value)
66 
    });
 41 
    })
67 
    formData.append("captcha", reCaptchaToken.current);
 42 
    formData.append('captcha', reCaptchaToken.current)
68 
    await axios
 43 
    await axios
69 
      .post("/signin", formData)
 44 
      .post('/signin', formData)
70 
      .then(({ data: response }) => {
 45 
      .then(({ data: response }) => {
71 
        const { success, data } = response
 46 
        const { success, data } = response
72 
        if (!success) {
 47 
        if (!success) {
73 
          if (data.constructor.name === "Object") {
 48 
          if (data.constructor.name === 'Object') {
74 
            Object.entries(data).map(([key, value]) => {
 49 
            Object.entries(data).map(([key, value]) => {
75 
              if (key in getValues()) {
 50 
              if (key in getValues()) {
76 
                setError(key, {
 51 
                setError(key, {
77 
                  type: "manual",
 52 
                  type: 'manual',
78 
                  message: Array.isArray(value) ? value[0] : value,
 53 
                  message: Array.isArray(value) ? value[0] : value,
79 
                });
 54 
                })
80 
              }
 55 
              }
81 
            });
 - 
 
82 
            return
 - 
 
83 
          }
 - 
 
84 
          addNotification({
 56 
            })
85 
            style: "danger",
 57 
            return
- 
 
 58 
          }
86 
            msg: data,
 59 
          addNotification({ style: 'danger', msg: data })
87 
          });
 60 
          return
88 
          return
 61 
        }
89 
        }
 62 
 
90 
        window.location.replace(data);
 63 
        window.location.replace(data)
- 
 
 64 
        event.target.reset()
91 
        event.target.reset();
 65 
      })
92 
      })
 66 
      .catch((err) => console.log(`Error: ${err}`))
93 
      .catch((err) => console.log(`Error: ${err}`))
 - 
 
94 
      .finally(() => setIsLoading(false))
 67 
      .finally(() => setIsLoading(false))
95 
    reCaptchaInstance.current.reset();
 68 
 
Línea 96... Línea 69...
96 
    loginExpiredCallbackHandler();
 69 
    reCaptchaInstance.current.reset()
97 
    // setIsLoading(false);
 70 
    loginExpiredCallbackHandler()
98 
    setValue("password", "");
 71 
    setValue('password', '')
99 
  };
 72 
  }
Línea 100... Línea 73...
100 
 
 73 
 
101 
  const loginVerifyCallbackHandler = (response) => {
 74 
  const loginVerifyCallbackHandler = (response) => {
102 
    reCaptchaToken.current = response;
 75 
    reCaptchaToken.current = response
103 
    setIsVerified(true);
 76 
    setIsVerified(true)
Línea 104... Línea 77...
104 
  };
 77 
  }
105 
 
 78 
 
106 
  const loginExpiredCallbackHandler = () => {
 79 
  const loginExpiredCallbackHandler = () => {
Línea 107... Línea 80...
107 
    reCaptchaToken.current = "";
 80 
    reCaptchaToken.current = ''
108 
    setIsVerified(false);
 81 
    setIsVerified(false)
109 
  };
 82 
  }
110 
 
 83 
 
111 
  const handleOnRecaptchaLoad = () => {
 84 
  const handleOnRecaptchaLoad = () => {
112 
    reCaptchaToken.current = "";
 85 
    reCaptchaToken.current = ''
113 
  };
 86 
  }
114 
 
 87 
 
115 
  const getRedirectUrl = async (endpoint) => {
 88 
  const getRedirectUrl = async (endpoint) => {
116 
    try {
 89 
    try {
- 
 
 90 
      const res = await axios.get(endpoint)
117 
      const res = await axios.get(endpoint)
 91 
      if (res.data && res.data.data) {
118 
      if (res.data && res.data.data) {
 92 
        window.location.href = res.data.data
119 
        window.location.href = res.data.data
 93 
      }
120 
      }
 94 
    } catch (error) {
121 
    } catch (error) {
 - 
 
122 
      ('>>: error > ', error)
 - 
 
123 
    }
 95 
      console.log('>>: error > ', error)
124 
  }
 96 
    }
125 
  return (
 97 
  }
126 
    <React.Fragment>
 98 
 
127 
      <h3>Entrar</h3>
 99 
  return (
128 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 100 
    <>
129 
        <div className="row">
 101 
      <h3>Entrar</h3>
130 
          <div className="col-lg-12 no-pdd">
 102 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
131 
            <div className="inputContainer">
 103 
        <div className="inputContainer">
132 
              <div className="sn-field">
 - 
 
133 
                <input
 - 
 
134 
                  type="email"
 104 
          <div className="sn-field">
135 
                  name="email"
 105 
            <input
136 
                  ref={register({
 - 
 
137 
                    required: "Este campo es requerido",
 106 
              type="email"
138 
                    pattern: {
 - 
 
139 
                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
 - 
 
140 
                      message: "Debe ser una dirección de correo electrónico valida"
 - 
 
141 
                    }
 - 
 
142 
                  })}
 107 
              name="email"
143 
                  placeholder="Correo electrónico"
 - 
 
144 
                  maxLength="64"
 - 
 
145 
                />
 - 
 
146 
                <i className="la la-envelope" />
 - 
 
147 
              </div>
 - 
 
148 
              {errors.email &&
 - 
 
149 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
 - 
 
150 
              }
 - 
 
151 
            </div>
 - 
 
152 
          </div>
 108 
              ref={register({
153 
          <div className="col-lg-12 no-pdd">
 109 
                required: 'Este campo es requerido',
154 
            <div className="inputContainer">
 - 
 
155 
              <div className="sn-field">
 - 
 
156 
                <input
 - 
 
157 
                  type="password"
 - 
 
158 
                  name="password"
 - 
 
159 
                  ref={register({
 110 
                pattern: {
160 
                    required: "Este campo es requerido",
 111 
                  value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
161 
                    pattern: {
 - 
 
162 
                      value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
 - 
 
163 
                      message: 'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
 - 
 
164 
                    }
 - 
 
165 
                  })}
 - 
 
166 
                  placeholder="Clave"
 - 
 
167 
                />
 - 
 
168 
                <i className="la la-lock"></i>
 - 
 
169 
              </div>
 - 
 
170 
              {errors.password && (
 - 
 
171 
                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 - 
 
172 
              )}
 - 
 
173 
            </div>
 - 
 
174 
          </div>
 - 
 
175 
 
 - 
 
176 
          <div className="col-lg-12 no-pdd">
 - 
 
177 
            <div className="inputContainer">
 - 
 
178 
              <div className="checky-sec">
 - 
 
179 
                <div className="fgt-sec">
 - 
 
180 
                  <input
 - 
 
181 
                    type="checkbox"
 - 
 
182 
                    name="remember"
 - 
 
183 
                    id="remember"
 - 
 
184 
                    checked={rememberChecked}
 - 
 
185 
                    ref={register}
 - 
 
186 
                    value="1"
 - 
 
187 
                    readOnly
 - 
 
188 
                  />
 - 
 
189 
                  <label onClick={() => setRememberChecked(!rememberChecked)}>
 - 
 
190 
                    <span></span>
 112 
                  message:
- 
 
 113 
                    'Debe ser una dirección de correo electrónico valida',
- 
 
 114 
                },
191 
                  </label>
 115 
              })}
- 
 
 116 
              placeholder="Correo electrónico"
192 
                  <small onClick={() => setRememberChecked(!rememberChecked)}>
 117 
              maxLength="64"
193 
                    Recuerdame
 118 
            />
194 
                  </small>
 119 
            <i className="la la-envelope" />
195 
                </div>
 120 
          </div>
196 
              </div>
 121 
          {errors.email && (
197 
            </div>
 122 
            <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
198 
          </div>
 123 
          )}
199 
 
 124 
        </div>
200 
          <div className="col-lg-12 no-pdd">
 125 
        <div className="inputContainer">
- 
 
 126 
          <div className="sn-field">
201 
            <div className="sn-field">
 127 
            <input
202 
              <Recaptcha
 128 
              type="password"
203 
                sitekey={captchaKey}
 129 
              name="password"
204 
                verifyCallback={loginVerifyCallbackHandler}
 130 
              ref={register({
- 
 
 131 
                required: 'Este campo es requerido',
205 
                verifyCallbackName="loginVerifyCallbackHandler"
 132 
                pattern: {
- 
 
 133 
                  value:
206 
                expiredCallback={loginExpiredCallbackHandler}
 134 
                    /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
- 
 
 135 
                  message:
- 
 
 136 
                    'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-',
- 
 
 137 
                },
- 
 
 138 
              })}
207 
                expiredCallbackName="loginExpiredCallbackHandler"
 139 
              placeholder="Clave"
208 
                ref={reCaptchaInstance}
 140 
            />
209 
                render="explicit"
 141 
            <i className="la la-lock"></i>
210 
                onloadCallback={handleOnRecaptchaLoad}
 142 
          </div>
211 
                hl="es"
 143 
          {errors.password && (
212 
              />
 144 
            <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
213 
            </div>
 145 
          )}
- 
 
 146 
        </div>
- 
 
 147 
        <div className="checky-sec">
- 
 
 148 
          <div className="fgt-sec">
214 
          </div>
 149 
            <input
- 
 
 150 
              type="checkbox"
- 
 
 151 
              name="remember"
- 
 
 152 
              id="remember"
- 
 
 153 
              checked={rememberChecked}
215 
          <div className="col-lg-12 no-pdd"></div>
 154 
              ref={register}
216 
          <div className="col-lg-12 no-pdd">
 155 
              value="1"
217 
            <button
 156 
              readOnly
218 
              type="submit"
 157 
            />
- 
 
 158 
            <label onClick={() => setRememberChecked(!rememberChecked)}>
- 
 
 159 
              <span></span>
- 
 
 160 
            </label>
- 
 
 161 
            <small onClick={() => setRememberChecked(!rememberChecked)}>
- 
 
 162 
              Recuerdame
- 
 
 163 
            </small>
- 
 
 164 
          </div>
- 
 
 165 
        </div>
- 
 
 166 
        <div className="sn-field">
- 
 
 167 
          <Recaptcha
- 
 
 168 
            sitekey={captchaKey}
- 
 
 169 
            verifyCallback={loginVerifyCallbackHandler}
- 
 
 170 
            verifyCallbackName="loginVerifyCallbackHandler"
- 
 
 171 
            expiredCallback={loginExpiredCallbackHandler}
- 
 
 172 
            expiredCallbackName="loginExpiredCallbackHandler"
- 
 
 173 
            ref={reCaptchaInstance}
- 
 
 174 
            render="explicit"
- 
 
 175 
            onloadCallback={handleOnRecaptchaLoad}
- 
 
 176 
            hl="es"
- 
 
 177 
          />
- 
 
 178 
        </div>
219 
              value="submit"
 179 
        <button
220 
              id="btn-submit"
 180 
          type="submit"
221 
              disabled={!isVerified}
 181 
          value="submit"
222 
            >
 182 
          id="btn-submit"
223 
              Entrar
 183 
          disabled={!isVerified}
224 
            </button>
 184 
        >
- 
 
 185 
          Entrar
225 
          </div>
 186 
        </button>
- 
 
 187 
      </form>
226 
        </div>
 188 
      {defaultNetwork && (
227 
      </form>
 189 
        <div className="login-resources">
228 
      {Boolean(defaultNetwork === 'y') &&
 190 
          <h4>Entrar usando su red social</h4>
229 
        <div className="login-resources">
 191 
          <ul>
230 
          <h4>Entrar usando su red social</h4>
 192 
            <li>
231 
          <ul>
 193 
              <a
232 
            <li>
 194 
                onClick={() => getRedirectUrl(facebookOauth)}
233 
              <a onClick={() => getRedirectUrl(facebookOauth)}
 195 
                className="cursor-pointer fb text-white"
234 
                title=""
 - 
 
235 
                className="cursor-pointer fb text-white">
 196 
                title=""
- 
 
 197 
              >
236 
                <i className="fa fa-facebook"></i> FACEBOOK
 198 
                <i className="fa fa-facebook"></i> FACEBOOK
237 
              </a>
 199 
              </a>
238 
            </li>
 200 
            </li>
239 
            <li>
 201 
            <li>
240 
              <a
 - 
 
241 
                onClick={() => getRedirectUrl(twitterOauth)}
 202 
              <a
242 
                title=""
 - 
 
243 
                className="cursor-pointer tw btn-connect-social-media text-white"
 203 
                onClick={() => getRedirectUrl(twitterOauth)}
244 
              >
 204 
                className="cursor-pointer tw btn-connect-social-media text-white"
245 
                <i className="fa fa-twitter"></i> TWITTER
 - 
 
246 
              </a>
 205 
                title=""
- 
 
 206 
              >
247 
            </li>
 207 
                <i className="fa fa-twitter"></i> TWITTER
248 
            <li
 208 
              </a>
249 
              className="bg-secondary"
 209 
            </li>
250 
            >
 210 
            <li className="bg-secondary">
251 
              <a
 211 
              <a
252 
                onClick={() => getRedirectUrl(googleOauth)}
 212 
                onClick={() => getRedirectUrl(googleOauth)}
253 
                title=""
 - 
 
254 
                className="cursor-pointer go btn-connect-social-media text-white"
 - 
 
255 
              >
 - 
 
256 
                <i className="fa fa-google"></i> GOOGLE
 - 
 
257 
              </a>
 - 
 
258 
            </li>
 - 
 
259 
          </ul>
 - 
 
260 
        </div>
 213 
                className="cursor-pointer go btn-connect-social-media text-white"
- 
 
 214 
                title=""
261 
      }
 215 
              >
262 
      {isLoading ? (
 216 
                <i className="fa fa-google"></i> GOOGLE
263 
        <StyledSpinnerContainer>
 217 
              </a>
Línea 264... Línea 218...
264 
          <Spinner />
 218 
            </li>