contentoh-components-library 21.0.37 → 21.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/components/atoms/GeneralInput/index.js +8 -2
  2. package/dist/components/atoms/GradientPanel/styles.js +1 -1
  3. package/dist/components/atoms/Loading/index.js +5 -3
  4. package/dist/components/atoms/Loading/styles.js +1 -1
  5. package/dist/components/molecules/EmailResetPasswordLogin/index.js +1 -3
  6. package/dist/components/molecules/LoginPasswordStrength/index.js +9 -3
  7. package/dist/components/molecules/RegistrationFirstStep/index.js +68 -99
  8. package/dist/components/molecules/RegistrationFirstStep/styles.js +1 -1
  9. package/dist/components/molecules/RegistrationSecondStep/index.js +130 -47
  10. package/dist/components/molecules/SignInLogin/styles.js +1 -1
  11. package/dist/components/molecules/TagAndInput/index.js +8 -2
  12. package/dist/components/molecules/VerificationCodeResetPasswordLogin/index.js +114 -9
  13. package/package.json +1 -1
  14. package/src/components/atoms/GeneralInput/index.js +6 -0
  15. package/src/components/atoms/GradientPanel/styles.js +1 -0
  16. package/src/components/atoms/Loading/index.js +2 -0
  17. package/src/components/atoms/Loading/styles.js +14 -5
  18. package/src/components/molecules/EmailResetPasswordLogin/index.js +2 -2
  19. package/src/components/molecules/LoginPasswordStrength/index.js +11 -1
  20. package/src/components/molecules/RegistrationFirstStep/index.js +85 -103
  21. package/src/components/molecules/RegistrationFirstStep/styles.js +4 -1
  22. package/src/components/molecules/RegistrationSecondStep/index.js +76 -3
  23. package/src/components/molecules/SignInLogin/styles.js +1 -0
  24. package/src/components/molecules/TagAndInput/index.js +6 -0
  25. package/src/components/molecules/VerificationCodeResetPasswordLogin/index.js +100 -10
package/dist/components/atoms/GeneralInput/index.js CHANGED
@@ -27,7 +27,10 @@ var GeneralInput = function GeneralInput(_ref) {
27
27
  position = _ref.position,
28
28
  inputsArray = _ref.inputsArray,
29
29
  maxLength = _ref.maxLength,
30
- inputSize = _ref.inputSize;
30
+ inputSize = _ref.inputSize,
31
+ onChange = _ref.onChange,
32
+ required = _ref.required,
33
+ defaultValue = _ref.defaultValue;
31
34
 
32
35
  var _useState = (0, _react.useState)({
33
36
  value: inputValue !== null && inputValue !== void 0 ? inputValue : ""
@@ -63,7 +66,10 @@ var GeneralInput = function GeneralInput(_ref) {
63
66
  onInput: function onInput(e) {
64
67
  return onHandleChange(e);
65
68
  },
66
- maxLength: maxLength && maxLength
69
+ maxLength: maxLength && maxLength,
70
+ onChange: onChange,
71
+ required: required,
72
+ defaultValue: defaultValue
67
73
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
68
74
  name: inputName,
69
75
  id: inputId,
package/dist/components/atoms/GradientPanel/styles.js CHANGED
@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- 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) {
18
+ 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) {
19
19
  var panelColor = _ref.panelColor;
20
20
  return panelColor ? panelColor : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)";
21
21
  }, _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, function (_ref2) {
package/dist/components/atoms/Loading/index.js CHANGED
@@ -7,11 +7,13 @@ exports.Loading = void 0;
7
7
 
8
8
  var _styles = require("./styles");
9
9
 
10
+ var _LogoImage = require("../LogoImage");
11
+
10
12
  var _jsxRuntime = require("react/jsx-runtime");
11
13
 
12
14
  var Loading = function Loading() {
13
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
14
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
15
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
16
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
15
17
  className: "loader",
16
18
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
17
19
  className: "first"
@@ -20,7 +22,7 @@ var Loading = function Loading() {
20
22
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
21
23
  className: "third"
22
24
  })]
23
- })
25
+ })]
24
26
  });
25
27
  };
26
28
 
package/dist/components/atoms/Loading/styles.js CHANGED
@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
 
14
14
  var _templateObject;
15
15
 
16
- 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"])));
16
+ 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"])));
17
17
 
18
18
  exports.Container = Container;
