contentoh-components-library 21.0.39 → 21.0.40

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\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  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\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      }\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  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\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  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    width: 100%;\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      }\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  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
   var panelColor = _ref.panelColor;
   return panelColor ? panelColor : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)";
 }, _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, function (_ref2) {

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

@@ -7,11 +7,13 @@ exports.Loading = void 0;
 
 var _styles = require("./styles");
 
+var _LogoImage = require("../LogoImage");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Loading = function Loading() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "loader",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "first"
@@ -20,7 +22,7 @@ var Loading = function Loading() {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "third"
       })]
-    })
+    })]
   });
 };
 

package/dist/components/atoms/Loading/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  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 50%;\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 50%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 80%;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:25%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

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

@@ -55,30 +55,25 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       emptyPhone = _useState10[0],
       setEmptyPhone = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(true),
+  var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
       emptyCountry = _useState12[0],
       setEmptyCountry = _useState12[1];
 
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      showErrors = _useState14[0],
-      setShowErrors = _useState14[1];
+      invalidEmail = _useState14[0],
+      setInvalidEmail = _useState14[1];
 
   var _useState15 = (0, _react.useState)(false),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      regError = _useState16[0],
-      setRegError = _useState16[1];
+      phoneFormatError = _useState16[0],
+      setPhoneFormatError = _useState16[1];
 
   var _useState17 = (0, _react.useState)(false),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      phoneFormatError = _useState18[0],
-      setPhoneFormatError = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(false),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      emailFormatError = _useState20[0],
-      setEmailFormatError = _useState20[1];
+      regError = _useState18[0],
+      setRegError = _useState18[1];
 
   (0, _react.useEffect)(function () {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" && sessionStorage.removeItem("registrationError");
@@ -96,79 +91,47 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     sessionStorage.getItem("resetPasswordProcess") && sessionStorage.getItem("resetPasswordProcess");
   }, []);
 
-  var updateInfo = function updateInfo(e, newValue) {
-    var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
-
-    switch (e.target.id) {
-      case "nameInput":
-        nuevoUsuario.name = newValue;
-        newValue === "" ? setEmptyName(true) : setEmptyName(false);
-        break;
-
-      case "lastNameInput":
-        nuevoUsuario.lastName = newValue;
-        newValue === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-        break;
-
-      case "emailInput":
-        nuevoUsuario.email = newValue;
-        newValue === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-
-        if (!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(newValue)) {
-          setEmailFormatError(true);
-        } else {
-          setEmailFormatError(false);
-        }
-
-        break;
-
-      case "jobInput":
-        nuevoUsuario.position = newValue;
-        newValue === "" ? setEmptyJob(true) : setEmptyJob(false);
-        break;
-
-      case "phoneInput":
-        Array.from(newValue).forEach(function (digit, i) {
-          newValue.charCodeAt(i) < 48 ? setPhoneFormatError(true) : setPhoneFormatError(false);
-          newValue.charCodeAt(i) > 57 ? setPhoneFormatError(true) : setPhoneFormatError(false);
-        });
-        nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCodeSelect"))).concat(newValue);
-        newValue === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-        break;
-
-      case "countrySelect":
-        nuevoUsuario.country = newValue;
-        newValue === "" || newValue === "Selecciona tu país" ? setEmptyCountry(true) : setEmptyCountry(false);
-        break;
-
-      case "countryCodeSelect":
-        sessionStorage.setItem("countryCode", JSON.stringify(newValue));
-        nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCode"))).concat(document.querySelector("#phoneInput").value);
-        break;
-
-      default:
-        return;
-    }
-
-    sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
-  };
-
   var validateForm = function validateForm(evt) {
     var valid = true;
     evt.preventDefault();
-    setShowErrors(true);
-    emptyName && (valid = false);
-    emptyLastName && (valid = false);
-    emptyEmail && (valid = false);
-    emptyJob && (valid = false);
-    emptyPhone && (valid = false);
-    emptyCountry && (valid = false);
-    phoneFormatError && (valid = false);
-    emailFormatError && (valid = false);
-    !regError && valid && props.setPaso(function (paso) {
-      return props.paso + 1;
+    var name = document.querySelector("#nameInput").value;
+    var lastName = document.querySelector("#lastNameInput").value;
+    var email = document.querySelector("#emailInput").value;
+    var job = document.querySelector("#jobInput").value;
+    var phone = document.querySelector("#phoneInput").value;
+    var country = document.querySelector("#countrySelect").value;
+    var countryCode = document.querySelector("#countryCodeSelect").value;
+    name === "" ? setEmptyName(true) : setEmptyName(false);
+    lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    job === "" ? setEmptyJob(true) : setEmptyJob(false);
+    phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+    country === "" || country === "+ tu país" ? setEmptyCountry(true) : setEmptyCountry(false);
+    Array.from(phone).forEach(function (digit, i) {
+      phone.charCodeAt(i) < 48 ? setPhoneFormatError(true) : setPhoneFormatError(false);
+      phone.charCodeAt(i) > 57 ? setPhoneFormatError(true) : setPhoneFormatError(false);
     });
-    regError && valid && props.setPaso(4);
+    var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+
+    if (!emptyName || !emptyLastName || !emptyEmail || !emptyJob || !emptyPhone || !emptyCountry || !invalidEmail || !phoneFormatError) {
+      sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
+      nuevoUsuario.name = name;
+      nuevoUsuario.lastName = lastName;
+      nuevoUsuario.email = email;
+      nuevoUsuario.position = job;
+      nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCode"))).concat(phone);
+      nuevoUsuario.country = country;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      !regError && valid && props.setPaso(function (paso) {
+        return props.paso + 1;
+      });
+      regError && valid && props.setPaso(4);
+      console.log("rediring");
+    } else {
+      valid = false;
+      console.log("code");
+    }
   };
 
   var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -187,54 +150,37 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         inputId: "nameInput",
         label: "Nombre",
         inputPlaceHolder: "Nombre",
-        defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).name,
-        required: "required",
-        onInput: function onInput(e) {
-          return updateInfo(e, e.target.value);
-        }
+        required: "required"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
         inputType: "text",
         inputId: "lastNameInput",
         label: "Apellido",
         inputPlaceHolder: "Apellido",
-        defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).lastName,
-        required: "required",
-        onChange: function onChange(e) {
-          return updateInfo(e, e.target.value);
-        }
+        required: "required"
       })]
