contentoh-components-library 21.0.36 → 21.0.39

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

@@ -27,7 +27,10 @@ var GeneralInput = function GeneralInput(_ref) {
       position = _ref.position,
       inputsArray = _ref.inputsArray,
       maxLength = _ref.maxLength,
-      inputSize = _ref.inputSize;
+      inputSize = _ref.inputSize,
+      onChange = _ref.onChange,
+      required = _ref.required,
+      defaultValue = _ref.defaultValue;
 
   var _useState = (0, _react.useState)({
     value: inputValue !== null && inputValue !== void 0 ? inputValue : ""
@@ -63,7 +66,10 @@ var GeneralInput = function GeneralInput(_ref) {
       onInput: function onInput(e) {
         return onHandleChange(e);
       },
-      maxLength: maxLength && maxLength
+      maxLength: maxLength && maxLength,
+      onChange: onChange,
+      required: required,
+      defaultValue: defaultValue
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
       name: inputName,
       id: inputId,

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: 100%;\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\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  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"])));
 
 exports.Container = Container;

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

@@ -29,8 +29,6 @@ var _TagAndInput = require("../../molecules/TagAndInput");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
-var _awsAmplify = require("aws-amplify");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var EmailResetPasswordLogin = function EmailResetPasswordLogin(props) {
@@ -77,7 +75,7 @@ var EmailResetPasswordLogin = function EmailResetPasswordLogin(props) {
 
               _context.prev = 9;
               _context.next = 12;
-              return _awsAmplify.Auth.forgotPassword(email);
+              return props.Auth.forgotPassword(email);
 
             case 12:
               sessionStorage.setItem("email", JSON.stringify(email));

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

@@ -20,7 +20,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
   var emptyPassword = _ref.emptyPassword,
       emptyConfirmPassword = _ref.emptyConfirmPassword,
-      matchPasswords = _ref.matchPasswords;
+      matchPasswords = _ref.matchPasswords,
+      onChange = _ref.onChange,
+      required = _ref.required;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -74,7 +76,9 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
         inputType: "password",
         inputId: "newPasswordInput",
-        label: "Ingrese su nueva contraseña"
+        label: "Ingrese su nueva contraseña",
+        required: required,
+        onChange: onChange
       }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: "La contrase\xF1a debe ser minimo de 8 caracteres"
       })]
@@ -118,7 +122,9 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
         inputType: "password",
         inputId: "confirmPasswordInput",
-        label: "Confirme la nueva contraseña"
+        label: "Confirme la nueva contraseña",
+        required: required,
+        onChange: onChange
       }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: "Confirme la contrase\xF1a"
       }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {

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

@@ -95,7 +95,6 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
 
     sessionStorage.getItem("resetPasswordProcess") && sessionStorage.getItem("resetPasswordProcess");
   }, []);
-  var paisesEsp = ["Argentina", "Colombia", "Costa Rica", "Ecuador", "El Salvador", "Honduras", "México", "Panamá", "Perú"];
 
   var updateInfo = function updateInfo(e, newValue) {
     var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
@@ -189,7 +188,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         label: "Nombre",
         inputPlaceHolder: "Nombre",
         defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).name,
-        required: true,
+        required: "required",
         onInput: function onInput(e) {
           return updateInfo(e, e.target.value);
         }
@@ -197,27 +196,45 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         inputType: "text",
         inputId: "lastNameInput",
         label: "Apellido",
-        inputPlaceHolder: "Apellido"
+        inputPlaceHolder: "Apellido",
+        defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).lastName,
+        required: "required",
+        onChange: function onChange(e) {
+          return updateInfo(e, e.target.value);
+        }
       })]
