mbkauthe 1.1.17 → 1.2.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.
@@ -0,0 +1,535 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <meta name="description"
8
+ content="Log in to portal.mbktechstudio.com to access your resources and manage projects securely.">
9
+ <meta name="keywords" content="MBK Tech Studio, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
10
+ <meta property="og:title" content="Login | MBK Tech Studio" />
11
+ <meta property="og:image" content="https://www.mbktechstudio.com/Assets/Images/Icon/logo.png" />
12
+ <meta property="og:url" content="https://portal.mbktechstudio.com/login">
13
+ <title>Login | MBK Tech Studio Portal</title>
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.0.0/css/all.min.css">
16
+ <link rel="preconnect" href="https://fonts.googleapis.com">
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
+ .login-links {
239
+ display: flex;
240
+ justify-content: space-between;
241
+ margin-top: 1.5rem;
242
+ font-size: 0.9rem;
243
+ }
244
+
245
+ .login-link {
246
+ color: var(--gray);
247
+ transition: var(--transition);
248
+ }
249
+
250
+ .login-link:hover {
251
+ color: var(--primary);
252
+ }
253
+
254
+ .terms-info {
255
+ margin-top: 1rem;
256
+ font-size: 0.8rem;
257
+ color: var(--gray);
258
+ text-align: center;
259
+ }
260
+
261
+ .terms-link {
262
+ color: var(--primary);
263
+ font-weight: 500;
264
+ }
265
+
266
+ .token-container {
267
+ animation: fadeInUp 0.4s ease-out;
268
+ }
269
+
270
+ .token-container.enable {
271
+ display: block;
272
+ }
273
+
274
+ .ai-element {
275
+ position: absolute;
276
+ opacity: 0.1;
277
+ z-index: 1;
278
+ animation: float 6s ease-in-out infinite;
279
+ }
280
+
281
+ .ai-element:nth-child(1) {
282
+ top: 20%;
283
+ left: 10%;
284
+ font-size: 5rem;
285
+ animation-delay: 0s;
286
+ }
287
+
288
+ .ai-element:nth-child(2) {
289
+ top: 60%;
290
+ left: 80%;
291
+ font-size: 4rem;
292
+ animation-delay: 1s;
293
+ }
294
+
295
+ .ai-element:nth-child(3) {
296
+ top: 30%;
297
+ left: 70%;
298
+ font-size: 3rem;
299
+ animation-delay: 2s;
300
+ }
301
+
302
+ .ai-element:nth-child(4) {
303
+ top: 80%;
304
+ left: 20%;
305
+ font-size: 6rem;
306
+ animation-delay: 3s;
307
+ }
308
+
309
+ @keyframes float {
310
+
311
+ 0%,
312
+ 100% {
313
+ transform: translateY(0) rotate(0deg);
314
+ }
315
+
316
+ 50% {
317
+ transform: translateY(-20px) rotate(5deg);
318
+ }
319
+ }
320
+
321
+ @keyframes fadeInUp {
322
+ from {
323
+ opacity: 0;
324
+ transform: translateY(20px);
325
+ }
326
+
327
+ to {
328
+ opacity: 1;
329
+ transform: translateY(0);
330
+ }
331
+ }
332
+
333
+ @media (max-width: 768px) {
334
+ .login-box {
335
+ padding: 2rem;
336
+ }
337
+
338
+ .login-title {
339
+ font-size: 1.8rem;
340
+ }
341
+
342
+ .version-info {
343
+ bottom: 10px;
344
+ right: 10px;
345
+ font-size: 0.7rem;
346
+ padding: 6px 10px;
347
+ }
348
+ }
349
+
350
+ @media (max-width: 576px) {
351
+ .login-box {
352
+ padding: 1.5rem;
353
+ border-radius: var(--radius-lg);
354
+ }
355
+
356
+ .login-links {
357
+ flex-direction: column;
358
+ gap: 0.5rem;
359
+ align-items: center;
360
+ }
361
+ }
362
+
363
+ .remember-me {
364
+ display: flex;
365
+ align-items: center;
366
+ justify-content: center;
367
+ width: 100%;
368
+ margin: 1rem 0;
369
+ }
370
+
371
+ .remember-me input[type="checkbox"] {
372
+ appearance: none;
373
+ -webkit-appearance: none;
374
+ width: 18px;
375
+ height: 18px;
376
+ border: 2px solid var(--glass-border);
377
+ border-radius: var(--radius-sm);
378
+ margin-right: 10px;
379
+ cursor: pointer;
380
+ position: relative;
381
+ transition: var(--transition);
382
+ }
383
+
384
+ .remember-me input[type="checkbox"]:checked {
385
+ background-color: var(--primary);
386
+ border-color: var(--primary);
387
+ }
388
+
389
+ .remember-me input[type="checkbox"]:checked::after {
390
+ content: '\f00c';
391
+ font-family: 'Font Awesome 6 Free';
392
+ font-weight: 900;
393
+ position: absolute;
394
+ top: 50%;
395
+ left: 50%;
396
+ transform: translate(-50%, -50%);
397
+ color: white;
398
+ font-size: 10px;
399
+ }
400
+
401
+ .remember-me label {
402
+ color: var(--gray);
403
+ cursor: pointer;
404
+ transition: var(--transition);
405
+ font-size: 0.9rem;
406
+ }
407
+
408
+ .remember-me label:hover {
409
+ color: var(--light);
410
+ }
411
+
412
+ .WarningboxInfo {
413
+ background: var(--dark-light);
414
+ border: 0.5px solid var(--warning);
415
+ border-left: 4px solid var(--warning);
416
+ padding: 0.75rem 1rem;
417
+ border-radius: var(--radius-sm);
418
+ color: var(--warning);
419
+ font-size: 0.9rem;
420
+ font-weight: 500;
421
+ margin-top: 1rem;
422
+ text-align: center;
423
+ box-shadow: var(--shadow-sm);
424
+ }
425
+
426
+ .logo-comp {
427
+ font-size: 1rem;
428
+ }
429
+
430
+ .version-info {
431
+ position: fixed;
432
+ bottom: 20px;
433
+ right: 20px;
434
+ background: var(--dark-light);
435
+ color: var(--gray);
436
+ padding: 8px 12px;
437
+ border-radius: var(--radius-sm);
438
+ font-size: 0.75rem;
439
+ border: 1px solid var(--glass-border);
440
+ z-index: 999;
441
+ transition: var(--transition);
442
+ }
443
+
444
+ .version-info:hover {
445
+ color: var(--primary);
446
+ border-color: var(--primary);
447
+ }
448
+ </style>
449
+ </head>
450
+
451
+ <body>
452
+ <header>
453
+ <nav>
454
+ <div class="navbar">
455
+ <a class="logo">
456
+ <img src="https://mbktechstudio.com/Assets/Images/Icon/dgicon.svg" alt="MBK Tech Studio Logo">
457
+ <span class="logo-text">{{appName}} <span class="logo-comp">MBKTECHStudio</span></span>
458
+ </a>
459
+ </div>
460
+ </nav>
461
+ </header>
462
+
463
+ {{> showmessage}}
464
+
465
+ <section class="login-container">
466
+
467
+ <i class="fas fa-robot ai-element"></i>
468
+ <i class="fas fa-microchip ai-element"></i>
469
+ <i class="fas fa-user-astronaut ai-element"></i>
470
+ <i class="fas fa-satellite-dish ai-element"></i>
471
+ <i class="fas fa-cloud ai-element"></i>
472
+ <i class="fas fa-shield-alt ai-element"></i>
473
+
474
+ <div class="login-box">
475
+ <h1 class="login-title">Two Factor Authorization</h1>
476
+
477
+ <form id="loginForm" method="POST">
478
+ <input type="hidden" name="_csrf" value="{{csrfToken}}">
479
+ <div class="form-group token-container" id="tokenCon">
480
+ <input id="token" class="form-input" type="text" name="token" placeholder=" " pattern="\d{6}"
481
+ title="Token must be exactly 6 digits" maxlength="6" minlength="6" />
482
+ <label class="form-label">2FA Token</label>
483
+ <i class="fas fa-info-circle input-icon" onclick="tokeninfo()"></i>
484
+ </div>
485
+
486
+
487
+ <button type="submit" class="btn-login" id="loginButton">
488
+ <span id="loginButtonText">Verify</span>
489
+ </button>
490
+
491
+ <p class="terms-info">
492
+ By logging in, you agree to our
493
+ <a href="https://portal.mbktechstudio.com/info/Terms&Conditions" target="_blank"
494
+ class="terms-link">Terms & Conditions</a>
495
+ and
496
+ <a href="https://portal.mbktechstudio.com/info/PrivacyPolicy" target="_blank"
497
+ class="terms-link">Privacy Policy</a>.
498
+ </p>
499
+ </form>
500
+ </div>
501
+ </section>
502
+
503
+ <!-- Version Info -->
504
+ <div class="version-info">
505
+ v{{version}}
506
+ </div>
507
+
508
+ <script>
509
+ document.getElementById('loginForm').addEventListener('submit', async (e) => {
510
+ e.preventDefault();
511
+ const token = document.getElementById('token').value;
512
+ try {
513
+ const response = await fetch('/mbkauthe/api/verify-2fa', {
514
+ method: 'POST',
515
+ headers: {
516
+ 'Content-Type': 'application/json'
517
+ },
518
+ body: JSON.stringify({
519
+ token
520
+ })
521
+ });
522
+ const data = await response.json();
523
+ if (data.success) {
524
+ window.location.href = data.redirectUrl || '{{{ customURL }}}';
525
+ } else {
526
+ showMessage(data.message, 'Error');
527
+ }
528
+ } catch (error) {
529
+ showMessage('Failed to verify token. Please try again.', 'Error');
530
+ }
531
+ });
532
+ </script>
533
+ </body>
534
+
535
+ </html>
@@ -705,7 +705,7 @@
705
705
  button.textContent = 'Copy';
706
706
  }, 2000);
707
707
  }).catch(err => {
708
- console.error('Failed to copy: ', err);
708
+ console.error('[mbkauthe] Failed to copy: ', err);
709
709
  });
710
710
  }
711
711