termites 1.0.37 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termites",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "Local multi-terminal manager with web interface",
   "main": "server.js",
   "scripts": {

package/server.js

@@ -113,6 +113,11 @@ class TermitesServer {
         return cookies;
     }
 
+    isAuthenticated(req) {
+        const cookies = this.parseCookies(req.headers.cookie || '');
+        return cookies.session === this.sessionToken;
+    }
+
     // Create a new local terminal
     createTerminal() {
         const terminalId = crypto.randomUUID();
@@ -416,6 +421,81 @@ class TermitesServer {
             return;
         }
 
+        // Change password API
+        if (url === '/api/change-password' && req.method === 'POST') {
+            if (!this.isAuthenticated(req)) {
+                res.writeHead(401, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ success: false, error: 'Not authenticated' }));
+                return;
+            }
+            let body = '';
+            req.on('data', chunk => body += chunk);
+            req.on('end', () => {
+                try {
+                    const { currentPassword, newPassword } = JSON.parse(body);
+                    if (!verifyPassword(currentPassword, this.config.passwordHash)) {
+                        res.writeHead(401, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: false, error: 'Current password is incorrect' }));
+                        return;
+                    }
+                    if (!newPassword || newPassword.length < 4) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: false, error: 'New password must be at least 4 characters' }));
+                        return;
+                    }
+                    this.config.passwordHash = hashPassword(newPassword);
+                    this.config.sessionToken = crypto.randomBytes(32).toString('hex');
+                    this.sessionToken = this.config.sessionToken;
+                    saveConfig(this.config);
+                    res.writeHead(200, {
+                        'Content-Type': 'application/json',
+                        'Set-Cookie': `session=${this.sessionToken}; Path=/; HttpOnly; SameSite=Strict`
+                    });
+                    res.end(JSON.stringify({ success: true }));
+                } catch (e) {
+                    res.writeHead(400, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ success: false, error: 'Invalid request' }));
+                }
+            });
+            return;
+        }
+
+        // Get settings API
+        if (url === '/api/settings' && req.method === 'GET') {
+            if (!this.isAuthenticated(req)) {
+                res.writeHead(401, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ success: false, error: 'Not authenticated' }));
+                return;
+            }
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ success: true, settings: this.config.settings || {} }));
+            return;
+        }
+
+        // Save settings API
+        if (url === '/api/settings' && req.method === 'POST') {
+            if (!this.isAuthenticated(req)) {
+                res.writeHead(401, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ success: false, error: 'Not authenticated' }));
+                return;
+            }
+            let body = '';
+            req.on('data', chunk => body += chunk);
+            req.on('end', () => {
+                try {
+                    const settings = JSON.parse(body);
+                    this.config.settings = settings;
+                    saveConfig(this.config);
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ success: true }));
+                } catch (e) {
+                    res.writeHead(400, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ success: false, error: 'Invalid request' }));
+                }
+            });
+            return;
+        }
+
         // No password set - show setup page
         if (!this.config.passwordHash) {
             res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
@@ -682,8 +762,23 @@ class TermitesServer {
         .client-item.selected { font-weight: bold; }
         .client-item .client-name { font-size: 13px; margin-bottom: 3px; display: flex; align-items: center; }
         .client-item .client-info { font-size: 11px; opacity: 0.6; padding-left: 14px; }
+        .client-item { display: flex; align-items: center; }
+        .client-item .client-main { flex: 1; cursor: pointer; }
+        .close-terminal-btn {
+            background: none; border: none; color: inherit; opacity: 0.4;
+            font-size: 18px; padding: 4px 8px; cursor: pointer; margin-right: 8px;
+        }
+        .close-terminal-btn:hover { opacity: 1; color: #ef4444; }
         .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
         .status-dot.online { background: #22c55e; }
+        .unread-badge {
+            display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+            background: #f59e0b; margin-left: 6px; animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
         .settings-section { padding: 12px 16px; }
         .setting-group { margin-bottom: 16px; }
         .setting-group:last-child { margin-bottom: 0; }
@@ -701,6 +796,33 @@ class TermitesServer {
             background: transparent; color: inherit; cursor: pointer; font-size: 11px;
         }
         .add-btn:hover { opacity: 0.8; }
+        .change-pwd-btn {
+            width: 100%; padding: 8px; border: 1px solid; border-radius: 4px;
+            background: transparent; color: inherit; cursor: pointer; font-size: 13px;
+        }
+        .change-pwd-btn:hover { opacity: 0.8; }
+        .pwd-modal {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.6); z-index: 200; display: none;
+            align-items: center; justify-content: center;
+        }
+        .pwd-modal.show { display: flex; }
+        .pwd-modal-content {
+            background: var(--modal-bg, #1a1a2e); padding: 24px; border-radius: 12px;
+            width: 320px; max-width: 90vw;
+        }
+        .pwd-modal h3 { margin-bottom: 16px; font-size: 16px; }
+        .pwd-modal input {
+            width: 100%; padding: 10px; border: 1px solid; border-radius: 6px;
+            background: transparent; color: inherit; margin-bottom: 12px; font-size: 14px;
+        }
+        .pwd-modal-btns { display: flex; gap: 8px; margin-top: 8px; }
+        .pwd-modal-btns button {
+            flex: 1; padding: 10px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
+        }
+        .pwd-modal-btns .cancel-btn { background: #666; color: #fff; }
+        .pwd-modal-btns .save-btn { background: #22c55e; color: #fff; }
+        .pwd-error { color: #ef4444; font-size: 12px; margin-top: 8px; display: none; }
         /* Mobile toolbar */
         .mobile-toolbar {
             display: none; flex-shrink: 0; padding: 6px 8px; gap: 6px;
@@ -802,6 +924,10 @@ class TermitesServer {
                             <option value="hide">Always hide</option>
                         </select>
                     </div>
+                    <div class="setting-group">
+                        <label>Password</label>
+                        <button id="change-password-btn" class="change-pwd-btn">Change Password</button>
+                    </div>
                 </div>
             </div>
             <div class="drawer-section">
@@ -842,6 +968,19 @@ class TermitesServer {
         </div>
         <div class="history-content" id="history-content"></div>
     </div>
+    <div class="pwd-modal" id="pwd-modal">
+        <div class="pwd-modal-content">
+            <h3>Change Password</h3>
+            <input type="password" id="current-pwd" placeholder="Current password">
+            <input type="password" id="new-pwd" placeholder="New password (min 4 chars)">
+            <input type="password" id="confirm-pwd" placeholder="Confirm new password">
+            <div class="pwd-error" id="pwd-error"></div>
+            <div class="pwd-modal-btns">
+                <button class="cancel-btn" id="pwd-cancel">Cancel</button>
+                <button class="save-btn" id="pwd-save">Save</button>
+            </div>
+        </div>
+    </div>
 
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
@@ -850,6 +989,7 @@ class TermitesServer {
         let ws, term, fitAddon;
         let clients = [];
         let selectedClientId = null;
+        let unreadTerminals = new Set(); // Track terminals with unread output
         // History buffer for iTerm-like scrolling (stores raw output)
         let historyBuffer = [];
         const MAX_HISTORY_SIZE = 100000; // Max characters to store
@@ -935,14 +1075,28 @@ class TermitesServer {
         let currentToolbar = 'auto';
         let modifiers = { ctrl: false, alt: false };
 
-        function loadSettings() {
-            const saved = localStorage.getItem('webshell-settings');
-            if (saved) {
-                const s = JSON.parse(saved);
-                currentTheme = s.theme || currentTheme;
-                currentFont = s.font || currentFont;
-                currentFontSize = s.fontSize || currentFontSize;
-                currentToolbar = s.toolbar || currentToolbar;
+        async function loadSettings() {
+            // Try to load from server first
+            try {
+                const res = await fetch('/api/settings');
+                const data = await res.json();
+                if (data.success && data.settings) {
+                    const s = data.settings;
+                    currentTheme = s.theme || currentTheme;
+                    currentFont = s.font || currentFont;
+                    currentFontSize = s.fontSize || currentFontSize;
+                    currentToolbar = s.toolbar || currentToolbar;
+                }
+            } catch (e) {
+                // Fallback to localStorage
+                const saved = localStorage.getItem('webshell-settings');
+                if (saved) {
+                    const s = JSON.parse(saved);
+                    currentTheme = s.theme || currentTheme;
+                    currentFont = s.font || currentFont;
+                    currentFontSize = s.fontSize || currentFontSize;
+                    currentToolbar = s.toolbar || currentToolbar;
+                }
             }
             document.getElementById('theme-select').value = currentTheme;
             document.getElementById('font-select').value = currentFont;
@@ -952,9 +1106,17 @@ class TermitesServer {
         }
 
         function saveSettings() {
-            localStorage.setItem('webshell-settings', JSON.stringify({
+            const settings = {
                 theme: currentTheme, font: currentFont, fontSize: currentFontSize, toolbar: currentToolbar
-            }));
+            };
+            // Save to localStorage as backup
+            localStorage.setItem('webshell-settings', JSON.stringify(settings));
+            // Save to server
+            fetch('/api/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(settings)
+            }).catch(() => {});
         }
 
         function applyTheme(themeName) {
@@ -1076,6 +1238,53 @@ class TermitesServer {
             document.getElementById('font-select').onchange = e => applyFont(e.target.value);
             document.getElementById('font-size').oninput = e => applyFontSize(parseInt(e.target.value));
             document.getElementById('toolbar-select').onchange = e => applyToolbar(e.target.value);
+
+            // Change password modal
+            const pwdModal = document.getElementById('pwd-modal');
+            const pwdError = document.getElementById('pwd-error');
+            document.getElementById('change-password-btn').onclick = () => {
+                pwdModal.classList.add('show');
+                document.getElementById('current-pwd').value = '';
+                document.getElementById('new-pwd').value = '';
+                document.getElementById('confirm-pwd').value = '';
+                pwdError.style.display = 'none';
+            };
+            document.getElementById('pwd-cancel').onclick = () => pwdModal.classList.remove('show');
+            document.getElementById('pwd-save').onclick = async () => {
+                const currentPwd = document.getElementById('current-pwd').value;
+                const newPwd = document.getElementById('new-pwd').value;
+                const confirmPwd = document.getElementById('confirm-pwd').value;
+                pwdError.style.display = 'none';
+
+                if (newPwd.length < 4) {
+                    pwdError.textContent = 'New password must be at least 4 characters';
+                    pwdError.style.display = 'block';
+                    return;
+                }
+                if (newPwd !== confirmPwd) {
+                    pwdError.textContent = 'Passwords do not match';
+                    pwdError.style.display = 'block';
+                    return;
+                }
+                try {
+                    const res = await fetch('/api/change-password', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ currentPassword: currentPwd, newPassword: newPwd })
+                    });
+                    const data = await res.json();
+                    if (data.success) {
+                        pwdModal.classList.remove('show');
+                        alert('Password changed successfully');
+                    } else {
+                        pwdError.textContent = data.error || 'Failed to change password';
+                        pwdError.style.display = 'block';
+                    }
+                } catch (err) {
+                    pwdError.textContent = 'Network error';
+                    pwdError.style.display = 'block';
+                }
+            };
         }
 
         function setupMobileToolbar() {
@@ -1502,16 +1711,27 @@ class TermitesServer {
             }
             listEl.innerHTML = clients.map(c => {
                 const isSelected = c.id === selectedClientId;
+                const hasUnread = unreadTerminals.has(c.id);
                 const bgColor = isSelected ? t.sidebarSelected : 'transparent';
                 return '<div class="client-item' + (isSelected ? ' selected' : '') + '" ' +
-                    'style="background: ' + bgColor + ';" ' +
-                    'onclick="selectClient(\\'' + c.id + '\\')">' +
+                    'style="background: ' + bgColor + ';">' +
+                    '<div class="client-main" onclick="selectClient(\\'' + c.id + '\\')">' +
                     '<div class="client-name"><span class="status-dot online"></span>' +
-                    c.username + '@' + c.hostname + '</div>' +
-                    '<div class="client-info">' + (c.cwd || '') + ' · ' + (c.platform || '') + '</div></div>';
+                    c.username + '@' + c.hostname +
+                    (hasUnread ? '<span class="unread-badge"></span>' : '') + '</div>' +
+                    '<div class="client-info">' + (c.cwd || '') + ' · ' + (c.platform || '') + '</div></div>' +
+                    '<button class="close-terminal-btn" onclick="event.stopPropagation(); closeTerminal(\\'' + c.id + '\\')" title="Close terminal">×</button></div>';
             }).join('');
         }
 
+        function closeTerminal(clientId) {
+            if (confirm('Close this terminal?')) {
+                if (ws?.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({ type: 'close-terminal', clientId }));
+                }
+            }
+        }
+
         function selectClient(clientId) {
             if (selectedClientId === clientId) {
                 document.getElementById('drawer').classList.remove('open');
@@ -1519,6 +1739,8 @@ class TermitesServer {
                 return;
             }
             selectedClientId = clientId;
+            // Clear unread badge for this terminal
+            unreadTerminals.delete(clientId);
             const client = clients.find(c => c.id === clientId);
             if (client) {
                 document.getElementById('header-title').innerHTML =
@@ -1534,8 +1756,8 @@ class TermitesServer {
             term.focus();
         }
 
-        function init() {
-            loadSettings();
+        async function init() {
+            await loadSettings();
             setupDrawer();
             setupMobileToolbar();
             setupHistoryOverlay();
@@ -1696,6 +1918,12 @@ class TermitesServer {
                             addToHistory(d.data);
                             term.write(d.data);
                             term.scrollToBottom();
+                        } else {
+                            // Mark terminal as having unread output
+                            if (!unreadTerminals.has(d.clientId)) {
+                                unreadTerminals.add(d.clientId);
+                                updateClientList();
+                            }
                         }
                         break;
                 }