mbkauthe 4.7.0 → 4.7.2

package/public/main.js

@@ -37,14 +37,18 @@ async function selectiveCacheClear() {
       'sessionId',
       'mbkauthe.sid',
       'fullName',
-      '_csrf'
+      '_csrf',
+      'profileImageUser',
+      'profileImageUrl'
     ];
 
     const localStorageToClear = [
       'sessionId',
       'mbkauthe.sid',
       'fullName',
-      '_csrf'
+      '_csrf',
+      'profileImageUser',
+      'profileImageUrl'
     ];
 
     // 1. Clear selected localStorage keys

package/views/head.handlebars

@@ -5,6 +5,7 @@
     <meta name="keywords" content="MBK Tech, authentication, login, secure portal, 2FA, OAuth">
     <meta name="robots" content="index,follow,max-image-preview:large">
     <meta name="author" content="MBK Tech">
+    <meta name="color-scheme" content="dark light">
     <meta property="og:title" content="{{#if pageTitle}}{{pageTitle}}{{else}}{{#if pageCode}}{{pageCode}}{{/if}}{{#if pageError}} - {{pageError}}{{/if}}{{/if}} | MBK Tech Portal" />
     <meta property="og:description" content="{{#if description}}{{description}}{{else}}Secure authentication portal for MBK Tech accounts, project access, and session management.{{/if}}" />
     <meta property="og:type" content="website" />
@@ -13,6 +14,17 @@
     <meta property="og:url" content="{{#if ogUrl}}{{ogUrl}}{{else}}/mbkauthe/login{{/if}}">
     <link rel="canonical" href="{{#if ogUrl}}{{ogUrl}}{{else}}/mbkauthe/login{{/if}}">
     <title>{{#if pageTitle}}{{pageTitle}}{{else}}{{#if pageCode}}{{pageCode}}{{/if}}{{#if pageError}} - {{pageError}}{{/if}}{{/if}} | MBK Tech Portal</title>
+    <script>
+        (() => {
+            const storedTheme = localStorage.getItem('mbkauthe-theme');
+            const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
+            const resolvedTheme = storedTheme === 'light' || storedTheme === 'dark'
+                ? storedTheme
+                : (prefersLight ? 'light' : 'dark');
+
+            document.documentElement.setAttribute('data-theme', resolvedTheme);
+        })();
+    </script>
     <link rel="icon" type="image/png" href="/icon.png">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     {{> sharedStyles}}

package/views/pages/accountSwitch.handlebars

@@ -16,7 +16,7 @@
                 <div class="login-sidebar">
                     <div class="sidebar-content">
                         <div class="brand-section">
-                            <div class="logo" style="justify-content: center;margin-bottom: 1rem;">
+                            <div class="logo logo-centered">
                                 <img src="/icon.svg" alt="Logo" class="logo-image">
                                 <span class="logo-text">BK <span>Tech</span></span>
                             </div>
@@ -54,10 +54,9 @@
                         </div>
                     </div>
 
-                    <div id="emptyState" class="empty-state" style="display:none;">
+                    <div id="emptyState" class="empty-state hidden-by-default">
                         <p>No signed-in accounts found.</p>
-                        <a href="/mbkauthe/login" class="btn-login"
-                            style="text-decoration: none; display: inline-block; margin-top: 10px; text-align: center; line-height: 40px;">Go
+                        <a href="/mbkauthe/login" class="btn-login btn-login-inline">Go
                             to Login</a>
                     </div>
 
@@ -120,8 +119,8 @@
             align-items: center;
             gap: 16px;
             padding: 14px 20px;
-            background: rgba(0, 0, 0, .3);
-            border: 2px solid rgba(0, 184, 148, 0.1);
+            background: var(--input-bg);
+            border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent 78%);
             border-radius: var(--border-radius);
             cursor: pointer;
             transition: var(--transition);
@@ -132,7 +131,7 @@
         }
 
         .account-item:hover {
-            background: rgba(0, 0, 0, .4);
+            background: var(--input-bg-focus);
             border-color: var(--accent);
             box-shadow: 0 4px 15px rgba(0, 184, 148, 0.15);
         }
@@ -217,9 +216,9 @@
         }
 
         .btn-logout {
-            background: rgba(255, 255, 255, 0.05);
+            background: var(--surface-soft);
             color: var(--text-light);
-            border-color: rgba(255, 255, 255, 0.15);
+            border-color: var(--muted-border);
             width: 100%;
             max-width: 420px;
             cursor: pointer;
@@ -233,6 +232,28 @@
             box-shadow: 0 4px 15px rgba(255, 118, 117, 0.15);
         }
 
+        [data-theme="light"] .account-item {
+            background: rgba(255, 255, 255, 0.95);
+            border-color: rgba(0, 184, 148, 0.18);
+        }
+
+        [data-theme="light"] .account-item:hover {
+            background: rgba(255, 255, 255, 1);
+        }
+
+        [data-theme="light"] .btn-social.btn-logout {
+            background: var(--accent);
+            color: #ffffff;
+            border-color: var(--accent);
+        }
+
+        [data-theme="light"] .btn-social.btn-logout:hover {
+            background: rgba(255, 118, 117, 0.1);
+            border-color: var(--danger);
+            color: var(--danger);
+            box-shadow: 0 4px 15px rgba(255, 118, 117, 0.15);
+        }
+
         .loading-spinner {
             display: flex;
             justify-content: center;
@@ -242,7 +263,7 @@
         .spinner {
             width: 30px;
             height: 30px;
-            border: 3px solid rgba(255, 255, 255, 0.1);
+            border: 3px solid var(--muted-border);
             border-top-color: var(--accent);
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
@@ -258,9 +279,9 @@
             text-align: center;
             padding: 30px;
             color: var(--text-light);
-            background: rgba(0, 0, 0, 0.2);
+            background: var(--surface-muted);
             border-radius: var(--border-radius);
-            border: 1px dashed rgba(255, 255, 255, 0.1);
+            border: 1px dashed var(--muted-border);
         }
 
         /* Mobile adjustments */
@@ -279,7 +300,7 @@
                 gap: 12px;
                 margin-top: 30px;
                 padding-top: 20px;
-                border-top: 1px solid rgba(255, 255, 255, 0.1);
+                border-top: 1px solid var(--muted-border);
             }
 
             .mobile-switch-btn,
@@ -298,13 +319,13 @@
             }
 
             .mobile-switch-btn {
-                background: rgba(255, 255, 255, 0.05);
-                border: 1px solid rgba(255, 255, 255, 0.15);
+                background: var(--surface-soft);
+                border: 1px solid var(--muted-border);
                 color: var(--text);
             }
 
             .mobile-switch-btn:hover {
-                background: rgba(255, 255, 255, 0.1);
+                background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft) 90%);
                 border-color: var(--accent);
                 color: var(--accent);
                 box-shadow: 0 4px 15px rgba(0, 184, 148, 0.15);