contentoh-components-library 21.0.39 → 21.0.42

package/dist/components/molecules/RegistrationSecondStep/index.js

@@ -28,134 +28,60 @@ var _LogoImage = require("../../atoms/LogoImage");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var RegistrationSecondStep = function RegistrationSecondStep(props) {
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      passwordStrength = _useState2[0],
-      setPasswordStrenght = _useState2[1];
+      privacyCheck = _useState2[0],
+      setPrivacyCheck = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      passwordFinal = _useState4[0],
-      setPasswordFinal = _useState4[1];
+      termsCheck = _useState4[0],
+      setTermsCheck = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(""),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      repeatedPassword = _useState6[0],
-      setRepeatedPassword = _useState6[1];
+      emptyPassword = _useState6[0],
+      setEmptyPassword = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      passwordMatches = _useState8[0],
-      setPasswordMatches = _useState8[1];
+      emptyConfirmPassword = _useState8[0],
+      setEmptyConfirmPassword = _useState8[1];
 
   var _useState9 = (0, _react.useState)(true),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      passwordToShort = _useState10[0],
-      setPasswordToShort = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      showErrors = _useState12[0],
-      setShowErrors = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      privacyCheck = _useState14[0],
-      setPrivacyCheck = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      termsCheck = _useState16[0],
-      setTermsCheck = _useState16[1];
-
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      emptyPassword = _useState18[0],
-      setEmptyPassword = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(false),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      emptyConfirmPassword = _useState20[0],
-      setEmptyConfirmPassword = _useState20[1];
-
-  var _useState21 = (0, _react.useState)(true),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      matchPasswords = _useState22[0],
-      setMatchPasswords = _useState22[1];
+      matchPasswords = _useState10[0],
+      setMatchPasswords = _useState10[1];
 
   var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
-  var upperCaseLetters = /[A-Z]/g;
-  var numbers = /[0-9]/g;
-  var specialChar = /['!','@','#','$','%','^','&','*']/g; // on passwordFinal update
 
-  (0, _react.useEffect)(function () {
-    passwordFinal === repeatedPassword ? setPasswordMatches(true) : setPasswordMatches(false);
-    passwordFinal.length < 8 ? setPasswordToShort(true) : setPasswordToShort(false);
-  }, [passwordFinal, repeatedPassword]); // on repeatedPassword update
+  var validateForm = function validateForm(evt, valid) {
+    evt.preventDefault();
+    var password = document.querySelector("#newPasswordInput").value;
 
-  (0, _react.useEffect)(function () {
-    passwordFinal === repeatedPassword ? setPasswordMatches(true) : setPasswordMatches(false);
-    repeatedPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
-  }, [passwordFinal, repeatedPassword]);
+    if (valid) {
+      !termsCheck && (valid = false);
+      !privacyCheck && (valid = false);
+      nuevoUsuario.password = password;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      valid && props.setPaso(3);
+    }
+  };
 
-  var updateInfo = function updateInfo(e, newValue) {
+  var validate = function validate(e) {
     e.preventDefault();
+    var valid = true;
     var password = document.querySelector("#newPasswordInput").value;
     password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
     var confirmPassword = document.querySelector("#confirmPasswordInput").value;
     confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+    password === confirmPassword ? setMatchPasswords(true) : setMatchPasswords(false);
 
-    if (password === confirmPassword) {
-      setMatchPasswords(true);
-    } else {
-      setMatchPasswords(false);
-    }
-
-    switch (e.target.id) {
-      case "passwordInput":
-        setPasswordStrenght(0);
-
-        if (newValue.length > 8) {
-          setPasswordStrenght(function (passwordStrenght) {
-            return passwordStrenght + 1;
-          });
-        } //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
-
-
-        newValue.match(upperCaseLetters) && setPasswordStrenght(function (passwordStrenght) {
-          return passwordStrenght + 1;
-        });
-        newValue.match(numbers) && setPasswordStrenght(function (passwordStrenght) {
-          return passwordStrenght + 1;
-        });
-        newValue.match(specialChar) && setPasswordStrenght(function (passwordStrenght) {
-          return passwordStrenght + 1;
-        }); //Actualizar value de la contraseña y guardar en sessionStorage
-
-        setPasswordFinal(newValue);
-        nuevoUsuario.password = newValue;
-        sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
-        break;
-
-      case "confirmPasswordInput":
-        setRepeatedPassword(newValue);
-        break;
-
-      default:
-        return;
+    if (password.length < 8 || confirmPassword === "" || password !== confirmPassword) {
+      valid = false;
     }
-  };
 
-  var validateForm = function validateForm(evt) {
-    evt.preventDefault();
-    setShowErrors(true);
-    var valid = true;
-    passwordToShort && (valid = false);
-    emptyConfirmPassword && (valid = false);
-    !passwordMatches && (valid = false);
-    !termsCheck && (valid = false);
-    !privacyCheck && (valid = false);
-    valid && props.setPaso(3);
+    return valid;
   };
 
   var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -170,9 +96,6 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
     emptyConfirmPassword: emptyConfirmPassword,
     matchPasswords: matchPasswords,
     textTittle: "Ingresa tus credenciales",
-    onChange: function onChange(e) {
-      return updateInfo(e, e.target.value);
-    },
     required: "required"
   }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
     className: "label-terms",
@@ -180,7 +103,10 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "checkbox-terms",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: "checkbox"
+      type: "checkbox",
+      onClick: function onClick(e) {
+        return setTermsCheck(e.target.checked);
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos.",
       headerType: "date-header"
@@ -191,10 +117,15 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
   }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "checkbox-terms",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: "checkbox"
+      type: "checkbox",
+      onClick: function onClick(e) {
+        return setPrivacyCheck(e.target.checked);
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Todos los datos estan protegidos.",
       headerType: "date-header"
+    }), !termsCheck && !!privacyCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Seleccione los terminos y condiciones y el Aviso de privacidad"
     })]
   }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "button-end",
