contentoh-components-library 21.0.64 → 21.0.67

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 (20) hide show
  1. package/dist/components/molecules/LoginPasswordStrength/index.js +3 -3
  2. package/dist/components/molecules/LoginPasswordStrength/styles.js +1 -1
  3. package/dist/components/molecules/RegistrationSecondStep/index.js +5 -9
  4. package/dist/components/molecules/RegistrationSecondStep/styles.js +1 -1
  5. package/dist/components/molecules/SignInLogin/index.js +33 -3
  6. package/dist/components/molecules/SignInLogin/styles.js +1 -1
  7. package/dist/components/molecules/VerificationCodeResetPasswordLogin/index.js +5 -6
  8. package/dist/components/molecules/VerificationCodeResetPasswordLogin/styles.js +1 -1
  9. package/dist/components/organisms/ChangePassword/index.js +4 -5
  10. package/package.json +2 -2
  11. package/src/assets/images/editField/showPassword.png +0 -0
  12. package/src/components/molecules/LoginPasswordStrength/index.js +3 -3
  13. package/src/components/molecules/LoginPasswordStrength/styles.js +2 -3
  14. package/src/components/molecules/RegistrationSecondStep/index.js +2 -8
  15. package/src/components/molecules/RegistrationSecondStep/styles.js +1 -6
  16. package/src/components/molecules/SignInLogin/index.js +26 -0
  17. package/src/components/molecules/SignInLogin/styles.js +42 -1
  18. package/src/components/molecules/VerificationCodeResetPasswordLogin/index.js +0 -1
  19. package/src/components/molecules/VerificationCodeResetPasswordLogin/styles.js +0 -3
  20. package/src/components/organisms/ChangePassword/index.js +13 -14
package/dist/components/molecules/LoginPasswordStrength/index.js CHANGED
@@ -77,7 +77,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
77
77
  }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
78
78
  children: "La contrase\xF1a debe ser minimo de 8 caracteres"
79
79
  })]
80
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80
+ }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
81
81
  className: "divPasswordStrength",
82
82
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemPasswordStrength, {
83
83
  paso: 1,
@@ -112,7 +112,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
112
112
  children: "Fuerte"
113
113
  })]
114
114
  })]
115
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
115
+ }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
116
116
  className: "user",
117
117
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
118
118
  inputType: "password",
@@ -124,7 +124,7 @@ var LoginPasswordStrength = function LoginPasswordStrength(_ref) {
124
124
  }), !emptyConfirmPassword && !emptyPassword && !matchPasswords && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
125
125
  children: "La contrase\xF1a no coincide"
126
126
  })]
127
- })]
127
+ }, "5")]
128
128
  });
129
129
  };
130
130
 
package/dist/components/molecules/LoginPasswordStrength/styles.js CHANGED
@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject, _templateObject2, _templateObject3;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin-bottom: 15px;\n .divPasswordStrength {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 30px;\n & + * {\n margin-top: 40px;\n }\n }\n label {\n color: red;\n margin-top: 3px;\n margin-left: 15px;\n font-family: ", ";\n font-size: 11px;\n }\n & + * {\n margin-top: 20px;\n }\n"])), _variables.FontFamily.Raleway_700);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n .divPasswordStrength {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 30px;\n & + * {\n margin-top: 40px;\n }\n }\n label {\n color: red;\n margin-top: 3px;\n margin-left: 15px;\n font-family: ", ";\n font-size: 11px;\n }\n & + *{\n margin-top: 20px;\n }\n"])), _variables.FontFamily.Raleway_700);
19
19
 
20
20
  exports.Container = Container;
21
21
 
package/dist/components/molecules/RegistrationSecondStep/index.js CHANGED
@@ -58,11 +58,10 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
58
58
  var validateForm = function validateForm(evt, valid) {
59
59
  evt.preventDefault();
60
60
  var password = document.querySelector("#newPasswordInput").value;
61
- !termsCheck && (valid = false);
62
- !privacyCheck && (valid = false);
63
61
 
64
62
  if (valid) {
65
- console.log(valid);
63
+ !termsCheck && (valid = false);
64
+ !privacyCheck && (valid = false);
66
65
  nuevoUsuario.password = password;
67
66
  sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
68
67
  valid && props.setPaso(3);
@@ -126,19 +125,16 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
126
125
  text: "Todos los datos estan protegidos.",
127
126
  headerType: "date-header"
128
127
  })]