-    }), emptyName && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su nombre"
-    }), emptyLastName && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese sus apellidos"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
       inputType: "text",
       inputId: "emailInput",
       label: "Correo electrónico",
       inputPlaceHolder: "username@contentoh.com",
-      required: "required",
-      defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).email,
-      id: "emailInput",
-      onChange: function onChange(e) {
-        return updateInfo(e, e.target.value);
-      }
+      required: "required"
     }), regError && JSON.parse(sessionStorage.getItem("registrationError")) === "emailExists" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ya existe una cuenta asociada a este correo"
-    }), emptyEmail && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su email"
-    }), emailFormatError && showErrors && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese un correo v\xE1lido"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
       inputType: "text",
       inputId: "jobInput",
       label: "Puesto laboral",
       inputPlaceHolder: "Puesto dentro de la empresa",
-      defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).position,
-      required: "required",
-      onChange: function onChange(e) {
-        return updateInfo(e, e.target.value);
-      }
-    }), emptyJob && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      required: "required"
+    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su puesto"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Teléfono",
@@ -268,18 +214,13 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         inputId: "phoneInput",
         inputType: "text",
         inputPlaceholder: "Teléfono",
-        defaultValue: //phone without countryCode
-        JSON.parse(sessionStorage.getItem("nuevoRegistro")).phone.substring(JSON.parse(sessionStorage.getItem("countryCode")).length, JSON.parse(sessionStorage.getItem("nuevoRegistro")).phone.length - 1),
-        required: "required",
-        onChange: function onChange(e) {
-          return updateInfo(e, e.target.value);
-        }
+        required: "required"
       })]
     }), regError && JSON.parse(sessionStorage.getItem("registrationError")) === "phoneFormatError" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Introduzca un n\xFAmero v\xE1lido"
-    }), emptyPhone && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su n\xFAmero de tel\xE9fono"
-    }), phoneFormatError && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), phoneFormatError && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Introduzca un n\xFAmero valido ( Solo numeros )"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "País",
@@ -288,10 +229,6 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       name: "select",
       className: "country-options",
       id: "countrySelect",
-      defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).country,
-      onChange: function onChange(e) {
-        return updateInfo(e, e.target.value);
-      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
         value: "value1",
         selected: true,
@@ -321,7 +258,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         value: "value3",
         children: "Per\xFA"
       })]