@@ -202,7 +133,8 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        return validate(e);
+        var flag = validate(e);
+        validateForm(e, flag);
       }
     })
   }, "8"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/components/molecules/RegistrationThirdStep/index.js

@@ -7,10 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RegistrationThirdStep = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _styles = require("./styles");
@@ -52,35 +48,25 @@ var RegistrationThirdStep = function RegistrationThirdStep() {
       emptyFiscalAddress = _useState8[0],
       setEmptyFiscalAddress = _useState8[1];
 
-  var validate = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      var commercialName, bussinesName, RFC, FiscalAddress;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              commercialName = document.querySelector("#commercialNameInput").value;
-              bussinesName = document.querySelector("#bussinesNameInput").value;
-              RFC = document.querySelector("#rfcInput").value;
-              FiscalAddress = document.querySelector("#fiscalAddressInput").value;
-              commercialName === "" ? setEmptyCommercialName(true) : setEmptyCommercialName(false);
-              bussinesName === "" ? setEmptyBussinesName(true) : setEmptyBussinesName(false);
-              RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
-              FiscalAddress === "" ? setEmptyFiscalAddress(true) : setEmptyFiscalAddress(false);
-
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function validate(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+  var validate = function validate(e) {
+    e.preventDefault();
+    var valid = true;
+    var commercialName = document.querySelector("#commercialNameInput").value;
+    var bussinesName = document.querySelector("#bussinesNameInput").value;
+    var RFC = document.querySelector("#rfcInput").value;
+    var FiscalAddress = document.querySelector("#fiscalAddressInput").value;
+    commercialName === "" ? setEmptyCommercialName(true) : setEmptyCommercialName(false);
+    bussinesName === "" ? setEmptyBussinesName(true) : setEmptyBussinesName(false);
+    RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
+    FiscalAddress === "" ? setEmptyFiscalAddress(true) : setEmptyFiscalAddress(false);
+
+    if (commercialName === "" || bussinesName === "" || RFC === "" || FiscalAddress === "") {
+      valid = false;
+    }
+
+    valid && sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoRegistro));
+    valid && props.setPaso(props.paso + 1);
+  };
 
   var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "credenciales",

package/dist/components/molecules/SignInLogin/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: \"white\";\n  display: flex;\n  height: 100%;\n  width: 50%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n    & + * {\n      margin-top: 12px;\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n        cursor: pointer;\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: \"white\";\n  display: flex;\n  height: 100%;\n  width: 50%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n    & + * {\n      margin-top: 12px;\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n        cursor: pointer;\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        cursor: pointer;\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
 
 exports.Container = Container;

package/dist/components/molecules/TagAndInput/index.js

@@ -19,9 +19,7 @@ var TagAndInput = function TagAndInput(_ref) {
       value = _ref.value,
       inputPlaceHolder = _ref.inputPlaceHolder,
       inputId = _ref.inputId,
-      required = _ref.required,
-      onChange = _ref.onChange,
-      defaultValue = _ref.defaultValue;
+      required = _ref.required;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
@@ -33,9 +31,7 @@ var TagAndInput = function TagAndInput(_ref) {
       inputType: inputType,
       inputValue: value,
       inputPlaceholder: inputPlaceHolder,
-      required: required,
-      onChange: onChange,
-      defaultValue: defaultValue
+      required: required
     })]
   }, "generalTagInput-".concat(inputType));
 };

