mbkauthe 1.1.9 → 1.1.10
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/lib/info.js +1 -1
- package/package.json +1 -1
- package/views/loginmbkauthe.handlebars +119 -22
package/lib/info.js
CHANGED
|
@@ -15,7 +15,7 @@ const mbkautheVar = JSON.parse(process.env.mbkautheVar);
|
|
|
15
15
|
|
|
16
16
|
const router = express.Router();
|
|
17
17
|
|
|
18
|
-
router.get(
|
|
18
|
+
router.get("/mbkauthe/login", (req, res) => {
|
|
19
19
|
return res.render("loginmbkauthe", {
|
|
20
20
|
layout: false,
|
|
21
21
|
customURL: mbkautheVar.loginRedirectURL || '/home',
|
package/package.json
CHANGED
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
<head>
|
|
6
6
|
<meta charset="UTF-8">
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
-
<meta name="description"
|
|
9
|
-
content="Log in to portal.mbktechstudio.com to access your resources and manage projects securely.">
|
|
8
|
+
<meta name="description" content="Log in to portal.mbktechstudio.com to access your resources and manage projects securely.">
|
|
10
9
|
<meta name="keywords" content="MBK Tech Studio, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
|
|
11
10
|
<meta property="og:title" content="Login | MBK Tech Studio" />
|
|
12
11
|
<meta property="og:image" content="https://www.mbktechstudio.com/Assets/Images/Icon/logo.png" />
|
|
@@ -16,8 +15,7 @@
|
|
|
16
15
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
17
16
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
18
17
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
19
|
-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
20
|
-
rel="stylesheet">
|
|
18
|
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
21
19
|
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
|
22
20
|
<style>
|
|
23
21
|
:root {
|
|
@@ -66,7 +64,6 @@
|
|
|
66
64
|
flex-direction: column;
|
|
67
65
|
}
|
|
68
66
|
|
|
69
|
-
/* Header - Consistent with index */
|
|
70
67
|
header {
|
|
71
68
|
position: fixed;
|
|
72
69
|
top: 0;
|
|
@@ -80,7 +77,7 @@
|
|
|
80
77
|
}
|
|
81
78
|
|
|
82
79
|
nav {
|
|
83
|
-
padding:
|
|
80
|
+
padding: 10px 5%;
|
|
84
81
|
max-width: 1400px;
|
|
85
82
|
margin: 0 auto;
|
|
86
83
|
}
|
|
@@ -116,7 +113,6 @@
|
|
|
116
113
|
color: transparent;
|
|
117
114
|
}
|
|
118
115
|
|
|
119
|
-
/* Login Container */
|
|
120
116
|
.login-container {
|
|
121
117
|
flex: 1;
|
|
122
118
|
display: flex;
|
|
@@ -131,11 +127,11 @@
|
|
|
131
127
|
.login-box {
|
|
132
128
|
background: var(--dark-light);
|
|
133
129
|
border-radius: var(--radius-xl);
|
|
134
|
-
padding:
|
|
130
|
+
padding: 2rem;
|
|
135
131
|
width: 100%;
|
|
136
132
|
max-width: 500px;
|
|
137
133
|
box-shadow: var(--shadow-lg);
|
|
138
|
-
border:
|
|
134
|
+
border: .125rem solid var(--glass-border);
|
|
139
135
|
position: relative;
|
|
140
136
|
z-index: 2;
|
|
141
137
|
transition: var(--transition);
|
|
@@ -165,15 +161,14 @@
|
|
|
165
161
|
border-radius: 2px;
|
|
166
162
|
}
|
|
167
163
|
|
|
168
|
-
/* Form Elements */
|
|
169
164
|
.form-group {
|
|
170
165
|
position: relative;
|
|
171
|
-
margin-bottom:
|
|
166
|
+
margin-bottom: 1rem;
|
|
172
167
|
}
|
|
173
168
|
|
|
174
169
|
.form-input {
|
|
175
170
|
width: 100%;
|
|
176
|
-
padding:
|
|
171
|
+
padding: 12px 20px;
|
|
177
172
|
background: var(--darker);
|
|
178
173
|
border: 2px solid var(--glass-border);
|
|
179
174
|
border-radius: var(--radius-sm);
|
|
@@ -223,7 +218,7 @@
|
|
|
223
218
|
|
|
224
219
|
.btn-login {
|
|
225
220
|
width: 100%;
|
|
226
|
-
padding:
|
|
221
|
+
padding: 10px;
|
|
227
222
|
border-radius: var(--radius-sm);
|
|
228
223
|
background: var(--primary);
|
|
229
224
|
color: white;
|
|
@@ -249,7 +244,6 @@
|
|
|
249
244
|
box-shadow: none;
|
|
250
245
|
}
|
|
251
246
|
|
|
252
|
-
/* Additional Links */
|
|
253
247
|
.login-links {
|
|
254
248
|
display: flex;
|
|
255
249
|
justify-content: space-between;
|
|
@@ -266,7 +260,6 @@
|
|
|
266
260
|
color: var(--primary);
|
|
267
261
|
}
|
|
268
262
|
|
|
269
|
-
/* Terms Info */
|
|
270
263
|
.terms-info {
|
|
271
264
|
margin-top: 2rem;
|
|
272
265
|
font-size: 0.8rem;
|
|
@@ -279,14 +272,12 @@
|
|
|
279
272
|
font-weight: 500;
|
|
280
273
|
}
|
|
281
274
|
|
|
282
|
-
/* Recaptcha */
|
|
283
275
|
.recaptcha-container {
|
|
284
|
-
margin:
|
|
276
|
+
margin: 1rem 0;
|
|
285
277
|
display: flex;
|
|
286
278
|
justify-content: center;
|
|
287
279
|
}
|
|
288
280
|
|
|
289
|
-
/* 2FA Token Container */
|
|
290
281
|
.token-container {
|
|
291
282
|
animation: fadeInUp 0.4s ease-out;
|
|
292
283
|
}
|
|
@@ -299,7 +290,6 @@
|
|
|
299
290
|
display: block;
|
|
300
291
|
}
|
|
301
292
|
|
|
302
|
-
/* Floating Elements */
|
|
303
293
|
.ai-element {
|
|
304
294
|
position: absolute;
|
|
305
295
|
opacity: 0.1;
|
|
@@ -359,7 +349,6 @@
|
|
|
359
349
|
}
|
|
360
350
|
}
|
|
361
351
|
|
|
362
|
-
/* Responsive Styles */
|
|
363
352
|
@media (max-width: 768px) {
|
|
364
353
|
.login-box {
|
|
365
354
|
padding: 2rem;
|
|
@@ -382,6 +371,55 @@
|
|
|
382
371
|
align-items: center;
|
|
383
372
|
}
|
|
384
373
|
}
|
|
374
|
+
|
|
375
|
+
.remember-me {
|
|
376
|
+
display: flex;
|
|
377
|
+
align-items: center;
|
|
378
|
+
justify-content: center;
|
|
379
|
+
width: 100%;
|
|
380
|
+
margin: 1rem 0;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.remember-me input[type="checkbox"] {
|
|
384
|
+
appearance: none;
|
|
385
|
+
-webkit-appearance: none;
|
|
386
|
+
width: 18px;
|
|
387
|
+
height: 18px;
|
|
388
|
+
border: 2px solid var(--glass-border);
|
|
389
|
+
border-radius: var(--radius-sm);
|
|
390
|
+
margin-right: 10px;
|
|
391
|
+
cursor: pointer;
|
|
392
|
+
position: relative;
|
|
393
|
+
transition: var(--transition);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.remember-me input[type="checkbox"]:checked {
|
|
397
|
+
background-color: var(--primary);
|
|
398
|
+
border-color: var(--primary);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.remember-me input[type="checkbox"]:checked::after {
|
|
402
|
+
content: '\f00c';
|
|
403
|
+
font-family: 'Font Awesome 6 Free';
|
|
404
|
+
font-weight: 900;
|
|
405
|
+
position: absolute;
|
|
406
|
+
top: 50%;
|
|
407
|
+
left: 50%;
|
|
408
|
+
transform: translate(-50%, -50%);
|
|
409
|
+
color: white;
|
|
410
|
+
font-size: 10px;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.remember-me label {
|
|
414
|
+
color: var(--gray);
|
|
415
|
+
cursor: pointer;
|
|
416
|
+
transition: var(--transition);
|
|
417
|
+
font-size: 0.9rem;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.remember-me label:hover {
|
|
421
|
+
color: var(--light);
|
|
422
|
+
}
|
|
385
423
|
</style>
|
|
386
424
|
</head>
|
|
387
425
|
|
|
@@ -398,7 +436,7 @@
|
|
|
398
436
|
</header>
|
|
399
437
|
|
|
400
438
|
<section class="login-container">
|
|
401
|
-
|
|
439
|
+
|
|
402
440
|
<i class="fas fa-robot ai-element"></i>
|
|
403
441
|
<i class="fas fa-microchip ai-element"></i>
|
|
404
442
|
<i class="fas fa-user-astronaut ai-element"></i>
|
|
@@ -438,6 +476,11 @@
|
|
|
438
476
|
</div>
|
|
439
477
|
</div>
|
|
440
478
|
|
|
479
|
+
<div class="form-group remember-me">
|
|
480
|
+
<input type="checkbox" id="rememberMe" name="rememberMe">
|
|
481
|
+
<label for="rememberMe">Remember me</label>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
441
484
|
<button type="submit" class="btn-login" id="loginButton">
|
|
442
485
|
<span id="loginButtonText">Login</span>
|
|
443
486
|
</button>
|
|
@@ -459,7 +502,6 @@
|
|
|
459
502
|
|
|
460
503
|
<script>
|
|
461
504
|
|
|
462
|
-
|
|
463
505
|
// Toggle password visibility
|
|
464
506
|
const togglePassword = document.getElementById('togglePassword');
|
|
465
507
|
const passwordInput = document.getElementById('loginPassword');
|
|
@@ -494,6 +536,8 @@
|
|
|
494
536
|
const recaptchaResponse = grecaptcha.getResponse();
|
|
495
537
|
const loginButton = document.getElementById('loginButton');
|
|
496
538
|
const loginButtonText = document.getElementById('loginButtonText');
|
|
539
|
+
const rememberMe = document.getElementById('rememberMe').checked;
|
|
540
|
+
|
|
497
541
|
|
|
498
542
|
if (!username || !password) {
|
|
499
543
|
showMessage('Username and password are required', 'Login Error');
|
|
@@ -521,6 +565,12 @@
|
|
|
521
565
|
loginButtonText.textContent = 'Success! Redirecting...';
|
|
522
566
|
sessionStorage.setItem('sessionId', data.sessionId);
|
|
523
567
|
|
|
568
|
+
if (rememberMe) {
|
|
569
|
+
localStorage.setItem('rememberedUsername', username);
|
|
570
|
+
} else {
|
|
571
|
+
localStorage.removeItem('rememberedUsername');
|
|
572
|
+
}
|
|
573
|
+
|
|
524
574
|
// Redirect to the appropriate page
|
|
525
575
|
const redirectUrl = new URLSearchParams(window.location.search).get('redirect');
|
|
526
576
|
window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '{{customURL}}';
|
|
@@ -564,6 +614,53 @@
|
|
|
564
614
|
document.getElementById('loginPassword').value = passwordFromUrl;
|
|
565
615
|
}
|
|
566
616
|
});
|
|
617
|
+
// Auto focus on the first empty field
|
|
618
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
619
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
620
|
+
const usernameFromUrl = urlParams.get('username');
|
|
621
|
+
const passwordFromUrl = urlParams.get('password');
|
|
622
|
+
const usernameInput = document.getElementById('loginUsername');
|
|
623
|
+
|
|
624
|
+
if (usernameFromUrl) {
|
|
625
|
+
usernameInput.value = usernameFromUrl;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
if (passwordFromUrl) {
|
|
629
|
+
document.getElementById('loginPassword').value = passwordFromUrl;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
// Automatically focus the username field
|
|
633
|
+
usernameInput.focus();
|
|
634
|
+
});
|
|
635
|
+
//Remember me functionality
|
|
636
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
637
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
638
|
+
const usernameFromUrl = urlParams.get('username');
|
|
639
|
+
const passwordFromUrl = urlParams.get('password');
|
|
640
|
+
const usernameInput = document.getElementById('loginUsername');
|
|
641
|
+
|
|
642
|
+
// Check for remembered username in localStorage
|
|
643
|
+
const rememberedUsername = localStorage.getItem('rememberedUsername');
|
|
644
|
+
if (rememberedUsername) {
|
|
645
|
+
usernameInput.value = rememberedUsername;
|
|
646
|
+
document.getElementById('rememberMe').checked = true;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
if (usernameFromUrl) {
|
|
650
|
+
usernameInput.value = usernameFromUrl;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
if (passwordFromUrl) {
|
|
654
|
+
document.getElementById('loginPassword').value = passwordFromUrl;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
// Automatically focus the first empty field
|
|
658
|
+
if (!usernameInput.value) {
|
|
659
|
+
usernameInput.focus();
|
|
660
|
+
} else {
|
|
661
|
+
document.getElementById('loginPassword').focus();
|
|
662
|
+
}
|
|
663
|
+
});
|
|
567
664
|
</script>
|
|
568
665
|
</body>
|
|
569
666
|
|