-    }), emptyEmail && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Seleccione su pa\xEDs"
     })]
   }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -357,12 +294,10 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     })
   }, "7")];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
-        componentsArray: loginRight,
-        panelType: "home-login",
-        panelColor: _variables.GlobalColors.white
-      })
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      componentsArray: loginRight,
+      panelType: "home-login",
+      panelColor: _variables.GlobalColors.white
     })
   });
 };

package/dist/components/molecules/RegistrationFirstStep/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  display: flex;\n  width: 50%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n        p {\n          cursor: pointer;\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

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/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)(),
+      _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) {
+    var valid = true;
+    e.preventDefault();
+    var code = "";
+
+    if (awsError === "" && !emptyVerificationCode) {
+      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));
+      setEmptyVerificationCode(false);
+      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) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault(); //const email = JSON.parse(sessionStorage.getItem("email"));
+
+              _context.prev = 1;
+              _context.next = 4;
+              return props.Auth.forgotPassword(email);
+
+            case 4:
+              sessionStorage.setItem("email", JSON.stringify(email));
+              sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+              props.setPaso(5);
+              setResend(true);
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](1);
+              setAwsError(_context.t0.code);
+              console.log(_context.t0.message);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 10]]);
+    }));
+
+    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,16 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        return (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+        (0, _utils.validate)(inputCodeVerificationAll, setEmptyVerificationCode);
+        checkCode(e);
       }
     })
   }, "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.39",
+  "version": "21.0.40",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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: 80%;
+    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:25%;
     span {
       display: inline-block;
       border-radius: 100%;

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

@@ -14,11 +14,10 @@ export const RegistrationFirstStep = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [emptyJob, setEmptyJob] = useState(false);
   const [emptyPhone, setEmptyPhone] = useState(false);
-  const [emptyCountry, setEmptyCountry] = useState(true);
-  const [showErrors, setShowErrors] = useState(false);
-  const [regError, setRegError] = useState(false);
+  const [emptyCountry, setEmptyCountry] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
   const [phoneFormatError, setPhoneFormatError] = useState(false);
-  const [emailFormatError, setEmailFormatError] = useState(false);
+  const [regError, setRegError] = useState(false);
 
   useEffect(() => {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" &&
@@ -32,86 +31,71 @@ export const RegistrationFirstStep = (props) => {
       setEmptyCountry(false);
       setEmptyPhone(false);
     }
-
     sessionStorage.getItem("resetPasswordProcess") &&
       sessionStorage.getItem("resetPasswordProcess");
   }, []);
 
-  const updateInfo = (e, newValue) => {
-    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
-    switch (e.target.id) {
-      case "nameInput":
-        nuevoUsuario.name = newValue;
-        newValue === "" ? setEmptyName(true) : setEmptyName(false);
-        break;
-      case "lastNameInput":
-        nuevoUsuario.lastName = newValue;
-        newValue === "" ? setEmptyLastName(true) : setEmptyLastName(false);
-        break;
-      case "emailInput":
-        nuevoUsuario.email = newValue;
-        newValue === "" ? setEmptyEmail(true) : setEmptyEmail(false);
-        if (
-          !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-            newValue
-          )
-        ) {
-          setEmailFormatError(true);
-        } else {
-          setEmailFormatError(false);
-        }
-        break;
-      case "jobInput":
-        nuevoUsuario.position = newValue;
-        newValue === "" ? setEmptyJob(true) : setEmptyJob(false);
-        break;
-      case "phoneInput":
-        Array.from(newValue).forEach((digit, i) => {
-          newValue.charCodeAt(i) < 48
-            ? setPhoneFormatError(true)
-            : setPhoneFormatError(false);
-          newValue.charCodeAt(i) > 57
-            ? setPhoneFormatError(true)
-            : setPhoneFormatError(false);
-        });
-        nuevoUsuario.phone = `${JSON.parse(
-          sessionStorage.getItem("countryCodeSelect")
-        )}${newValue}`;
-        newValue === "" ? setEmptyPhone(true) : setEmptyPhone(false);
-        break;
-      case "countrySelect":
-        nuevoUsuario.country = newValue;
-        newValue === "" || newValue === "Selecciona tu país"
-          ? setEmptyCountry(true)
-          : setEmptyCountry(false);
-        break;
-      case "countryCodeSelect":
-        sessionStorage.setItem("countryCode", JSON.stringify(newValue));
-        nuevoUsuario.phone = `${JSON.parse(
-          sessionStorage.getItem("countryCode")
-        )}${document.querySelector("#phoneInput").value}`;
-        break;
-      default:
-        return;
-    }
-    sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
-  };
-
   const validateForm = (evt) => {
     let valid = true;
     evt.preventDefault();
-    setShowErrors(true);
-    emptyName && (valid = false);
-    emptyLastName && (valid = false);
-    emptyEmail && (valid = false);
-    emptyJob && (valid = false);
-    emptyPhone && (valid = false);
-    emptyCountry && (valid = false);
-    phoneFormatError && (valid = false);
-    emailFormatError && (valid = false);
-    !regError && valid && props.setPaso((paso) => props.paso + 1);
-    regError && valid && props.setPaso(4);
+    const name = document.querySelector("#nameInput").value;
+    const lastName = document.querySelector("#lastNameInput").value;
+    const email = document.querySelector("#emailInput").value;
+    const job = document.querySelector("#jobInput").value;
+    const phone = document.querySelector("#phoneInput").value;
+    const country = document.querySelector("#countrySelect").value;
+    const countryCode = document.querySelector("#countryCodeSelect").value;
+    name === "" ? setEmptyName(true) : setEmptyName(false);
+    lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    job === "" ? setEmptyJob(true) : setEmptyJob(false);
+    phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+    country === "" || country === "+ tu país"
+      ? setEmptyCountry(true)
+      : setEmptyCountry(false);
+    Array.from(phone).forEach((digit, i) => {
+      phone.charCodeAt(i) < 48
+        ? setPhoneFormatError(true)
+        : setPhoneFormatError(false);
+      phone.charCodeAt(i) > 57
+        ? setPhoneFormatError(true)
+        : setPhoneFormatError(false);
+    });
+    let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+    if (
+      !emptyName ||
+      !emptyLastName ||
+      !emptyEmail ||
+      !emptyJob ||
+      !emptyPhone ||
+      !emptyCountry ||
+      !invalidEmail ||
+      !phoneFormatError
+    ) {
+      sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
+      nuevoUsuario.name = name;
+      nuevoUsuario.lastName = lastName;
+      nuevoUsuario.email = email;
+      nuevoUsuario.position = job;
+      nuevoUsuario.phone = `${JSON.parse(
+        sessionStorage.getItem("countryCode")
+      )}${phone}`;
+      nuevoUsuario.country = country;
+      sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+      !regError && valid && props.setPaso((paso) => props.paso + 1);
+      regError && valid && props.setPaso(4);
+      console.log("rediring");
+    } else {
+      valid = false;
+      console.log("code");
+    }
   };
