Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 662 Rev 3682
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable react/prop-types */
1 
import React from "react";
 2 
import React from "react";
2 
import { useRef, useState, useEffect } from "react";
 3 
import { useRef, useState, useEffect } from "react";
3 
import { useForm } from "react-hook-form";
 4 
import { useForm } from "react-hook-form";
4 
import styled from "styled-components";
 5 
import styled from "styled-components";
5 
import {axios} from "../../../../utils";
 6 
import { axios } from "../../../../utils";
6 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
 7 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
7 
import Recaptcha from "react-recaptcha";
 8 
import Recaptcha from "react-recaptcha";
8 
import Spinner from "../../../../shared/loading-spinner/Spinner";
 9 
import Spinner from "../../../../shared/loading-spinner/Spinner";
9 
import {Link} from 'react-router-dom'
 10 
import { Link } from 'react-router-dom'
10 
import CryptoJSAesJson from "../../../../utils/crypto-js/cryptojs-aes-format";
 11 
import CryptoJSAesJson from "../../../../utils/crypto-js/cryptojs-aes-format";
Línea 11... Línea 12...
11 
 
 12 
 
12 
const StyledCheck = styled.div`
 13 
const StyledCheck = styled.div`
13 
  display: flex;
 14 
  display: flex;
Línea 32... Línea 33...
32 
  display: flex;
 33 
  display: flex;
33 
  justify-content: center;
 34 
  justify-content: center;
34 
  align-items: center;
 35 
  align-items: center;
35 
  z-index: 300;
 36 
  z-index: 300;
36 
`;
 37 
`;
37 
const ForgotPassword = (props) => {
 - 
 
38 
  // props destructuring
 - 
 
39 
  const { captchaKey, addNotification, aes } = props;
 38 
const ForgotPassword = ({ captchaKey, addNotification, aes }) => {
Línea 40... Línea 39...
40 
 
 39 
 
41 
  // states
 40 
  // states
42 
  const [forgotSent, setForgotSent] = useState(false);
 41 
  const [forgotSent, setForgotSent] = useState(false);
Línea 64... Línea 63...
64 
  const forgotPasswordExpiredCallbackHandler = () => {
 63 
  const forgotPasswordExpiredCallbackHandler = () => {
65 
    reCaptchaToken.current = "";
 64 
    reCaptchaToken.current = "";
66 
    setIsVerified(false);
 65 
    setIsVerified(false);
67 
  };
 66 
  };
Línea 68... Línea 67...
68 
 
 67 
 
69 
  const onSubmitHandler = async (data, e) => {
 68 
  const onSubmitHandler = async (data) => {
70 
    setIsLoading(true);
 69 
    setIsLoading(true);
71 
    const formData = new FormData();
 70 
    const formData = new FormData();
72 
    Object.entries(data).map(([key, value]) => {
 71 
    Object.entries(data).map(([key, value]) => {
73 
      if (key === "email" && value)
 72 
      if (key === "email" && value)
Línea 104... Línea 103...
104 
        loginExpiredCallbackHandler();
 103 
        loginExpiredCallbackHandler();
105 
      }
 104 
      }
106 
    });
 105 
    });
107 
    setIsLoading(false);
 106 
    setIsLoading(false);
108 
  };
 107 
  };
109 
  const handleOnRecaptchaLoad = () => {
 108 
  const handleOnRecaptchaLoad = () => reCaptchaToken.current = ""
110 
    reCaptchaToken.current = "";
 - 
 
111 
  };
 - 
 
Línea 112... Línea 109...
112 
 
 109 
 
113 
  if (forgotSent) {
 110 
  if (forgotSent) {
114 
    return (
 111 
    return (
115 
      <StyledCheck>
 112 
      <StyledCheck>
Línea 121... Línea 118...
121 
          </button>
 118 
          </button>
122 
        </Link>
 119 
        </Link>
123 
      </StyledCheck>
 120 
      </StyledCheck>
124 
    );
 121 
    );
125 
  }
 122 
  }
- 
 
 123
126 
  return (
 124 
  return (
127 
    <React.Fragment>
 125 
    <React.Fragment>
128 
      <h3>Olvide mi Clave</h3>
 126 
      <h3>Olvide mi Clave</h3>
129 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 127 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
130 
        <div className="row">
 128 
        <div className="row">
Línea 135... Línea 133...
135 
                  type="email"
 133 
                  type="email"
136 
                  name="email"
 134 
                  name="email"
137 
                  placeholder="Correo electrónico"
 135 
                  placeholder="Correo electrónico"
138 
                  ref={register({
 136 
                  ref={register({
139 
                    required: "Este campo es requerido",
 137 
                    required: "Este campo es requerido",
- 
 
 138 
                    pattern: {
- 
 
 139 
                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
- 
 
 140 
                      message: "Debe ser una dirección de correo electrónico valida"
- 
 
 141 
                    }
140 
                  })}
 142 
                  })}
141 
                  maxLength="64"
 - 
 
142 
                />
 143 
                />
143 
                <i className="la la-envelope"></i>
 144 
                <i className="la la-envelope" />
144 
              </div>
 145 
              </div>
145 
              {errors.email && (
 - 
 
146 
                <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>
 146 
              {errors.email && <FormErrorFeedback>{errors.email.message}</FormErrorFeedback>}
147 
              )}
 - 
 
148 
            </div>
 147 
            </div>
149 
 
 - 
 
150 
            {/* <!--sn-field end--> */}
 - 
 
151 
          </div>
 148 
          </div>
152 
 
 - 
 
153 
          <div className="col-lg-12 no-pdd">
 149 
          <div className="col-lg-12 no-pdd">
154 
            <div className="inputContainer">
 150 
            <div className="inputContainer">
155 
              <div className="sn-field">
 151 
              <div className="sn-field">
156 
                <Recaptcha
 152 
                <Recaptcha
157 
                  sitekey={captchaKey}
 153 
                  sitekey={captchaKey}
Línea 165... Línea 161...
165 
                  hl="es"
 161 
                  hl="es"
166 
                />
 162 
                />
167 
              </div>
 163 
              </div>
168 
            </div>
 164 
            </div>
169 
          </div>
 165 
          </div>
170 
 
 - 
 
171 
          <div className="col-lg-12 no-pdd">
 166 
          <div className="col-lg-12 no-pdd">
172 
            <button type="submit" value="submit" disabled={!isVerified}>
 167 
            <button type="submit" value="submit" disabled={!isVerified}>
173 
              Nueva Clave
 168 
              Nueva Clave
174 
            </button>
 169 
            </button>
175 
          </div>
 170 
          </div>
176 
        </div>
 171 
        </div>
177 
      </form>
 172 
      </form>
178 
      {isLoading ? (
 173 
      {isLoading &&
179 
        <StyledSpinnerContainer>
 174 
        <StyledSpinnerContainer>
180 
          <Spinner />
 175 
          <Spinner />
181 
        </StyledSpinnerContainer>
 176 
        </StyledSpinnerContainer>}
182 
      ) : (
 - 
 
183 
        ""
 - 
 
184 
      )}
 - 
 
185 
    </React.Fragment>
 177 
    </React.Fragment>
186 
  );
 178 
  );
187 
};
 179 
};
Línea 188... Línea 180...
188 
 
 180