package/dist/components/molecules/EmailResetPasswordLogin/index.js CHANGED
@@ -29,8 +29,6 @@ var _TagAndInput = require("../../molecules/TagAndInput");
29
29
 
30
30
  var _GeneralButton = require("../../atoms/GeneralButton");
31
31
 
32
- var _awsAmplify = require("aws-amplify");
33
-
34
32
  var _jsxRuntime = require("react/jsx-runtime");
35
33
 
36
34
  var EmailResetPasswordLogin = function EmailResetPasswordLogin(props) {
@@ -77,7 +75,7 @@ var EmailResetPasswordLogin = function EmailResetPasswordLogin(props) {
77
75
 
78
76
  _context.prev = 9;
79
77
  _context.next = 12;
80
- return _awsAmplify.Auth.forgotPassword(email);
78
+ return props.Auth.forgotPassword(email);
81
79
 
82
80
  case 12:
83
81
  sessionStorage.setItem("email", JSON.stringify(email));
package/dist/components/molecules/LoginPasswordStrength/index.js CHANGED
@@ -20,7 +20,9 @@ var _jsxRuntime = require("react/jsx-runtime");
20
20
  var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
21
21
  var emptyPassword = _ref.emptyPassword,
22
22
  emptyConfirmPassword = _ref.emptyConfirmPassword,
23
- matchPasswords = _ref.matchPasswords;
23
+ matchPasswords = _ref.matchPasswords,
24
+ onChange = _ref.onChange,
25
+ required = _ref.required;
24
26
 
25
27
  var _useState = (0, _react.useState)(0),
26
28
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -74,7 +76,9 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
74
76
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
75
77
  inputType: "password",
76
78
  inputId: "newPasswordInput",
77
- label: "Ingrese su nueva contraseña"
79
+ label: "Ingrese su nueva contraseña",
80
+ required: required,
81
+ onChange: onChange
78
82
  }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
79
83
  children: "La contrase\xF1a debe ser minimo de 8 caracteres"
80
84
  })]
@@ -118,7 +122,9 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
118
122
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
119
123
  inputType: "password",
120
124
  inputId: "confirmPasswordInput",
121
- label: "Confirme la nueva contraseña"
125
+ label: "Confirme la nueva contraseña",
126
+ required: required,
127
+ onChange: onChange
122
128
  }), emptyConfirmPassword && !emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
123
129
  children: "Confirme la contrase\xF1a"
124
130
  }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
package/dist/components/molecules/RegistrationFirstStep/index.js CHANGED
@@ -55,30 +55,25 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
55
55
  emptyPhone = _useState10[0],
56
56
  setEmptyPhone = _useState10[1];
57
57
 
58
- var _useState11 = (0, _react.useState)(true),
58
+ var _useState11 = (0, _react.useState)(false),
59
59
  _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
60
60
  emptyCountry = _useState12[0],
61
61
  setEmptyCountry = _useState12[1];
62
62
 
63
63
  var _useState13 = (0, _react.useState)(false),
64
64
  _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
65
- showErrors = _useState14[0],
66
- setShowErrors = _useState14[1];
65
+ invalidEmail = _useState14[0],
66
+ setInvalidEmail = _useState14[1];
67
67
 
68
68
  var _useState15 = (0, _react.useState)(false),
69
69
  _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
70
- regError = _useState16[0],
71
- setRegError = _useState16[1];
70
+ phoneFormatError = _useState16[0],
71
+ setPhoneFormatError = _useState16[1];
72
72
 
73
73
  var _useState17 = (0, _react.useState)(false),
74
74
  _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
75
- phoneFormatError = _useState18[0],
76
- setPhoneFormatError = _useState18[1];
77
-
78
- var _useState19 = (0, _react.useState)(false),
79
- _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
80
- emailFormatError = _useState20[0],
81
- setEmailFormatError = _useState20[1];
75
+ regError = _useState18[0],
76
+ setRegError = _useState18[1];
82
77
 
83
78
  (0, _react.useEffect)(function () {
84
79
  JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" && sessionStorage.removeItem("registrationError");
@@ -95,81 +90,48 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
95
90
 
96
91
  sessionStorage.getItem("resetPasswordProcess") && sessionStorage.getItem("resetPasswordProcess");
97
92
  }, []);
