contentoh-components-library 21.0.22 → 21.0.26
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.
- package/dist/components/molecules/{Login/Login.stories.js → SignInLogin/SignInLogin.stories.js} +7 -7
- package/dist/components/molecules/SignInLogin/index.js +142 -0
- package/dist/components/molecules/SignInLogin/styles.js +20 -0
- package/dist/index.js +26 -13
- package/package.json +2 -2
- package/src/components/molecules/SignInLogin/SignInLogin.stories.js +11 -0
- package/src/components/molecules/{Login → SignInLogin}/index.js +23 -1
- package/src/components/molecules/{Login → SignInLogin}/styles.js +4 -0
- package/src/index.js +10 -9
- package/dist/components/molecules/Login/index.js +0 -79
- package/dist/components/molecules/Login/styles.js +0 -20
- package/src/components/molecules/Login/Login.stories.js +0 -11
package/dist/components/molecules/{Login/Login.stories.js → SignInLogin/SignInLogin.stories.js}
RENAMED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default = exports.
|
|
8
|
+
exports.default = exports.SignInLoginDefault = void 0;
|
|
9
9
|
|
|
10
10
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
11
|
|
|
@@ -14,15 +14,15 @@ var _index = require("./index");
|
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
|
|
16
16
|
var _default = {
|
|
17
|
-
title: "Components/molecules/
|
|
18
|
-
component: _index.
|
|
17
|
+
title: "Components/molecules/SignInLogin",
|
|
18
|
+
component: _index.SignInLogin
|
|
19
19
|
};
|
|
20
20
|
exports.default = _default;
|
|
21
21
|
|
|
22
22
|
var Template = function Template(args) {
|
|
23
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.
|
|
23
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SignInLogin, (0, _objectSpread2.default)({}, args));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
var
|
|
27
|
-
exports.
|
|
28
|
-
|
|
26
|
+
var SignInLoginDefault = Template.bind({});
|
|
27
|
+
exports.SignInLoginDefault = SignInLoginDefault;
|
|
28
|
+
SignInLoginDefault.args = {};
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.SignInLogin = void 0;
|
|
9
|
+
|
|
10
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
11
|
+
|
|
12
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _styles = require("./styles");
|
|
17
|
+
|
|
18
|
+
var _index = require("../../atoms/LogoImage/index");
|
|
19
|
+
|
|
20
|
+
var _index2 = require("../../atoms/ScreenHeader/index");
|
|
21
|
+
|
|
22
|
+
var _index3 = require("../../atoms/GeneralButton/index");
|
|
23
|
+
|
|
24
|
+
var _index4 = require("../../atoms/CheckBox/index");
|
|
25
|
+
|
|
26
|
+
var _TagAndInput = require("../TagAndInput");
|
|
27
|
+
|
|
28
|
+
var _variables = require("../../../global-files/variables");
|
|
29
|
+
|
|
30
|
+
var _react = require("react");
|
|
31
|
+
|
|
32
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
|
+
|
|
34
|
+
var SignInLogin = function SignInLogin() {
|
|
35
|
+
var _useState = (0, _react.useState)(false),
|
|
36
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
37
|
+
emptyEmail = _useState2[0],
|
|
38
|
+
setEmptyEmail = _useState2[1];
|
|
39
|
+
|
|
40
|
+
var _useState3 = (0, _react.useState)(false),
|
|
41
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
42
|
+
invalidEmail = _useState4[0],
|
|
43
|
+
setInvalidEmail = _useState4[1];
|
|
44
|
+
|
|
45
|
+
var _useState5 = (0, _react.useState)(false),
|
|
46
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
47
|
+
emptyPassword = _useState6[0],
|
|
48
|
+
setEmptyPassword = _useState6[1];
|
|
49
|
+
|
|
50
|
+
var validate = /*#__PURE__*/function () {
|
|
51
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
|
|
52
|
+
var email, password;
|
|
53
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
54
|
+
while (1) {
|
|
55
|
+
switch (_context.prev = _context.next) {
|
|
56
|
+
case 0:
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
email = document.querySelector("#emailInput").value;
|
|
59
|
+
password = document.querySelector("#passwordInput").value;
|
|
60
|
+
email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
|
|
61
|
+
password === "" ? setEmptyPassword(true) : setEmptyPassword(false);
|
|
62
|
+
!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
|
|
63
|
+
|
|
64
|
+
case 6:
|
|
65
|
+
case "end":
|
|
66
|
+
return _context.stop();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, _callee);
|
|
70
|
+
}));
|
|
71
|
+
|
|
72
|
+
return function validate(_x) {
|
|
73
|
+
return _ref.apply(this, arguments);
|
|
74
|
+
};
|
|
75
|
+
}();
|
|
76
|
+
|
|
77
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
|
|
78
|
+
className: "home-login",
|
|
79
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
80
|
+
className: "main-container",
|
|
81
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
82
|
+
className: "credenciales",
|
|
83
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
|
|
84
|
+
fontFamily: _variables.FontFamily.AvenirNext,
|
|
85
|
+
color: _variables.GlobalColors.s5,
|
|
86
|
+
text: "Ingresa tus credenciales"
|
|
87
|
+
})
|
|
88
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
89
|
+
className: "user",
|
|
90
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
|
|
91
|
+
inputType: "text",
|
|
92
|
+
label: "Nombre de usuario",
|
|
93
|
+
inputPlaceHolder: "username@contentoh.com",
|
|
94
|
+
inputId: "emailInput"
|
|
95
|
+
})
|
|
96
|
+
}), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
97
|
+
children: "Ingrese su correo"
|
|
98
|
+
}), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
99
|
+
children: "Ingrese un correo v\xE1lido"
|
|
100
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
101
|
+
className: "password",
|
|
102
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
|
|
103
|
+
inputType: "text",
|
|
104
|
+
label: "Contraseña",
|
|
105
|
+
inputPlaceHolder: "Escribe tu contraseña",
|
|
106
|
+
inputId: "passwordInput"
|
|
107
|
+
})
|
|
108
|
+
}), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
109
|
+
children: "Ingrese su contrase\xF1a"
|
|
110
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
111
|
+
className: "select",
|
|
112
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
|
|
113
|
+
label: "Mantener sesión activada",
|
|
114
|
+
id: "chk-default",
|
|
115
|
+
className: "active-left"
|
|
116
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
117
|
+
className: "active-right",
|
|
118
|
+
children: "Olvide mi contrase\xF1a"
|
|
119
|
+
})]
|
|
120
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
121
|
+
className: "button-right",
|
|
122
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
|
|
123
|
+
buttonType: "general-default-button",
|
|
124
|
+
label: "Iniciar sesión",
|
|
125
|
+
onClick: function onClick(e) {
|
|
126
|
+
return validate(e);
|
|
127
|
+
}
|
|
128
|
+
})
|
|
129
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
130
|
+
className: "new-login",
|
|
131
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
|
|
132
|
+
className: "pre-registro",
|
|
133
|
+
children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
134
|
+
children: " Reg\xEDstrate"
|
|
135
|
+
})]
|
|
136
|
+
})
|
|
137
|
+
})]
|
|
138
|
+
})
|
|
139
|
+
});
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
exports.SignInLogin = SignInLogin;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Container = void 0;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _variables = require("../../../global-files/variables");
|
|
15
|
+
|
|
16
|
+
var _templateObject;
|
|
17
|
+
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: \"white\";\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 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);
|
|
19
|
+
|
|
20
|
+
exports.Container = Container;
|
package/dist/index.js
CHANGED
|
@@ -394,7 +394,7 @@ Object.keys(_index28).forEach(function (key) {
|
|
|
394
394
|
});
|
|
395
395
|
});
|
|
396
396
|
|
|
397
|
-
var _index29 = require("./components/molecules/
|
|
397
|
+
var _index29 = require("./components/molecules/SignInLogin/index");
|
|
398
398
|
|
|
399
399
|
Object.keys(_index29).forEach(function (key) {
|
|
400
400
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -407,7 +407,7 @@ Object.keys(_index29).forEach(function (key) {
|
|
|
407
407
|
});
|
|
408
408
|
});
|
|
409
409
|
|
|
410
|
-
var _index30 = require("./components/molecules/
|
|
410
|
+
var _index30 = require("./components/molecules/StatusAsignationInfo/index");
|
|
411
411
|
|
|
412
412
|
Object.keys(_index30).forEach(function (key) {
|
|
413
413
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -420,7 +420,7 @@ Object.keys(_index30).forEach(function (key) {
|
|
|
420
420
|
});
|
|
421
421
|
});
|
|
422
422
|
|
|
423
|
-
var _index31 = require("./components/molecules/
|
|
423
|
+
var _index31 = require("./components/molecules/TableHeader/index");
|
|
424
424
|
|
|
425
425
|
Object.keys(_index31).forEach(function (key) {
|
|
426
426
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -433,7 +433,7 @@ Object.keys(_index31).forEach(function (key) {
|
|
|
433
433
|
});
|
|
434
434
|
});
|
|
435
435
|
|
|
436
|
-
var _index32 = require("./components/molecules/
|
|
436
|
+
var _index32 = require("./components/molecules/TableRow/index");
|
|
437
437
|
|
|
438
438
|
Object.keys(_index32).forEach(function (key) {
|
|
439
439
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -446,7 +446,7 @@ Object.keys(_index32).forEach(function (key) {
|
|
|
446
446
|
});
|
|
447
447
|
});
|
|
448
448
|
|
|
449
|
-
var _index33 = require("./components/molecules/
|
|
449
|
+
var _index33 = require("./components/molecules/TabsMenu/index");
|
|
450
450
|
|
|
451
451
|
Object.keys(_index33).forEach(function (key) {
|
|
452
452
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -459,7 +459,7 @@ Object.keys(_index33).forEach(function (key) {
|
|
|
459
459
|
});
|
|
460
460
|
});
|
|
461
461
|
|
|
462
|
-
var _index34 = require("./components/
|
|
462
|
+
var _index34 = require("./components/molecules/TagAndInput/index");
|
|
463
463
|
|
|
464
464
|
Object.keys(_index34).forEach(function (key) {
|
|
465
465
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -472,7 +472,7 @@ Object.keys(_index34).forEach(function (key) {
|
|
|
472
472
|
});
|
|
473
473
|
});
|
|
474
474
|
|
|
475
|
-
var _index35 = require("./components/organisms/
|
|
475
|
+
var _index35 = require("./components/organisms/Fullplan/index");
|
|
476
476
|
|
|
477
477
|
Object.keys(_index35).forEach(function (key) {
|
|
478
478
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -485,7 +485,7 @@ Object.keys(_index35).forEach(function (key) {
|
|
|
485
485
|
});
|
|
486
486
|
});
|
|
487
487
|
|
|
488
|
-
var _index36 = require("./components/organisms/
|
|
488
|
+
var _index36 = require("./components/organisms/FullProductNameHeader/index");
|
|
489
489
|
|
|
490
490
|
Object.keys(_index36).forEach(function (key) {
|
|
491
491
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -498,7 +498,7 @@ Object.keys(_index36).forEach(function (key) {
|
|
|
498
498
|
});
|
|
499
499
|
});
|
|
500
500
|
|
|
501
|
-
var _index37 = require("./components/organisms/
|
|
501
|
+
var _index37 = require("./components/organisms/FullTabsMenu/index");
|
|
502
502
|
|
|
503
503
|
Object.keys(_index37).forEach(function (key) {
|
|
504
504
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -511,7 +511,7 @@ Object.keys(_index37).forEach(function (key) {
|
|
|
511
511
|
});
|
|
512
512
|
});
|
|
513
513
|
|
|
514
|
-
var _index38 = require("./components/organisms/
|
|
514
|
+
var _index38 = require("./components/organisms/ImageDataTable/index");
|
|
515
515
|
|
|
516
516
|
Object.keys(_index38).forEach(function (key) {
|
|
517
517
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -524,7 +524,7 @@ Object.keys(_index38).forEach(function (key) {
|
|
|
524
524
|
});
|
|
525
525
|
});
|
|
526
526
|
|
|
527
|
-
var _index39 = require("./components/organisms/
|
|
527
|
+
var _index39 = require("./components/organisms/ImagePreviewer/index");
|
|
528
528
|
|
|
529
529
|
Object.keys(_index39).forEach(function (key) {
|
|
530
530
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -537,7 +537,7 @@ Object.keys(_index39).forEach(function (key) {
|
|
|
537
537
|
});
|
|
538
538
|
});
|
|
539
539
|
|
|
540
|
-
var _index40 = require("./components/organisms/
|
|
540
|
+
var _index40 = require("./components/organisms/ImagesGroup/index");
|
|
541
541
|
|
|
542
542
|
Object.keys(_index40).forEach(function (key) {
|
|
543
543
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -550,7 +550,7 @@ Object.keys(_index40).forEach(function (key) {
|
|
|
550
550
|
});
|
|
551
551
|
});
|
|
552
552
|
|
|
553
|
-
var _index41 = require("./components/organisms/
|
|
553
|
+
var _index41 = require("./components/organisms/InputGroup/index");
|
|
554
554
|
|
|
555
555
|
Object.keys(_index41).forEach(function (key) {
|
|
556
556
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -563,6 +563,19 @@ Object.keys(_index41).forEach(function (key) {
|
|
|
563
563
|
});
|
|
564
564
|
});
|
|
565
565
|
|
|
566
|
+
var _index42 = require("./components/organisms/ProductImageModal/index");
|
|
567
|
+
|
|
568
|
+
Object.keys(_index42).forEach(function (key) {
|
|
569
|
+
if (key === "default" || key === "__esModule") return;
|
|
570
|
+
if (key in exports && exports[key] === _index42[key]) return;
|
|
571
|
+
Object.defineProperty(exports, key, {
|
|
572
|
+
enumerable: true,
|
|
573
|
+
get: function get() {
|
|
574
|
+
return _index42[key];
|
|
575
|
+
}
|
|
576
|
+
});
|
|
577
|
+
});
|
|
578
|
+
|
|
566
579
|
var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
|
|
567
580
|
|
|
568
581
|
Object.keys(_ChangePasswordLogin).forEach(function (key) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "contentoh-components-library",
|
|
3
|
-
"version": "21.0.
|
|
3
|
+
"version": "21.0.26",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@babel/runtime": "^7.17.2",
|
|
6
6
|
"@storybook/addon-postcss": "^2.0.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"auto": "^10.36.5",
|
|
71
71
|
"babel-loader": "^8.2.3",
|
|
72
72
|
"chromatic": "^6.3.3",
|
|
73
|
-
"contentoh-components-library": "^21.0.
|
|
73
|
+
"contentoh-components-library": "^21.0.24",
|
|
74
74
|
"cross-env": "^7.0.3",
|
|
75
75
|
"storybook-css-modules-preset": "^1.1.1"
|
|
76
76
|
},
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SignInLogin } from "./index";
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: "Components/molecules/SignInLogin",
|
|
5
|
+
component: SignInLogin,
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const Template = (args) => <SignInLogin {...args} />;
|
|
9
|
+
|
|
10
|
+
export const SignInLoginDefault = Template.bind({});
|
|
11
|
+
SignInLoginDefault.args = {};
|
|
@@ -5,8 +5,24 @@ import { Button } from "../../atoms/GeneralButton/index";
|
|
|
5
5
|
import { CheckBox } from "../../atoms/CheckBox/index";
|
|
6
6
|
import { TagAndInput } from "../TagAndInput";
|
|
7
7
|
import { FontFamily, GlobalColors } from "../../../global-files/variables";
|
|
8
|
+
import { useState } from "react";
|
|
8
9
|
|
|
9
|
-
export const
|
|
10
|
+
export const SignInLogin = () => {
|
|
11
|
+
const [emptyEmail, setEmptyEmail] = useState(false);
|
|
12
|
+
const [invalidEmail, setInvalidEmail] = useState(false);
|
|
13
|
+
const [emptyPassword, setEmptyPassword] = useState(false);
|
|
14
|
+
const validate = async (e) => {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
const email = document.querySelector("#emailInput").value;
|
|
17
|
+
const password = document.querySelector("#passwordInput").value;
|
|
18
|
+
email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
|
|
19
|
+
password === "" ? setEmptyPassword(true) : setEmptyPassword(false);
|
|
20
|
+
!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
|
|
21
|
+
email
|
|
22
|
+
)
|
|
23
|
+
? setInvalidEmail(true)
|
|
24
|
+
: setInvalidEmail(false);
|
|
25
|
+
};
|
|
10
26
|
return (
|
|
11
27
|
<Container className={"home-login"}>
|
|
12
28
|
<div className="main-container">
|
|
@@ -23,15 +39,20 @@ export const Login = () => {
|
|
|
23
39
|
inputType={"text"}
|
|
24
40
|
label={"Nombre de usuario"}
|
|
25
41
|
inputPlaceHolder={"username@contentoh.com"}
|
|
42
|
+
inputId={"emailInput"}
|
|
26
43
|
/>
|
|
27
44
|
</div>
|
|
45
|
+
{emptyEmail && <label>Ingrese su correo</label>}
|
|
46
|
+
{invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
|
|
28
47
|
<div className="password">
|
|
29
48
|
<TagAndInput
|
|
30
49
|
inputType={"text"}
|
|
31
50
|
label={"Contraseña"}
|
|
32
51
|
inputPlaceHolder={"Escribe tu contraseña"}
|
|
52
|
+
inputId={"passwordInput"}
|
|
33
53
|
/>
|
|
34
54
|
</div>
|
|
55
|
+
{emptyPassword && <label>Ingrese su contraseña</label>}
|
|
35
56
|
<div className="select">
|
|
36
57
|
<CheckBox
|
|
37
58
|
label={"Mantener sesión activada"}
|
|
@@ -44,6 +65,7 @@ export const Login = () => {
|
|
|
44
65
|
<Button
|
|
45
66
|
buttonType={"general-default-button"}
|
|
46
67
|
label={"Iniciar sesión"}
|
|
68
|
+
onClick={(e) => validate(e)}
|
|
47
69
|
/>
|
|
48
70
|
</div>
|
|
49
71
|
<div className="new-login">
|
|
@@ -13,6 +13,9 @@ export const Container = styled.div`
|
|
|
13
13
|
margin-left: 15px;
|
|
14
14
|
font-family: ${FontFamily.Raleway_700};
|
|
15
15
|
font-size: 11px;
|
|
16
|
+
& + * {
|
|
17
|
+
margin-top: 12px;
|
|
18
|
+
}
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
&.home-login {
|
|
@@ -41,6 +44,7 @@ export const Container = styled.div`
|
|
|
41
44
|
line-height: 24px;
|
|
42
45
|
letter-spacing: -0.015em;
|
|
43
46
|
color: ${GlobalColors.s5};
|
|
47
|
+
cursor: pointer;
|
|
44
48
|
}
|
|
45
49
|
& + * {
|
|
46
50
|
margin-top: 50px;
|
package/src/index.js
CHANGED
|
@@ -22,15 +22,16 @@ export * from "./components/atoms/ValidationPanel/index";
|
|
|
22
22
|
|
|
23
23
|
//molecules
|
|
24
24
|
export * from "./components/molecules/AvatarAndValidation/index";
|
|
25
|
-
export * from "./components/molecules/CarouselImagesLogin"
|
|
25
|
+
export * from "./components/molecules/CarouselImagesLogin";
|
|
26
26
|
export * from "./components/molecules/EditionActiveImage/index";
|
|
27
27
|
export * from "./components/molecules/FeaturesBar/index";
|
|
28
28
|
export * from "./components/molecules/GalleryElement/index";
|
|
29
29
|
export * from "./components/molecules/HeaderTop/index";
|
|
30
30
|
export * from "./components/molecules/ImageSelector/index";
|
|
31
|
-
export * from "./components/molecules/LoginPasswordStrength"
|
|
31
|
+
export * from "./components/molecules/LoginPasswordStrength";
|
|
32
32
|
export * from "./components/molecules/PlanSelection/index";
|
|
33
33
|
export * from "./components/molecules/ProductNameHeader/index";
|
|
34
|
+
export * from "./components/molecules/SignInLogin/index";
|
|
34
35
|
export * from "./components/molecules/StatusAsignationInfo/index";
|
|
35
36
|
export * from "./components/molecules/TableHeader/index";
|
|
36
37
|
export * from "./components/molecules/TableRow/index";
|
|
@@ -48,13 +49,13 @@ export * from "./components/organisms/InputGroup/index";
|
|
|
48
49
|
export * from "./components/organisms/ProductImageModal/index";
|
|
49
50
|
|
|
50
51
|
//pages
|
|
51
|
-
export * from "./components/pages/ChangePasswordLogin"
|
|
52
|
-
export * from "./components/pages/CustomerLogin"
|
|
52
|
+
export * from "./components/pages/ChangePasswordLogin";
|
|
53
|
+
export * from "./components/pages/CustomerLogin";
|
|
53
54
|
export * from "./components/pages/CustomerType";
|
|
54
|
-
export * from "./components/pages/EmailResetPassword"
|
|
55
|
+
export * from "./components/pages/EmailResetPassword";
|
|
55
56
|
export * from "./components/pages/OnboardPlan";
|
|
56
|
-
export * from "./components/pages/RegistrationLoginFirstStep"
|
|
57
|
-
export * from "./components/pages/RegistrationLoginSecondStep"
|
|
58
|
-
export * from "./components/pages/RegistrationLoginThirdStep"
|
|
57
|
+
export * from "./components/pages/RegistrationLoginFirstStep";
|
|
58
|
+
export * from "./components/pages/RegistrationLoginSecondStep";
|
|
59
|
+
export * from "./components/pages/RegistrationLoginThirdStep";
|
|
59
60
|
export * from "./components/pages/RetailerProductEdition";
|
|
60
|
-
export * from "./components/pages/VerificationCodeResetPassword"
|
|
61
|
+
export * from "./components/pages/VerificationCodeResetPassword";
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Login = void 0;
|
|
7
|
-
|
|
8
|
-
var _styles = require("./styles");
|
|
9
|
-
|
|
10
|
-
var _index = require("../../atoms/LogoImage/index");
|
|
11
|
-
|
|
12
|
-
var _index2 = require("../../atoms/ScreenHeader/index");
|
|
13
|
-
|
|
14
|
-
var _index3 = require("../../atoms/GeneralButton/index");
|
|
15
|
-
|
|
16
|
-
var _index4 = require("../../atoms/CheckBox/index");
|
|
17
|
-
|
|
18
|
-
var _TagAndInput = require("../TagAndInput");
|
|
19
|
-
|
|
20
|
-
var _variables = require("../../../global-files/variables");
|
|
21
|
-
|
|
22
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
|
|
24
|
-
var Login = function Login() {
|
|
25
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
|
|
26
|
-
className: "home-login",
|
|
27
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
28
|
-
className: "main-container",
|
|
29
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
30
|
-
className: "credenciales",
|
|
31
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
|
|
32
|
-
fontFamily: _variables.FontFamily.AvenirNext,
|
|
33
|
-
color: _variables.GlobalColors.s5,
|
|
34
|
-
text: "Ingresa tus credenciales"
|
|
35
|
-
})
|
|
36
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
37
|
-
className: "user",
|
|
38
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
|
|
39
|
-
inputType: "text",
|
|
40
|
-
label: "Nombre de usuario",
|
|
41
|
-
inputPlaceHolder: "username@contentoh.com"
|
|
42
|
-
})
|
|
43
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
44
|
-
className: "password",
|
|
45
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
|
|
46
|
-
inputType: "text",
|
|
47
|
-
label: "Contraseña",
|
|
48
|
-
inputPlaceHolder: "Escribe tu contraseña"
|
|
49
|
-
})
|
|
50
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
51
|
-
className: "select",
|
|
52
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
|
|
53
|
-
label: "Mantener sesión activada",
|
|
54
|
-
id: "chk-default",
|
|
55
|
-
className: "active-left"
|
|
56
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
57
|
-
className: "active-right",
|
|
58
|
-
children: "Olvide mi contrase\xF1a"
|
|
59
|
-
})]
|
|
60
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
61
|
-
className: "button-right",
|
|
62
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
|
|
63
|
-
buttonType: "general-default-button",
|
|
64
|
-
label: "Iniciar sesión"
|
|
65
|
-
})
|
|
66
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
67
|
-
className: "new-login",
|
|
68
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
|
|
69
|
-
className: "pre-registro",
|
|
70
|
-
children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
71
|
-
children: " Reg\xEDstrate"
|
|
72
|
-
})]
|
|
73
|
-
})
|
|
74
|
-
})]
|
|
75
|
-
})
|
|
76
|
-
});
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
exports.Login = Login;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Container = void 0;
|
|
9
|
-
|
|
10
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
11
|
-
|
|
12
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
|
-
var _variables = require("../../../global-files/variables");
|
|
15
|
-
|
|
16
|
-
var _templateObject;
|
|
17
|
-
|
|
18
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: \"white\";\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\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 .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
|
-
|
|
20
|
-
exports.Container = Container;
|