package/dist/components/molecules/VerificationCodeResetPasswordLogin/index.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VerificationCodeResetPasswordLogin = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _styles = require("./styles");
@@ -29,18 +33,92 @@ var _utils = require("./utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordLogin() {
+var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordLogin(props) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      emptyVerificationCode = _useState2[0],
-      setEmptyVerificationCode = _useState2[1];
+      resend = _useState2[0],
+      setResend = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(""),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      inputCodeVerificationAll = _useState4[0],
-      setInputCodeVerificationAll = _useState4[1];
+      awsError = _useState4[0],
+      setAwsError = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyVerificationCode = _useState6[0],
+      setEmptyVerificationCode = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(document.querySelectorAll("[id^='verificationCodeInput']")),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      inputCodeVerificationAll = _useState8[0],
+      setInputCodeVerificationAll = _useState8[1];
 
   var inputPositions = [1, 2, 3, 4, 5, 6];
+  (0, _react.useEffect)(function () {
+    props.confirmationError !== "" && setEmptyVerificationCode(false);
+  }, [props.confirmationError]);
+
+  var checkCode = function checkCode(e, flag) {
+    var valid = true;
+    e.preventDefault();
+    var code = "";
+
+    if (awsError === "" && !flag) {
+      inputPositions.map(function (position) {
+        return code = code + document.querySelector("#verificationCodeInput".concat(position)).value;
+      });
+
+      if (sessionStorage.getItem("resetError")) {
+        JSON.parse(sessionStorage.getItem("confirmationCode")) === code && (valid = false);
+      }
+
+      sessionStorage.setItem("confirmationCode", JSON.stringify(code));
+      valid && !sessionStorage.getItem("resetPasswordProcess") && props.setPaso(6);
+      valid && sessionStorage.getItem("resetPasswordProcess") && props.setPaso(8);
+    }
+  };
+
+  var validateResend = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var email;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              email = JSON.parse(sessionStorage.getItem("email"));
+              _context.prev = 2;
+              _context.next = 5;
+              return props.Auth.forgotPassword(email);
+
+            case 5:
+              sessionStorage.setItem("email", JSON.stringify(email));
+              sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+              props.setPaso(5);
+              setResend(true);
+              _context.next = 15;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
+              setAwsError(_context.t0.code);
+              console.log(_context.t0.message);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 11]]);
+    }));
+
+    return function validateResend(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
   (0, _react.useEffect)(function () {
     setInputCodeVerificationAll(document.querySelectorAll("[id^='verificationCodeInput']"));
   }, []);
@@ -53,8 +131,11 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
     })
   }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "user",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-      text: "Ingresa el código de verificación enviado a:",
+    children: [sessionStorage.getItem("email") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Ingrese el c\xF3digo de verificaci\xF3n enviado a: ".concat(JSON.parse(sessionStorage.getItem("email"))),
+      headerType: "input-name-header"
+    }), !sessionStorage.getItem("email") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Ingrese c\xF3digo de verificaci\xF3n enviado a: ".concat(JSON.parse(sessionStorage.getItem("nuevoRegistro")).email),
       headerType: "input-name-header"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "verification-code",
@@ -71,10 +152,30 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
       })
     }), emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su c\xF3digo de verificaci\xF3n"
+    }), sessionStorage.getItem("resetError") && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "C\xF3digo de verifiaci\xF3n incorrecto"
+    }), props.confirmationError === "LimitExceededException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Haz realizado demasiados intentos, intentalo m\xE1s tarde"
+    }), props.confirmationError === "CodeMismatchException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "C\xF3digo de verificaci\xF3n incorrecto"
+    }), props.confirmationError === "ExpiredCodeException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "El c\xF3digo ingresado est\xE1 expirado"
+    }), props.confirmationError === "InternalErrorException" && !emptyVerificationCode && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Algo sali\xF3 mal, porfavor vuelva a intentarlo"
+    }), awsError === "LimitExceededException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Haz realizado demasiados intentos, intentalo m\xE1s tarde"
+    }), awsError === "InternalErrorException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Algo sali\xF3 mal, porfavor vuelva a intentarlo"
+    }), resend && awsError === "" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "resendTrue",
+      children: "Se reenvi\xF3 el c\xF3digo de verificaci\xF3n correctamente"
     })]
   }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "resend-code",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      onClick: function onClick(e) {
+        return validateResend(e);
+      },
       children: "Reenviar c\xF3digo de verificaci\xF3n"
     })
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -83,12 +184,17 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        return (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+        var flag = (0, _utils.validate)(inputCodeVerificationAll);
+        checkCode(e, flag);
+        setEmptyVerificationCode(flag);
       }
     })
   }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "reset-password",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      onClick: function onClick() {
+        return props.setPaso(10);
+      },
       children: "Regresar..."
     })
   }, "6")];

