mbkauthe 4.3.2 → 4.3.3

package/index.js

@@ -112,11 +112,28 @@ export {
     validateSessionAndRole, authenticate, reloadSessionUser,
     strictValidateSession, strictValidateSessionAndRole
 } from "./lib/middleware/auth.js";
-export { renderError, getUserContext, renderPage } from "#response.js";
+export {
+    sessionConfig,
+    corsMiddleware,
+    sessionRestorationMiddleware,
+    sessionCookieSyncMiddleware
+} from "./lib/middleware/index.js";
+export { validateTokenScope } from "./lib/middleware/scopeValidator.js";
+export { renderError, getUserContext, renderPage, proxycall } from "#response.js";
 export { dblogin } from "#pool.js";
+export { getLatestVersion } from "./lib/routes/misc.js";
+export { checkTrustedDevice, completeLoginProcess } from "./lib/routes/auth.js";
 export {
     ErrorCodes, ErrorMessages, getErrorByCode,
     createErrorResponse, logError
 } from "./lib/utils/errors.js";
+export {
+    encryptSessionId, decryptSessionId, cachedCookieOptions, cachedClearCookieOptions,
+    DEVICE_TRUST_DURATION_DAYS, DEVICE_TRUST_DURATION_MS,
+    generateDeviceToken, hashDeviceToken, getDeviceTokenCookieOptions,
+    getCookieOptions, getClearCookieOptions, clearSessionCookies,
+    readAccountListFromCookie, upsertAccountListCookie, removeAccountFromCookie, clearAccountListCookie
+} from "./lib/config/cookies.js";
+export { hashPassword, hashApiToken } from "./lib/config/security.js";
 export { mbkautheVar } from "#config.js";
 export default router;

package/lib/config/cookies.js

