contentoh-components-library 21.0.45 → 21.0.46
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/RegistrationSecondStep/index.js +0 -2
- package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js +28 -0
- package/dist/components/molecules/SignInLoginCreationApp/index.js +277 -0
- package/dist/components/molecules/SignInLoginCreationApp/styles.js +20 -0
- package/dist/components/molecules/VerificationCodeResetPasswordLogin/styles.js +1 -1
- package/dist/components/organisms/ChangePassword/styles.js +1 -1
- package/package.json +1 -1
- package/src/components/molecules/RegistrationSecondStep/index.js +1 -6
- package/src/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js +11 -0
- package/src/components/molecules/SignInLoginCreationApp/index.js +192 -0
- package/src/components/molecules/SignInLoginCreationApp/styles.js +9 -0
- package/src/components/molecules/VerificationCodeResetPasswordLogin/styles.js +3 -1
- package/src/components/organisms/ChangePassword/styles.js +2 -2
|
@@ -124,8 +124,6 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
|
|
|
124
124
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
|
|
125
125
|
text: "Todos los datos estan protegidos.",
|
|
126
126
|
headerType: "date-header"
|
|
127
|
-
}), !termsCheck && !!privacyCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
128
|
-
children: "Seleccione los terminos y condiciones y el Aviso de privacidad"
|
|
129
127
|
})]
|
|
130
128
|
}, "7"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
131
129
|
className: "button-end",
|
|
@@ -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.SignInLoginCreationAppDefault = 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/SignInLoginCreationApp",
|
|
18
|
+
component: _index.SignInLoginCreationApp
|
|
19
|
+
};
|
|
20
|
+
exports.default = _default;
|
|
21
|
+
|
|
22
|
+
var Template = function Template(args) {
|
|
23
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SignInLoginCreationApp, (0, _objectSpread2.default)({}, args));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var SignInLoginCreationAppDefault = Template.bind({});
|
|
27
|
+
exports.SignInLoginCreationAppDefault = SignInLoginCreationAppDefault;
|
|
28
|
+
SignInLoginCreationAppDefault.args = {};
|
|
@@ -0,0 +1,277 @@
|
|
|
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.SignInLoginCreationApp = 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 _Loading = require("../../atoms/Loading");
|
|
33
|
+
|
|
34
|
+
var _reactRouterDom = require("react-router-dom");
|
|
35
|
+
|
|
36
|
+
var _axios = _interopRequireDefault(require("axios"));
|
|
37
|
+
|
|
38
|
+
var _index5 = require("../../atoms/GradientPanel/index");
|
|
39
|
+
|
|
40
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
41
|
+
|
|
42
|
+
var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
|
|
43
|
+
var _useState = (0, _react.useState)(false),
|
|
44
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
45
|
+
emptyEmail = _useState2[0],
|
|
46
|
+
setEmptyEmail = _useState2[1];
|
|
47
|
+
|
|
48
|
+
var _useState3 = (0, _react.useState)(false),
|
|
49
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
50
|
+
invalidEmail = _useState4[0],
|
|
51
|
+
setInvalidEmail = _useState4[1];
|
|
52
|
+
|
|
53
|
+
var _useState5 = (0, _react.useState)(false),
|
|
54
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
55
|
+
emptyPassword = _useState6[0],
|
|
56
|
+
setEmptyPassword = _useState6[1];
|
|
57
|
+
|
|
58
|
+
var _useState7 = (0, _react.useState)(true),
|
|
59
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
60
|
+
showErrors = _useState8[0],
|
|
61
|
+
setShowErrors = _useState8[1];
|
|
62
|
+
|
|
63
|
+
var _useState9 = (0, _react.useState)(""),
|
|
64
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
65
|
+
signInError = _useState10[0],
|
|
66
|
+
setSignInError = _useState10[1];
|
|
67
|
+
|
|
68
|
+
var _useState11 = (0, _react.useState)(false),
|
|
69
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
70
|
+
loading = _useState12[0],
|
|
71
|
+
setLoading = _useState12[1];
|
|
72
|
+
|
|
73
|
+
var _useState13 = (0, _react.useState)(false),
|
|
74
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
75
|
+
upgradePlanRedirect = _useState14[0],
|
|
76
|
+
setUpgradePlanRedirect = _useState14[1];
|
|
77
|
+
|
|
78
|
+
var validate = /*#__PURE__*/function () {
|
|
79
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
|
|
80
|
+
var valid, email, password, session, userGroup, response, userGroupValue, user, company;
|
|
81
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
82
|
+
while (1) {
|
|
83
|
+
switch (_context.prev = _context.next) {
|
|
84
|
+
case 0:
|
|
85
|
+
setSignInError("");
|
|
86
|
+
setShowErrors(true);
|
|
87
|
+
e.preventDefault();
|
|
88
|
+
valid = true;
|
|
89
|
+
email = document.querySelector("#emailInput").value;
|
|
90
|
+
password = document.querySelector("#passwordInput").value;
|
|
91
|
+
!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
|
|
92
|
+
|
|
93
|
+
if (email === "") {
|
|
94
|
+
valid = false;
|
|
95
|
+
setEmptyEmail(true);
|
|
96
|
+
} else {
|
|
97
|
+
setEmptyEmail(false);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
if (password === "") {
|
|
101
|
+
valid = false;
|
|
102
|
+
setEmptyPassword(true);
|
|
103
|
+
} else {
|
|
104
|
+
setEmptyPassword(false);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
if (!valid) {
|
|
108
|
+
_context.next = 34;
|
|
109
|
+
break;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
_context.prev = 10;
|
|
113
|
+
setLoading(true);
|
|
114
|
+
_context.next = 14;
|
|
115
|
+
return props.Auth.signIn(email, password);
|
|
116
|
+
|
|
117
|
+
case 14:
|
|
118
|
+
session = _context.sent;
|
|
119
|
+
|
|
120
|
+
if (!(session.challengeName === "NEW_PASSWORD_REQUIRED")) {
|
|
121
|
+
_context.next = 20;
|
|
122
|
+
break;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
props.setUser(session);
|
|
126
|
+
props.setPaso(8);
|
|
127
|
+
_context.next = 26;
|
|
128
|
+
break;
|
|
129
|
+
|
|
130
|
+
case 20:
|
|
131
|
+
userGroup = session.signInUserSession.accessToken.payload["cognito:groups"];
|
|
132
|
+
_context.next = 23;
|
|
133
|
+
return _axios.default.get(process.env.REACT_APP_USER_ENDPOINT, {
|
|
134
|
+
headers: {
|
|
135
|
+
Authorization: session.signInUserSession.idToken.jwtToken
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
case 23:
|
|
140
|
+
response = _context.sent;
|
|
141
|
+
userGroupValue = typeof userGroup === "string" ? userGroup : userGroup[0];
|
|
142
|
+
|
|
143
|
+
if (userGroupValue === "usuario_contentoh") {
|
|
144
|
+
sessionStorage.setItem("auth", true);
|
|
145
|
+
sessionStorage.setItem("jwt", session.signInUserSession.idToken.jwtToken);
|
|
146
|
+
user = JSON.parse(response.data.body).data[0];
|
|
147
|
+
company = JSON.parse(response.data.body).data[1];
|
|
148
|
+
caches.keys().then(function (names) {
|
|
149
|
+
names.forEach(function (name) {
|
|
150
|
+
caches.delete(name);
|
|
151
|
+
});
|
|
152
|
+
});
|
|
153
|
+
user.src = "https://".concat(process.env.REACT_APP_IMAGES_PROFILE_BUCKET, ".s3.amazonaws.com/id-").concat(user.id_user, "/").concat(user.id_user, ".png?").concat(new Date().getTime());
|
|
154
|
+
sessionStorage.setItem("user", JSON.stringify(user));
|
|
155
|
+
sessionStorage.setItem("company", JSON.stringify(company));
|
|
156
|
+
setUpgradePlanRedirect(true);
|
|
157
|
+
} else {
|
|
158
|
+
setSignInError("NotAuthorizedException");
|
|
159
|
+
setLoading(false);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
case 26:
|
|
163
|
+
_context.next = 34;
|
|
164
|
+
break;
|
|
165
|
+
|
|
166
|
+
case 28:
|
|
167
|
+
_context.prev = 28;
|
|
168
|
+
_context.t0 = _context["catch"](10);
|
|
169
|
+
console.log(_context.t0);
|
|
170
|
+
setLoading(false);
|
|
171
|
+
console.log("error 1");
|
|
172
|
+
|
|
173
|
+
if (_context.t0.code === "NotAuthorizedException") {
|
|
174
|
+
setSignInError("NotAuthorizedException");
|
|
175
|
+
} else if (_context.t0.code === "UserNotConfirmedException") {
|
|
176
|
+
sessionStorage.setItem("email", JSON.stringify(document.querySelector("#usernameInput").value.trim()));
|
|
177
|
+
sessionStorage.setItem("email", JSON.stringify(email));
|
|
178
|
+
props.setPaso(5);
|
|
179
|
+
} else {
|
|
180
|
+
setSignInError("Error");
|
|
181
|
+
console.log("error 2");
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
case 34:
|
|
185
|
+
case "end":
|
|
186
|
+
return _context.stop();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}, _callee, null, [[10, 28]]);
|
|
190
|
+
}));
|
|
191
|
+
|
|
192
|
+
return function validate(_x) {
|
|
193
|
+
return _ref.apply(this, arguments);
|
|
194
|
+
};
|
|
195
|
+
}();
|
|
196
|
+
|
|
197
|
+
(0, _react.useEffect)(function () {
|
|
198
|
+
sessionStorage.getItem("resetPasswordProcess") && sessionStorage.removeItem("resetPasswordProcess");
|
|
199
|
+
}, []);
|
|
200
|
+
(0, _react.useEffect)(function () {
|
|
201
|
+
if (upgradePlanRedirect) setLoading(false);
|
|
202
|
+
}, [upgradePlanRedirect]);
|
|
203
|
+
var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
204
|
+
className: "main-container",
|
|
205
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
206
|
+
className: "credenciales",
|
|
207
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
|
|
208
|
+
fontFamily: _variables.FontFamily.AvenirNext,
|
|
209
|
+
color: _variables.GlobalColors.s5,
|
|
210
|
+
text: "Ingresa tus credenciales"
|
|
211
|
+
})
|
|
212
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
213
|
+
className: "user",
|
|
214
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
|
|
215
|
+
inputType: "text",
|
|
216
|
+
label: "Nombre de usuario",
|
|
217
|
+
inputPlaceHolder: "username@contentoh.com",
|
|
218
|
+
inputId: "emailInput"
|
|
219
|
+
}), showErrors && emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
220
|
+
children: "Ingrese su correo"
|
|
221
|
+
}), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
222
|
+
children: "Ingrese un correo v\xE1lido"
|
|
223
|
+
})]
|
|
224
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
225
|
+
className: "password",
|
|
226
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
|
|
227
|
+
inputType: "password",
|
|
228
|
+
label: "Contraseña",
|
|
229
|
+
inputPlaceHolder: "Escribe tu contraseña",
|
|
230
|
+
inputId: "passwordInput"
|
|
231
|
+
}), showErrors && emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
232
|
+
children: "Ingrese su contrase\xF1a"
|
|
233
|
+
})]
|
|
234
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
235
|
+
className: "select",
|
|
236
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
|
|
237
|
+
label: "Mantener sesión activada",
|
|
238
|
+
id: "chk-default",
|
|
239
|
+
className: "active-left"
|
|
240
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
241
|
+
onClick: function onClick() {
|
|
242
|
+
return props.setPaso(10);
|
|
243
|
+
},
|
|
244
|
+
className: "active-right",
|
|
245
|
+
children: "Olvide mi contrase\xF1a"
|
|
246
|
+
}), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
247
|
+
children: "Correo o contrase\xF1a incorrectos"
|
|
248
|
+
}), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
249
|
+
children: "Ha habido un problema al iniciar sesi\xF3n"
|
|
250
|
+
})]
|
|
251
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
252
|
+
className: "button-right",
|
|
253
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
|
|
254
|
+
buttonType: "general-default-button",
|
|
255
|
+
label: "Iniciar sesión",
|
|
256
|
+
onClick: function onClick(e) {
|
|
257
|
+
return validate(e);
|
|
258
|
+
}
|
|
259
|
+
})
|
|
260
|
+
})]
|
|
261
|
+
})];
|
|
262
|
+
return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
263
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
|
|
264
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.GradientPanel, {
|
|
265
|
+
componentsArray: loginRight,
|
|
266
|
+
panelType: "home-login",
|
|
267
|
+
panelColor: _variables.GlobalColors.white
|
|
268
|
+
})
|
|
269
|
+
}), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
|
|
270
|
+
to: {
|
|
271
|
+
pathname: "/dashboard"
|
|
272
|
+
}
|
|
273
|
+
})]
|
|
274
|
+
});
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
exports.SignInLoginCreationApp = SignInLoginCreationApp;
|
|
@@ -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: 100vh;\n width: 50%;\n"])));
|
|
19
|
+
|
|
20
|
+
exports.Container = Container;
|
|
@@ -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:
|
|
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;
|
|
@@ -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 width: 50%;\n height: 100vh;\n .button-center {\n position: absolute;\n bottom:
|
|
16
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 50%;\n height: 100vh;\n .button-center {\n position: absolute;\n bottom: 13%;\n left: 18%;\n .general-default-button {\n width: 160px;\n }\n }\n"])));
|
|
17
17
|
|
|
18
18
|
exports.Container = Container;
|
package/package.json
CHANGED
|
@@ -46,7 +46,7 @@ export const RegistrationSecondStep = (props) => {
|
|
|
46
46
|
password !== confirmPassword
|
|
47
47
|
) {
|
|
48
48
|
valid = false;
|
|
49
|
-
}
|
|
49
|
+
}
|
|
50
50
|
return valid;
|
|
51
51
|
};
|
|
52
52
|
const loginRight = [
|
|
@@ -90,11 +90,6 @@ export const RegistrationSecondStep = (props) => {
|
|
|
90
90
|
text={"Todos los datos estan protegidos."}
|
|
91
91
|
headerType={"date-header"}
|
|
92
92
|
/>
|
|
93
|
-
{!termsCheck && !!privacyCheck && (
|
|
94
|
-
<label>
|
|
95
|
-
Seleccione los terminos y condiciones y el Aviso de privacidad
|
|
96
|
-
</label>
|
|
97
|
-
)}
|
|
98
93
|
</div>,
|
|
99
94
|
<div className="button-end" key="8">
|
|
100
95
|
<Button
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SignInLoginCreationApp } from "./index";
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: "Components/molecules/SignInLoginCreationApp",
|
|
5
|
+
component: SignInLoginCreationApp,
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const Template = (args) => <SignInLoginCreationApp {...args} />;
|
|
9
|
+
|
|
10
|
+
export const SignInLoginCreationAppDefault = Template.bind({});
|
|
11
|
+
SignInLoginCreationAppDefault.args = {};
|
|
@@ -0,0 +1,192 @@
|
|
|
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, useEffect } from "react";
|
|
9
|
+
import { Loading } from "../../atoms/Loading";
|
|
10
|
+
import { Redirect } from "react-router-dom";
|
|
11
|
+
import axios from "axios";
|
|
12
|
+
import { GradientPanel } from "../../atoms/GradientPanel/index";
|
|
13
|
+
|
|
14
|
+
export const SignInLoginCreationApp = (props) => {
|
|
15
|
+
const [emptyEmail, setEmptyEmail] = useState(false);
|
|
16
|
+
const [invalidEmail, setInvalidEmail] = useState(false);
|
|
17
|
+
const [emptyPassword, setEmptyPassword] = useState(false);
|
|
18
|
+
const [showErrors, setShowErrors] = useState(true);
|
|
19
|
+
const [signInError, setSignInError] = useState("");
|
|
20
|
+
const [loading, setLoading] = useState(false);
|
|
21
|
+
const [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
|
|
22
|
+
const validate = async (e) => {
|
|
23
|
+
setSignInError("");
|
|
24
|
+
setShowErrors(true);
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
let valid = true;
|
|
27
|
+
const email = document.querySelector("#emailInput").value;
|
|
28
|
+
const password = document.querySelector("#passwordInput").value;
|
|
29
|
+
!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
|
|
30
|
+
email
|
|
31
|
+
)
|
|
32
|
+
? setInvalidEmail(true)
|
|
33
|
+
: setInvalidEmail(false);
|
|
34
|
+
if (email === "") {
|
|
35
|
+
valid = false;
|
|
36
|
+
setEmptyEmail(true);
|
|
37
|
+
} else {
|
|
38
|
+
setEmptyEmail(false);
|
|
39
|
+
}
|
|
40
|
+
if (password === "") {
|
|
41
|
+
valid = false;
|
|
42
|
+
setEmptyPassword(true);
|
|
43
|
+
} else {
|
|
44
|
+
setEmptyPassword(false);
|
|
45
|
+
}
|
|
46
|
+
if (valid) {
|
|
47
|
+
try {
|
|
48
|
+
setLoading(true);
|
|
49
|
+
const session = await props.Auth.signIn(email, password);
|
|
50
|
+
if (session.challengeName === "NEW_PASSWORD_REQUIRED") {
|
|
51
|
+
props.setUser(session);
|
|
52
|
+
props.setPaso(8);
|
|
53
|
+
} else {
|
|
54
|
+
const userGroup =
|
|
55
|
+
session.signInUserSession.accessToken.payload["cognito:groups"];
|
|
56
|
+
const response = await axios.get(
|
|
57
|
+
process.env.REACT_APP_USER_ENDPOINT,
|
|
58
|
+
{
|
|
59
|
+
headers: {
|
|
60
|
+
Authorization: session.signInUserSession.idToken.jwtToken,
|
|
61
|
+
},
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
const userGroupValue =
|
|
65
|
+
typeof userGroup === "string" ? userGroup : userGroup[0];
|
|
66
|
+
if (userGroupValue === "usuario_contentoh") {
|
|
67
|
+
sessionStorage.setItem("auth", true);
|
|
68
|
+
sessionStorage.setItem(
|
|
69
|
+
"jwt",
|
|
70
|
+
session.signInUserSession.idToken.jwtToken
|
|
71
|
+
);
|
|
72
|
+
const user = JSON.parse(response.data.body).data[0];
|
|
73
|
+
const company = JSON.parse(response.data.body).data[1];
|
|
74
|
+
caches.keys().then((names) => {
|
|
75
|
+
names.forEach((name) => {
|
|
76
|
+
caches.delete(name);
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
user.src = `https://${
|
|
80
|
+
process.env.REACT_APP_IMAGES_PROFILE_BUCKET
|
|
81
|
+
}.s3.amazonaws.com/id-${user.id_user}/${
|
|
82
|
+
user.id_user
|
|
83
|
+
}.png?${new Date().getTime()}`;
|
|
84
|
+
sessionStorage.setItem("user", JSON.stringify(user));
|
|
85
|
+
sessionStorage.setItem("company", JSON.stringify(company));
|
|
86
|
+
setUpgradePlanRedirect(true);
|
|
87
|
+
} else {
|
|
88
|
+
setSignInError("NotAuthorizedException");
|
|
89
|
+
setLoading(false);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.log(error);
|
|
94
|
+
setLoading(false);
|
|
95
|
+
console.log("error 1");
|
|
96
|
+
if (error.code === "NotAuthorizedException") {
|
|
97
|
+
setSignInError("NotAuthorizedException");
|
|
98
|
+
} else if (error.code === "UserNotConfirmedException") {
|
|
99
|
+
sessionStorage.setItem(
|
|
100
|
+
"email",
|
|
101
|
+
JSON.stringify(
|
|
102
|
+
document.querySelector("#usernameInput").value.trim()
|
|
103
|
+
)
|
|
104
|
+
);
|
|
105
|
+
sessionStorage.setItem("email", JSON.stringify(email));
|
|
106
|
+
props.setPaso(5);
|
|
107
|
+
} else {
|
|
108
|
+
setSignInError("Error");
|
|
109
|
+
console.log("error 2");
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
sessionStorage.getItem("resetPasswordProcess") &&
|
|
117
|
+
sessionStorage.removeItem("resetPasswordProcess");
|
|
118
|
+
}, []);
|
|
119
|
+
|
|
120
|
+
useEffect(() => {
|
|
121
|
+
if (upgradePlanRedirect) setLoading(false);
|
|
122
|
+
}, [upgradePlanRedirect]);
|
|
123
|
+
|
|
124
|
+
const loginRight = [
|
|
125
|
+
<div className="main-container">
|
|
126
|
+
<LogoImage />
|
|
127
|
+
<div className="credenciales">
|
|
128
|
+
<ScreenHeader
|
|
129
|
+
fontFamily={FontFamily.AvenirNext}
|
|
130
|
+
color={GlobalColors.s5}
|
|
131
|
+
text={"Ingresa tus credenciales"}
|
|
132
|
+
/>
|
|
133
|
+
</div>
|
|
134
|
+
<div className="user">
|
|
135
|
+
<TagAndInput
|
|
136
|
+
inputType={"text"}
|
|
137
|
+
label={"Nombre de usuario"}
|
|
138
|
+
inputPlaceHolder={"username@contentoh.com"}
|
|
139
|
+
inputId={"emailInput"}
|
|
140
|
+
/>
|
|
141
|
+
{showErrors && emptyEmail && <label>Ingrese su correo</label>}
|
|
142
|
+
{invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
|
|
143
|
+
</div>
|
|
144
|
+
<div className="password">
|
|
145
|
+
<TagAndInput
|
|
146
|
+
inputType={"password"}
|
|
147
|
+
label={"Contraseña"}
|
|
148
|
+
inputPlaceHolder={"Escribe tu contraseña"}
|
|
149
|
+
inputId={"passwordInput"}
|
|
150
|
+
/>
|
|
151
|
+
{showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
|
|
152
|
+
</div>
|
|
153
|
+
<div className="select">
|
|
154
|
+
<CheckBox
|
|
155
|
+
label={"Mantener sesión activada"}
|
|
156
|
+
id={"chk-default"}
|
|
157
|
+
className="active-left"
|
|
158
|
+
/>
|
|
159
|
+
<p onClick={() => props.setPaso(10)} className="active-right">
|
|
160
|
+
Olvide mi contraseña
|
|
161
|
+
</p>
|
|
162
|
+
{showErrors && signInError === "NotAuthorizedException" && (
|
|
163
|
+
<label>Correo o contraseña incorrectos</label>
|
|
164
|
+
)}
|
|
165
|
+
{showErrors && signInError === "Error" && (
|
|
166
|
+
<label>Ha habido un problema al iniciar sesión</label>
|
|
167
|
+
)}
|
|
168
|
+
</div>
|
|
169
|
+
<div className="button-right">
|
|
170
|
+
<Button
|
|
171
|
+
buttonType={"general-default-button"}
|
|
172
|
+
label={"Iniciar sesión"}
|
|
173
|
+
onClick={(e) => validate(e)}
|
|
174
|
+
/>
|
|
175
|
+
</div>
|
|
176
|
+
</div>,
|
|
177
|
+
];
|
|
178
|
+
return loading ? (
|
|
179
|
+
<Loading />
|
|
180
|
+
) : (
|
|
181
|
+
<>
|
|
182
|
+
<Container>
|
|
183
|
+
<GradientPanel
|
|
184
|
+
componentsArray={loginRight}
|
|
185
|
+
panelType={"home-login"}
|
|
186
|
+
panelColor={GlobalColors.white}
|
|
187
|
+
/>
|
|
188
|
+
</Container>
|
|
189
|
+
{upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
|
|
190
|
+
</>
|
|
191
|
+
);
|
|
192
|
+
};
|
|
@@ -3,8 +3,10 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
|
|
|
3
3
|
|
|
4
4
|
export const Container = styled.div`
|
|
5
5
|
display: flex;
|
|
6
|
-
height:
|
|
6
|
+
height: 100vh;
|
|
7
7
|
width: 50%;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
8
10
|
.button-center {
|
|
9
11
|
text-align: center;
|
|
10
12
|
.general-default-button {
|