-    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyName && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su nombre"
-    }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyLastName && showErrors && /*#__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"
-    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Ingrese su correo"
-    }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      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);
+      }
+    }), 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", {
+      children: "Ingrese su email"
+    }), emailFormatError && showErrors && !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"
-    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      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", {
       children: "Ingrese su puesto"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Teléfono",
@@ -250,10 +267,20 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
         inputId: "phoneInput",
         inputType: "text",
-        inputPlaceholder: "Teléfono"
+        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);
+        }
       })]
-    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), 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", {
       children: "Ingrese su n\xFAmero de tel\xE9fono"
+    }), phoneFormatError && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Introduzca un n\xFAmero valido ( Solo numeros )"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "País",
       headerType: "input-name-header"
@@ -261,6 +288,10 @@ 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,
@@ -290,7 +321,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
         value: "value3",
         children: "Per\xFA"
       })]
-    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), emptyEmail && showErrors && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Seleccione su pa\xEDs"
     })]
   }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -299,7 +330,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        return validate(e);
+        return validateForm(e);
       }
     })
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -317,6 +348,9 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     className: "new-login",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
       className: "pre-registro",
+      onClick: function onClick() {
+        return props.setPaso(7);
+      },
       children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: " Inicia Sesi\xF3n"
       })]

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

@@ -7,10 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RegistrationSecondStep = 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");
@@ -31,53 +27,136 @@ var _LogoImage = require("../../atoms/LogoImage");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var RegistrationSecondStep = function RegistrationSecondStep() {
-  var _useState = (0, _react.useState)(false),
+var RegistrationSecondStep = function RegistrationSecondStep(props) {
+  var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      emptyPassword = _useState2[0],
-      setEmptyPassword = _useState2[1];
+      passwordStrength = _useState2[0],
+      setPasswordStrenght = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(""),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      emptyConfirmPassword = _useState4[0],
-      setEmptyConfirmPassword = _useState4[1];
+      passwordFinal = _useState4[0],
+      setPasswordFinal = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(true),
+  var _useState5 = (0, _react.useState)(""),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      matchPasswords = _useState6[0],
-      setMatchPasswords = _useState6[1];
-
-  var validate = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      var password, confirmPassword;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              password = document.querySelector("#newPasswordInput").value;
-              password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
-              confirmPassword = document.querySelector("#confirmPasswordInput").value;
-              confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
-
-              if (password === confirmPassword) {
-                setMatchPasswords(true);
-              } else {
-                setMatchPasswords(false);
-              }
-
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function validate(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+      repeatedPassword = _useState6[0],
+      setRepeatedPassword = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      passwordMatches = _useState8[0],
+      setPasswordMatches = _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];
+
+  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
+
+  (0, _react.useEffect)(function () {
+    passwordFinal === repeatedPassword ? setPasswordMatches(true) : setPasswordMatches(false);
+    repeatedPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+  }, [passwordFinal, repeatedPassword]);
+
+  var updateInfo = function updateInfo(e, newValue) {
+    e.preventDefault();
+    var password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    var confirmPassword = document.querySelector("#confirmPasswordInput").value;
+    confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(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;
+    }
+  };
+
+  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);
+  };
 
   var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "credenciales",
@@ -90,7 +169,11 @@ var RegistrationSecondStep = function RegistrationSecondStep() {
     emptyPassword: emptyPassword,
     emptyConfirmPassword: emptyConfirmPassword,
     matchPasswords: matchPasswords,
-    textTittle: "Ingresa tus credenciales"
+    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",
     children: "T\xE9rminos y condiciones"

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

@@ -284,7 +284,7 @@ var SignInLogin = function SignInLogin(props) {
           })
         })]
       })
-    }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Navigate, {
+    }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
       to: {
         pathname: "/dashboard"
       }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.36",
+  "version": "21.0.39",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -21,7 +21,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-dom": "^17.0.2",
     "react-image-fallback": "^8.0.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^5.2.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },

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

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

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

@@ -5,13 +5,13 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   height: 100%;
-  width: 100%;
+  width: 50%;
   .loader {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
-    width: 100%;
+    width: 50%;
     span {
       display: inline-block;
       border-radius: 100%;

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

@@ -6,13 +6,13 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { TagAndInput } from "../../molecules/TagAndInput";
 import { Button } from "../../atoms/GeneralButton";
-import { Auth } from "aws-amplify";
 
 export const EmailResetPasswordLogin = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [invalidEmail, setInvalidEmail] = useState(false);
   const [showErrors, setShowErrors] = useState(false);
   const [awsError, setAwsError] = useState("");
+
   const validate = async (e) => {
     let valid = true;
     setShowErrors(true);
@@ -29,7 +29,7 @@ export const EmailResetPasswordLogin = (props) => {
 
     if (valid) {
       try {
-        await Auth.forgotPassword(email);
+        await props.Auth.forgotPassword(email);
         sessionStorage.setItem("email", JSON.stringify(email));
         sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
         props.setPaso(5);

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

@@ -1,15 +1,19 @@
 import { Container, ItemPasswordStrength, Password } from "./styles";
 import { useEffect, useState } from "react";
 import { TagAndInput } from "../TagAndInput";
+
 export const LoginPasswordStrength = ({
   emptyPassword,
   emptyConfirmPassword,
   matchPasswords,
+  onChange,
+  required,
 }) => {
   const [passwordStrength, setPasswordStrength] = useState(0);
   let upperCaseLetters = /[A-Z]/g;
   let numbers = /[0-9]/g;
   let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+
   useEffect(() => {
     const inputValue = document.getElementById("newPasswordInput");
     inputValue.addEventListener(
@@ -20,6 +24,7 @@ export const LoginPasswordStrength = ({
       false
     );
   }, []);
+
   const updateInfo = (e, newValue) => {
     switch (e.target.id) {
       case "newPasswordInput":
@@ -41,6 +46,7 @@ export const LoginPasswordStrength = ({
         return;
     }
   };
+
   return (
     <Container>
       <div className="user" key={"3"}>
@@ -48,6 +54,8 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
+          required={required}
+          onChange={onChange}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
@@ -76,6 +84,8 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
+          required={required}
+          onChange={onChange}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>
@@ -86,4 +96,4 @@ export const LoginPasswordStrength = ({
       </div>
     </Container>
   );
-};
+};

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

@@ -37,17 +37,6 @@ export const RegistrationFirstStep = (props) => {
       sessionStorage.getItem("resetPasswordProcess");
   }, []);
 
-  let paisesEsp = [
-    "Argentina",
-    "Colombia",
-    "Costa Rica",
-    "Ecuador",
-    "El Salvador",
-    "Honduras",
-    "México",
-    "Panamá",
-    "Perú",
-  ];
   const updateInfo = (e, newValue) => {
     let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
     switch (e.target.id) {
@@ -142,7 +131,7 @@ export const RegistrationFirstStep = (props) => {
           defaultValue={
             JSON.parse(sessionStorage.getItem("nuevoRegistro")).name
           }
-          required
+          required={"required"}
           onInput={(e) => updateInfo(e, e.target.value)}
         />
         <TagAndInput
@@ -150,25 +139,46 @@ export const RegistrationFirstStep = (props) => {
           inputId={"lastNameInput"}
           label={"Apellido"}
           inputPlaceHolder={"Apellido"}
+          defaultValue={
+            JSON.parse(sessionStorage.getItem("nuevoRegistro")).lastName
+          }
+          required={"required"}
+          onChange={(e) => updateInfo(e, e.target.value)}
         />
       </div>
-      {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && <label>Ingrese sus apellidos</label>}
+      {emptyName && showErrors && <label>Ingrese su nombre</label>}
+      {emptyLastName && showErrors && <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)}
       />
-      {emptyEmail && <label>Ingrese su correo</label>}
-      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
+      {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>
+      )}
       <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 && <label>Ingrese su puesto</label>}
+      {emptyJob && showErrors && <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">
@@ -186,11 +196,35 @@ 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>
-      {emptyPhone && <label>Ingrese su número de teléfono</label>}
+      {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 && (
+        <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">
+      <select
+        name="select"
+        className="country-options"
+        id="countrySelect"
+        defaultValue={
+          JSON.parse(sessionStorage.getItem("nuevoRegistro")).country
+        }
+        onChange={(e) => updateInfo(e, e.target.value)}
+      >
         <option value="value1" selected>
           Selecciona tu país
         </option>
@@ -203,13 +237,13 @@ export const RegistrationFirstStep = (props) => {
         <option value="value2">Panamá</option>
         <option value="value3">Perú</option>
       </select>
-      {emptyEmail && <label>Seleccione su país</label>}
+      {emptyEmail && showErrors && <label>Seleccione su país</label>}
     </div>,
     <div className="button-end" key="4">
       <Button
         buttonType={"general-default-button"}
         label={"Enviar"}
-        onClick={(e) => validate(e)}
+        onClick={(e) => validateForm(e)}
       />
     </div>,
     <div className="progress-bar" key="5">
@@ -223,7 +257,7 @@ export const RegistrationFirstStep = (props) => {
       key="6"
     />,
     <div className="new-login" key="7">
-      <p className="pre-registro">
+      <p className="pre-registro" onClick={() => props.setPaso(7)}>
         ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
       </p>
     </div>,
@@ -239,4 +273,4 @@ export const RegistrationFirstStep = (props) => {
       </div>
     </Container>
   );
-};
+};

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

@@ -1,17 +1,52 @@
 import { Container } from "./styles";
 import { GradientPanel } from "../../atoms/GradientPanel";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { Button } from "../../atoms/GeneralButton";
 import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
 import { LogoImage } from "../../atoms/LogoImage";
 
-export const RegistrationSecondStep = () => {
+export const RegistrationSecondStep = (props) => {
+  const [passwordStrength, setPasswordStrenght] = useState(0);
+  const [passwordFinal, setPasswordFinal] = useState("");
+  const [repeatedPassword, setRepeatedPassword] = useState("");
+  const [passwordMatches, setPasswordMatches] = useState(false);
+  const [passwordToShort, setPasswordToShort] = useState(true);
+  const [showErrors, setShowErrors] = useState(false);
+  const [privacyCheck, setPrivacyCheck] = useState(false);
+  const [termsCheck, setTermsCheck] = useState(false);
+
   const [emptyPassword, setEmptyPassword] = useState(false);
   const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
   const [matchPasswords, setMatchPasswords] = useState(true);
-  const validate = async (e) => {
+
+  let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+  let upperCaseLetters = /[A-Z]/g;
+  let numbers = /[0-9]/g;
+  let specialChar = /['!','@','#','$','%','^','&','*']/g;
+
+  // on passwordFinal update
+  useEffect(() => {
+    passwordFinal === repeatedPassword
+      ? setPasswordMatches(true)
+      : setPasswordMatches(false);
+    passwordFinal.length < 8
+      ? setPasswordToShort(true)
+      : setPasswordToShort(false);
+  }, [passwordFinal, repeatedPassword]);
+
+  // on repeatedPassword update
+  useEffect(() => {
+    passwordFinal === repeatedPassword
+      ? setPasswordMatches(true)
+      : setPasswordMatches(false);
+    repeatedPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+  }, [passwordFinal, repeatedPassword]);
+
+  const updateInfo = (e, newValue) => {
     e.preventDefault();
     const password = document.querySelector("#newPasswordInput").value;
     password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
@@ -26,7 +61,43 @@ export const RegistrationSecondStep = () => {
     } else {
       setMatchPasswords(false);
     }
+    switch (e.target.id) {
+      case "passwordInput":
+        setPasswordStrenght(0);
+        if (newValue.length > 8) {
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        }
+        //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+        newValue.match(upperCaseLetters) &&
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        newValue.match(numbers) &&
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        newValue.match(specialChar) &&
+          setPasswordStrenght((passwordStrenght) => 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;
+    }
+  };
+  const validateForm = (evt) => {
+    evt.preventDefault();
+    setShowErrors(true);
+    let valid = true;
+    passwordToShort && (valid = false);
+    emptyConfirmPassword && (valid = false);
+    !passwordMatches && (valid = false);
+    !termsCheck && (valid = false);
+    !privacyCheck && (valid = false);
+    valid && props.setPaso(3);
   };
+  
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>
@@ -42,6 +113,8 @@ export const RegistrationSecondStep = () => {
       emptyConfirmPassword={emptyConfirmPassword}
       matchPasswords={matchPasswords}
       textTittle={"Ingresa tus credenciales"}
+      onChange={(e) => updateInfo(e, e.target.value)}
+      required={"required"}
     />,
     <label className="label-terms" key={"4"}>Términos y condiciones</label>,
     <div className="checkbox-terms" key={"5"}>

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

@@ -7,7 +7,7 @@ import { TagAndInput } from "../TagAndInput";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 import { useState, useEffect } from "react";
 import { Loading } from "../../atoms/Loading";
-import { Navigate } from "react-router-dom";
+import { Redirect } from "react-router-dom";
 import axios from "axios";
 
 export const SignInLogin = (props) => {
@@ -203,7 +203,7 @@ export const SignInLogin = (props) => {
           </div>
         </div>
       </Container>
-      {upgradePlanRedirect && <Navigate to={{ pathname: "/dashboard" }} />}
+      {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
     </>
   );
 };

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

@@ -8,6 +8,9 @@ export const TagAndInput = ({
   value,
   inputPlaceHolder,
   inputId,
+  required,
+  onChange,
+  defaultValue,
 }) => {
   return (
     <Container
@@ -21,6 +24,9 @@ export const TagAndInput = ({
         inputType={inputType}
         inputValue={value}
         inputPlaceholder={inputPlaceHolder}
+        required={required}
+        onChange={onChange}
+        defaultValue={defaultValue}
       />
     </Container>
   );