mbkauthe 4.7.0 → 4.7.2
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/docs/db.sql +4 -1
- package/index.js +4 -0
- package/lib/config/cookies.js +2 -0
- package/lib/pool.js +5 -184
- package/lib/routes/auth.js +14 -8
- package/lib/routes/dbLogs.js +42 -8
- package/lib/routes/misc.js +17 -13
- package/lib/utils/dbQueryLogger.js +247 -0
- package/package.json +33 -4
- package/public/main.css +947 -0
- package/public/main.js +6 -2
- package/views/head.handlebars +12 -0
- package/views/pages/accountSwitch.handlebars +37 -16
- package/views/pages/dbLogs.handlebars +379 -152
- package/views/{errorCodes.handlebars → pages/errorCodes.handlebars} +30 -26
- package/views/pages/info_mbkauthe.handlebars +15 -15
- package/views/pages/loginmbkauthe.handlebars +13 -9
- package/views/pages/test.handlebars +27 -15
- package/views/profilemenu.handlebars +53 -57
- package/views/sharedStyles.handlebars +1 -895
- package/views/showmessage.handlebars +52 -30
- package/views/versionInfo.handlebars +2 -2
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
.page-header {
|
|
18
18
|
text-align: center;
|
|
19
19
|
padding: 3rem 0 2rem;
|
|
20
|
-
border-bottom: 2px solid
|
|
20
|
+
border-bottom: 2px solid color-mix(in srgb, var(--accent) 35%, transparent 65%);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.page-header h1 {
|
|
@@ -39,28 +39,28 @@
|
|
|
39
39
|
backdrop-filter: blur(10px);
|
|
40
40
|
padding: 1rem 0;
|
|
41
41
|
z-index: 100;
|
|
42
|
-
border-bottom: 1px solid
|
|
42
|
+
border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent 75%);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.search-input {
|
|
46
46
|
width: 100%;
|
|
47
47
|
padding: 1rem 1.5rem;
|
|
48
|
-
background:
|
|
49
|
-
border: 2px solid
|
|
48
|
+
background: var(--surface-soft);
|
|
49
|
+
border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent 65%);
|
|
50
50
|
border-radius: 8px;
|
|
51
|
-
color:
|
|
51
|
+
color: var(--text);
|
|
52
52
|
font-size: 1rem;
|
|
53
53
|
transition: all 0.3s ease;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.search-input:focus {
|
|
57
57
|
outline: none;
|
|
58
|
-
border-color:
|
|
59
|
-
background:
|
|
58
|
+
border-color: var(--accent);
|
|
59
|
+
background: var(--surface-1);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.search-input::placeholder {
|
|
63
|
-
color:
|
|
63
|
+
color: var(--text-light);
|
|
64
64
|
opacity: 0.6;
|
|
65
65
|
}
|
|
66
66
|
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
gap: 1rem;
|
|
75
75
|
margin-bottom: 1.5rem;
|
|
76
76
|
padding: 1rem;
|
|
77
|
-
background:
|
|
78
|
-
border-left: 4px solid
|
|
77
|
+
background: color-mix(in srgb, var(--accent) 10%, transparent 90%);
|
|
78
|
+
border-left: 4px solid var(--accent);
|
|
79
79
|
border-radius: 4px;
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -91,8 +91,8 @@
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
.error-card {
|
|
94
|
-
background:
|
|
95
|
-
border: 1px solid
|
|
94
|
+
background: color-mix(in srgb, var(--glass-bg) 90%, transparent 10%);
|
|
95
|
+
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent 78%);
|
|
96
96
|
border-radius: 8px;
|
|
97
97
|
padding: 1.5rem;
|
|
98
98
|
margin-bottom: 1.5rem;
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.error-card:hover {
|
|
104
|
-
border-color:
|
|
104
|
+
border-color: var(--accent);
|
|
105
105
|
box-shadow: 0 4px 20px rgba(0, 184, 148, 0.2);
|
|
106
106
|
}
|
|
107
107
|
|
|
@@ -132,11 +132,11 @@
|
|
|
132
132
|
font-size: 1.1rem;
|
|
133
133
|
margin-bottom: 0.75rem;
|
|
134
134
|
padding-left: 1rem;
|
|
135
|
-
border-left: 3px solid
|
|
135
|
+
border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent 65%);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.error-hint {
|
|
139
|
-
background:
|
|
139
|
+
background: color-mix(in srgb, var(--warning) 15%, transparent 85%);
|
|
140
140
|
color: var(--warning);
|
|
141
141
|
padding: 0.75rem 1rem;
|
|
142
142
|
border-radius: 6px;
|
|
@@ -154,12 +154,16 @@
|
|
|
154
154
|
font-size: 1.2rem;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
+
.is-hidden {
|
|
158
|
+
display: none !important;
|
|
159
|
+
}
|
|
160
|
+
|
|
157
161
|
.back-to-top {
|
|
158
162
|
position: fixed;
|
|
159
163
|
bottom: 2rem;
|
|
160
164
|
right: 2rem;
|
|
161
165
|
background: var(--accent);
|
|
162
|
-
color: var(--
|
|
166
|
+
color: var(--text-dark);
|
|
163
167
|
width: 50px;
|
|
164
168
|
height: 50px;
|
|
165
169
|
border-radius: 50%;
|
|
@@ -242,7 +246,7 @@
|
|
|
242
246
|
{{/each}}
|
|
243
247
|
</div>
|
|
244
248
|
|
|
245
|
-
<div class="no-results" id="noResults"
|
|
249
|
+
<div class="no-results hidden-by-default" id="noResults">
|
|
246
250
|
No error codes found matching your search.
|
|
247
251
|
</div>
|
|
248
252
|
</div>
|
|
@@ -262,9 +266,9 @@
|
|
|
262
266
|
|
|
263
267
|
if (!searchTerm) {
|
|
264
268
|
// Show all cards and categories
|
|
265
|
-
errorCards.forEach(card => card.
|
|
266
|
-
categories.forEach(cat => cat.
|
|
267
|
-
noResults.
|
|
269
|
+
errorCards.forEach(card => card.classList.remove('is-hidden'));
|
|
270
|
+
categories.forEach(cat => cat.classList.remove('is-hidden'));
|
|
271
|
+
noResults.classList.add('hidden-by-default');
|
|
268
272
|
return;
|
|
269
273
|
}
|
|
270
274
|
|
|
@@ -272,24 +276,24 @@
|
|
|
272
276
|
errorCards.forEach(card => {
|
|
273
277
|
const searchData = card.getAttribute('data-search').toLowerCase();
|
|
274
278
|
if (searchData.includes(searchTerm)) {
|
|
275
|
-
card.
|
|
279
|
+
card.classList.remove('is-hidden');
|
|
276
280
|
hasResults = true;
|
|
277
281
|
} else {
|
|
278
|
-
card.
|
|
282
|
+
card.classList.add('is-hidden');
|
|
279
283
|
}
|
|
280
284
|
});
|
|
281
285
|
|
|
282
286
|
// Hide/show categories based on visible cards
|
|
283
287
|
categories.forEach(category => {
|
|
284
|
-
const visibleCards = category.querySelectorAll('.error-card
|
|
288
|
+
const visibleCards = category.querySelectorAll('.error-card:not(.is-hidden)');
|
|
285
289
|
if (visibleCards.length > 0) {
|
|
286
|
-
category.
|
|
290
|
+
category.classList.remove('is-hidden');
|
|
287
291
|
} else {
|
|
288
|
-
category.
|
|
292
|
+
category.classList.add('is-hidden');
|
|
289
293
|
}
|
|
290
294
|
});
|
|
291
295
|
|
|
292
|
-
noResults.
|
|
296
|
+
noResults.classList.toggle('hidden-by-default', hasResults);
|
|
293
297
|
});
|
|
294
298
|
|
|
295
299
|
// Back to top button
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
|
|
4
4
|
{{> head pageTitle="Version and Configuration Information" ogUrl="/mbkauthe/info" extraStyles="<style>
|
|
5
5
|
.info-box {
|
|
6
|
-
background:
|
|
6
|
+
background: var(--glass-bg);
|
|
7
7
|
backdrop-filter: blur(10px);
|
|
8
8
|
border-radius: var(--border-radius);
|
|
9
9
|
padding: 2.5rem;
|
|
10
10
|
width: 100%;
|
|
11
11
|
max-width: 900px;
|
|
12
12
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
13
|
-
border: 1px solid
|
|
13
|
+
border: 1px solid var(--glass-border);
|
|
14
14
|
position: relative;
|
|
15
15
|
z-index: 2;
|
|
16
16
|
transition: var(--transition);
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
.info-box:hover {
|
|
20
20
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
|
21
|
-
border-color:
|
|
21
|
+
border-color: color-mix(in srgb, var(--accent) 35%, transparent 65%);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.info-title {
|
|
@@ -44,20 +44,20 @@
|
|
|
44
44
|
.info-section {
|
|
45
45
|
margin-bottom: 2rem;
|
|
46
46
|
padding: 1.5rem;
|
|
47
|
-
border: 1px solid
|
|
47
|
+
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent 75%);
|
|
48
48
|
border-radius: var(--border-radius);
|
|
49
|
-
background-color:
|
|
49
|
+
background-color: var(--surface-muted);
|
|
50
50
|
transition: var(--transition);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.info-section:hover {
|
|
54
|
-
border-color:
|
|
55
|
-
background-color:
|
|
54
|
+
border-color: color-mix(in srgb, var(--accent) 40%, transparent 60%);
|
|
55
|
+
background-color: var(--input-bg);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.info-section h2 {
|
|
59
59
|
color: var(--accent);
|
|
60
|
-
border-bottom: 2px solid
|
|
60
|
+
border-bottom: 2px solid color-mix(in srgb, var(--accent) 35%, transparent 65%);
|
|
61
61
|
padding-bottom: 10px;
|
|
62
62
|
margin-top: 0;
|
|
63
63
|
margin-bottom: 1.5rem;
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
display: flex;
|
|
76
76
|
margin-bottom: 1rem;
|
|
77
77
|
padding-bottom: 1rem;
|
|
78
|
-
border-bottom: 1px solid
|
|
78
|
+
border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent 82%);
|
|
79
79
|
align-items: center;
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -117,21 +117,21 @@
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.version-outdated {
|
|
120
|
-
background:
|
|
120
|
+
background: color-mix(in srgb, var(--success) 18%, transparent 82%);
|
|
121
121
|
color: var(--danger);
|
|
122
|
-
border: 1px solid var(--
|
|
122
|
+
border: 1px solid color-mix(in srgb, var(--success) 60%, transparent 40%);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.version-fetch-error {
|
|
126
|
-
background:
|
|
126
|
+
background: color-mix(in srgb, var(--danger) 18%, transparent 82%);
|
|
127
127
|
color: var(--warning);
|
|
128
|
-
border: 1px solid var(--
|
|
128
|
+
border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent 40%);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
@media (max-width: 768px) {
|
|
132
|
-
|
|
132
|
+
background: color-mix(in srgb, var(--warning) 20%, transparent 80%);
|
|
133
133
|
padding: 2rem;
|
|
134
|
-
|
|
134
|
+
border: 1px solid color-mix(in srgb, var(--warning) 60%, transparent 40%);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.info-title {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
background: var(--accent);
|
|
27
27
|
color: #fff;
|
|
28
28
|
border-radius: 999px;
|
|
29
|
-
border: 2px solid
|
|
29
|
+
border: 2px solid var(--muted-border);
|
|
30
30
|
z-index: 30;
|
|
31
31
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
|
32
32
|
line-height: 1;
|
|
@@ -46,10 +46,14 @@
|
|
|
46
46
|
overflow: visible;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
.form-row-split {
|
|
50
|
+
align-items: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
49
53
|
@media (max-width: 1000px) {
|
|
50
54
|
.login-box {
|
|
51
55
|
position: relative;
|
|
52
|
-
background:
|
|
56
|
+
background: var(--glass-bg);
|
|
53
57
|
overflow: hidden;
|
|
54
58
|
}
|
|
55
59
|
|
|
@@ -57,7 +61,9 @@
|
|
|
57
61
|
content: "";
|
|
58
62
|
position: absolute;
|
|
59
63
|
inset: 0;
|
|
60
|
-
background: linear-gradient(135deg,
|
|
64
|
+
background: linear-gradient(135deg,
|
|
65
|
+
color-mix(in srgb, var(--primary) 16%, transparent 84%),
|
|
66
|
+
color-mix(in srgb, var(--accent) 16%, transparent 84%));
|
|
61
67
|
pointer-events: none;
|
|
62
68
|
z-index: 0;
|
|
63
69
|
}
|
|
@@ -81,7 +87,7 @@
|
|
|
81
87
|
<div class="login-sidebar">
|
|
82
88
|
<div class="sidebar-content">
|
|
83
89
|
<div class="brand-section">
|
|
84
|
-
<div class="logo
|
|
90
|
+
<div class="logo logo-centered">
|
|
85
91
|
<img src="/icon.svg" alt="Logo" class="logo-image">
|
|
86
92
|
<span class="logo-text">BK <span>Tech</span></span>
|
|
87
93
|
</div>
|
|
@@ -145,15 +151,13 @@
|
|
|
145
151
|
<i class="fas fa-eye input-icon" id="togglePassword"></i>
|
|
146
152
|
</div>
|
|
147
153
|
|
|
148
|
-
<div
|
|
149
|
-
|
|
150
|
-
<div class="remember-me" style="margin-bottom: 0;">
|
|
154
|
+
<div class="form-row-split">
|
|
155
|
+
<div class="remember-me remember-me-inline">
|
|
151
156
|
<input type="checkbox" id="rememberMe" name="rememberMe">
|
|
152
157
|
<label for="rememberMe">Remember me</label>
|
|
153
158
|
</div>
|
|
154
159
|
|
|
155
|
-
<a href="https://portal.mbktech.org/forgot-password" class="login-link"
|
|
156
|
-
style="margin-bottom: 0; white-space: nowrap;">Forgot Password?</a>
|
|
160
|
+
<a href="https://portal.mbktech.org/forgot-password" class="login-link login-link-nowrap">Forgot Password?</a>
|
|
157
161
|
</div>
|
|
158
162
|
|
|
159
163
|
<button type="submit" class="btn-login last-used-parent" id="loginButton">
|
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
|
|
9
9
|
<style>
|
|
10
10
|
.session-card {
|
|
11
|
-
background:
|
|
11
|
+
background: var(--glass-bg);
|
|
12
12
|
backdrop-filter: blur(10px);
|
|
13
13
|
border-radius: var(--border-radius);
|
|
14
14
|
padding: 2.5rem;
|
|
15
15
|
width: 100%;
|
|
16
16
|
max-width: 760px;
|
|
17
17
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
18
|
-
border: 1px solid
|
|
18
|
+
border: 1px solid var(--glass-border);
|
|
19
19
|
position: relative;
|
|
20
20
|
z-index: 2;
|
|
21
21
|
transition: var(--transition);
|
|
@@ -34,8 +34,10 @@
|
|
|
34
34
|
width: 96px;
|
|
35
35
|
height: 96px;
|
|
36
36
|
border-radius: 50%;
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
background: linear-gradient(135deg,
|
|
38
|
+
color-mix(in srgb, var(--accent) 22%, transparent 78%),
|
|
39
|
+
color-mix(in srgb, var(--primary) 18%, transparent 82%));
|
|
40
|
+
border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent 65%);
|
|
39
41
|
position: relative;
|
|
40
42
|
overflow: hidden;
|
|
41
43
|
display: flex;
|
|
@@ -83,6 +85,11 @@
|
|
|
83
85
|
margin: 0;
|
|
84
86
|
}
|
|
85
87
|
|
|
88
|
+
.session-role {
|
|
89
|
+
color: var(--text-light);
|
|
90
|
+
font-weight: 500;
|
|
91
|
+
}
|
|
92
|
+
|
|
86
93
|
.session-sub {
|
|
87
94
|
color: var(--text-light);
|
|
88
95
|
font-size: 0.85rem;
|
|
@@ -90,8 +97,8 @@
|
|
|
90
97
|
}
|
|
91
98
|
|
|
92
99
|
.session-details {
|
|
93
|
-
background:
|
|
94
|
-
border: 1px solid
|
|
100
|
+
background: var(--input-bg);
|
|
101
|
+
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent 75%);
|
|
95
102
|
border-radius: var(--border-radius);
|
|
96
103
|
padding: 1rem 1.2rem;
|
|
97
104
|
font-family: 'Courier New', monospace;
|
|
@@ -133,18 +140,18 @@
|
|
|
133
140
|
}
|
|
134
141
|
|
|
135
142
|
.btn-primary:hover {
|
|
136
|
-
background: #
|
|
143
|
+
background: color-mix(in srgb, var(--accent) 88%, #000 12%);
|
|
137
144
|
box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
|
|
138
145
|
}
|
|
139
146
|
|
|
140
147
|
.btn-outline {
|
|
141
148
|
background: transparent;
|
|
142
|
-
border: 1px solid
|
|
149
|
+
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
|
|
143
150
|
color: var(--accent);
|
|
144
151
|
}
|
|
145
152
|
|
|
146
153
|
.btn-outline:hover {
|
|
147
|
-
background:
|
|
154
|
+
background: color-mix(in srgb, var(--accent) 10%, transparent 90%);
|
|
148
155
|
border-color: var(--accent);
|
|
149
156
|
}
|
|
150
157
|
|
|
@@ -180,13 +187,13 @@
|
|
|
180
187
|
title="{{displayName}}"
|
|
181
188
|
loading="lazy" decoding="async" width="96" height="96"
|
|
182
189
|
onerror="this.style.display='none';var s=this.nextElementSibling; if(s) s.style.display='flex';" />
|
|
183
|
-
<div class="initials" aria-hidden="true"
|
|
190
|
+
<div class="initials" aria-hidden="true">{{initial}}</div>
|
|
184
191
|
</div>
|
|
185
192
|
|
|
186
193
|
<div class="session-meta">
|
|
187
194
|
<div>
|
|
188
195
|
<div class="session-status">✅ Authentication successful</div>
|
|
189
|
-
<h3 class="session-title">{{username}} <small
|
|
196
|
+
<h3 class="session-title">{{username}} <small class="session-role">· {{role}}</small></h3>
|
|
190
197
|
<p class="session-sub">ID: {{id}} · Session: {{sessionIdShort}}…</p>
|
|
191
198
|
</div>
|
|
192
199
|
|
|
@@ -210,18 +217,23 @@
|
|
|
210
217
|
<a class="btn btn-outline" href="/mbkauthe/info">
|
|
211
218
|
<i class="fas fa-info-circle"></i> Info Page
|
|
212
219
|
</a>
|
|
213
|
-
<a class="btn btn-outline" href="/mbkauthe/validate-superadmin">
|
|
214
|
-
<i class="fas fa-user-shield"></i> Validate SuperAdmin
|
|
215
|
-
</a>
|
|
216
220
|
<a class="btn btn-outline" href="/mbkauthe/login">
|
|
217
221
|
<i class="fas fa-sign-in-alt"></i> Login Page
|
|
218
222
|
</a>
|
|
223
|
+
{{#if (eq role "SuperAdmin")}}
|
|
224
|
+
<a class="btn btn-outline" href="/mbkauthe/db">
|
|
225
|
+
<i class="fas fa-database"></i> Database Logs
|
|
226
|
+
</a>
|
|
227
|
+
<a class="btn btn-outline" href="/mbkauthe/validate-superadmin">
|
|
228
|
+
<i class="fas fa-user-shield"></i> Validate SuperAdmin
|
|
229
|
+
</a>
|
|
230
|
+
{{/if}}
|
|
219
231
|
</div>
|
|
220
232
|
</div>
|
|
221
233
|
</div>
|
|
222
234
|
</section>
|
|
223
235
|
|
|
224
|
-
<script src="/mbkauthe/main.js"></script>
|
|
236
|
+
<script src="/mbkauthe/main.js{{cacheBuster}}"></script>
|
|
225
237
|
{{#if sessionExpiry}}
|
|
226
238
|
<script>
|
|
227
239
|
(function () {
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
<i class="fa fa-user-group"></i>
|
|
19
19
|
<span>Switch account</span>
|
|
20
20
|
</a>
|
|
21
|
+
<button class="mbkauthe-profile-item" type="button" data-theme-toggle role="menuitem" title="Switch theme">
|
|
22
|
+
<i class="fas fa-circle-half-stroke"></i>
|
|
23
|
+
<span data-theme-label>Switch to light theme</span>
|
|
24
|
+
</button>
|
|
21
25
|
<button class="mbkauthe-profile-item" type="button" data-action="logout" role="menuitem" title="Logout">
|
|
22
26
|
<i class="fas fa-sign-out-alt"></i>
|
|
23
27
|
<span>Logout</span>
|
|
@@ -25,7 +29,7 @@
|
|
|
25
29
|
</div>
|
|
26
30
|
</div>
|
|
27
31
|
{{else}}
|
|
28
|
-
<a class="mbkauthe-btn-login
|
|
32
|
+
<a class="mbkauthe-btn-login link-no-decoration" href="/mbkauthe/login"><i
|
|
29
33
|
class="fas fa-sign-in-alt"></i>
|
|
30
34
|
Login</a>
|
|
31
35
|
{{/if}}
|
|
@@ -41,7 +45,7 @@
|
|
|
41
45
|
}
|
|
42
46
|
|
|
43
47
|
.mbkauthe-btn-login:hover {
|
|
44
|
-
color:
|
|
48
|
+
color: var(--light);
|
|
45
49
|
}
|
|
46
50
|
|
|
47
51
|
.mbkauthe-btn-login:disabled {
|
|
@@ -67,8 +71,8 @@
|
|
|
67
71
|
width: 45px;
|
|
68
72
|
height: 45px;
|
|
69
73
|
border-radius: 999px;
|
|
70
|
-
border: 1px solid
|
|
71
|
-
background:
|
|
74
|
+
border: 1px solid var(--muted-border);
|
|
75
|
+
background: var(--surface-soft);
|
|
72
76
|
display: flex;
|
|
73
77
|
align-items: center;
|
|
74
78
|
justify-content: center;
|
|
@@ -91,24 +95,18 @@
|
|
|
91
95
|
height: 40px;
|
|
92
96
|
border-radius: 999px;
|
|
93
97
|
object-fit: cover;
|
|
94
|
-
background: var(--
|
|
98
|
+
background: var(--surface-1);
|
|
95
99
|
}
|
|
96
100
|
|
|
97
|
-
/* Theme-aware dropdown variables and improved visuals */
|
|
98
101
|
.mbkauthe-profile-dropdown {
|
|
99
|
-
--mbk-bg: var(--mbkauthe-dropdown-bg, #ffffff);
|
|
100
|
-
--mbk-border: var(--mbkauthe-dropdown-border, rgba(15, 23, 42, 0.06));
|
|
101
|
-
--mbk-item-hover: var(--mbkauthe-item-hover, rgba(15, 23, 42, 0.03));
|
|
102
|
-
--mbk-text: var(--mbkauthe-text, var(--text, #0f172a));
|
|
103
|
-
|
|
104
102
|
position: absolute;
|
|
105
103
|
right: 0;
|
|
106
104
|
top: calc(100% + 0.5rem);
|
|
107
|
-
background: var(--
|
|
108
|
-
border: 1px solid var(--
|
|
105
|
+
background: var(--surface-1);
|
|
106
|
+
border: 1px solid var(--muted-border);
|
|
109
107
|
border-radius: var(--border-radius);
|
|
110
108
|
min-width: 190px;
|
|
111
|
-
box-shadow:
|
|
109
|
+
box-shadow: var(--box-shadow);
|
|
112
110
|
padding: 0;
|
|
113
111
|
opacity: 0;
|
|
114
112
|
visibility: hidden;
|
|
@@ -117,7 +115,7 @@
|
|
|
117
115
|
z-index: 1000;
|
|
118
116
|
backdrop-filter: blur(6px);
|
|
119
117
|
-webkit-backdrop-filter: blur(6px);
|
|
120
|
-
color: var(--
|
|
118
|
+
color: var(--text);
|
|
121
119
|
overflow: hidden;
|
|
122
120
|
}
|
|
123
121
|
|
|
@@ -131,9 +129,11 @@
|
|
|
131
129
|
|
|
132
130
|
.mbkauthe-profile-item {
|
|
133
131
|
width: 100%;
|
|
134
|
-
display:
|
|
132
|
+
display: flex;
|
|
133
|
+
align-items: center;
|
|
134
|
+
gap: 0.6rem;
|
|
135
135
|
padding: 0.85rem 1rem;
|
|
136
|
-
color: var(--
|
|
136
|
+
color: var(--text);
|
|
137
137
|
background: transparent;
|
|
138
138
|
border: none;
|
|
139
139
|
text-decoration: none;
|
|
@@ -145,12 +145,12 @@
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
.mbkauthe-profile-item:hover {
|
|
148
|
-
background: var(--
|
|
149
|
-
color: var(--
|
|
148
|
+
background: color-mix(in srgb, var(--accent) 10%, transparent 90%);
|
|
149
|
+
color: var(--accent);
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
.mbkauthe-profile-item:focus-visible {
|
|
153
|
-
outline: 2px solid color-mix(in srgb, var(--
|
|
153
|
+
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent 60%);
|
|
154
154
|
outline-offset: 2px;
|
|
155
155
|
}
|
|
156
156
|
|
|
@@ -159,47 +159,43 @@
|
|
|
159
159
|
cursor: not-allowed;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.mbkauthe-profile-trigger:hover {
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
/* prefers-color-scheme fallbacks scoped to component */
|
|
171
|
-
@media (prefers-color-scheme: dark) {
|
|
172
|
-
.mbkauthe-profile-dropdown {
|
|
173
|
-
--mbk-bg: #0a2125;
|
|
174
|
-
--mbk-border: rgba(255, 255, 255, 0.06);
|
|
175
|
-
--mbk-item-hover: rgba(255, 255, 255, 0.03);
|
|
176
|
-
--mbk-text: #e6eef6;
|
|
177
|
-
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.mbkauthe-profile-trigger {
|
|
181
|
-
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
182
|
-
background: rgba(255, 255, 255, 0.02);
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
@media (prefers-color-scheme: light) {
|
|
187
|
-
.mbkauthe-profile-dropdown {
|
|
188
|
-
--mbk-bg: #ffffff;
|
|
189
|
-
--mbk-border: rgba(15, 23, 42, 0.06);
|
|
190
|
-
--mbk-item-hover: rgba(15, 23, 42, 0.03);
|
|
191
|
-
--mbk-text: var(--dark-color-ml, #0f172a);
|
|
192
|
-
box-shadow: 0 8px 22px rgba(2, 6, 23, 0.08);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.mbkauthe-profile-trigger {
|
|
196
|
-
border: 1px solid rgba(2, 6, 23, 0.06);
|
|
197
|
-
background: rgba(255, 255, 255, 0.96);
|
|
198
|
-
}
|
|
162
|
+
.mbkauthe-profile-item i {
|
|
163
|
+
width: 18px;
|
|
164
|
+
text-align: center;
|
|
199
165
|
}
|
|
200
166
|
</style>
|
|
201
167
|
<script>
|
|
202
168
|
(() => {
|
|
169
|
+
const html = document.documentElement;
|
|
170
|
+
const themeToggles = document.querySelectorAll('[data-theme-toggle]');
|
|
171
|
+
|
|
172
|
+
const getTheme = () => html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
|
|
173
|
+
|
|
174
|
+
const applyTheme = (theme) => {
|
|
175
|
+
html.setAttribute('data-theme', theme);
|
|
176
|
+
localStorage.setItem('mbkauthe-theme', theme);
|
|
177
|
+
|
|
178
|
+
const isLight = theme === 'light';
|
|
179
|
+
themeToggles.forEach((btn) => {
|
|
180
|
+
const labelEl = btn.querySelector('[data-theme-label]');
|
|
181
|
+
btn.setAttribute('aria-label', isLight ? 'Switch to dark theme' : 'Switch to light theme');
|
|
182
|
+
btn.setAttribute('title', isLight ? 'Switch to dark theme' : 'Switch to light theme');
|
|
183
|
+
if (labelEl) {
|
|
184
|
+
labelEl.textContent = isLight ? 'Switch to dark theme' : 'Switch to light theme';
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
themeToggles.forEach((btn) => {
|
|
190
|
+
btn.addEventListener('click', () => {
|
|
191
|
+
const currentTheme = getTheme();
|
|
192
|
+
const nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
193
|
+
applyTheme(nextTheme);
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
applyTheme(getTheme());
|
|
198
|
+
|
|
203
199
|
const mbkTrigger = document.querySelector('.mbkauthe-profile-trigger');
|
|
204
200
|
const mbkDropdown = document.querySelector('.mbkauthe-profile-dropdown');
|
|
205
201
|
|