+
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>
@@ -128,57 +112,40 @@ export const RegistrationFirstStep = (props) => {
           inputId={"nameInput"}
           label={"Nombre"}
           inputPlaceHolder={"Nombre"}
-          defaultValue={
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).name
-          }
           required={"required"}
-          onInput={(e) => updateInfo(e, e.target.value)}
         />
         <TagAndInput
           inputType={"text"}
           inputId={"lastNameInput"}
           label={"Apellido"}
           inputPlaceHolder={"Apellido"}
-          defaultValue={
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).lastName
-          }
           required={"required"}
-          onChange={(e) => updateInfo(e, e.target.value)}
         />
       </div>
-      {emptyName && showErrors && <label>Ingrese su nombre</label>}
-      {emptyLastName && showErrors && <label>Ingrese sus apellidos</label>}
+      {emptyName && <label>Ingrese su nombre</label>}
+      {emptyLastName && <label>Ingrese sus apellidos</label>}
       <TagAndInput
         inputType={"text"}
         inputId={"emailInput"}
         label={"Correo electrónico"}
         inputPlaceHolder={"username@contentoh.com"}
         required={"required"}
-        defaultValue={JSON.parse(sessionStorage.getItem("nuevoRegistro")).email}
-        id="emailInput"
-        onChange={(e) => updateInfo(e, e.target.value)}
       />
       {regError &&
         JSON.parse(sessionStorage.getItem("registrationError")) ===
           "emailExists" && (
           <label>Ya existe una cuenta asociada a este correo</label>
         )}
