mbkauthe 3.5.0 → 4.0.1

package/lib/routes/misc.js

@@ -79,10 +79,15 @@ router.get('/test', validateSession, LoginLimit, async (req, res) => {
         <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)}...
         </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>
@@ -104,19 +109,27 @@ router.get('/api/checkSession', LoginLimit, async (req, res) => {
       return res.status(200).json({ sessionValid: false, expiry: null });
     }
 
-    const normalizedSessionId = String(sessionId).toLowerCase();
-    const result = await dblogin.query({ name: 'check-session-validity', text: 'SELECT "SessionId", "Active" FROM "Users" WHERE id = $1', values: [id] });
+    const result = await dblogin.query({ name: 'check-session-validity', text: `SELECT s.expires_at, u."Active" FROM "Sessions" s JOIN "Users" u ON s."UserName" = u."UserName" WHERE s.id = $1 LIMIT 1`, values: [sessionId] });
 
-    const dbSessionId = result.rows.length > 0 && result.rows[0].SessionId ? String(result.rows[0].SessionId).toLowerCase() : null;
-    if (!dbSessionId || dbSessionId !== normalizedSessionId || !result.rows[0].Active) {
+    if (result.rows.length === 0) {
       req.session.destroy(() => { });
       clearSessionCookies(res);
       return res.status(200).json({ sessionValid: false, expiry: null });
     }
 
-    // Fetch expiry timestamp from session table (connect-pg-simple)
-    const sessResult = await dblogin.query({ name: 'get-session-expiry', text: 'SELECT expire FROM "session" WHERE sid = $1', values: [req.sessionID] });
-    const expiry = sessResult.rows.length > 0 && sessResult.rows[0].expire ? new Date(sessResult.rows[0].expire).toISOString() : null;
+    const row = result.rows[0];
+    if ((row.expires_at && new Date(row.expires_at) <= new Date()) || !row.Active) {
+      req.session.destroy(() => { });
+      clearSessionCookies(res);
+      return res.status(200).json({ sessionValid: false, expiry: null });
+    }
+
+    // Determine expiry: prefer application session expiry if present else fallback to connect-pg-simple expire
+    let expiry = row.expires_at ? new Date(row.expires_at).toISOString() : null;
+    if (!expiry) {
+      const sessResult = await dblogin.query({ name: 'get-session-expiry', text: 'SELECT expire FROM "session" WHERE sid = $1', values: [req.sessionID] });
+      expiry = sessResult.rows.length > 0 && sessResult.rows[0].expire ? new Date(sessResult.rows[0].expire).toISOString() : null;
+    }
 
     return res.status(200).json({ sessionValid: true, expiry });
   } catch (err) {
@@ -287,8 +300,8 @@ router.post("/api/terminateAllSessions", AdminOperationLimit, authenticate(mbkau
     // Run both operations in parallel for better performance
     await Promise.all([
       dblogin.query({
-        name: 'terminate-all-user-sessions',
-        text: 'UPDATE "Users" SET "SessionId" = NULL WHERE "SessionId" IS NOT NULL'
+        name: 'terminate-all-app-sessions',
+        text: 'DELETE FROM "Sessions"'
       }),
       dblogin.query({
         name: 'terminate-all-db-sessions',

package/package.json

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

package/views/Error/dError.handlebars

@@ -4,6 +4,7 @@
 {{> head pageCode=code pageError=error ogUrl="/error" extraStyles="<style>
     .login-box {
       max-width: 600px;
+      padding: 2.5rem;
     }
 
     .status-code {
@@ -35,7 +36,6 @@
     }
 
     .status-content {
-      margin-bottom: 1.5rem;
       text-align: center;
     }
 
@@ -43,12 +43,12 @@
       font-size: 1.2rem;
       margin: 0.5rem 0;
       color: var(--warning);
+      line-height: 1.4;
     }
 
     .status-links {
       display: flex;
       justify-content: center;
-      margin-top: 1rem;
     }
 
     .status-link {
@@ -57,90 +57,146 @@
       transition: var(--transition);
       margin: 0 auto;
       font-size: 1rem;
-      font-weight: 600;
+      font-weight: 700;
+      padding: 0.5rem 0.75rem;
+      border-radius: var(--border-radius);
     }
 
     .status-link:hover {
-      text-decoration: underline;
+      text-decoration: none;
+      background: rgba(255,255,255,0.02);
       color: var(--secondary);
+      transform: translateY(-2px);
     }
 
+    /* Details wrapper: improved layout, accessibility and animation */
     .details-wrapper {
-      margin-top: 1.5rem;
-      background: rgba(255, 255, 255, .05);
+      margin-top: 1.25rem;
+      background: rgba(255, 255, 255, .03);
       border-radius: var(--border-radius);
-      padding: 1.5rem;
-      box-shadow: var(--box-shadow);
-      cursor: pointer;
-      transition: var(--transition);
-      border: 1px solid rgba(255, 255, 255, .1);
+      padding: 0;
+      transition: box-shadow .25s ease, transform .25s ease;
+      border: 1px solid rgba(255, 255, 255, .06);
+      overflow: visible;
     }
 
-    .details-wrapper:hover {
-      background: rgba(255, 255, 255, .08);
-    }
-
-    .details-header {
+    .details-toggle {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background: transparent;
+      border: 0;
       color: var(--light);
-      font-size: 1.1rem;
+      font-size: 1.05rem;
       font-weight: 600;
+      padding: 0.85rem 1rem;
+      cursor: pointer;
     }
 
-    .details-header i {
-      transition: var(--transition);
+    .details-toggle:focus {
+      outline: 3px solid rgba(100, 150, 255, .18);
+      outline-offset: 2px;
+      border-radius: var(--border-radius);
+    }
+
+    .details-toggle .chev {
+      transition: transform .25s ease, color .2s ease;
+      color: var(--muted);
     }
 
-    .details-wrapper:hover .details-header i {
+    .details-wrapper:hover .details-toggle .chev {
       color: var(--accent);
     }
 
     .error-details-wrapper {
-      display: none;
-      margin-top: 1rem;
+      max-height: 0;
+      overflow: hidden;
+      opacity: 0;
+      transition: max-height .33s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
+      padding: 0 1rem;
     }
 
     .details-wrapper.active .error-details-wrapper {
-      display: block;
-    }
-
-    .details-wrapper.active .details-header i {
-      transform: rotate(180deg);
+      max-height: 480px; /* large enough for content */
+      opacity: 1;
+      padding: 0.9rem 1rem 1.25rem 1rem;
     }
 
     .error-details {
       width: 100%;
-      height: 150px;
-      background: rgba(0, 0, 0, .3);
-      border: 1px solid rgba(255, 255, 255, .2);
-      border-radius: var(--border-radius);
+      min-height: 140px;
+      background: rgba(0, 0, 0, .28);
+      border: 1px solid rgba(255, 255, 255, .08);
+      border-radius: calc(var(--border-radius) - 2px);
       color: var(--text);
-      padding: 1rem;
-      resize: none;
+      padding: 0.9rem;
+      padding-right: 3.6rem; /* leave space for overlay button */
+      box-sizing: border-box;
+      resize: vertical;
       font-size: 0.9rem;
-      font-family: monospace;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
+      line-height: 1.45;
     }
 
+    .error-details-container {
+      position: relative;
+      width: 100%;
+    }
+
+    /* Overlay copy button positioned inside the details container */
     .copy-btn {
-      margin-top: 0.5rem;
-      background: var(--accent);
-      color: var(--dark);
-      border: none;
-      border-radius: var(--border-radius);
-      padding: 0.75rem 1.5rem;
+      position: absolute;
+      top: 0.6rem;
+      right: 0.65rem;
+      background: rgba(0,0,0,0.55);
+      color: var(--text);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: 6px;
+      padding: 0.45rem 0.6rem;
       cursor: pointer;
-      transition: var(--transition);
-      font-size: 1rem;
-      font-weight: 600;
-      box-shadow: var(--box-shadow);
+      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
+      font-size: 0.95rem;
+      font-weight: 700;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.18);
+      display: inline-flex;
+      gap: 0.45rem;
+      align-items: center;
+      z-index: 6;
+      backdrop-filter: blur(4px);
     }
 
     .copy-btn:hover {
-      background: var(--secondary);
+      background: var(--accent);
+      color: var(--dark);
       transform: translateY(-2px);
-      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
+    }
+
+    .copy-feedback {
+      position: absolute;
+      top: 2.4rem;
+      right: 0.6rem;
+      background: rgba(0,0,0,0.65);
+      color: var(--accent);
+      padding: 0.25rem 0.5rem;
+      font-weight: 700;
+      border-radius: 4px;
+      font-size: 0.85rem;
+      display: none;
+      z-index: 6;
+    }
+
+    .sr-only {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
     }
 
     @media (max-width: 768px) {
@@ -149,8 +205,10 @@
       }
 
       .status-title {
-        font-size: 1.3rem;
+        font-size: 1.25rem;
       }
+
+      .login-box { padding: 1.5rem; }
     }
 
     @media (max-width: 576px) {
@@ -186,17 +244,19 @@
       </div>
 
       {{#if details}}
-      <div class="details-wrapper" onclick="toggleDetailsDropdown(this)">
-        <div class="details-header">
-          <span>Show Error Details</span>
-          <i class="fas fa-chevron-down"></i>
-        </div>
-        <div class="error-details-wrapper">
-          <textarea class="error-details" id="errorDetails" readonly>{{details}}</textarea>
-          <button class="copy-btn" type="button" aria-label="Copy error details"
-            onclick="copyErrorDetails(this); event.stopPropagation();">
-            <i class="fas fa-copy"></i> Copy
-          </button>
+      <div class="details-wrapper">
+        <button class="details-toggle" type="button" aria-expanded="false" aria-controls="errorDetails">
+          <span>Show error details</span>
+          <i class="fas fa-chevron-down chev" aria-hidden="true"></i>
+        </button>
+        <div class="error-details-wrapper" id="errorDetails" hidden>
+          <div class="error-details-container">
+            <textarea class="error-details" readonly>{{details}}</textarea>
+            <button class="copy-btn" type="button" aria-label="Copy error details">
+              <i class="fas fa-copy" aria-hidden="true"></i><span class="sr-only"> Copy</span>
+            </button>
+            <span class="copy-feedback" aria-live="polite">Copied!</span>
+          </div>
         </div>
       </div>
       {{/if}}
@@ -207,36 +267,63 @@
   {{> versionInfo}}
   
   <script>
-    function toggleDetailsDropdown(element) {
-      const errorDetailsWrapper = element.querySelector('.error-details-wrapper');
-      const icon = element.querySelector('.details-header i');
-
-      if (errorDetailsWrapper.style.display === 'block') {
-        errorDetailsWrapper.style.display = 'none';
-        icon.style.transform = 'rotate(0deg)';
-      } else {
-        errorDetailsWrapper.style.display = 'block';
-        icon.style.transform = 'rotate(180deg)';
-      }
-    }
-
-    function copyErrorDetails(button) {
-      const details = button.previousElementSibling.value;
-      navigator.clipboard.writeText(details).then(() => {
-        button.textContent = 'Copied!';
-        setTimeout(() => {
-          button.textContent = 'Copy';
-        }, 2000);
-      }).catch(err => {
-        console.error('[mbkauthe] Failed to copy: ', err);
-      });
-    }
-
     document.addEventListener('DOMContentLoaded', () => {
-      const detailsWrappers = document.querySelectorAll('.details-wrapper');
-      detailsWrappers.forEach(wrapper => {
-        wrapper.addEventListener('click', () => {
-          wrapper.classList.toggle('active');
+      document.querySelectorAll('.details-wrapper').forEach(wrapper => {
+        const toggle = wrapper.querySelector('.details-toggle');
+        const details = wrapper.querySelector('.error-details-wrapper');
+        const icon = wrapper.querySelector('.chev');
+        const copyBtn = wrapper.querySelector('.copy-btn');
+        const feedback = wrapper.querySelector('.copy-feedback');
+
+        if (!toggle || !details) return;
+
+        // initialize hidden state and maxHeight for animation
+        details.style.maxHeight = details.hidden ? '0px' : details.scrollHeight + 'px';
+
+        toggle.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const isOpen = wrapper.classList.toggle('active');
+          toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+          details.hidden = !isOpen;
+
+          if (isOpen) {
+            details.style.maxHeight = details.scrollHeight + 'px';
+            if (icon) icon.style.transform = 'rotate(180deg)';
+          } else {
+            details.style.maxHeight = '0px';
+            if (icon) icon.style.transform = 'rotate(0deg)';
+          }
+        });
+
+        if (copyBtn) {
+          copyBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const textarea = wrapper.querySelector('.error-details');
+            try {
+              await navigator.clipboard.writeText(textarea.value);
+              if (feedback) {
+                feedback.style.display = 'inline';
+                setTimeout(() => { feedback.style.display = 'none'; }, 2000);
+              } else {
+                const orig = copyBtn.innerHTML;
+                copyBtn.innerHTML = '<i class="fas fa-check" aria-hidden="true"></i> Copied';
+                setTimeout(() => { copyBtn.innerHTML = orig; }, 2000);
+              }
+            } catch (err) {
+              console.error('[mbkauthe] Failed to copy: ', err);
+            }
+          });
+        }
+
+        // close the details when user clicks outside
+        document.addEventListener('click', (e) => {
+          if (!wrapper.contains(e.target) && wrapper.classList.contains('active')) {
+            wrapper.classList.remove('active');
+            toggle.setAttribute('aria-expanded', 'false');
+            details.hidden = true;
+            if (icon) icon.style.transform = 'rotate(0deg)';
+            details.style.maxHeight = '0px';
+          }
         });
       });
     });

package/views/loginmbkauthe.handlebars

@@ -167,8 +167,6 @@
                             window.location.href = `/mbkauthe/2fa${redirectQuery}`;
                         } else {
                             loginButtonText.textContent = 'Success! Redirecting...';
-                            sessionStorage.setItem('sessionId', data.sessionId);
-
                             if (rememberMe) {
                                 setCookie('rememberedUsername', username, 30); // 30 days
                             } else {