Admin panel changes and sidebar scrolling fix

public/app.js

@@ -52,8 +52,8 @@ const adminClose = document.getElementById('admin-close');
 const adminStatsContainer = document.getElementById('admin-stats-container');
 const btnAdminClearCache = document.getElementById('btn-admin-clear-cache');
 const btnAdminClearLogins = document.getElementById('btn-admin-clear-logins');
-const adminPasswordForm = document.getElementById('admin-password-form');
-const adminNewPassword = document.getElementById('admin-new-password');
+const adminSessionsContainer = document.getElementById('admin-sessions-container');
+const adminIpLogContainer = document.getElementById('admin-ip-log-container');
 
 // ── Authentication ─────────────────────────────────────────
 
@@ -129,6 +129,8 @@ adminClose.addEventListener('click', () => {
 
 async function fetchAdminStats() {
   adminStatsContainer.innerHTML = '<div class="spinner"></div> Loading…';
+  adminSessionsContainer.innerHTML = '<div class="spinner"></div> Loading…';
+  adminIpLogContainer.innerHTML = '<div class="spinner"></div> Loading…';
   try {
     const res = await fetch('/api/admin/stats', {
       headers: { 'x-auth-token': authToken }
@@ -141,28 +143,78 @@ async function fetchAdminStats() {
     const m = Math.floor((stats.uptime % 3600) / 60);
     const uptimeStr = `${h}h ${m}m`;
 
-    let html = `
+    // Server stats
+    adminStatsContainer.innerHTML = `
       <div class="admin-stats-row"><span>Uptime:</span> <strong>${uptimeStr}</strong></div>
       <div class="admin-stats-row"><span>Memory Used:</span> <strong>${stats.memoryUsedMB} MB</strong></div>
-      <div class="admin-stats-row"><span>Active Uploads/Sessions:</span> <strong>${stats.activeSessions}</strong></div>
-      <div class="admin-stats-row"><span>Tracked IPs (Brute Force):</span> <strong>${stats.loginAttemptsTracked}</strong></div>
+      <div class="admin-stats-row"><span>Active Sessions:</span> <strong>${stats.activeSessions}</strong></div>
+      <div class="admin-stats-row"><span>Tracked IPs:</span> <strong>${stats.loginAttemptsTracked}</strong></div>
     `;
 
-    if (stats.blockedIps.length > 0) {
-      html += `<div style="margin-top: 8px; font-weight: bold; color: var(--danger)">Currently Locked Out IPs:</div>`;
-      stats.blockedIps.forEach(b => {
-        html += `<div class="admin-stats-row" style="color: var(--danger)">
-          <span>${b.ip} (${b.attempts} fails):</span> <strong>${b.lockoutRemaining}s left</strong>
-        </div>`;
+    // Active sessions display
+    if (stats.sessionDetails && stats.sessionDetails.length > 0) {
+      let sessHtml = '';
+      stats.sessionDetails.forEach(s => {
+        const elapsed = s.startTime ? formatDuration(Date.now() - s.startTime) : 'N/A';
+        sessHtml += `
+          <div class="admin-session-card">
+            <div class="session-row">
+              <span class="session-icon">📄</span>
+              <span class="session-file" title="${escapeHtml(s.originalName)}">${escapeHtml(s.originalName)}</span>
+            </div>
+            <div class="session-details">
+              <div class="session-detail"><span class="detail-label">IP</span><span class="detail-value">${escapeHtml(s.ip)}</span></div>
+              <div class="session-detail"><span class="detail-label">Browser</span><span class="detail-value">${escapeHtml(s.browser)}</span></div>
+              <div class="session-detail"><span class="detail-label">OS</span><span class="detail-value">${escapeHtml(s.os)}</span></div>
+              <div class="session-detail"><span class="detail-label">Duration</span><span class="detail-value">${elapsed}</span></div>
+              <div class="session-detail"><span class="detail-label">Clients</span><span class="detail-value">${s.connectedClients}</span></div>
+            </div>
+          </div>
+        `;
       });
+      adminSessionsContainer.innerHTML = sessHtml;
+    } else {
+      adminSessionsContainer.innerHTML = '<span class="admin-hint">No active sessions.</span>';
+    }
+
+    // Tracked IPs log
+    if (stats.trackedIps && stats.trackedIps.length > 0) {
+      let ipHtml = '<div class="ip-log-table">';
+      ipHtml += '<div class="ip-log-header"><span>IP Address</span><span>Attempts</span><span>Status</span></div>';
+      stats.trackedIps.forEach(t => {
+        const statusClass = t.locked ? 'ip-locked' : 'ip-tracking';
+        const statusText = t.locked ? `Locked (${t.lockoutRemaining}s)` : 'Tracking';
+        ipHtml += `
+          <div class="ip-log-row ${statusClass}">
+            <span class="ip-address">${escapeHtml(t.ip)}</span>
+            <span class="ip-attempts">${t.attempts}</span>
+            <span class="ip-status">${statusText}</span>
+          </div>
+        `;
+      });
+      ipHtml += '</div>';
+      adminIpLogContainer.innerHTML = ipHtml;
+    } else {
+      adminIpLogContainer.innerHTML = '<span class="admin-hint">No tracked IPs. All clear.</span>';
     }
 
-    adminStatsContainer.innerHTML = html;
   } catch (err) {
     adminStatsContainer.innerHTML = `<span style="color: var(--danger)">Error loading stats</span>`;
+    adminSessionsContainer.innerHTML = '';
+    adminIpLogContainer.innerHTML = '';
   }
 }
 
+function formatDuration(ms) {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+}
+
 btnAdminClearCache.addEventListener('click', async () => {
   if (!confirm('This will delete all uploaded PDFs and immediately disconnect all users. Continue?')) return;
   try {
@@ -173,6 +225,7 @@ btnAdminClearCache.addEventListener('click', async () => {
     const data = await res.json();
     if (res.ok) {
       showToast(`Cache cleared. Deleted ${data.deletedCount} files.`, 'success');
+      resetClientState();
       fetchAdminStats();
     } else throw new Error(data.error);
   } catch (err) {
@@ -196,23 +249,7 @@ btnAdminClearLogins.addEventListener('click', async () => {
   }
 });
 
-adminPasswordForm.addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const newPassword = adminNewPassword.value;
-  try {
-    const res = await fetch('/api/admin/change-password', {
-      method: 'POST',
-      headers: { 'x-auth-token': authToken, 'Content-Type': 'application/json' },
-      body: JSON.stringify({ newPassword })
-    });
-    if (res.ok) {
-      showToast('User password updated successfully!', 'success');
-      adminNewPassword.value = '';
-    } else throw new Error('Failed to update password');
-  } catch (err) {
-    showToast(err.message, 'error');
-  }
-});
+// (Password change form removed)
 
 // ── WebSocket ──────────────────────────────────────────────
 
@@ -228,12 +265,48 @@ function connectWebSocket() {
     }
   };
 
+  ws.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === 'cache-cleared') {
+        resetClientState();
+        showToast('Server cache cleared. Your session has been reset.', 'info');
+      }
+    } catch (e) { /* ignore */ }
+  };
+
   ws.onclose = () => {
     // Reconnect after 3 seconds
     setTimeout(connectWebSocket, 3000);
   };
 }
 
+// Reset all client-side PDF state (used when cache is cleared)
+function resetClientState() {
+  sessionId = null;
+  pdfDoc = null;
+  totalPages = 0;
+  allChapters = [];
+  chapters = [];
+  selectedPages.clear();
+  
+  // Reset UI
+  fileInfo.classList.add('hidden');
+  fileName.textContent = '';
+  filePages.textContent = '';
+  chapterList.innerHTML = '';
+  chapterNone.classList.add('hidden');
+  chapterLoad.classList.add('hidden');
+  chapterSearchWrap.classList.add('hidden');
+  depthControl.classList.add('hidden');
+  pageInput.value = '';
+  previewGrid.innerHTML = '';
+  previewGrid.classList.add('hidden');
+  previewEmpty.classList.remove('hidden');
+  thumbElements = [];
+  updateState();
+}
+
 // ── Sidebar Resize ─────────────────────────────────────────
 
 const SIDEBAR_MIN = 250;