contentoh-components-library 21.0.21 → 21.0.24
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/CarouselImagesLogin/index.js +40 -42
- package/dist/components/molecules/Login/Login.stories.js +28 -0
- package/dist/components/molecules/Login/index.js +142 -0
- package/dist/components/molecules/Login/styles.js +20 -0
- package/dist/components/molecules/SignIn/SignIn.stories.js +28 -0
- package/dist/components/molecules/SignIn/index.js +142 -0
- package/dist/components/molecules/SignIn/styles.js +20 -0
- package/package.json +2 -2
- package/src/components/molecules/CarouselImagesLogin/index.js +34 -37
- package/src/components/molecules/SignIn/SignIn.stories.js +11 -0
- package/src/components/molecules/SignIn/index.js +79 -0
- package/src/components/molecules/SignIn/styles.js +77 -0
|
@@ -22,50 +22,48 @@ var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
|
|
|
22
22
|
panelColor = _ref.panelColor;
|
|
23
23
|
|
|
24
24
|
var carouselStart = function carouselStart() {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
25
|
+
var images = panelImg;
|
|
26
|
+
var i = 1;
|
|
27
|
+
var img1 = document.querySelector("#img1");
|
|
28
|
+
var img2 = document.querySelector("#img2");
|
|
29
|
+
var divIndicadores = document.querySelector("#indicadores");
|
|
30
|
+
|
|
31
|
+
for (var index = 0; index < images.length; index++) {
|
|
32
|
+
var div = document.createElement("div");
|
|
33
|
+
div.classList.add("circles");
|
|
34
|
+
div.id = index;
|
|
35
|
+
divIndicadores.appendChild(div);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
img1.src = images[0];
|
|
39
|
+
var circulos = document.querySelectorAll(".circles");
|
|
40
|
+
circulos[0].classList.add("resaltado");
|
|
41
|
+
|
|
42
|
+
var slideshow = function slideshow() {
|
|
43
|
+
img2.src = images[i];
|
|
44
|
+
var circulo_actual = Array.from(circulos).find(function (el) {
|
|
45
|
+
return el.id == i;
|
|
46
|
+
});
|
|
47
|
+
Array.from(circulos).forEach(function (cir) {
|
|
48
|
+
return cir.classList.remove("resaltado");
|
|
49
|
+
});
|
|
50
|
+
circulo_actual.classList.add("resaltado");
|
|
51
|
+
img1.classList.add("right");
|
|
52
|
+
img2.classList.add("active");
|
|
53
|
+
i++;
|
|
54
|
+
|
|
55
|
+
if (i == images.length) {
|
|
56
|
+
i = 0;
|
|
37
57
|
}
|
|
38
58
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
});
|
|
48
|
-
Array.from(circulos).forEach(function (cir) {
|
|
49
|
-
return cir.classList.remove("resaltado");
|
|
50
|
-
});
|
|
51
|
-
circulo_actual.classList.add("resaltado");
|
|
52
|
-
img1.classList.add("right");
|
|
53
|
-
img2.classList.add("active");
|
|
54
|
-
i++;
|
|
55
|
-
|
|
56
|
-
if (i == images.length) {
|
|
57
|
-
i = 0;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
setTimeout(function () {
|
|
61
|
-
img1.src = img2.src;
|
|
62
|
-
img2.classList.remove("active");
|
|
63
|
-
img1.classList.remove("right");
|
|
64
|
-
}, 1000);
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
setInterval(slideshow, 4000);
|
|
68
|
-
});
|
|
59
|
+
setTimeout(function () {
|
|
60
|
+
img1.src = img2.src;
|
|
61
|
+
img2.classList.remove("active");
|
|
62
|
+
img1.classList.remove("right");
|
|
63
|
+
}, 1000);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
setInterval(slideshow, 4000);
|
|
69
67
|
};
|
|
70
68
|
|
|
71
69
|
(0, _react.useEffect)(function () {
|
|
@@ -0,0 +1,28 @@
|
|
|
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.default = exports.LoginDefault = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _index = require("./index");
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
title: "Components/molecules/Login",
|
|
18
|
+
component: _index.Login
|
|
19
|
+
};
|
|
20
|
+
exports.default = _default;
|
|
21
|
+
|
|
22
|
+
var Template = function Template(args) {
|
|
23
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Login, (0, _objectSpread2.default)({}, args));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var LoginDefault = Template.bind({});
|
|
27
|
+
exports.LoginDefault = LoginDefault;
|
|
28
|
+
LoginDefault.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.Login = 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 Login = function Login() {
|
|
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.Login = Login;
|
|
@@ -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;
|
|
@@ -0,0 +1,28 @@
|
|
|
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.default = exports.LoginDefault = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _index = require("./index");
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
title: "Components/molecules/Login",
|
|
18
|
+
component: _index.Login
|
|
19
|
+
};
|
|
20
|
+
exports.default = _default;
|
|
21
|
+
|
|
22
|
+
var Template = function Template(args) {
|
|
23
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Login, (0, _objectSpread2.default)({}, args));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var LoginDefault = Template.bind({});
|
|
27
|
+
exports.LoginDefault = LoginDefault;
|
|
28
|
+
LoginDefault.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.Login = 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 Login = function Login() {
|
|
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.Login = Login;
|
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "contentoh-components-library",
|
|
3
|
-
"version": "21.0.
|
|
3
|
+
"version": "21.0.24",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@babel/runtime": "^7.17.2",
|
|
6
6
|
"@storybook/addon-postcss": "^2.0.0",
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
"axios": "^0.25.0",
|
|
11
11
|
"babel-preset-react-app": "^10.0.1",
|
|
12
12
|
"chart.js": "^3.7.1",
|
|
13
|
-
"contentoh-components-library": "^21.0.18",
|
|
14
13
|
"js-base64": "^3.7.2",
|
|
15
14
|
"prop-types": "^15.7.2",
|
|
16
15
|
"react": "^17.0.2",
|
|
@@ -71,6 +70,7 @@
|
|
|
71
70
|
"auto": "^10.36.5",
|
|
72
71
|
"babel-loader": "^8.2.3",
|
|
73
72
|
"chromatic": "^6.3.3",
|
|
73
|
+
"contentoh-components-library": "^21.0.21",
|
|
74
74
|
"cross-env": "^7.0.3",
|
|
75
75
|
"storybook-css-modules-preset": "^1.1.1"
|
|
76
76
|
},
|
|
@@ -9,46 +9,43 @@ export const CarouselImagesLogin = ({
|
|
|
9
9
|
panelColor,
|
|
10
10
|
}) => {
|
|
11
11
|
const carouselStart = () => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
12
|
+
const images = panelImg;
|
|
13
|
+
let i = 1;
|
|
14
|
+
const img1 = document.querySelector("#img1");
|
|
15
|
+
const img2 = document.querySelector("#img2");
|
|
16
|
+
const divIndicadores = document.querySelector("#indicadores");
|
|
17
|
+
for (let index = 0; index < images.length; index++) {
|
|
18
|
+
const div = document.createElement("div");
|
|
19
|
+
div.classList.add("circles");
|
|
20
|
+
div.id = index;
|
|
21
|
+
divIndicadores.appendChild(div);
|
|
22
|
+
}
|
|
23
|
+
img1.src = images[0];
|
|
24
|
+
const circulos = document.querySelectorAll(".circles");
|
|
25
|
+
circulos[0].classList.add("resaltado");
|
|
26
|
+
const slideshow = () => {
|
|
27
|
+
img2.src = images[i];
|
|
28
|
+
const circulo_actual = Array.from(circulos).find((el) => el.id == i);
|
|
29
|
+
Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
|
|
30
|
+
circulo_actual.classList.add("resaltado");
|
|
31
|
+
img1.classList.add("right");
|
|
32
|
+
img2.classList.add("active");
|
|
33
|
+
i++;
|
|
34
|
+
if (i == images.length) {
|
|
35
|
+
i = 0;
|
|
23
36
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
cir.classList.remove("resaltado")
|
|
32
|
-
);
|
|
33
|
-
circulo_actual.classList.add("resaltado");
|
|
34
|
-
img1.classList.add("right");
|
|
35
|
-
img2.classList.add("active");
|
|
36
|
-
i++;
|
|
37
|
-
if (i == images.length) {
|
|
38
|
-
i = 0;
|
|
39
|
-
}
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
img1.src = img2.src;
|
|
42
|
-
img2.classList.remove("active");
|
|
43
|
-
img1.classList.remove("right");
|
|
44
|
-
}, 1000);
|
|
45
|
-
};
|
|
46
|
-
setInterval(slideshow, 4000);
|
|
47
|
-
});
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
img1.src = img2.src;
|
|
39
|
+
img2.classList.remove("active");
|
|
40
|
+
img1.classList.remove("right");
|
|
41
|
+
}, 1000);
|
|
42
|
+
};
|
|
43
|
+
setInterval(slideshow, 4000);
|
|
48
44
|
};
|
|
49
|
-
|
|
45
|
+
|
|
46
|
+
useEffect(() => {
|
|
50
47
|
carouselStart();
|
|
51
|
-
},[])
|
|
48
|
+
}, []);
|
|
52
49
|
|
|
53
50
|
return (
|
|
54
51
|
<Container panelColor={panelColor}>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { Container } from "./styles";
|
|
2
|
+
import { LogoImage } from "../../atoms/LogoImage/index";
|
|
3
|
+
import { ScreenHeader } from "../../atoms/ScreenHeader/index";
|
|
4
|
+
import { Button } from "../../atoms/GeneralButton/index";
|
|
5
|
+
import { CheckBox } from "../../atoms/CheckBox/index";
|
|
6
|
+
import { TagAndInput } from "../TagAndInput";
|
|
7
|
+
import { FontFamily, GlobalColors } from "../../../global-files/variables";
|
|
8
|
+
import { useState } from "react";
|
|
9
|
+
|
|
10
|
+
export const Login = () => {
|
|
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
|
+
};
|
|
26
|
+
return (
|
|
27
|
+
<Container className={"home-login"}>
|
|
28
|
+
<div className="main-container">
|
|
29
|
+
<LogoImage />
|
|
30
|
+
<div className="credenciales">
|
|
31
|
+
<ScreenHeader
|
|
32
|
+
fontFamily={FontFamily.AvenirNext}
|
|
33
|
+
color={GlobalColors.s5}
|
|
34
|
+
text={"Ingresa tus credenciales"}
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
<div className="user">
|
|
38
|
+
<TagAndInput
|
|
39
|
+
inputType={"text"}
|
|
40
|
+
label={"Nombre de usuario"}
|
|
41
|
+
inputPlaceHolder={"username@contentoh.com"}
|
|
42
|
+
inputId={"emailInput"}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
{emptyEmail && <label>Ingrese su correo</label>}
|
|
46
|
+
{invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
|
|
47
|
+
<div className="password">
|
|
48
|
+
<TagAndInput
|
|
49
|
+
inputType={"text"}
|
|
50
|
+
label={"Contraseña"}
|
|
51
|
+
inputPlaceHolder={"Escribe tu contraseña"}
|
|
52
|
+
inputId={"passwordInput"}
|
|
53
|
+
/>
|
|
54
|
+
</div>
|
|
55
|
+
{emptyPassword && <label>Ingrese su contraseña</label>}
|
|
56
|
+
<div className="select">
|
|
57
|
+
<CheckBox
|
|
58
|
+
label={"Mantener sesión activada"}
|
|
59
|
+
id={"chk-default"}
|
|
60
|
+
className="active-left"
|
|
61
|
+
/>
|
|
62
|
+
<p className="active-right">Olvide mi contraseña</p>
|
|
63
|
+
</div>
|
|
64
|
+
<div className="button-right">
|
|
65
|
+
<Button
|
|
66
|
+
buttonType={"general-default-button"}
|
|
67
|
+
label={"Iniciar sesión"}
|
|
68
|
+
onClick={(e) => validate(e)}
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
<div className="new-login">
|
|
72
|
+
<p className="pre-registro">
|
|
73
|
+
¿Aún no tienes cuenta?<span> Regístrate</span>
|
|
74
|
+
</p>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</Container>
|
|
78
|
+
);
|
|
79
|
+
};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { FontFamily, GlobalColors } from "../../../global-files/variables";
|
|
3
|
+
|
|
4
|
+
export const Container = styled.div`
|
|
5
|
+
background: "white";
|
|
6
|
+
display: flex;
|
|
7
|
+
height: 100%;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
align-items: center;
|
|
10
|
+
label {
|
|
11
|
+
color: red;
|
|
12
|
+
margin-top: 3px;
|
|
13
|
+
margin-left: 15px;
|
|
14
|
+
font-family: ${FontFamily.Raleway_700};
|
|
15
|
+
font-size: 11px;
|
|
16
|
+
& + * {
|
|
17
|
+
margin-top: 12px;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&.home-login {
|
|
22
|
+
.credenciales {
|
|
23
|
+
& + * {
|
|
24
|
+
margin-top: 30px;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.user {
|
|
28
|
+
& + * {
|
|
29
|
+
margin-top: 20px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.password {
|
|
33
|
+
& + * {
|
|
34
|
+
margin-top: 20px;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
.select {
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
.active-right {
|
|
41
|
+
font-family: ${FontFamily.AvenirNext};
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
font-size: 13px;
|
|
44
|
+
line-height: 24px;
|
|
45
|
+
letter-spacing: -0.015em;
|
|
46
|
+
color: ${GlobalColors.s5};
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
}
|
|
49
|
+
& + * {
|
|
50
|
+
margin-top: 50px;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
.button-right {
|
|
54
|
+
text-align: right;
|
|
55
|
+
& + * {
|
|
56
|
+
margin-top: 55px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
.new-login {
|
|
60
|
+
p {
|
|
61
|
+
font-family: ${FontFamily.AvenirNext};
|
|
62
|
+
text-align: right;
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
font-size: 13px;
|
|
65
|
+
line-height: 24px;
|
|
66
|
+
color: ${GlobalColors.s5};
|
|
67
|
+
span {
|
|
68
|
+
color: ${GlobalColors.secondary_magenta};
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.main-container {
|
|
74
|
+
max-width: 80%;
|
|
75
|
+
max-height: 80%;
|
|
76
|
+
}
|
|
77
|
+
`;
|