-      {emptyEmail && showErrors && <label>Ingrese su email</label>}
-      {emailFormatError && showErrors && !emptyEmail && (
-        <label>Ingrese un correo válido</label>
-      )}
+      {emptyEmail && <label>Ingrese su email</label>}
+      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
       <TagAndInput
         inputType={"text"}
         inputId={"jobInput"}
         label={"Puesto laboral"}
         inputPlaceHolder={"Puesto dentro de la empresa"}
-        defaultValue={
-          JSON.parse(sessionStorage.getItem("nuevoRegistro")).position
-        }
         required={"required"}
-        onChange={(e) => updateInfo(e, e.target.value)}
       />
-      {emptyJob && showErrors && <label>Ingrese su puesto</label>}
+      {emptyJob && <label>Ingrese su puesto</label>}
       <ScreenHeader text={"Teléfono"} headerType={"input-name-header"} />
       <div className="phone-registration-user">
         <select name="select" className="phone-options" id="countryCodeSelect">
@@ -196,35 +163,18 @@ export const RegistrationFirstStep = (props) => {
           inputId={"phoneInput"}
           inputType={"text"}
           inputPlaceholder={"Teléfono"}
-          defaultValue={
-            //phone without countryCode
-            JSON.parse(sessionStorage.getItem("nuevoRegistro")).phone.substring(
-              JSON.parse(sessionStorage.getItem("countryCode")).length,
-              JSON.parse(sessionStorage.getItem("nuevoRegistro")).phone.length -
-                1
-            )
-          }
           required={"required"}
-          onChange={(e) => updateInfo(e, e.target.value)}
         />
       </div>
       {regError &&
         JSON.parse(sessionStorage.getItem("registrationError")) ===
           "phoneFormatError" && <label>Introduzca un número válido</label>}
-      {emptyPhone && showErrors && <label>Ingrese su número de teléfono</label>}
-      {phoneFormatError && showErrors && (
+      {emptyPhone && <label>Ingrese su número de teléfono</label>}
+      {phoneFormatError && (
         <label>Introduzca un número valido ( Solo numeros )</label>
       )}
       <ScreenHeader text={"País"} headerType={"input-name-header"} />
-      <select
-        name="select"
-        className="country-options"
-        id="countrySelect"
-        defaultValue={
-          JSON.parse(sessionStorage.getItem("nuevoRegistro")).country
-        }
-        onChange={(e) => updateInfo(e, e.target.value)}
-      >
+      <select name="select" className="country-options" id="countrySelect">
         <option value="value1" selected>
           Selecciona tu país
         </option>
@@ -237,7 +187,7 @@ export const RegistrationFirstStep = (props) => {
         <option value="value2">Panamá</option>
         <option value="value3">Perú</option>
       </select>
-      {emptyEmail && showErrors && <label>Seleccione su país</label>}
+      {emptyEmail && <label>Seleccione su país</label>}
     </div>,
     <div className="button-end" key="4">
       <Button
@@ -264,13 +214,11 @@ export const RegistrationFirstStep = (props) => {
   ];
   return (
     <Container>
-      <div>
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
-      </div>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
     </Container>
   );
 };

package/src/components/molecules/RegistrationFirstStep/styles.js

@@ -75,7 +75,10 @@ export const Container = styled.div`
     .new-login {
       & + * {
         margin-top: 20px;
+        p {
+          cursor: pointer;
+        }
       }
     }
   }
-`;
+`;

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

@@ -65,6 +65,7 @@ export const Container = styled.div`
         font-size: 13px;
         line-height: 24px;
         color: ${GlobalColors.s5};
+        cursor: pointer;
         span {
           color: ${GlobalColors.secondary_magenta};
         }

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

@@ -8,11 +8,58 @@ import { GeneralInput } from "../../atoms/GeneralInput";
 import { Button } from "../../atoms/GeneralButton";
 import { validateInput, validate } from "./utils";
 
-export const VerificationCodeResetPasswordLogin = () => {
+export const VerificationCodeResetPasswordLogin = (props) => {
+  const [resend, setResend] = useState(false);
+  const [awsError, setAwsError] = useState("");
   const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
   const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
   const inputPositions = [1, 2, 3, 4, 5, 6];
 
+  useEffect(() => {
+    props.confirmationError !== "" && setEmptyVerificationCode(false);
+  }, [props.confirmationError]);
+
+  const checkCode = (e) => {
+    let valid = true;
+    e.preventDefault();
+    let code = "";
+    if (awsError === "" && !emptyVerificationCode) {
+      inputPositions.map(
+        (position) =>
+          (code =
+            code +
+            document.querySelector(`#verificationCodeInput${position}`).value)
+      );
+      if (sessionStorage.getItem("resetError")) {
+        JSON.parse(sessionStorage.getItem("confirmationCode")) === code &&
+          (valid = false);
+      }
+      sessionStorage.setItem("confirmationCode", JSON.stringify(code));
+      setEmptyVerificationCode(false);
+      valid &&
+        !sessionStorage.getItem("resetPasswordProcess") &&
+        props.setPaso(6);
+      valid &&
+        sessionStorage.getItem("resetPasswordProcess") &&
+        props.setPaso(8);
+    }
+  };
+
+  const validateResend = async (e) => {
+    e.preventDefault();
+    //const email = JSON.parse(sessionStorage.getItem("email"));
+    try {
+      await props.Auth.forgotPassword(email);
+      sessionStorage.setItem("email", JSON.stringify(email));
+      sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+      props.setPaso(5);
+      setResend(true);
+    } catch (err) {
+      setAwsError(err.code);
+      console.log(err.message);
+    }
+  };
+
   useEffect(() => {
     setInputCodeVerificationAll(
       document.querySelectorAll("[id^='verificationCodeInput']")
@@ -29,10 +76,22 @@ export const VerificationCodeResetPasswordLogin = () => {
       />
     </div>,
     <div className="user" key="3">
-      <ScreenHeader
-        text={"Ingresa el código de verificación enviado a:"}
-        headerType={"input-name-header"}
-      />
+      {sessionStorage.getItem("email") && (
+        <ScreenHeader
+          text={`Ingrese el código de verificación enviado a: ${JSON.parse(
+            sessionStorage.getItem("email")
+          )}`}
+          headerType={"input-name-header"}
+        />
+      )}
+      {!sessionStorage.getItem("email") && (
+        <ScreenHeader
+          text={`Ingrese código de verificación enviado a: ${
+            JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
+          }`}
+          headerType={"input-name-header"}
+        />
+      )}
       <div className="verification-code">
         {inputPositions.map((position) => (
           <GeneralInput
@@ -49,21 +108,52 @@ export const VerificationCodeResetPasswordLogin = () => {
       {emptyVerificationCode && (
         <label>Ingrese su código de verificación</label>
       )}
+      {sessionStorage.getItem("resetError") && (
+        <label>Código de verifiación incorrecto</label>
+      )}
+      {props.confirmationError === "LimitExceededException" &&
+        !emptyVerificationCode && (
+          <label>Haz realizado demasiados intentos, intentalo más tarde</label>
+        )}
+      {props.confirmationError === "CodeMismatchException" &&
+        !emptyVerificationCode && (
+          <label>Código de verificación incorrecto</label>
+        )}
+      {props.confirmationError === "ExpiredCodeException" &&
+        !emptyVerificationCode && (
+          <label>El código ingresado está expirado</label>
+        )}
+      {props.confirmationError === "InternalErrorException" &&
+        !emptyVerificationCode && (
+          <label>Algo salió mal, porfavor vuelva a intentarlo</label>
+        )}
+      {awsError === "LimitExceededException" && (
+        <label>Haz realizado demasiados intentos, intentalo más tarde</label>
+      )}
+      {awsError === "InternalErrorException" && (
+        <label>Algo salió mal, porfavor vuelva a intentarlo</label>
+      )}
+      {resend && awsError === "" && (
+        <label className="resendTrue">
+          Se reenvió el código de verificación correctamente
+        </label>
+      )}
     </div>,
     <div className="resend-code" key="4">
-      <p>Reenviar código de verificación</p>
+      <p onClick={(e) => validateResend(e)}>Reenviar código de verificación</p>
     </div>,
     <div className="button-center" key="5">
       <Button
         buttonType={"general-default-button"}
         label={"Enviar"}
-        onClick={(e) =>
-          validate(inputCodeVerificationAll, setEmptyVerificationCode)
-        }
+        onClick={(e) => {
+          validate(inputCodeVerificationAll, setEmptyVerificationCode);
+          checkCode(e);
+        }}
       />
     </div>,
     <div className="reset-password" key="6">
-      <p>Regresar...</p>
+      <p onClick={() => props.setPaso(10)}>Regresar...</p>
     </div>,
   ];
   return (