129
- }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
128
+ }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
130
129
  className: "button-end",
131
- children: [(!termsCheck || !privacyCheck) && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
132
- className: "terms",
133
- children: "*Aceptar los t\xE9rminos y condiciones y el aviso de privacidad"
134
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
130
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
135
131
  buttonType: "general-default-button",
136
132
  label: "Enviar",
137
133
  onClick: function onClick(e) {
138
134
  var flag = validate(e);
139
135
  validateForm(e, flag);
140
136
  }
141
- })]
137
+ })
142
138
  }, "8"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
143
139
  className: "progress-bar",
144
140
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
package/dist/components/molecules/RegistrationSecondStep/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 .button-end {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n .general-default-button {\n width: 160px;\n }\n .terms{\n margin-bottom: 5px;\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-check {\n width: 33.33%;\n background-color: ", ";\n }\n .progress-bar-second-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: 33.33%;\n }\n }\n .date-header {\n margin-left: 33.33%;\n }\n .checkbox-terms {\n display: flex;\n margin-bottom: 5px;\n input {\n cursor: pointer;\n & + * {\n margin-left: 15px;\n }\n }\n }\n .label-terms {\n color: rgb(129, 115, 147);\n font-size: 13px;\n line-height: 24px;\n font-weight: 700;\n cursor: pointer;\n margin-left: 25px;\n & + * {\n margin-top: 5px;\n }\n }\n"])), _variables.GlobalColors.exported);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 50%;\n height: 100vh;\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-check {\n width: 33.33%;\n background-color: ", ";\n }\n .progress-bar-second-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: 33.33%;\n }\n }\n .date-header {\n margin-left: 33.33%;\n }\n .checkbox-terms {\n display: flex;\n margin-bottom: 5px;\n input {\n cursor: pointer;\n & + * {\n margin-left: 15px;\n }\n }\n }\n .label-terms {\n color: rgb(129, 115, 147);\n font-size: 13px;\n line-height: 24px;\n font-weight: 700;\n cursor: pointer;\n margin-left: 25px;\n & + * {\n margin-top: 5px;\n }\n }\n"])), _variables.GlobalColors.exported);
19
19
 
20
20
  exports.Container = Container;
package/dist/components/molecules/SignInLogin/index.js CHANGED
@@ -33,6 +33,8 @@ var _LogoLoading = require("../LogoLoading");
33
33
 
34
34
  var _reactRouterDom = require("react-router-dom");
35
35
 
36
+ var _showPassword = _interopRequireDefault(require("../../../assets/images/editField/showPassword.png"));
37
+
36
38
  var _axios = _interopRequireDefault(require("axios"));
37
39
 
38
40
  var _jsxRuntime = require("react/jsx-runtime");
@@ -73,6 +75,14 @@ var SignInLogin = function SignInLogin(props) {
73
75
  upgradePlanRedirect = _useState14[0],
74
76
  setUpgradePlanRedirect = _useState14[1];
75
77
 
78
+ var _useState15 = (0, _react.useState)(false),
79
+ _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
80
+ showEye = _useState16[0],
81
+ setShowEye = _useState16[1];
82
+
83
+ var eye = document.getElementById("Eye");
84
+ var input = document.getElementById("passwordInput");
85
+
76
86
  var validate = /*#__PURE__*/function () {
77
87
  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
78
88
  var valid, email, password, session, userGroup, response, user, company;
@@ -194,6 +204,17 @@ var SignInLogin = function SignInLogin(props) {
194
204
  (0, _react.useEffect)(function () {
195
205
  if (upgradePlanRedirect) setLoading(false);
196
206
  }, [upgradePlanRedirect]);
207
+
208
+ var closeEye = function closeEye(e) {
209
+ if (input.type === "password") {
210
+ input.type = "text";
211
+ eye.style.opacity = 0.8;
212
+ } else {
213
+ input.type = "password";
214
+ eye.style.opacity = 0.2;
215
+ }
216
+ };
217
+
197
218
  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoLoading.LogoLoading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
198
219
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
199
220
  className: "home-login",
@@ -218,14 +239,23 @@ var SignInLogin = function SignInLogin(props) {
218
239
  children: "Ingrese su correo"
219
240
  }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
220
241
  children: "Ingrese un correo v\xE1lido"
221
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
242
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
222
243
  className: "password",
223
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
244
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
224
245
  inputType: "password",
225
246
  label: "Contraseña",
226
247
  inputPlaceHolder: "Escribe tu contraseña",
227
248
  inputId: "passwordInput"
228
- })
249
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
250
+ src: _showPassword.default,
251
+ alt: "show password",
252
+ className: "icon",
253
+ id: "Eye",
254
+ onClick: function onClick(e) {
255
+ setShowEye(!showEye);
256
+ closeEye(e);
257
+ }
258
+ })]
229
259
  }), showErrors && emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
