mbkauthe 1.3.4 → 1.4.0
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/README.md +249 -187
- package/docs/api.md +841 -0
- package/docs/db.md +54 -31
- package/index.js +13 -2
- package/lib/main.js +106 -38
- package/lib/pool.js +14 -7
- package/lib/validateSessionAndRole.js +75 -83
- package/package.json +5 -5
- package/public/main.js +134 -0
- package/views/2fa.handlebars +35 -445
- package/views/Error/dError.handlebars +71 -551
- package/views/info.handlebars +180 -160
- package/views/loginmbkauthe.handlebars +37 -557
- package/views/sharedStyles.handlebars +498 -0
- package/views/showmessage.handlebars +97 -62
|
@@ -9,520 +9,28 @@
|
|
|
9
9
|
<meta name="keywords" content="MBK Tech Studio, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
|
|
10
10
|
<meta property="og:title" content="Login | MBK Tech Studio" />
|
|
11
11
|
<meta property="og:image" content="https://www.mbktechstudio.com/Assets/Images/Icon/logo.png" />
|
|
12
|
-
<meta property="og:url" content="
|
|
12
|
+
<meta property="og:url" content="/mbkauthe/login">
|
|
13
13
|
<title>Login | MBK Tech Studio Portal</title>
|
|
14
14
|
<link rel="icon" type="image/x-icon" href="https://mbktechstudio.com/Assets/Images/Icon/dgicon.svg">
|
|
15
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.
|
|
16
|
-
|
|
17
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
18
|
-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
|
19
|
-
rel="stylesheet">
|
|
20
|
-
<style>
|
|
21
|
-
:root {
|
|
22
|
-
--primary: #4361ee;
|
|
23
|
-
--primary-dark: #3a0ca3;
|
|
24
|
-
--primary-light: rgba(67, 97, 238, 0.1);
|
|
25
|
-
--secondary: #f72585;
|
|
26
|
-
--secondary-light: rgba(247, 37, 133, 0.1);
|
|
27
|
-
--dark: #121212;
|
|
28
|
-
--dark-light: #1e1e1e;
|
|
29
|
-
--darker: #0a0a0a;
|
|
30
|
-
--light: #f8f9fa;
|
|
31
|
-
--lighter: #ffffff;
|
|
32
|
-
--gray: #cccccc;
|
|
33
|
-
--gray-dark: #888888;
|
|
34
|
-
--success: #4cc9f0;
|
|
35
|
-
--warning: #f8961e;
|
|
36
|
-
--danger: #ef233c;
|
|
37
|
-
--gradient: linear-gradient(135deg, var(--primary), var(--secondary));
|
|
38
|
-
--glass: rgba(30, 30, 30, 0.5);
|
|
39
|
-
--glass-border: rgba(255, 255, 255, 0.1);
|
|
40
|
-
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
|
|
41
|
-
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
42
|
-
--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.2);
|
|
43
|
-
--shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.3);
|
|
44
|
-
--radius-sm: 8px;
|
|
45
|
-
--radius-md: 12px;
|
|
46
|
-
--radius-lg: 16px;
|
|
47
|
-
--radius-xl: 24px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
* {
|
|
51
|
-
margin: 0;
|
|
52
|
-
padding: 0;
|
|
53
|
-
box-sizing: border-box;
|
|
54
|
-
font-family: 'Poppins', sans-serif;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
body {
|
|
58
|
-
background: var(--dark);
|
|
59
|
-
color: var(--light);
|
|
60
|
-
line-height: 1.6;
|
|
61
|
-
overflow-x: hidden;
|
|
62
|
-
min-height: 100vh;
|
|
63
|
-
display: flex;
|
|
64
|
-
flex-direction: column;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
header {
|
|
68
|
-
position: fixed;
|
|
69
|
-
top: 0;
|
|
70
|
-
left: 0;
|
|
71
|
-
width: 100%;
|
|
72
|
-
z-index: 1000;
|
|
73
|
-
transition: var(--transition);
|
|
74
|
-
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));
|
|
75
|
-
backdrop-filter: blur(10px);
|
|
76
|
-
border-bottom: 1px solid var(--glass-border);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
nav {
|
|
80
|
-
padding: 10px 5%;
|
|
81
|
-
max-width: 1400px;
|
|
82
|
-
margin: 0 auto;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.navbar {
|
|
86
|
-
display: flex;
|
|
87
|
-
justify-content: space-between;
|
|
88
|
-
align-items: center;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.logo {
|
|
92
|
-
display: flex;
|
|
93
|
-
align-items: center;
|
|
94
|
-
gap: 10px;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.logo img {
|
|
98
|
-
height: 30px;
|
|
99
|
-
width: auto;
|
|
100
|
-
transition: var(--transition);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.logo:hover img {
|
|
104
|
-
transform: rotate(15deg);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.logo-text {
|
|
108
|
-
font-size: 1.8rem;
|
|
109
|
-
font-weight: 700;
|
|
110
|
-
background: var(--gradient);
|
|
111
|
-
-webkit-background-clip: text;
|
|
112
|
-
background-clip: text;
|
|
113
|
-
color: transparent;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.login-container {
|
|
117
|
-
flex: 1;
|
|
118
|
-
display: flex;
|
|
119
|
-
align-items: center;
|
|
120
|
-
justify-content: center;
|
|
121
|
-
padding: 120px 5% 80px;
|
|
122
|
-
position: relative;
|
|
123
|
-
overflow: hidden;
|
|
124
|
-
background: radial-gradient(circle at 70% 20%, rgba(67, 97, 238, 0.15), transparent 60%);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.login-box {
|
|
128
|
-
background: var(--dark-light);
|
|
129
|
-
border-radius: var(--radius-xl);
|
|
130
|
-
padding: 2rem;
|
|
131
|
-
width: 100%;
|
|
132
|
-
max-width: 500px;
|
|
133
|
-
box-shadow: var(--shadow-lg);
|
|
134
|
-
border: .125rem solid var(--glass-border);
|
|
135
|
-
position: relative;
|
|
136
|
-
z-index: 2;
|
|
137
|
-
transition: var(--transition);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.login-box:hover {
|
|
141
|
-
box-shadow: var(--shadow-lg);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.login-title {
|
|
145
|
-
text-align: center;
|
|
146
|
-
margin-bottom: 2rem;
|
|
147
|
-
font-size: 2rem;
|
|
148
|
-
position: relative;
|
|
149
|
-
color: var(--lighter);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.login-title::after {
|
|
153
|
-
content: '';
|
|
154
|
-
position: absolute;
|
|
155
|
-
bottom: -10px;
|
|
156
|
-
left: 50%;
|
|
157
|
-
transform: translateX(-50%);
|
|
158
|
-
width: 80px;
|
|
159
|
-
height: 4px;
|
|
160
|
-
background: var(--gradient);
|
|
161
|
-
border-radius: 2px;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.form-group {
|
|
165
|
-
position: relative;
|
|
166
|
-
margin-bottom: 1rem;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.form-input {
|
|
170
|
-
width: 100%;
|
|
171
|
-
padding: 12px 20px;
|
|
172
|
-
background: var(--darker);
|
|
173
|
-
border: 2px solid var(--glass-border);
|
|
174
|
-
border-radius: var(--radius-sm);
|
|
175
|
-
color: var(--light);
|
|
176
|
-
font-size: 1rem;
|
|
177
|
-
transition: var(--transition);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.form-input:focus {
|
|
181
|
-
outline: none;
|
|
182
|
-
border-color: var(--primary);
|
|
183
|
-
box-shadow: 0 0 0 3px var(--primary-light);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.form-label {
|
|
187
|
-
position: absolute;
|
|
188
|
-
top: 15px;
|
|
189
|
-
left: 20px;
|
|
190
|
-
color: var(--gray);
|
|
191
|
-
transition: var(--transition);
|
|
192
|
-
pointer-events: none;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.form-input:focus+.form-label,
|
|
196
|
-
.form-input:not(:placeholder-shown)+.form-label {
|
|
197
|
-
top: -10px;
|
|
198
|
-
left: 15px;
|
|
199
|
-
font-size: 0.8rem;
|
|
200
|
-
background: var(--dark-light);
|
|
201
|
-
padding: 0 5px;
|
|
202
|
-
color: var(--primary);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.input-icon {
|
|
206
|
-
position: absolute;
|
|
207
|
-
right: 20px;
|
|
208
|
-
top: 50%;
|
|
209
|
-
transform: translateY(-50%);
|
|
210
|
-
color: var(--gray);
|
|
211
|
-
cursor: pointer;
|
|
212
|
-
transition: var(--transition);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.input-icon:hover {
|
|
216
|
-
color: var(--primary);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.btn-login {
|
|
220
|
-
width: 100%;
|
|
221
|
-
padding: 10px;
|
|
222
|
-
border-radius: var(--radius-sm);
|
|
223
|
-
background: var(--primary);
|
|
224
|
-
color: white;
|
|
225
|
-
font-weight: 600;
|
|
226
|
-
font-size: 1rem;
|
|
227
|
-
border: none;
|
|
228
|
-
cursor: pointer;
|
|
229
|
-
transition: var(--transition);
|
|
230
|
-
box-shadow: var(--shadow-sm);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.btn-login:hover {
|
|
234
|
-
background: var(--primary-dark);
|
|
235
|
-
box-shadow: var(--shadow-md);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.btn-login:disabled {
|
|
239
|
-
background: var(--gray-dark);
|
|
240
|
-
cursor: not-allowed;
|
|
241
|
-
transform: none;
|
|
242
|
-
box-shadow: none;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.social-login {
|
|
246
|
-
margin-top: 1.5rem;
|
|
247
|
-
text-align: center;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.divider {
|
|
251
|
-
display: flex;
|
|
252
|
-
align-items: center;
|
|
253
|
-
justify-content: center;
|
|
254
|
-
margin: 1rem 0;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.divider::before,
|
|
258
|
-
.divider::after {
|
|
259
|
-
content: '';
|
|
260
|
-
flex: 1;
|
|
261
|
-
height: 1px;
|
|
262
|
-
background: var(--gray-dark);
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.divider span {
|
|
266
|
-
background: var(--dark);
|
|
267
|
-
padding: 0 15px;
|
|
268
|
-
color: var(--gray);
|
|
269
|
-
font-size: 0.9rem;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.btn-github {
|
|
273
|
-
display: inline-flex;
|
|
274
|
-
align-items: center;
|
|
275
|
-
justify-content: center;
|
|
276
|
-
gap: 8px;
|
|
277
|
-
width: 100%;
|
|
278
|
-
padding: 12px 20px;
|
|
279
|
-
border-radius: var(--radius-sm);
|
|
280
|
-
background: #24292e;
|
|
281
|
-
color: white;
|
|
282
|
-
font-weight: 500;
|
|
283
|
-
font-size: 0.95rem;
|
|
284
|
-
text-decoration: none;
|
|
285
|
-
transition: var(--transition);
|
|
286
|
-
box-shadow: var(--shadow-sm);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.btn-github:hover {
|
|
290
|
-
background: #3b4045;
|
|
291
|
-
box-shadow: var(--shadow-md);
|
|
292
|
-
transform: translateY(-2px);
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
.btn-github i {
|
|
296
|
-
font-size: 1.1rem;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
.login-links {
|
|
300
|
-
display: flex;
|
|
301
|
-
justify-content: space-between;
|
|
302
|
-
margin-top: 1.5rem;
|
|
303
|
-
font-size: 0.9rem;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.login-link {
|
|
307
|
-
color: var(--gray);
|
|
308
|
-
transition: var(--transition);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.login-link:hover {
|
|
312
|
-
color: var(--primary);
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
.terms-info {
|
|
316
|
-
margin-top: 1rem;
|
|
317
|
-
font-size: 0.8rem;
|
|
318
|
-
color: var(--gray);
|
|
319
|
-
text-align: center;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.terms-link {
|
|
323
|
-
color: var(--primary);
|
|
324
|
-
font-weight: 500;
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
.token-container {
|
|
328
|
-
animation: fadeInUp 0.4s ease-out;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.token-container.disable {
|
|
332
|
-
display: none;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
.token-container.enable {
|
|
336
|
-
display: block;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
.ai-element {
|
|
340
|
-
position: absolute;
|
|
341
|
-
opacity: 0.1;
|
|
342
|
-
z-index: 1;
|
|
343
|
-
animation: float 6s ease-in-out infinite;
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
.ai-element:nth-child(1) {
|
|
347
|
-
top: 20%;
|
|
348
|
-
left: 10%;
|
|
349
|
-
font-size: 5rem;
|
|
350
|
-
animation-delay: 0s;
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
.ai-element:nth-child(2) {
|
|
354
|
-
top: 60%;
|
|
355
|
-
left: 80%;
|
|
356
|
-
font-size: 4rem;
|
|
357
|
-
animation-delay: 1s;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
.ai-element:nth-child(3) {
|
|
361
|
-
top: 30%;
|
|
362
|
-
left: 70%;
|
|
363
|
-
font-size: 3rem;
|
|
364
|
-
animation-delay: 2s;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
.ai-element:nth-child(4) {
|
|
368
|
-
top: 80%;
|
|
369
|
-
left: 20%;
|
|
370
|
-
font-size: 6rem;
|
|
371
|
-
animation-delay: 3s;
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
@keyframes float {
|
|
375
|
-
|
|
376
|
-
0%,
|
|
377
|
-
100% {
|
|
378
|
-
transform: translateY(0) rotate(0deg);
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
50% {
|
|
382
|
-
transform: translateY(-20px) rotate(5deg);
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
@keyframes fadeInUp {
|
|
387
|
-
from {
|
|
388
|
-
opacity: 0;
|
|
389
|
-
transform: translateY(20px);
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
to {
|
|
393
|
-
opacity: 1;
|
|
394
|
-
transform: translateY(0);
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
@media (max-width: 768px) {
|
|
399
|
-
.login-box {
|
|
400
|
-
padding: 2rem;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
.login-title {
|
|
404
|
-
font-size: 1.8rem;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.version-info {
|
|
408
|
-
bottom: 10px;
|
|
409
|
-
right: 10px;
|
|
410
|
-
font-size: 0.7rem;
|
|
411
|
-
padding: 6px 10px;
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
@media (max-width: 576px) {
|
|
416
|
-
.login-box {
|
|
417
|
-
padding: 1.5rem;
|
|
418
|
-
border-radius: var(--radius-lg);
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.login-links {
|
|
422
|
-
flex-direction: column;
|
|
423
|
-
gap: 0.5rem;
|
|
424
|
-
align-items: center;
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
.remember-me {
|
|
429
|
-
display: flex;
|
|
430
|
-
align-items: center;
|
|
431
|
-
justify-content: center;
|
|
432
|
-
width: 100%;
|
|
433
|
-
margin: 1rem 0;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
.remember-me input[type="checkbox"] {
|
|
437
|
-
appearance: none;
|
|
438
|
-
-webkit-appearance: none;
|
|
439
|
-
width: 18px;
|
|
440
|
-
height: 18px;
|
|
441
|
-
border: 2px solid var(--glass-border);
|
|
442
|
-
border-radius: var(--radius-sm);
|
|
443
|
-
margin-right: 10px;
|
|
444
|
-
cursor: pointer;
|
|
445
|
-
position: relative;
|
|
446
|
-
transition: var(--transition);
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
.remember-me input[type="checkbox"]:checked {
|
|
450
|
-
background-color: var(--primary);
|
|
451
|
-
border-color: var(--primary);
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.remember-me input[type="checkbox"]:checked::after {
|
|
455
|
-
content: '\f00c';
|
|
456
|
-
font-family: 'Font Awesome 6 Free';
|
|
457
|
-
font-weight: 900;
|
|
458
|
-
position: absolute;
|
|
459
|
-
top: 50%;
|
|
460
|
-
left: 50%;
|
|
461
|
-
transform: translate(-50%, -50%);
|
|
462
|
-
color: white;
|
|
463
|
-
font-size: 10px;
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
.remember-me label {
|
|
467
|
-
color: var(--gray);
|
|
468
|
-
cursor: pointer;
|
|
469
|
-
transition: var(--transition);
|
|
470
|
-
font-size: 0.9rem;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.remember-me label:hover {
|
|
474
|
-
color: var(--light);
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
.WarningboxInfo {
|
|
478
|
-
background: var(--dark-light);
|
|
479
|
-
border: 0.5px solid var(--warning);
|
|
480
|
-
border-left: 4px solid var(--warning);
|
|
481
|
-
padding: 0.75rem 1rem;
|
|
482
|
-
border-radius: var(--radius-sm);
|
|
483
|
-
color: var(--warning);
|
|
484
|
-
font-size: 0.9rem;
|
|
485
|
-
font-weight: 500;
|
|
486
|
-
margin-top: 1rem;
|
|
487
|
-
text-align: center;
|
|
488
|
-
box-shadow: var(--shadow-sm);
|
|
489
|
-
}
|
|
490
|
-
|
|
491
|
-
.logo-comp {
|
|
492
|
-
font-size: 1rem;
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
.version-info {
|
|
496
|
-
position: fixed;
|
|
497
|
-
bottom: 20px;
|
|
498
|
-
right: 20px;
|
|
499
|
-
background: var(--dark-light);
|
|
500
|
-
color: var(--gray);
|
|
501
|
-
padding: 8px 12px;
|
|
502
|
-
border-radius: var(--radius-sm);
|
|
503
|
-
font-size: 0.75rem;
|
|
504
|
-
border: 1px solid var(--glass-border);
|
|
505
|
-
z-index: 999;
|
|
506
|
-
transition: var(--transition);
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
.version-info:hover {
|
|
510
|
-
color: var(--primary);
|
|
511
|
-
border-color: var(--primary);
|
|
512
|
-
}
|
|
513
|
-
</style>
|
|
15
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
16
|
+
{{> sharedStyles}}
|
|
514
17
|
</head>
|
|
515
18
|
|
|
516
19
|
<body>
|
|
517
20
|
<header>
|
|
518
|
-
<
|
|
519
|
-
<
|
|
520
|
-
<
|
|
521
|
-
<
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
21
|
+
<div class="header-container">
|
|
22
|
+
<a class="logo">
|
|
23
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
|
|
24
|
+
<g id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none"
|
|
25
|
+
fill="#00b894">
|
|
26
|
+
<path
|
|
27
|
+
d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z">
|
|
28
|
+
</path>
|
|
29
|
+
</g>
|
|
30
|
+
</svg>
|
|
31
|
+
<span class="logo-text">{{appName}} <span class="logo-comp">MBKTECHStudio</span></span>
|
|
32
|
+
</a>
|
|
33
|
+
</div>
|
|
526
34
|
</header>
|
|
527
35
|
|
|
528
36
|
{{> showmessage}}
|
|
@@ -551,17 +59,12 @@
|
|
|
551
59
|
</div>
|
|
552
60
|
|
|
553
61
|
<div class="form-group">
|
|
554
|
-
<input id="loginPassword" class="form-input" type="password" name="Password" placeholder="
|
|
555
|
-
|
|
62
|
+
<input id="loginPassword" class="form-input" type="password" name="Password" placeholder="" required
|
|
63
|
+
minlength="8" title="Password must be at least 8 characters long" />
|
|
556
64
|
<label class="form-label">Password</label>
|
|
557
65
|
<i class="fas fa-eye input-icon" id="togglePassword"></i>
|
|
558
66
|
</div>
|
|
559
67
|
|
|
560
|
-
<div class="form-group remember-me">
|
|
561
|
-
<input type="checkbox" id="rememberMe" name="rememberMe">
|
|
562
|
-
<label for="rememberMe">Remember me</label>
|
|
563
|
-
</div>
|
|
564
|
-
|
|
565
68
|
<button type="submit" class="btn-login" id="loginButton">
|
|
566
69
|
<span id="loginButtonText">Login</span>
|
|
567
70
|
</button>
|
|
@@ -577,6 +80,11 @@
|
|
|
577
80
|
</div>
|
|
578
81
|
{{/if }}
|
|
579
82
|
|
|
83
|
+
<div class="remember-me">
|
|
84
|
+
<input type="checkbox" id="rememberMe" name="rememberMe">
|
|
85
|
+
<label for="rememberMe">Remember me</label>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
580
88
|
{{#if userLoggedIn }}
|
|
581
89
|
<div class="WarningboxInfo">
|
|
582
90
|
You Are Already Logged In With username
|
|
@@ -608,7 +116,6 @@
|
|
|
608
116
|
</div>
|
|
609
117
|
|
|
610
118
|
<script>
|
|
611
|
-
|
|
612
119
|
// Toggle password visibility
|
|
613
120
|
const togglePassword = document.getElementById('togglePassword');
|
|
614
121
|
const passwordInput = document.getElementById('loginPassword');
|
|
@@ -626,7 +133,8 @@
|
|
|
626
133
|
|
|
627
134
|
// Info dialogs
|
|
628
135
|
function usernameinfo() {
|
|
629
|
-
showMessage(`
|
|
136
|
+
showMessage(`Your username is the part of your MBK Tech Studio email before the @ (e.g., abc.xyz@mbktechstudio.com
|
|
137
|
+
→ abc.xyz). For guests or if you’ve forgotten your credentials, contact <a href="https://mbktechstudio.com/Support">Support</a>.`, `What is my username?`);
|
|
630
138
|
}
|
|
631
139
|
|
|
632
140
|
function tokeninfo() {
|
|
@@ -643,12 +151,17 @@
|
|
|
643
151
|
const loginButtonText = document.getElementById('loginButtonText');
|
|
644
152
|
const rememberMe = document.getElementById('rememberMe').checked;
|
|
645
153
|
|
|
646
|
-
|
|
647
154
|
if (!username || !password) {
|
|
648
155
|
showMessage('Username and password are required', 'Login Error');
|
|
649
156
|
return;
|
|
650
157
|
}
|
|
651
158
|
|
|
159
|
+
// Validate password length
|
|
160
|
+
if (password.length < 8) {
|
|
161
|
+
showMessage('Password must be at least 8 characters long', 'Login Error');
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
|
|
652
165
|
loginButton.disabled = true;
|
|
653
166
|
loginButtonText.textContent = 'Authenticating...';
|
|
654
167
|
|
|
@@ -706,9 +219,9 @@
|
|
|
706
219
|
expires = "; expires=" + date.toUTCString();
|
|
707
220
|
}
|
|
708
221
|
// Set cookie for the entire domain (works across all subdomains)
|
|
709
|
-
const domain = window.location.hostname.includes('.') ?
|
|
710
|
-
|
|
711
|
-
|
|
222
|
+
const domain = window.location.hostname.includes('.') ?
|
|
223
|
+
'.' + window.location.hostname.split('.').slice(-2).join('.') :
|
|
224
|
+
window.location.hostname;
|
|
712
225
|
document.cookie = name + "=" + (value || "") + expires + "; path=/; domain=" + domain + "; SameSite=Lax";
|
|
713
226
|
}
|
|
714
227
|
|
|
@@ -724,46 +237,13 @@
|
|
|
724
237
|
}
|
|
725
238
|
|
|
726
239
|
function deleteCookie(name) {
|
|
727
|
-
const domain = window.location.hostname.includes('.') ?
|
|
728
|
-
|
|
729
|
-
|
|
240
|
+
const domain = window.location.hostname.includes('.') ?
|
|
241
|
+
'.' + window.location.hostname.split('.').slice(-2).join('.') :
|
|
242
|
+
window.location.hostname;
|
|
730
243
|
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + domain;
|
|
731
244
|
}
|
|
732
245
|
|
|
733
246
|
// Check for URL parameters
|
|
734
|
-
document.addEventListener('DOMContentLoaded', function () {
|
|
735
|
-
const urlParams = new URLSearchParams(window.location.search);
|
|
736
|
-
const usernameFromUrl = urlParams.get('username');
|
|
737
|
-
const passwordFromUrl = urlParams.get('password');
|
|
738
|
-
|
|
739
|
-
if (usernameFromUrl) {
|
|
740
|
-
document.getElementById('loginUsername').value = usernameFromUrl;
|
|
741
|
-
}
|
|
742
|
-
|
|
743
|
-
if (passwordFromUrl) {
|
|
744
|
-
document.getElementById('loginPassword').value = passwordFromUrl;
|
|
745
|
-
}
|
|
746
|
-
});
|
|
747
|
-
// Auto focus on the first empty field
|
|
748
|
-
document.addEventListener('DOMContentLoaded', function () {
|
|
749
|
-
const urlParams = new URLSearchParams(window.location.search);
|
|
750
|
-
const usernameFromUrl = urlParams.get('username');
|
|
751
|
-
const passwordFromUrl = urlParams.get('password');
|
|
752
|
-
const usernameInput = document.getElementById('loginUsername');
|
|
753
|
-
|
|
754
|
-
if (usernameFromUrl) {
|
|
755
|
-
usernameInput.value = usernameFromUrl;
|
|
756
|
-
}
|
|
757
|
-
|
|
758
|
-
if (passwordFromUrl) {
|
|
759
|
-
document.getElementById('loginPassword').value = passwordFromUrl;
|
|
760
|
-
}
|
|
761
|
-
|
|
762
|
-
// Automatically focus the username field
|
|
763
|
-
usernameInput.focus();
|
|
764
|
-
});
|
|
765
|
-
|
|
766
|
-
//Remember me functionality
|
|
767
247
|
document.addEventListener('DOMContentLoaded', function () {
|
|
768
248
|
const urlParams = new URLSearchParams(window.location.search);
|
|
769
249
|
const usernameFromUrl = urlParams.get('username');
|