Update public/script.js

public/script.js

@@ -1,132 +1,269 @@
-document.addEventListener('DOMContentLoaded', () => {
-  const socket = io();
-  const outputEl = document.getElementById('output');
-  const statusEl = document.getElementById('status');
-  const commandInput = document.getElementById('commandInput');
-  const fileListEl = document.getElementById('fileList');
-  const fileEditor = document.getElementById('fileEditor');
-  const currentFile = { path: null };
-  
-  // Update status indicator
-  socket.on('connect', () => {
-    statusEl.textContent = 'Connected';
-    statusEl.className = 'status-indicator connected';
-  });
-  
-  socket.on('disconnect', () => {
-    statusEl.textContent = 'Disconnected';
-    statusEl.className = 'status-indicator disconnected';
-  });
-  
-  // Handle output from server
-  socket.on('output', (data) => {
-    outputEl.innerHTML += data + '\n';
-    outputEl.scrollTop = outputEl.scrollHeight;
-  });
-  
-  // Handle command input
-  commandInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-      const command = commandInput.value.trim();
-      if (command) {
-        outputEl.innerHTML += `$ ${command}\n`;
-        socket.emit('command', command);
-        commandInput.value = '';
-      }
-    }
-  });
-  
-  // Clone repository
-  document.getElementById('cloneBtn').addEventListener('click', () => {
-    const repoUrl = document.getElementById('repoUrl').value.trim();
-    if (repoUrl) {
-      socket.emit('clone', repoUrl);
-    }
-  });
-  
-  // Install dependencies
-  document.getElementById('installBtn').addEventListener('click', () => {
-    const packageManager = document.getElementById('packageManager').value;
-    socket.emit('install', packageManager);
-  });
-  
-  // Start process
-  document.getElementById('startBtn').addEventListener('click', () => {
-    const command = document.getElementById('startCommand').value.trim();
-    if (command) {
-      socket.emit('start', command);
-    }
-  });
-  
-  // Stop process
-  document.getElementById('stopBtn').addEventListener('click', () => {
-    socket.emit('stop');
-  });
-  
-  // PM2 commands
-  document.getElementById('pm2Btn').addEventListener('click', () => {
-    const command = document.getElementById('pm2Command').value;
-    socket.emit('pm2', command);
-  });
-  
-  // File browser functionality
-  function loadFileList() {
-    socket.emit('list-files', '', (response) => {
-      if (response.error) {
-        outputEl.innerHTML += `Error listing files: ${response.error}\n`;
-        return;
-      }
-      
-      fileListEl.innerHTML = '';
-      response.files.forEach(file => {
-        const fileEl = document.createElement('div');
-        fileEl.className = 'file-item';
-        fileEl.textContent = file;
-        fileEl.addEventListener('click', () => {
-          socket.emit('read-file', file, (fileResponse) => {
-            if (fileResponse.error) {
-              outputEl.innerHTML += `Error reading file: ${fileResponse.error}\n`;
-              return;
-            }
-            currentFile.path = file;
-            fileEditor.value = fileResponse.content;
-          });
-        });
-        fileListEl.appendChild(fileEl);
-      });
-    });
+// ─────────────────────────────────────────────────────────────────────────────
+//                             Frontend Logic
+// ─────────────────────────────────────────────────────────────────────────────
+
+const socket = io();
+let currentUserId = null;
+let isAdmin = false;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 1) AUTHENTICATION (Register, Login, Logout)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function doRegister() {
+  const username = document.getElementById('username').value.trim();
+  const password = document.getElementById('password').value.trim();
+  const clientId = document.getElementById('clientId').value.trim();
+  if (!username || !password || !clientId) {
+    showAuthMessage('All fields required for register.');
+    return;
   }
-  
-  // Save file
-  document.getElementById('saveFileBtn').addEventListener('click', () => {
-    if (!currentFile.path) return;
-    
-    socket.emit('write-file', {
-      filePath: currentFile.path,
-      content: fileEditor.value
-    }, (response) => {
-      if (response.error) {
-        outputEl.innerHTML += `Error saving file: ${response.error}\n`;
-      } else {
-        outputEl.innerHTML += `File ${currentFile.path} saved successfully\n`;
-      }
-    });
-  });
-  
-  // Admin controls
-  document.getElementById('banBtn').addEventListener('click', () => {
-    const password = document.getElementById('adminPassword').value;
-    if (!password) return;
-    
-    socket.emit('admin', {
-      password: password,
-      command: 'ban'
-    });
+  socket.emit('register', { username, password, clientId });
+}
+
+function doLogin() {
+  const username = document.getElementById('username').value.trim();
+  const password = document.getElementById('password').value.trim();
+  if (!username || !password) {
+    showAuthMessage('Username & password required.');
+    return;
+  }
+  socket.emit('login', { username, password });
+}
+
+function doLogout() {
+  location.reload(); // Full refresh to clear session
+}
+
+// Handle auth responses
+socket.on('registerResponse', (res) => {
+  const msgEl = document.getElementById('authMessage');
+  if (res.success) {
+    msgEl.style.color = 'green';
+    msgEl.innerText = `Registered! Your ID: ${res.userId}`;
+  } else {
+    msgEl.style.color = 'red';
+    msgEl.innerText = res.message;
+  }
+});
+
+socket.on('loginResponse', (res) => {
+  const msgEl = document.getElementById('authMessage');
+  if (res.success) {
+    currentUserId = res.userId;
+    isAdmin = res.isAdmin;
+    msgEl.innerText = '';
+    showMainPanel();
+  } else {
+    msgEl.style.color = 'red';
+    msgEl.innerText = res.message;
+  }
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 2) SHOW MAIN PANEL AFTER LOGIN
+// ─────────────────────────────────────────────────────────────────────────────
+
+function showMainPanel() {
+  document.getElementById('authCard').style.display = 'none';
+  document.getElementById('mainPanel').style.display = 'block';
+  document.getElementById('displayUserId').innerText = currentUserId;
+  if (isAdmin) {
+    document.getElementById('adminBadge').style.display = 'inline-block';
+    document.getElementById('adminPanel').style.display = 'block';
+    fetchUsers();
+  }
+  // Start periodic stats & keep-alive ping
+  requestLiveStats();
+  startPing();
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 3) LIVE STATS (uptime, system status, user counts)
+// ─────────────────────────────────────────────────────────────────────────────
+
+socket.on('serverRuntime', (uptimeStr) => {
+  document.getElementById('uptime').innerText = uptimeStr;
+});
+
+socket.on('systemStatus', (stats) => {
+  document.getElementById('cpu').innerText = stats.cpu + '%';
+  document.getElementById('mem').innerText = stats.memory + '%';
+  document.getElementById('disk').innerText = stats.disk + '%';
+});
+
+socket.on('userStats', (uStats) => {
+  document.getElementById('totalUsers').innerText = uStats.total;
+  document.getElementById('activeUsers').innerText = uStats.active;
+  document.getElementById('bannedUsers').innerText = uStats.banned;
+});
+
+function requestLiveStats() {
+  socket.emit('getServerRuntime');
+  socket.emit('getSystemStatus');
+  socket.emit('getUserStats');
+  setTimeout(requestLiveStats, 5000);
+}
+
+// Keep-alive ping every 10 seconds to prevent HF from killing idle socket
+function startPing() {
+  setInterval(() => {
+    socket.emit('ping');
+  }, 10000);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 4) ADMIN DASHBOARD (Fetch/list users, Ban/Unban/Delete/MakeAdmin/RemoveAdmin)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function fetchUsers() {
+  socket.emit('adminGetUsers');
+}
+
+socket.on('adminUserList', (data) => {
+  const container = document.getElementById('adminUserList');
+  container.innerHTML = '';
+  if (!data.users.length) {
+    container.innerText = 'No users found.';
+    return;
+  }
+  data.users.forEach((u) => {
+    const row = document.createElement('div');
+    row.className = 'user-row';
+    row.innerHTML = `
+      <span><b>${u.username}</b> (ID: ${u.id}) ${u.isAdmin ? '[Admin]' : ''}</span>
+      <button onclick="adminBan('${u.id}')">Ban</button>
+      <button onclick="adminUnban('${u.id}')">Unban</button>
+      <button onclick="adminDelete('${u.id}')">Delete</button>
+      <button onclick="adminMakeAdmin('${u.id}')">Make Admin</button>
+      <button onclick="adminRemoveAdmin('${u.id}')">Remove Admin</button>
+    `;
+    container.appendChild(row);
   });
-  
-  // Initial load
-  loadFileList();
-  
-  // Focus command input on page load
-  commandInput.focus();
+});
+
+socket.on('adminBanResponse', (res) => {
+  showAdminMessage(res.message, res.success);
+  fetchUsers();
+});
+socket.on('adminUnbanResponse', (res) => {
+  showAdminMessage(res.message, res.success);
+  fetchUsers();
+});
+socket.on('adminDeleteUserResponse', (res) => {
+  showAdminMessage(res.message, res.success);
+  fetchUsers();
+});
+socket.on('adminMakeAdminResponse', (res) => {
+  showAdminMessage(res.message, res.success);
+  fetchUsers();
+});
+socket.on('adminRemoveAdminResponse', (res) => {
+  showAdminMessage(res.message, res.success);
+  fetchUsers();
+});
+
+function adminBan(userId) {
+  socket.emit('adminBanUser', userId);
+}
+function adminUnban(userId) {
+  socket.emit('adminUnbanUser', userId);
+}
+function adminDelete(userId) {
+  socket.emit('adminDeleteUser', userId);
+}
+function adminMakeAdmin(userId) {
+  socket.emit('adminMakeAdmin', userId);
+}
+function adminRemoveAdmin(userId) {
+  socket.emit('adminRemoveAdmin', userId);
+}
+
+function showAdminMessage(msg, success) {
+  const el = document.getElementById('adminMessage');
+  el.style.color = success ? 'green' : 'red';
+  el.innerText = msg;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 5) USER CONSOLE (Start session, send commands, display output)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function startSession() {
+  if (!currentUserId) return;
+  socket.emit('start', currentUserId);
+}
+
+function sendCommand() {
+  const cmd = document.getElementById('commandInput').value.trim();
+  if (!cmd) return;
+  appendOutput(`> ${cmd}`);
+  socket.emit('command', { userId: currentUserId, message: cmd });
+  document.getElementById('commandInput').value = '';
+}
+
+socket.on('message', (data) => {
+  if (typeof data === 'string') {
+    appendOutput(data);
+  } else {
+    appendOutput(JSON.stringify(data, null, 2));
+  }
+});
+
+function appendOutput(text) {
+  const out = document.getElementById('consoleOutput');
+  out.innerText += text + '\n';
+  out.scrollTop = out.scrollHeight;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 6) PASSWORD RESET (Request token, submit reset)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function requestReset() {
+  const clientId = document.getElementById('resetClientId').value.trim();
+  if (!clientId) {
+    showResetMessage('Enter your Device ID first.', false);
+    return;
+  }
+  socket.emit('forgotPassword', clientId);
+}
+
+socket.on('resetTokenGenerated', ({ username, resetToken }) => {
+  showResetMessage(`Token generated for ${username}: ${resetToken}`, true);
+});
+
+socket.on('resetTokenError', (msg) => {
+  showResetMessage(msg, false);
+});
+
+function submitReset() {
+  const token = document.getElementById('resetToken').value.trim();
+  const newPass = document.getElementById('newPassword').value.trim();
+  if (!token || !newPass) {
+    showResetMessage('Token & new password are required.', false);
+    return;
+  }
+  socket.emit('resetPassword', { resetToken: token, newPassword: newPass });
+}
+
+socket.on('passwordResetSuccess', (msg) => {
+  showResetMessage(msg, true);
+});
+socket.on('passwordResetError', (msg) => {
+  showResetMessage(msg, false);
+});
+
+function showResetMessage(msg, success) {
+  const el = document.getElementById('resetMessage');
+  el.style.color = success ? 'green' : 'red';
+  el.innerText = msg;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 7) HANDLE DISCONNECTS (optional cleanup)
+// ─────────────────────────────────────────────────────────────────────────────
+
+socket.on('disconnect', () => {
+  appendOutput('📴 Disconnected from server.');
 });