230
260
  children: "Ingrese su contrase\xF1a"
231
261
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
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: 100vh;\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);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: \"white\";\n display: flex;\n height: 100vh;\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: 45px;\n }\n }\n .password {\n & + * {\n margin-top: 20px;\n }\n &:hover {\n border: 1px solid ", ";\n }\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n position: relative;\n width: 100%;\n border: 1px solid ", ";\n .input-container {\n h2 {\n position: absolute;\n top: -25px;\n left: 0;\n }\n }\n #passwordInput {\n width: 100%;\n background-color: white;\n position: absolute;\n top: 8px;\n left: 0;\n right: 0;\n bottom: 8px;\n box-sizing: border-box;\n border: none;\n }\n .icon {\n position: absolute;\n height: 60%;\n position: absolute;\n top: 50%;\n right: 8px;\n transform: translateY(-50%);\n opacity: 0.3;\n cursor: pointer;\n }\n .icon:hover {\n opacity: 0.8;\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.GlobalColors.magenta_s2, _variables.GlobalColors.s2, _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/VerificationCodeResetPasswordLogin/index.js CHANGED
@@ -96,23 +96,22 @@ var VerificationCodeResetPasswordLogin = function VerificationCodeResetPasswordL
96
96
  sessionStorage.setItem("email", JSON.stringify(email));
97
97
  sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
98
98
  props.setPaso(5);
99
- setEmptyVerificationCode(false);
100
99
  setResend(true);
101
- _context.next = 16;
100
+ _context.next = 15;
102
101
  break;
103
102
 
104
- case 12:
105
- _context.prev = 12;
103
+ case 11:
104
+ _context.prev = 11;
106
105
  _context.t0 = _context["catch"](2);
107
106
  setAwsError(_context.t0.code);
108
107
  console.log(_context.t0.message);
109
108
 
110
- case 16:
109
+ case 15:
111
110
  case "end":
112
111
  return _context.stop();
113
112
  }
114
113
  }
115
- }, _callee, null, [[2, 12]]);
114
+ }, _callee, null, [[2, 11]]);
116
115
  }));
117
116
 
118
117
  return function validateResend(_x) {
package/dist/components/molecules/VerificationCodeResetPasswordLogin/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 height: 100vh;\n width: 50%;\n align-items: center;\n justify-content: center;\n .button-center {\n text-align: center;\n .general-default-button {\n width: 160px;\n }\n }\n .reset-password {\n text-align: center;\n margin: 15px !important;\n color: ", ";\n cursor: pointer;\n font-weight: bold;\n font-family: ", ";\n font-size: 13px;\n }\n .resend-code {\n margin-top: 8px !important;\n color: ", ";\n font-family: ", ";\n font-size: 11px;\n text-decoration: underline rgb(228, 81, 172);\n cursor: pointer;\n & + * {\n margin-top: 30px;\n }\n }\n .verification-code {\n display: flex;\n text-align: center;\n margin: auto;\n margin-top: 10px;\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n input {\n width: 70%;\n text-align: center;\n }\n }\n .resendTrue{\n color: ", ";\n }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.exported);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 100vh;\n width: 50%;\n align-items: center;\n justify-content: center;\n .button-center {\n text-align: center;\n .general-default-button {\n width: 160px;\n }\n }\n .reset-password {\n text-align: center;\n margin: 15px !important;\n color: ", ";\n cursor: pointer;\n font-weight: bold;\n font-family: ", ";\n font-size: 13px;\n }\n .resend-code {\n margin-top: 8px !important;\n color: ", ";\n font-family: ", ";\n font-size: 11px;\n text-decoration: underline rgb(228, 81, 172);\n cursor: pointer;\n & + * {\n margin-top: 30px;\n }\n }\n .verification-code {\n display: flex;\n text-align: center;\n margin: auto;\n margin-top: 10px;\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n input {\n width: 70%;\n text-align: center;\n }\n }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
19
19
 