98
- var paisesEsp = ["Argentina", "Colombia", "Costa Rica", "Ecuador", "El Salvador", "Honduras", "México", "Panamá", "Perú"];
99
-
100
- var updateInfo = function updateInfo(e, newValue) {
101
- var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
102
-
103
- switch (e.target.id) {
104
- case "nameInput":
105
- nuevoUsuario.name = newValue;
106
- newValue === "" ? setEmptyName(true) : setEmptyName(false);
107
- break;
108
-
109
- case "lastNameInput":
110
- nuevoUsuario.lastName = newValue;
111
- newValue === "" ? setEmptyLastName(true) : setEmptyLastName(false);
112
- break;
113
-
114
- case "emailInput":
115
- nuevoUsuario.email = newValue;
116
- newValue === "" ? setEmptyEmail(true) : setEmptyEmail(false);
117
-
118
- if (!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(newValue)) {
119
- setEmailFormatError(true);
120
- } else {
121
- setEmailFormatError(false);
122
- }
123
-
124
- break;
125
-
126
- case "jobInput":
127
- nuevoUsuario.position = newValue;
128
- newValue === "" ? setEmptyJob(true) : setEmptyJob(false);
129
- break;
130
-
131
- case "phoneInput":
132
- Array.from(newValue).forEach(function (digit, i) {
133
- newValue.charCodeAt(i) < 48 ? setPhoneFormatError(true) : setPhoneFormatError(false);
134
- newValue.charCodeAt(i) > 57 ? setPhoneFormatError(true) : setPhoneFormatError(false);
135
- });
136
- nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCodeSelect"))).concat(newValue);
137
- newValue === "" ? setEmptyPhone(true) : setEmptyPhone(false);
138
- break;
139
-
140
- case "countrySelect":
141
- nuevoUsuario.country = newValue;
142
- newValue === "" || newValue === "Selecciona tu país" ? setEmptyCountry(true) : setEmptyCountry(false);
143
- break;
144
-
145
- case "countryCodeSelect":
146
- sessionStorage.setItem("countryCode", JSON.stringify(newValue));
147
- nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCode"))).concat(document.querySelector("#phoneInput").value);
148
- break;
149
-
150
- default:
151
- return;
152
- }
153
-
154
- sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
155
- };
156
93
 
157
94
  var validateForm = function validateForm(evt) {
158
95
  var valid = true;
159
96
  evt.preventDefault();
160
- setShowErrors(true);
161
- emptyName && (valid = false);
162
- emptyLastName && (valid = false);
163
- emptyEmail && (valid = false);
164
- emptyJob && (valid = false);
165
- emptyPhone && (valid = false);
166
- emptyCountry && (valid = false);
167
- phoneFormatError && (valid = false);
168
- emailFormatError && (valid = false);
169
- !regError && valid && props.setPaso(function (paso) {
170
- return props.paso + 1;
97
+ var name = document.querySelector("#nameInput").value;
98
+ var lastName = document.querySelector("#lastNameInput").value;
99
+ var email = document.querySelector("#emailInput").value;
100
+ var job = document.querySelector("#jobInput").value;
101
+ var phone = document.querySelector("#phoneInput").value;
102
+ var country = document.querySelector("#countrySelect").value;
103
+ var countryCode = document.querySelector("#countryCodeSelect").value;
104
+ name === "" ? setEmptyName(true) : setEmptyName(false);
105
+ lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
106
+ email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
107
+ job === "" ? setEmptyJob(true) : setEmptyJob(false);
108
+ phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
109
+ !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
110
+ country === "" || country === "+ tu país" ? setEmptyCountry(true) : setEmptyCountry(false);
111
+ Array.from(phone).forEach(function (digit, i) {
112
+ phone.charCodeAt(i) < 48 ? setPhoneFormatError(true) : setPhoneFormatError(false);
113
+ phone.charCodeAt(i) > 57 ? setPhoneFormatError(true) : setPhoneFormatError(false);
171
114
  });
172
- regError && valid && props.setPaso(4);
115
+ var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
116
+
117
+ if (!emptyName || !emptyLastName || !emptyEmail || !emptyJob || !emptyPhone || !emptyCountry || !invalidEmail || !phoneFormatError) {
118
+ sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
119
+ nuevoUsuario.name = name;
120
+ nuevoUsuario.lastName = lastName;
121
+ nuevoUsuario.email = email;
122
+ nuevoUsuario.position = job;
123
+ nuevoUsuario.phone = "".concat(JSON.parse(sessionStorage.getItem("countryCode"))).concat(phone);
124
+ nuevoUsuario.country = country;
125
+ sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
126
+ !regError && valid && props.setPaso(function (paso) {
127
+ return props.paso + 1;
128
+ });
129
+ regError && valid && props.setPaso(4);
130
+ console.log("rediring");
131
+ } else {
132
+ valid = false;
133
+ console.log("code");
134
+ }
173
135
  };
174
136
 
175
137
  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -188,16 +150,13 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
188
150
  inputId: "nameInput",
189
151
  label: "Nombre",
190
152
  inputPlaceHolder: "Nombre",
191
- defaultValue: JSON.parse(sessionStorage.getItem("nuevoRegistro")).name,
192
- required: true,
193
- onInput: function onInput(e) {
194
- return updateInfo(e, e.target.value);
195
- }
153
+ required: "required"
196
154
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
197
155
  inputType: "text",
198
156
  inputId: "lastNameInput",
199
157
  label: "Apellido",
200
- inputPlaceHolder: "Apellido"
158
+ inputPlaceHolder: "Apellido",
159
+ required: "required"
201
160
  })]