package/dist/components/molecules/VerificationCodeResetPasswordLogin/utils.js

@@ -58,12 +58,12 @@ var nextInputFocus = function nextInputFocus(inputsArray, index) {
  */
 
 
-var validate = function validate(inputsArray, setEmptyVerificationCode) {
+var validate = function validate(inputsArray) {
   var contInputEmpty = 0;
   inputsArray.forEach(function (element) {
     element.value === "" ? 0 : contInputEmpty++;
   });
-  contInputEmpty === inputsArray.length ? setEmptyVerificationCode(false) : setEmptyVerificationCode(true);
+  return contInputEmpty !== inputsArray.length;
 };
 
 exports.validate = validate;

package/dist/components/organisms/ChangePassword/index.js

@@ -31,7 +31,7 @@ var _GradientPanel = require("../../atoms/GradientPanel");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var ChangePassword = function ChangePassword() {
+var ChangePassword = function ChangePassword(props) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       emptyPassword = _useState2[0],
@@ -49,7 +49,7 @@ var ChangePassword = function ChangePassword() {
 
   var validate = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      var password, confirmPassword;
+      var password, confirmPassword, valid;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -66,7 +66,17 @@ var ChangePassword = function ChangePassword() {
                 setMatchPasswords(false);
               }
 
-            case 6:
+              valid = true;
+              emptyPassword && (valid = false);
+              emptyConfirmPassword && (valid = false);
+              !matchPasswords && (valid = false);
+
+              if (valid) {
+                sessionStorage.setItem("newPassword", JSON.stringify(password));
+                !sessionStorage.getItem("resetPasswordProcess") ? props.setPaso(9) : props.setPaso(11);
+              }
+
+            case 11:
             case "end":
               return _context.stop();
           }

package/dist/components/organisms/ChangePassword/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    text-align: center;\n    position: absolute;\n    bottom: 5%;\n    left: calc(75% - 80px);\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    position: absolute;\n    bottom: 5%;\n    left: 75%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.39",
+  "version": "21.0.42",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -77,7 +77,7 @@
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
-    "contentoh-components-library": "^21.0.26",
+    "contentoh-components-library": "^21.0.40",
     "cross-env": "^7.0.3",
     "storybook-css-modules-preset": "^1.1.1"
   },

package/src/components/atoms/GeneralInput/index.js

@@ -14,9 +14,7 @@ export const GeneralInput = ({
   inputsArray,
   maxLength,
   inputSize,
-  onChange,
   required,
-  defaultValue,
 }) => {
   const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
 
@@ -45,9 +43,7 @@ export const GeneralInput = ({
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
           maxLength={maxLength && maxLength}
-          onChange={onChange}
           required={required}
-          defaultValue={defaultValue}
         />
       ) : (
         <textarea

package/src/components/atoms/GradientPanel/styles.js

@@ -37,6 +37,7 @@ export const Container = styled.div`
   }
 
   &.home-login {
+    width: 100%;
     .credenciales {
       & + * {
         margin-top: 30px;

package/src/components/atoms/Loading/index.js

@@ -1,8 +1,10 @@
 import { Container } from "./styles";
+import { LogoImage } from "../LogoImage";
 
 export const Loading = () => {
   return (
     <Container >
+      <LogoImage/>
       <div className="loader">
         <span className="first"></span>
         <span className="second"></span>

package/src/components/atoms/Loading/styles.js

@@ -1,17 +1,26 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  height: 100vh;
   width: 50%;
+  position: relative;
+  img {
+    width: 60%;
+    position: absolute;
+    bottom: 55%;
+    left: 10%;
+  }
   .loader {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100%;
+    height: 10%;
     width: 50%;
+    position: absolute;
+    bottom: 45%;
+    left:10%;
     span {
       display: inline-block;
       border-radius: 100%;

package/src/components/molecules/EmailResetPasswordLogin/index.js

@@ -26,7 +26,6 @@ export const EmailResetPasswordLogin = (props) => {
       : setInvalidEmail(false);
     emptyEmail && (valid = false);
     invalidEmail && (valid = false);
-
     if (valid) {
       try {
         await props.Auth.forgotPassword(email);