20
20
  exports.Container = Container;
package/dist/components/organisms/ChangePassword/index.js CHANGED
@@ -67,17 +67,16 @@ var ChangePassword = function ChangePassword(props) {
67
67
  }
68
68
 
69
69
  valid = true;
70
-
71
- if (password.length < 8 || confirmPassword === "" || password !== confirmPassword) {
72
- valid = false;
73
- }
70
+ emptyPassword && (valid = false);
71
+ emptyConfirmPassword && (valid = false);
72
+ !matchPasswords && (valid = false);
74
73
 
75
74
  if (valid) {
76
75
  sessionStorage.setItem("newPassword", JSON.stringify(password));
77
76
  !sessionStorage.getItem("resetPasswordProcess") ? props.setPaso(9) : props.setPaso(11);
78
77
  }
79
78
 
80
- case 9:
79
+ case 11:
81
80
  case "end":
82
81
  return _context.stop();
83
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.0.64",
3
+ "version": "21.0.67",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
@@ -77,7 +77,7 @@
77
77
  "auto": "^10.36.5",
78
78
  "babel-loader": "^8.2.3",
79
79
  "chromatic": "^6.3.3",
80
- "contentoh-components-library": "^21.0.52",
80
+ "contentoh-components-library": "21.0.61",
81
81
  "cross-env": "^7.0.3",
82
82
  "storybook-css-modules-preset": "^1.1.1"
83
83
  },