202
161
  }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
203
162
  children: "Ingrese su nombre"
@@ -207,16 +166,20 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
207
166
  inputType: "text",
208
167
  inputId: "emailInput",
209
168
  label: "Correo electrónico",
210
- inputPlaceHolder: "username@contentoh.com"
169
+ inputPlaceHolder: "username@contentoh.com",
170
+ required: "required"
171
+ }), regError && JSON.parse(sessionStorage.getItem("registrationError")) === "emailExists" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
172
+ children: "Ya existe una cuenta asociada a este correo"
211
173
  }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
212
- children: "Ingrese su correo"
174
+ children: "Ingrese su email"
213
175
  }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
214
176
  children: "Ingrese un correo v\xE1lido"
215
177
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
216
178
  inputType: "text",
217
179
  inputId: "jobInput",
218
180
  label: "Puesto laboral",
219
- inputPlaceHolder: "Puesto dentro de la empresa"
181
+ inputPlaceHolder: "Puesto dentro de la empresa",
182
+ required: "required"
220
183
  }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
221
184
  children: "Ingrese su puesto"
222
185
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
@@ -250,10 +213,15 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
250
213
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
251
214
  inputId: "phoneInput",
252
215
  inputType: "text",
253
- inputPlaceholder: "Teléfono"
216
+ inputPlaceholder: "Teléfono",
217
+ required: "required"
254
218
  })]
219
+ }), regError && JSON.parse(sessionStorage.getItem("registrationError")) === "phoneFormatError" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
220
+ children: "Introduzca un n\xFAmero v\xE1lido"
255
221
  }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
256
222
  children: "Ingrese su n\xFAmero de tel\xE9fono"
223
+ }), phoneFormatError && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
224
+ children: "Introduzca un n\xFAmero valido ( Solo numeros )"
257
225
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
258
226
  text: "País",
259
227
  headerType: "input-name-header"
@@ -299,7 +267,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
299
267
  buttonType: "general-default-button",
300
268
  label: "Enviar",
301
269
  onClick: function onClick(e) {
302
- return validate(e);
270
+ return validateForm(e);
303
271
  }
304
272
  })
305
273
  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -317,18 +285,19 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
317
285
  className: "new-login",
318
286
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
319
287
  className: "pre-registro",
288
+ onClick: function onClick() {
289
+ return props.setPaso(7);
290
+ },
320
291
  children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
321
292
  children: " Inicia Sesi\xF3n"
322
293
  })]
323
294
  })
324
295
  }, "7")];
325
296
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
326
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
327
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
328
- componentsArray: loginRight,
329
- panelType: "home-login",
330
- panelColor: _variables.GlobalColors.white
331
- })
297
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
298
+ componentsArray: loginRight,
299
+ panelType: "home-login",
300
+ panelColor: _variables.GlobalColors.white
332
301
  })
333
302
  });
334
303
  };
package/dist/components/molecules/RegistrationFirstStep/styles.js CHANGED
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- 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);
18
+ 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);
19
19
 
20
20
  exports.Container = Container;
package/dist/components/molecules/RegistrationSecondStep/index.js CHANGED
@@ -7,10 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.RegistrationSecondStep = void 0;
9
9
 
10
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
-
12
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
13
-
14
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
15
11
 