@@ -148,7 +148,6 @@ export const getDeviceTokenCookieOptions = () => ({
 export const clearSessionCookies = (res) => {
     res.clearCookie("mbkauthe.sid", cachedClearCookieOptions);
     res.clearCookie("sessionId", cachedClearCookieOptions);
-    res.clearCookie("username", cachedClearCookieOptions);
     res.clearCookie("fullName", cachedClearCookieOptions);
     res.clearCookie("device_token", cachedClearCookieOptions);
 };
@@ -183,7 +182,8 @@ const parseAccountList = (raw, req) => {
             .map(item => ({
                 sessionId: typeof item.sessionId === 'string' ? item.sessionId : null,
                 username: typeof item.username === 'string' ? item.username : null,
-                fullName: typeof item.fullName === 'string' ? item.fullName : null
+                fullName: typeof item.fullName === 'string' ? item.fullName : null,
+                image: typeof item.image === 'string' ? item.image : null
             }))
             .filter(item => item.sessionId && item.username)
             .slice(0, MAX_REMEMBERED_ACCOUNTS);
@@ -196,9 +196,17 @@ const parseAccountList = (raw, req) => {
 const writeAccountList = (res, list, req) => {
     const sanitized = Array.isArray(list) ? list.slice(0, MAX_REMEMBERED_ACCOUNTS) : [];
 
+    // Clean and limit fields to safe values (limit image URL length)
+    const cleaned = sanitized.map(item => ({
+        sessionId: item && item.sessionId ? item.sessionId : null,
+        username: item && item.username ? item.username : null,
+        fullName: item && item.fullName ? item.fullName : null,
+        image: (item && typeof item.image === 'string' && item.image.length <= 2048) ? item.image : null
+    })).filter(i => i && i.sessionId && i.username);
+
     // Create payload with fingerprint
     const payload = {
-        accounts: sanitized,
+        accounts: cleaned,
         fingerprint: generateFingerprint(req)
     };
 
@@ -221,7 +229,7 @@ export const upsertAccountListCookie = (req, res, entry) => {
     if (!entry || !entry.sessionId || !entry.username) return;
     const current = readAccountListFromCookie(req);
     const filtered = current.filter(item => item.sessionId !== entry.sessionId && item.username !== entry.username);
-    const next = [{ sessionId: entry.sessionId, username: entry.username, fullName: entry.fullName || entry.username }, ...filtered];
+    const next = [{ sessionId: entry.sessionId, username: entry.username, fullName: entry.fullName || entry.username, image: entry.image || null }, ...filtered];
     writeAccountList(res, next, req);
 };
 

package/lib/middleware/auth.js

@@ -421,16 +421,14 @@ async function reloadSessionUser(req, res) {
     // Persist session changes
     await new Promise((resolve, reject) => req.session.save(err => err ? reject(err) : resolve()));
 
-    // Sync cookies for client UI (non-httpOnly)
+    // Sync cookies for client UI (sessionId + fullName)
     try {
-      res.cookie('username', req.session.user.username, { ...cachedCookieOptions, httpOnly: false });
       res.cookie('fullName', req.session.user.fullname || req.session.user.username, { ...cachedCookieOptions, httpOnly: false });
       const encryptedSid = encryptSessionId(req.session.user.sessionId);
       if (encryptedSid) {
         res.cookie('sessionId', encryptedSid, cachedCookieOptions);
       }
     } catch (cookieErr) {
-      // Ignore cookie setting errors, session is still refreshed
       console.error('[mbkauthe] Error syncing cookies during reload:', cookieErr);
     }
 

package/lib/middleware/index.js

@@ -96,7 +96,7 @@ export async function sessionRestorationMiddleware(req, res, next) {
           };
 
           // Use cached FullName from client cookie when available to avoid extra DB queries
-          if (req.cookies.fullName && typeof req.cookies.fullName === 'string') {
+          if (req.cookies && req.cookies.fullName && typeof req.cookies.fullName === 'string') {
             req.session.user.fullname = req.cookies.fullName;
           } else {
             // Fallback: attempt to fetch FullName from Users to populate session
@@ -130,9 +130,7 @@ export function sessionCookieSyncMiddleware(req, res, next) {
 
     // Only set cookies if they're missing or different
     if (currentDecryptedId !== req.session.user.sessionId) {
-      res.cookie("username", req.session.user.username, { ...cachedCookieOptions, httpOnly: false });
       res.cookie("fullName", req.session.user.fullname || req.session.user.username, { ...cachedCookieOptions, httpOnly: false });
-      
       const encryptedSessionId = encryptSessionId(req.session.user.sessionId);
       if (encryptedSessionId) {
         res.cookie("sessionId", encryptedSessionId, cachedCookieOptions);

package/lib/routes/auth.js

@@ -252,18 +252,20 @@ export async function completeLoginProcess(req, res, user, redirectUrl = null, t
     // Clear profile picture cache to fetch fresh data
     clearProfilePicCache(req, username);
 
-    // Attempt to fetch FullName from Users and store it in session for display purposes
+    // Attempt to fetch FullName and Image from Users and store it in session for display purposes
+    let loginProfileImage = null;
     try {
       const profileResult = await dblogin.query({
-        name: 'login-get-fullname',
-        text: 'SELECT "FullName" FROM "Users" WHERE "UserName" = $1 LIMIT 1',
+        name: 'login-get-fullname-and-image',
+        text: 'SELECT "FullName", "Image" FROM "Users" WHERE "UserName" = $1 LIMIT 1',
         values: [username]
       });
-      if (profileResult.rows.length > 0 && profileResult.rows[0].FullName) {
-        req.session.user.fullname = profileResult.rows[0].FullName;
+      if (profileResult.rows.length > 0) {
+        if (profileResult.rows[0].FullName) req.session.user.fullname = profileResult.rows[0].FullName;
+        if (profileResult.rows[0].Image && profileResult.rows[0].Image.trim() !== '') loginProfileImage = profileResult.rows[0].Image;
       }
     } catch (profileErr) {
-      console.error("[mbkauthe] Error fetching FullName for user:", profileErr);
+      console.error("[mbkauthe] Error fetching FullName/Image for user:", profileErr);
     }
 
     if (req.session.preAuthUser) {
@@ -276,12 +278,12 @@ export async function completeLoginProcess(req, res, user, redirectUrl = null, t
         return res.status(500).json({ success: false, message: "Internal Server Error" });
       }
 
-      // Expose DB session id and display name to client for UI (fullName falls back to username)
+      // Expose DB session id to client
       const encryptedSessionId = encryptSessionId(dbSessionId);
       if (encryptedSessionId) {
         res.cookie("sessionId", encryptedSessionId, cachedCookieOptions);
       }
-      res.cookie("username", username, { ...cachedCookieOptions, httpOnly: false });
+      // Cache display name client-side to avoid extra DB lookups
       res.cookie("fullName", req.session.user.fullname || username, { ...cachedCookieOptions, httpOnly: false });
       // Record which method was used to login (client-visible badge)
       if (method && typeof method === 'string') {
@@ -296,7 +298,8 @@ export async function completeLoginProcess(req, res, user, redirectUrl = null, t
       upsertAccountListCookie(req, res, {
         sessionId: dbSessionId,
         username,
-        fullName: req.session.user.fullname || username
+        fullName: req.session.user.fullname || username,
+        image: loginProfileImage || null
       });
 
       // Handle trusted device if requested (token no longer stored in DB as token_hash)
@@ -677,18 +680,20 @@ router.get("/api/account-sessions", LoginLimit, async (req, res) => {
       }
 
       let fullName = acct.fullName || acct.username;
-      if (!acct.fullName) {
+      let image = acct.image || null;
+      if (!acct.fullName || !acct.image) {
         try {
           const prof = await dblogin.query({
-            name: 'multi-session-fullname',
-            text: 'SELECT "FullName" FROM "Users" WHERE "UserName" = $1 LIMIT 1',
+            name: 'multi-session-fullname-image',
+            text: 'SELECT "FullName", "Image" FROM "Users" WHERE "UserName" = $1 LIMIT 1',
             values: [row.UserName]
           });
-          if (prof.rows.length > 0 && prof.rows[0].FullName) {
-            fullName = prof.rows[0].FullName;
+          if (prof.rows.length > 0) {
+            if (!acct.fullName && prof.rows[0].FullName) fullName = prof.rows[0].FullName;
+            if (!acct.image && prof.rows[0].Image && prof.rows[0].Image.trim() !== '') image = prof.rows[0].Image;
           }
         } catch (profileErr) {
-          console.error('[mbkauthe] Error fetching fullname for account list:', profileErr);
+          console.error('[mbkauthe] Error fetching fullname/image for account list:', profileErr);
         }
       }
 
@@ -696,6 +701,7 @@ router.get("/api/account-sessions", LoginLimit, async (req, res) => {
         sessionId: row.sid,
         username: row.UserName,
         fullName,
+        image,
         isCurrent: currentSessionId && row.sid === currentSessionId
       });
     } catch (err) {
@@ -729,15 +735,19 @@ router.post("/api/switch-session", LoginLimit, async (req, res) => {
     }
 
     let fullName = row.UserName;
+    let switchProfileImage = null;
     try {
       const prof = await dblogin.query({
-        name: 'multi-session-switch-fullname',
-        text: 'SELECT "FullName" FROM "Users" WHERE "UserName" = $1 LIMIT 1',
+        name: 'multi-session-switch-fullname-image',
+        text: 'SELECT "FullName", "Image" FROM "Users" WHERE "UserName" = $1 LIMIT 1',
         values: [row.UserName]
       });
-      if (prof.rows.length > 0 && prof.rows[0].FullName) fullName = prof.rows[0].FullName;
+      if (prof.rows.length > 0) {
+        if (prof.rows[0].FullName) fullName = prof.rows[0].FullName;
+        if (prof.rows[0].Image && prof.rows[0].Image.trim() !== '') switchProfileImage = prof.rows[0].Image;
+      }
     } catch (profileErr) {
-      console.error('[mbkauthe] Error fetching fullname during switch:', profileErr);
+      console.error('[mbkauthe] Error fetching fullname/image during switch:', profileErr);
     }
 
     // Regenerate session to avoid fixation
@@ -759,14 +769,13 @@ router.post("/api/switch-session", LoginLimit, async (req, res) => {
 
     await new Promise((resolve, reject) => req.session.save(err => err ? reject(err) : resolve()));
 
-    // Sync cookies for client UI and remember list
-    res.cookie('username', row.UserName, { ...cachedCookieOptions, httpOnly: false });
+    // Sync sessionId cookie and remember list
     res.cookie('fullName', fullName, { ...cachedCookieOptions, httpOnly: false });
     const encryptedSid = encryptSessionId(row.sid);
     if (encryptedSid) {
       res.cookie('sessionId', encryptedSid, cachedCookieOptions);
     }
-    upsertAccountListCookie(req, res, { sessionId: row.sid, username: row.UserName, fullName });
+    upsertAccountListCookie(req, res, { sessionId: row.sid, username: row.UserName, fullName, image: switchProfileImage || null });
 
     const safeRedirect = typeof redirect === 'string' && redirect.startsWith('/') && !redirect.startsWith('//')
       ? redirect

package/lib/routes/misc.js

@@ -153,35 +153,59 @@ router.get('/user/profilepic', async (req, res) => {
 router.get('/test', validateSession, LoginLimit, async (req, res) => {
   if (req.session?.user) {
     return res.send(`
-      <head> 
-        <script src="/mbkauthe/main.js"></script> 
+      <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <script src="/mbkauthe/main.js"></script>
         <style>
-          body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; background: #f5f5f5; }
-          .card { background: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
-          .success { color: #16a085; border-left: 4px solid #16a085; padding-left: 15px; }
-          .user-info { background: #ecf0f1; padding: 15px; border-radius: 4px; font-family: monospace; font-size: 14px; }
-          button { background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 10px 5px; }
-          button:hover { background: #c0392b; }
-          a { color: #3498db; text-decoration: none; margin: 0 10px; padding: 8px 12px; border: 1px solid #3498db; border-radius: 4px; display: inline-block; }
-          a:hover { background: #3498db; color: white; }
+          :root{--bg:#f7fafc;--card:#ffffff;--muted:#6b7280;--accent:#2563eb;--success:#059669;--danger:#ef4444;--radius:12px}
+          html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
+          body{background:linear-gradient(180deg, #f0f4ff 0%, var(--bg) 100%);display:flex;align-items:center;justify-content:center;padding:32px}
+          .container{width:100%;max-width:920px}
+          .card{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:0 6px 24px rgba(16,24,40,0.06);display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
+          .avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#e6eefc,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:28px;border:2px solid rgba(37,99,235,0.08);position:relative;overflow:hidden}
+          .avatar img{width:100%;height:100%;object-fit:cover;display:block}
+          .avatar .initials{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:28px;background:linear-gradient(135deg,#eef2ff,#fff)}
+          .meta{display:flex;flex-direction:column;gap:8px}
+          .status{color:var(--success);font-weight:600;display:flex;align-items:center;gap:8px}
+          .user-title{font-size:18px;font-weight:700;margin:0}
+          .user-sub{color:var(--muted);margin:0;font-size:13px}
+          .details{background:#fbfdff;border-radius:10px;padding:12px;font-family:monospace;font-size:13px;color:#111;display:flex;flex-direction:column;gap:6px}
+          .actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
+          .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none}
+          .btn-primary{background:var(--accent);color:white}
+          .btn-outline{background:transparent;border-color:rgba(37,99,235,0.12);color:var(--accent)}
+          .btn-danger{background:var(--danger);color:#fff}
+          a{color:inherit}
+          @media (max-width:640px){.card{grid-template-columns:1fr;align-items:stretch}.avatar{width:80px;height:80px}}
         </style>
       </head>
-      <div class="card">
-        <p class="success">✅ Authentication successful! User is logged in.</p>
-        <p>Welcome, <strong>${req.session.user.username}</strong>! Your role: <strong>${req.session.user.role}</strong></p>
-        <div class="user-info">
-          Username: ${req.session.user.username}<br>
-          Role: ${req.session.user.role}<br>
-          Full Name: ${req.session.user.fullname || 'N/A'}<br>
-          User ID: ${req.session.user.id}<br>
-          Session ID: ${req.session.user.sessionId.slice(0, 5)}... <br>
-          Allowed Apps: ${Array.isArray(req.session.user.allowedApps) ? req.session.user.allowedApps.join(', ') : 'N/A'}
+      <div class="container">
+        <div class="card" role="region" aria-label="User Session">
+          <div class="avatar" aria-hidden="true">
+            <img src="/mbkauthe/user/profilepic?u=${encodeURIComponent(req.session.user.username)}" alt="Avatar for ${req.session.user.username}" title="${req.session.user.fullname || req.session.user.username}" loading="lazy" decoding="async" width="96" height="96" onerror="this.style.display='none';var s=this.nextElementSibling; if(s) s.style.display='flex';" />
+            <div class="initials" aria-hidden="true" style="display:none">${(req.session.user.fullname && req.session.user.fullname[0]) || req.session.user.username[0]}</div>
+          </div>
+          <div class="meta">
+            <div>
+              <div class="status">✅ Authentication successful</div>
+              <h3 class="user-title">${req.session.user.username} <small style="color:var(--muted);font-weight:600">· ${req.session.user.role}</small></h3>
+              <p class="user-sub">ID: ${req.session.user.id} · Session: ${req.session.user.sessionId.slice(0,8)}…</p>
+            </div>
+
+            <div class="details" aria-live="polite">
+              <div>Full Name: ${req.session.user.fullname || 'N/A'}</div>
+              <div>Allowed Apps: ${Array.isArray(req.session.user.allowedApps) ? req.session.user.allowedApps.join(', ') : 'N/A'}</div>
+            </div>
+
+            <div class="actions">
+              <button class="btn btn-primary" onclick="logout()" aria-label="Log out">Logout</button>
+              <a class="btn btn-outline" href="https://portal.mbktech.org/">Web Portal</a>
+              <a class="btn btn-outline" href="https://portal.mbktech.org/user/settings">User Settings</a>
+              <a class="btn btn-outline" href="/mbkauthe/info">Info Page</a>
+              <a class="btn btn-outline" href="/mbkauthe/login">Login Page</a>
+            </div>
+          </div>
         </div>
-        <button onclick="logout()">Logout</button>
-        <a href="https://portal.mbktech.org/">Web Portal</a>
-        <a href="https://portal.mbktech.org/user/settings">User Settings</a>
-        <a href="/mbkauthe/info">Info Page</a>
-        <a href="/mbkauthe/login">Login Page</a>
       </div>
       `);
   }

package/lib/utils/response.js

@@ -1,15 +1,15 @@
 import { mbkautheVar, packageJson } from "#config.js";
 
 export function getUserContext(req) {
-  const user = req?.session?.user || {};
-  return {
-    userLoggedIn: !!user.username,
-    isuserlogin: !!user.username,
-    username: user.username || 'N/A',
-    fullname: user.fullname || 'N/A',
-    role: user.role || 'N/A',
-    allowedApps: Array.isArray(user.allowedApps) ? user.allowedApps : [],
-  };
+    const user = req?.session?.user || {};
+    return {
+        userLoggedIn: !!user.username,
+        isuserlogin: !!user.username,
+        username: user.username || 'N/A',
+        fullname: user.fullname || 'N/A',
+        role: user.role || 'N/A',
+        allowedApps: Array.isArray(user.allowedApps) ? user.allowedApps : [],
+    };
 }
 
 // Helper function to render error pages consistently
@@ -42,4 +42,42 @@ export async function renderPage(req, res, fileLocation, layout = true, data = {
         ...(layout === false ? { layout: false } : {}),
     };
     return res.render(fileLocation, renderOptions);
+}
+
+export async function proxycall(req, res, url, method = 'GET', headerOption = {}) {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 30000);
+
+    try {
+        const sessionCookie = req.cookies?.sessionId;
+
+        const headers = { ...headerOption };
+
+        if (sessionCookie && !headers.Cookie) {
+            headers.Cookie = `sessionId=${sessionCookie}`;
+        }
+
+        const body = ['GET', 'HEAD'].includes(method) ? undefined : typeof req.body === 'string' || req.body instanceof Buffer ? req.body : JSON.stringify(req.body);
+
+        if (body && !headers['Content-Type']) {
+            headers['Content-Type'] = 'application/json';
+        }
+
+        const response = await fetch(url, { method, headers, body, signal: controller.signal });
+
+        response.headers.forEach((value, key) => {
+            res.setHeader(key, value);
+        });
+
+        const contentType = response.headers.get('content-type');
+        const data = contentType?.includes('application/json') ? await response.json() : await response.text();
+
+        return res.status(response.status).send(data);
+
+    } catch (err) {
+        console.error('Proxy error:', err);
+        return res.status(err.name === 'AbortError' ? 504 : 500).json({ error: 'Proxy request failed' });
+    } finally {
+        clearTimeout(timeout);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkauthe",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "MBKTech's reusable authentication system for Node.js applications.",
   "main": "index.js",
   "type": "module",

package/views/accountSwitch.handlebars

@@ -147,6 +147,27 @@
             font-size: 18px;
             flex-shrink: 0;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+            border-radius: 50%;
+        }
+
+        .avatar .initials {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 18px;
+            background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
         }
 
         .account-info {
@@ -367,15 +388,44 @@
                     item.role = 'button';
                     item.tabIndex = 0;
 
-                    item.innerHTML = `
-                        <div class="avatar">${initial}</div>
-                        <div class="account-info">
-                            <div class="account-name">${acct.fullName || acct.username}</div>
-                            <div class="account-email">${acct.username}</div>
-                        </div>
-                        ${isCurrent ? '<div class="current-badge">Current</div>' : ''}
+                    // Build avatar with image (if available) and initials fallback to avoid HTML injection
+                    const avatar = document.createElement('div');
+                    avatar.className = 'avatar';
+
+                    const initials = document.createElement('div');
+                    initials.className = 'initials';
+                    initials.textContent = initial;
+                    initials.style.display = acct.image ? 'none' : 'flex';
+
+                    if (acct.image) {
+                        const img = document.createElement('img');
+                        img.className = 'avatar-img';
+                        img.src = acct.image;
+                        img.alt = `Avatar for ${acct.username}`;
+                        img.loading = 'lazy';
+                        img.decoding = 'async';
+                        img.onerror = function () { img.style.display = 'none'; initials.style.display = 'flex'; };
+                        avatar.appendChild(img);
+                    }
+
+                    avatar.appendChild(initials);
+
+                    const info = document.createElement('div');
+                    info.className = 'account-info';
+                    info.innerHTML = `
+                        <div class="account-name">${acct.fullName || acct.username}</div>
+                        <div class="account-email">${acct.username}</div>
                     `;
 
+                    item.appendChild(avatar);
+                    item.appendChild(info);
+                    if (isCurrent) {
+                        const badge = document.createElement('div');
+                        badge.className = 'current-badge';
+                        badge.textContent = 'Current';
+                        item.appendChild(badge);
+                    };
+
                     item.addEventListener('click', () => {
                         if (!isCurrent) {
                             switchSession(acct.sessionId);

package/views/profilemenu.handlebars

@@ -177,7 +177,7 @@
     /* prefers-color-scheme fallbacks scoped to component */
     @media (prefers-color-scheme: dark) {
         .mbkauthe-profile-dropdown {
-            --mbk-bg: #0b1220;
+            --mbk-bg: #0a2125;
             --mbk-border: rgba(255, 255, 255, 0.06);
             --mbk-item-hover: rgba(255, 255, 255, 0.03);
             --mbk-text: #e6eef6;

package/views/sharedStyles.handlebars

@@ -14,7 +14,7 @@
         --warning: #ffd166;
         --danger: #ff7675;
         --border-radius: 8px;
-        --box-shadow: 0 4px 20px rgba(33, 150, 243, 0.15);
+        --box-shadow: 0 4px 10px rgba(33, 150, 243, 0.15);
         --transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
     }