package/src/components/molecules/LoginPasswordStrength/index.js CHANGED
@@ -46,7 +46,7 @@ export const LoginPasswordStrength = ({
46
46
 
47
47
  return (
48
48
  <Container>
49
- <div className="user">
49
+ <div className="user" key={"3"}>
50
50
  <TagAndInput
51
51
  inputType={"password"}
52
52
  inputId={"newPasswordInput"}
@@ -57,7 +57,7 @@ export const LoginPasswordStrength = ({
57
57
  <label>La contraseña debe ser minimo de 8 caracteres</label>
58
58
  )}
59
59
  </div>
60
- <div className="divPasswordStrength">
60
+ <div className="divPasswordStrength" key={"4"}>
61
61
  <ItemPasswordStrength paso={1}>
62
62
  <Password level={1} passwordStrength={passwordStrength} />
63
63
  {passwordStrength === 1 && <p>Baja</p>}
@@ -75,7 +75,7 @@ export const LoginPasswordStrength = ({
75
75
  {passwordStrength === 4 && <p>Fuerte</p>}
76
76
  </ItemPasswordStrength>
77
77
  </div>
78
- <div className="user">
78
+ <div className="user" key={"5"}>
79
79
  <TagAndInput
80
80
  inputType={"password"}
81
81
  inputId={"confirmPasswordInput"}
package/src/components/molecules/LoginPasswordStrength/styles.js CHANGED
@@ -3,7 +3,6 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
3
3
 
4
4
  export const Container = styled.div`
5
5
  width: 100%;
6
- margin-bottom: 15px;
7
6
  .divPasswordStrength {
8
7
  width: 100%;
9
8
  display: flex;
@@ -21,7 +20,7 @@ export const Container = styled.div`
21
20
  font-family: ${FontFamily.Raleway_700};
22
21
  font-size: 11px;
23
22
  }
24
- & + * {
23
+ & + *{
25
24
  margin-top: 20px;
26
25
  }
27
26
  `;
@@ -88,4 +87,4 @@ export const ItemPasswordStrength = styled.div`
88
87
  }
89
88
  }};
90
89
  }
91
- `;
90
+ `;
package/src/components/molecules/RegistrationSecondStep/index.js CHANGED
@@ -18,10 +18,9 @@ export const RegistrationSecondStep = (props) => {
18
18
  const validateForm = (evt, valid) => {
19
19
  evt.preventDefault();
20
20
  const password = document.querySelector("#newPasswordInput").value;
21
- !termsCheck && (valid = false);
22
- !privacyCheck && (valid = false);
23
21
  if (valid) {
24
- console.log(valid)
22
+ !termsCheck && (valid = false);
23
+ !privacyCheck && (valid = false);
25
24
  nuevoUsuario.password = password;
26
25
  sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
27
26
  valid && props.setPaso(3);
@@ -93,11 +92,6 @@ export const RegistrationSecondStep = (props) => {
93
92
  />
94
93
  </div>,
95
94
  <div className="button-end" key="8">
96
- {(!termsCheck || !privacyCheck) && (
97
- <label className="terms">
98
- *Aceptar los términos y condiciones y el aviso de privacidad
99
- </label>
100
- )}
101
95
  <Button
102
96
  buttonType={"general-default-button"}
103
97
  label={"Enviar"}
package/src/components/molecules/RegistrationSecondStep/styles.js CHANGED
@@ -6,15 +6,10 @@ export const Container = styled.div`
6
6
  width: 50%;
7
7
  height: 100vh;
8
8
  .button-end {
9
- display: flex;
10
- flex-direction: column;
11
- align-items: flex-end;
9
+ text-align: end;
12
10
  .general-default-button {
13
11
  width: 160px;
14
12
  }
15
- .terms{
16
- margin-bottom: 5px;
17
- }
18
13
  & + * {
19
14
  margin-top: 10px;
20
15
  }
package/src/components/molecules/SignInLogin/index.js CHANGED
@@ -8,6 +8,7 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
8
8
  import { useState, useEffect } from "react";
9
9
  import { LogoLoading } from "../LogoLoading";
10
10
  import { Redirect } from "react-router-dom";
11
+ import showPassword from "../../../assets/images/editField/showPassword.png";
11
12
  import axios from "axios";
12
13
 
13
14
  export const SignInLogin = (props) => {
@@ -18,6 +19,10 @@ export const SignInLogin = (props) => {
18
19
  const [signInError, setSignInError] = useState("");
19
20
  const [loading, setLoading] = useState(false);
20
21
  const [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
22
+ const [showEye, setShowEye] = useState(false);
23
+ const eye = document.getElementById("Eye");
24
+ const input = document.getElementById("passwordInput");
25
+
21
26
  const validate = async (e) => {
22
27
  setSignInError("");
23
28
  setShowErrors(true);
@@ -107,6 +112,17 @@ export const SignInLogin = (props) => {
107
112
  useEffect(() => {
108
113
  if (upgradePlanRedirect) setLoading(false);
109
114
  }, [upgradePlanRedirect]);
115
+
116
+ const closeEye = (e) => {
117
+ if (input.type === "password") {
118
+ input.type = "text";
119
+ eye.style.opacity = 0.8;
120
+ } else {
121
+ input.type = "password";
122
+ eye.style.opacity = 0.2;
123
+ }
124
+ };
125
+
110
126
  return loading ? (
111
127
  <LogoLoading />
112
128
  ) : (
@@ -140,6 +156,16 @@ export const SignInLogin = (props) => {
140
156
  inputPlaceHolder={"Escribe tu contraseña"}
141
157
  inputId={"passwordInput"}
142
158
  />
159
+ <img
160
+ src={showPassword}
161
+ alt="show password"
162
+ className="icon"
163
+ id="Eye"
164
+ onClick={(e) => {
165
+ setShowEye(!showEye);
166
+ closeEye(e);
167
+ }}
168
+ ></img>
143
169
  </div>
144
170
  {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
145
171
  <div className="select">
package/src/components/molecules/SignInLogin/styles.js CHANGED
@@ -27,13 +27,54 @@ export const Container = styled.div`
27
27
  }
28
28
  .user {
29
29
  & + * {
30
- margin-top: 20px;
30
+ margin-top: 45px;
31
31
  }
32
32
  }
33
33
  .password {
34
34
  & + * {
35
35
  margin-top: 20px;
36
36
  }
37
+ &:hover {
38
+ border: 1px solid ${GlobalColors.magenta_s2};
39
+ }
40
+ display: flex;
41
+ justify-content: center;
42
+ align-items: center;
43
+ height: 40px;
44
+ position: relative;
45
+ width: 100%;
46
+ border: 1px solid ${GlobalColors.s2};
47
+ .input-container {
48
+ h2 {
49
+ position: absolute;
50
+ top: -25px;
51
+ left: 0;
52
+ }
53
+ }
54
+ #passwordInput {
55
+ width: 100%;
56
+ background-color: white;
57
+ position: absolute;
58
+ top: 8px;
59
+ left: 0;
60
+ right: 0;
61
+ bottom: 8px;
62
+ box-sizing: border-box;
63
+ border: none;
64
+ }
65
+ .icon {
66
+ position: absolute;
67
+ height: 60%;
68
+ position: absolute;
69
+ top: 50%;
70
+ right: 8px;
71
+ transform: translateY(-50%);
72
+ opacity: 0.3;
73
+ cursor: pointer;
74
+ }
75
+ .icon:hover {
76
+ opacity: 0.8;
77
+ }
37
78
  }
38
79
  .select {
39
80
  display: flex;
package/src/components/molecules/VerificationCodeResetPasswordLogin/index.js CHANGED
@@ -54,7 +54,6 @@ export const VerificationCodeResetPasswordLogin = (props) => {
54
54
  sessionStorage.setItem("email", JSON.stringify(email));
55
55
  sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
56
56
  props.setPaso(5);
57
- setEmptyVerificationCode(false);
58
57
  setResend(true);
59
58
  } catch (err) {
60
59
  setAwsError(err.code);
package/src/components/molecules/VerificationCodeResetPasswordLogin/styles.js CHANGED
@@ -48,7 +48,4 @@ export const Container = styled.div`
48
48
  text-align: center;
49
49
  }
50
50
  }
51
- .resendTrue{
52
- color: ${GlobalColors.exported};
53
- }
54
51
  `;
package/src/components/organisms/ChangePassword/index.js CHANGED
@@ -8,6 +8,7 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
8
8
  import { GradientPanel } from "../../atoms/GradientPanel";
9
9
 
10
10
  export const ChangePassword = (props) => {
11
+
11
12
  const [emptyPassword, setEmptyPassword] = useState(false);
12
13
  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
13
14
  const [matchPasswords, setMatchPasswords] = useState(true);
@@ -16,7 +17,9 @@ export const ChangePassword = (props) => {
16
17
  e.preventDefault();
17
18
  let password = document.querySelector("#newPasswordInput").value;
18
19
  password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
19
- let confirmPassword = document.querySelector("#confirmPasswordInput").value;
20
+ let confirmPassword = document.querySelector(
21
+ "#confirmPasswordInput"
22
+ ).value;
20
23
  confirmPassword === ""
21
24
  ? setEmptyConfirmPassword(true)
22
25
  : setEmptyConfirmPassword(false);
@@ -26,18 +29,14 @@ export const ChangePassword = (props) => {
26
29
  setMatchPasswords(false);
27
30
  }
28
31
  let valid = true;
29
- if (
30
- password.length < 8 ||
31
- confirmPassword === "" ||
32
- password !== confirmPassword
33
- ) {
34
- valid = false;
35
- }
32
+ emptyPassword && (valid = false);
33
+ emptyConfirmPassword && (valid = false);
34
+ !matchPasswords && (valid = false);
36
35
  if (valid) {
37
36
  sessionStorage.setItem("newPassword", JSON.stringify(password));
38
37
  !sessionStorage.getItem("resetPasswordProcess")
39
38
  ? props.setPaso(9)
40
- : props.setPaso(11);
39
+ : props.setPaso(11);
41
40
  }
42
41
  };
43
42
 
@@ -67,11 +66,11 @@ export const ChangePassword = (props) => {
67
66
  ];
68
67
  return (
69
68
  <Container>
70
- <GradientPanel
71
- panelColor={GlobalColors.white}
72
- componentsArray={loginRight}
73
- panelType={"home-login"}
74
- ></GradientPanel>
69
+ <GradientPanel
70
+ panelColor={GlobalColors.white}
71
+ componentsArray={loginRight}
72
+ panelType={"home-login"}
73
+ ></GradientPanel>
75
74
  </Container>
76
75
  );
77
76
  };