16
12
  var _styles = require("./styles");
@@ -31,53 +27,136 @@ var _LogoImage = require("../../atoms/LogoImage");
31
27
 
32
28
  var _jsxRuntime = require("react/jsx-runtime");
33
29
 
34
- var RegistrationSecondStep = function RegistrationSecondStep() {
35
- var _useState = (0, _react.useState)(false),
30
+ var RegistrationSecondStep = function RegistrationSecondStep(props) {
31
+ var _useState = (0, _react.useState)(0),
36
32
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
37
- emptyPassword = _useState2[0],
38
- setEmptyPassword = _useState2[1];
33
+ passwordStrength = _useState2[0],
34
+ setPasswordStrenght = _useState2[1];
39
35
 
40
- var _useState3 = (0, _react.useState)(false),
36
+ var _useState3 = (0, _react.useState)(""),
41
37
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
42
- emptyConfirmPassword = _useState4[0],
43
- setEmptyConfirmPassword = _useState4[1];
38
+ passwordFinal = _useState4[0],
39
+ setPasswordFinal = _useState4[1];
44
40
 
45
- var _useState5 = (0, _react.useState)(true),
41
+ var _useState5 = (0, _react.useState)(""),
46
42
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
47
- matchPasswords = _useState6[0],
48
- setMatchPasswords = _useState6[1];
49
-
50
- var validate = /*#__PURE__*/function () {
51
- var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
52
- var password, confirmPassword;
53
- return _regenerator.default.wrap(function _callee$(_context) {
54
- while (1) {
55
- switch (_context.prev = _context.next) {
56
- case 0:
57
- e.preventDefault();
58
- password = document.querySelector("#newPasswordInput").value;
59
- password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
60
- confirmPassword = document.querySelector("#confirmPasswordInput").value;
61
- confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
62
-
63
- if (password === confirmPassword) {
64
- setMatchPasswords(true);
65
- } else {
66
- setMatchPasswords(false);
67
- }
68
-
69
- case 6:
70
- case "end":
71
- return _context.stop();
72
- }
73
- }
74
- }, _callee);
75
- }));
76
-
77
- return function validate(_x) {
78
- return _ref.apply(this, arguments);
79
- };
80
- }();
43
+ repeatedPassword = _useState6[0],
44
+ setRepeatedPassword = _useState6[1];
45
+
46
+ var _useState7 = (0, _react.useState)(false),
47
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
48
+ passwordMatches = _useState8[0],
49
+ setPasswordMatches = _useState8[1];
50
+
51
+ var _useState9 = (0, _react.useState)(true),
52
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
53
+ passwordToShort = _useState10[0],
54
+ setPasswordToShort = _useState10[1];
55
+
56
+ var _useState11 = (0, _react.useState)(false),
57
+ _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
58
+ showErrors = _useState12[0],
59
+ setShowErrors = _useState12[1];
60
+
61
+ var _useState13 = (0, _react.useState)(false),
62
+ _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
63
+ privacyCheck = _useState14[0],
64
+ setPrivacyCheck = _useState14[1];
65
+
66
+ var _useState15 = (0, _react.useState)(false),
67
+ _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
68
+ termsCheck = _useState16[0],
69
+ setTermsCheck = _useState16[1];
70
+
71
+ var _useState17 = (0, _react.useState)(false),
72
+ _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
73
+ emptyPassword = _useState18[0],
74
+ setEmptyPassword = _useState18[1];
75
+
76
+ var _useState19 = (0, _react.useState)(false),
77
+ _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
78
+ emptyConfirmPassword = _useState20[0],
79
+ setEmptyConfirmPassword = _useState20[1];
80
+
81
+ var _useState21 = (0, _react.useState)(true),
82
+ _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
83
+ matchPasswords = _useState22[0],
84
+ setMatchPasswords = _useState22[1];
85
+
86
+ var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
87
+ var upperCaseLetters = /[A-Z]/g;
88
+ var numbers = /[0-9]/g;
89
+ var specialChar = /['!','@','#','$','%','^','&','*']/g; // on passwordFinal update
90
+
91
+ (0, _react.useEffect)(function () {
92
+ passwordFinal === repeatedPassword ? setPasswordMatches(true) : setPasswordMatches(false);
93
+ passwordFinal.length < 8 ? setPasswordToShort(true) : setPasswordToShort(false);
94
+ }, [passwordFinal, repeatedPassword]); // on repeatedPassword update
95
+
96
+ (0, _react.useEffect)(function () {
97
+ passwordFinal === repeatedPassword ? setPasswordMatches(true) : setPasswordMatches(false);
98
+ repeatedPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
99
+ }, [passwordFinal, repeatedPassword]);
100
+
101
+ var updateInfo = function updateInfo(e, newValue) {
102
+ e.preventDefault();
103
+ var password = document.querySelector("#newPasswordInput").value;
104
+ password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
105
+ var confirmPassword = document.querySelector("#confirmPasswordInput").value;
106
+ confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
107
+
108
+ if (password === confirmPassword) {
109
+ setMatchPasswords(true);
110
+ } else {
111
+ setMatchPasswords(false);
112
+ }
113
+
114
+ switch (e.target.id) {
115
+ case "passwordInput":
116
+ setPasswordStrenght(0);
117
+
118
+ if (newValue.length > 8) {
119
+ setPasswordStrenght(function (passwordStrenght) {
120
+ return passwordStrenght + 1;
121
+ });
122
+ } //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
123
+
124
+
125
+ newValue.match(upperCaseLetters) && setPasswordStrenght(function (passwordStrenght) {
126
+ return passwordStrenght + 1;
127
+ });
128
+ newValue.match(numbers) && setPasswordStrenght(function (passwordStrenght) {
129
+ return passwordStrenght + 1;
130
+ });
131
+ newValue.match(specialChar) && setPasswordStrenght(function (passwordStrenght) {
132
+ return passwordStrenght + 1;
133
+ }); //Actualizar value de la contraseña y guardar en sessionStorage
134
+
135
+ setPasswordFinal(newValue);
136
+ nuevoUsuario.password = newValue;
137
+ sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
138
+ break;
139
+
140
+ case "confirmPasswordInput":
141
+ setRepeatedPassword(newValue);
142
+ break;
143
+
144
+ default:
145
+ return;
146
+ }
147
+ };
148
+
149
+ var validateForm = function validateForm(evt) {
150
+ evt.preventDefault();
151
+ setShowErrors(true);
152
+ var valid = true;
153
+ passwordToShort && (valid = false);
154
+ emptyConfirmPassword && (valid = false);
155
+ !passwordMatches && (valid = false);
156
+ !termsCheck && (valid = false);
157
+ !privacyCheck && (valid = false);
158
+ valid && props.setPaso(3);
159
+ };
81
160
 
