mbkauthe 4.7.1 → 4.7.2

package/public/main.css

@@ -12,6 +12,18 @@
     --success: #43e97b;
     --warning: #ffd166;
     --danger: #ff7675;
+    --surface-1: #0a1414;
+    --surface-2: #101c1c;
+    --surface-soft: rgba(255, 255, 255, 0.05);
+    --surface-muted: rgba(0, 0, 0, 0.25);
+    --glass-bg: rgba(10, 20, 20, 0.95);
+    --glass-border: rgba(0, 184, 148, 0.2);
+    --input-bg: rgba(0, 0, 0, .3);
+    --input-bg-focus: rgba(0, 0, 0, .4);
+    --input-border: rgba(0, 184, 148, 0.3);
+    --muted-border: rgba(255, 255, 255, 0.12);
+    --hero-from: #0a1414;
+    --hero-to: #1769aa;
     --border-radius: 8px;
     --box-shadow: 0 4px 10px rgba(33, 150, 243, 0.15);
     --transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
@@ -24,6 +36,29 @@
     --text-size-xl: 2rem;
 }
 
+[data-theme="light"] {
+    --dark: #f8fbfd;
+    --darker: #eef6fb;
+    --light: #06222f;
+    --text: #163041;
+    --text-light: #4a6475;
+    --text-dark: #0e2230;
+    --warning: #a66900;
+    --surface-1: rgba(255, 255, 255, 0.9);
+    --surface-2: #f8fbfd;
+    --surface-soft: rgba(255, 255, 255, 0.88);
+    --surface-muted: rgba(6, 34, 47, 0.06);
+    --glass-bg: rgba(255, 255, 255, 0.88);
+    --glass-border: rgba(0, 184, 148, 0.22);
+    --input-bg: rgba(255, 255, 255, 0.84);
+    --input-bg-focus: rgba(255, 255, 255, 1);
+    --input-border: rgba(22, 48, 65, 0.2);
+    --muted-border: rgba(22, 48, 65, 0.14);
+    --hero-from: #d7e9f6;
+    --hero-to: #a7cde4;
+    --box-shadow: 0 10px 28px rgba(8, 35, 51, 0.12);
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -32,7 +67,7 @@
 }
 
 body {
-    background-color: var(--dark);
+    background: linear-gradient(180deg, var(--surface-2), var(--dark));
     color: var(--text);
     min-height: 100vh;
     display: flex;
@@ -41,13 +76,14 @@ body {
 }
 
 header {
-    background-color: var(--darker);
+    background-color: var(--surface-1);
     box-shadow: var(--box-shadow);
     position: fixed;
     width: 100%;
     z-index: 1000;
     transition: var(--transition);
-    border-bottom: .125rem solid rgba(255, 255, 255, .1);
+    border-bottom: .125rem solid var(--muted-border);
+    backdrop-filter: blur(8px);
 }
 
 .header-container {
@@ -100,7 +136,7 @@ header {
     padding: 120px 1.7rem 20px;
     position: relative;
     overflow: hidden;
-    background: linear-gradient(135deg, var(--darker), var(--primary-dark));
+    background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
 }
 
 .login-container::before {
@@ -115,15 +151,22 @@ header {
     z-index: 0;
 }
 
+[data-theme="light"] .login-container {
+    background:
+        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 18%, transparent 82%), transparent 48%),
+        radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--accent) 14%, transparent 86%), transparent 54%),
+        linear-gradient(135deg, var(--hero-from), var(--hero-to));
+}
+
 .login-box {
-    background: rgba(10, 20, 20, 0.95);
+    background: var(--glass-bg);
     backdrop-filter: blur(10px);
     border-radius: var(--border-radius);
     padding: 2.5rem;
     width: 100%;
     max-width: 450px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(0, 184, 148, 0.2);
+    border: 1px solid var(--glass-border);
     position: relative;
     z-index: 2;
     transition: var(--transition);
@@ -191,8 +234,8 @@ header {
 .form-input {
     width: 100%;
     padding: 14px 20px;
-    background: rgba(0, 0, 0, .3);
-    border: 2px solid rgba(0, 184, 148, 0.3);
+    background: var(--input-bg);
+    border: 2px solid var(--input-border);
     border-radius: var(--border-radius);
     color: var(--text);
     font-size: var(--text-size-md);
@@ -201,7 +244,7 @@ header {
 
 .form-input:focus {
     outline: none;
-    background: rgba(0, 0, 0, .4);
+    background: var(--input-bg-focus);
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.2);
 }
@@ -228,7 +271,7 @@ header {
     top: -10px;
     left: 15px;
     font-size: 0.8rem;
-    background: rgba(10, 20, 20, 0.95);
+    background: var(--glass-bg);
     padding: 0 5px;
     color: var(--accent);
 }
@@ -276,9 +319,9 @@ header {
     position: relative;
     z-index: 1;
     overflow: hidden;
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--surface-soft);
     color: var(--text);
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: var(--muted-border);
 }
 
 .swi:hover {
@@ -292,13 +335,13 @@ header {
 }
 
 .btn-login:hover {
-    background: var(--dark);
+    background: var(--surface-1);
     color: var(--accent);
     box-shadow: 0 6px 20px rgba(0, 184, 148, 0.3);
 }
 
 .btn-login:disabled {
-    background: var(--dark);
+    background: var(--surface-1);
     color: var(--accent);
     cursor: not-allowed;
     transform: none;
@@ -327,7 +370,7 @@ header {
 }
 
 .divider span {
-    background: rgba(10, 20, 20, 0.95);
+    background: var(--glass-bg);
     padding: 0 15px;
     color: var(--text-light);
     font-size: 0.9rem;
@@ -463,8 +506,8 @@ header {
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
-    background: rgba(0, 0, 0, .3);
-    border: 2px solid rgba(0, 184, 148, 0.3);
+    background: var(--input-bg);
+    border: 2px solid var(--input-border);
     border-radius: var(--border-radius);
     margin-right: 10px;
     cursor: pointer;
@@ -507,7 +550,7 @@ header {
     width: 100%;
     margin: 1.5rem 0;
     padding: 1rem;
-    background: rgba(0, 184, 148, 0.05);
+    background: color-mix(in srgb, var(--accent) 7%, transparent 93%);
     border: 1px solid rgba(0, 184, 148, 0.2);
     border-radius: var(--border-radius);
     transition: var(--transition);
@@ -531,7 +574,7 @@ header {
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
-    background: rgba(0, 0, 0, .3);
+    background: var(--input-bg);
     border: 2px solid rgba(0, 184, 148, 0.4);
     border-radius: 5px;
     cursor: pointer;
@@ -613,12 +656,12 @@ header {
     position: fixed;
     bottom: 20px;
     right: 20px;
-    background: rgba(255, 255, 255, .1);
+    background: var(--surface-soft);
     color: var(--text-light);
     padding: 8px 12px;
     border-radius: var(--border-radius);
     font-size: 0.75rem;
-    border: 1px solid rgba(255, 255, 255, .1);
+    border: 1px solid var(--muted-border);
     z-index: 999;
     transition: var(--transition);
     backdrop-filter: blur(5px);
@@ -649,7 +692,7 @@ header {
         width: 40%;
         background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(0, 184, 148, 0.08));
         padding: 2.5rem 2rem;
-        border-right: 1px solid rgba(0, 184, 148, 0.3);
+        border-right: 1px solid color-mix(in srgb, var(--accent) 32%, transparent 68%);
         position: relative;
         overflow: hidden;
     }
@@ -740,9 +783,9 @@ header {
     }
 
     .btn-google-side {
-        background: rgba(255, 255, 255, 0.05);
+        background: var(--surface-soft);
         color: var(--text);
-        border-color: rgba(255, 255, 255, 0.15);
+        border-color: var(--muted-border);
     }
 
     .btn-google-side:hover {
@@ -756,9 +799,9 @@ header {
     }
 
     .btn-switch-side {
-        background: rgba(255, 255, 255, 0.05);
+        background: var(--surface-soft);
         color: var(--text);
-        border-color: rgba(255, 255, 255, 0.15);
+        border-color: var(--muted-border);
     }
 
     .btn-switch-side:hover {
@@ -773,7 +816,7 @@ header {
         gap: 0.75rem;
         margin-top: auto;
         padding-top: 2rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.12);
+        border-top: 1px solid var(--muted-border);
         position: relative;
         z-index: 1;
     }
@@ -809,7 +852,7 @@ header {
         display: flex;
         flex-direction: column;
         justify-content: center;
-        background: rgba(0, 0, 0, 0.2);
+        background: var(--surface-muted);
     }
 
     .login-form {
@@ -843,6 +886,44 @@ header {
     }
 }
 
+.logo-centered {
+    justify-content: center;
+    margin-bottom: 1rem;
+}
+
+.form-row-split {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    gap: 0.75rem;
+}
+
+.remember-me-inline {
+    margin-bottom: 0;
+}
+
+.login-link-nowrap {
+    margin-bottom: 0;
+    white-space: nowrap;
+}
+
+.hidden-by-default {
+    display: none;
+}
+
+.btn-login-inline {
+    text-decoration: none;
+    display: inline-block;
+    margin-top: 10px;
+    text-align: center;
+    line-height: 40px;
+}
+
+.link-no-decoration {
+    text-decoration: none;
+}
+
 @media (max-width: 400px) {
 
     .logo svg,

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);