82
161
  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
83
162
  className: "credenciales",
@@ -90,7 +169,11 @@ var RegistrationSecondStep = function RegistrationSecondStep() {
90
169
  emptyPassword: emptyPassword,
91
170
  emptyConfirmPassword: emptyConfirmPassword,
92
171
  matchPasswords: matchPasswords,
93
- textTittle: "Ingresa tus credenciales"
172
+ textTittle: "Ingresa tus credenciales",
173
+ onChange: function onChange(e) {
174
+ return updateInfo(e, e.target.value);
175
+ },
176
+ required: "required"
94
177
  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
95
178
  className: "label-terms",
96
179
  children: "T\xE9rminos y condiciones"
package/dist/components/molecules/SignInLogin/styles.js CHANGED
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- 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);
18
+ 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);
19
19
 
20
20
  exports.Container = Container;
package/dist/components/molecules/TagAndInput/index.js CHANGED
@@ -18,7 +18,10 @@ var TagAndInput = function TagAndInput(_ref) {
18
18
  label = _ref.label,
19
19
  value = _ref.value,
20
20
  inputPlaceHolder = _ref.inputPlaceHolder,
21
- inputId = _ref.inputId;
21
+ inputId = _ref.inputId,
22
+ required = _ref.required,
23
+ onChange = _ref.onChange,
24
+ defaultValue = _ref.defaultValue;
22
25
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
23
26
  inputType: inputType,
24
27
  className: "input-container",
@@ -29,7 +32,10 @@ var TagAndInput = function TagAndInput(_ref) {
29
32
  inputId: inputId,
30
33
  inputType: inputType,
31
34
  inputValue: value,
32
- inputPlaceholder: inputPlaceHolder
35
+ inputPlaceholder: inputPlaceHolder,
36
+ required: required,
37
+ onChange: onChange,
38
+ defaultValue: defaultValue
33
39
  })]
34
40
  }, "generalTagInput-".concat(inputType));
35
41
  };