Update index.html

index.html

@@ -303,8 +303,127 @@
     </div>
 
     <script>
+        // IndexedDB Database Manager
+        class DatabaseManager {
+            constructor() {
+                this.dbName = 'SSHProxyManager';
+                this.dbVersion = 1;
+                this.storeName = 'servers';
+                this.db = null;
+            }
+
+            async init() {
+                return new Promise((resolve, reject) => {
+                    const request = indexedDB.open(this.dbName, this.dbVersion);
+
+                    request.onerror = (event) => {
+                        console.error('Database error:', event.target.error);
+                        reject(event.target.error);
+                    };
+
+                    request.onsuccess = (event) => {
+                        this.db = event.target.result;
+                        resolve();
+                    };
+
+                    request.onupgradeneeded = (event) => {
+                        const db = event.target.result;
+                        if (!db.objectStoreNames.contains(this.storeName)) {
+                            const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
+                            // Create indexes for searching
+                            store.createIndex('name', 'name', { unique: false });
+                            store.createIndex('sshHost', 'sshHost', { unique: false });
+                            store.createIndex('status', 'status', { unique: false });
+                        }
+                    };
+                });
+            }
+
+            async getAllServers() {
+                return new Promise((resolve, reject) => {
+                    if (!this.db) {
+                        reject(new Error('Database not initialized'));
+                        return;
+                    }
+
+                    const transaction = this.db.transaction([this.storeName], 'readonly');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.getAll();
+
+                    request.onsuccess = () => resolve(request.result);
+                    request.onerror = () => reject(request.error);
+                });
+            }
+
+            async saveServer(server) {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.put(server);
+
+                    request.onsuccess = () => resolve(request.result);
+                    request.onerror = () => reject(request.error);
+                });
+            }
+
+            async deleteServer(serverId) {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.delete(serverId);
+
+                    request.onsuccess = () => resolve();
+                    request.onerror = () => reject(request.error);
+                });
+            }
+
+            async searchServers(query) {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readonly');
+                    const store = transaction.objectStore(this.storeName);
+                    const nameIndex = store.index('name');
+                    const request = nameIndex.getAll();
+
+                    request.onsuccess = () => {
+                        const servers = request.result;
+                        const results = servers.filter(server => 
+                            server.name.toLowerCase().includes(query.toLowerCase()) ||
+                            server.sshHost.toLowerCase().includes(query.toLowerCase())
+                        );
+                        resolve(results);
+                    };
+                    request.onerror = () => reject(request.error);
+                });
+            }
+
+            async updateServerStatus(serverId, status) {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.get(serverId);
+
+                    request.onsuccess = () => {
+                        const server = request.result;
+                        if (server) {
+                            server.status = status;
+                            server.lastStateChange = new Date().toISOString();
+                            const updateRequest = store.put(server);
+                            updateRequest.onsuccess = () => resolve(server);
+                            updateRequest.onerror = () => reject(updateRequest.error);
+                        } else {
+                            reject(new Error('Server not found'));
+                        }
+                    };
+                    request.onerror = () => reject(request.error);
+                });
+            }
+        }
+
+        // Initialize database manager
+        const dbManager = new DatabaseManager();
+        let servers = [];  // Keep this for compatibility with existing code
+
         // Server management
-        let servers = JSON.parse(localStorage.getItem('sshProxyServers')) || [];
         let currentServerId = null;
         let term;
         let socket;
@@ -384,9 +503,16 @@
         }
 
         // Initialize the app
-        document.addEventListener('DOMContentLoaded', () => {
-            renderServers();
-            setupEventListeners();
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                await dbManager.init();
+                servers = await dbManager.getAllServers();
+                renderServers();
+                setupEventListeners();
+            } catch (error) {
+                console.error('Failed to initialize database:', error);
+                showNotification('Failed to load server configurations', 'red');
+            }
         });
 
         // Tab switching
@@ -739,34 +865,35 @@
         }
 
         // Delete server
-        function deleteServer() {
+        async function deleteServer() {
             if (!currentServerId) return;
             
             const server = servers.find(s => s.id === currentServerId);
             if (!server) return;
             
-            // Show confirmation dialog
             if (confirm(`Are you sure you want to delete the server "${server.name}"?`)) {
-                // Check if server is connected
-                if (server.status === 'connected') {
-                    disconnectFromServer(server.id);
+                try {
+                    if (server.status === 'connected') {
+                        disconnectFromServer(server.id);
+                    }
+                    
+                    // Delete from IndexedDB
+                    await dbManager.deleteServer(currentServerId);
+                    
+                    // Update local array
+                    servers = servers.filter(s => s.id !== currentServerId);
+                    renderServers();
+                    closeModal();
+                    showNotification('Server configuration deleted', 'green');
+                } catch (error) {
+                    console.error('Failed to delete server:', error);
+                    showNotification('Failed to delete server configuration', 'red');
                 }
-                
-                // Remove server from array
-                servers = servers.filter(s => s.id !== currentServerId);
-                saveServers();
-                renderServers();
-                
-                // Close modal
-                closeModal();
-                
-                // Show notification
-                showNotification('Server configuration deleted', 'green');
             }
         }
 
         // Save server
-        function saveServer() {
+        async function saveServer() {
             const mode = this.dataset.mode;
             const serverId = this.dataset.id;
             
@@ -787,42 +914,47 @@
             
             // Validate required fields
             if (!server.name || !server.sshHost || !server.sshUsername || !server.proxyHost) {
-                alert('Please fill in all required fields');
+                showNotification('Please fill in all required fields', 'red');
                 return;
             }
-            
-            // Encrypt sensitive data before storage
-            const sensitiveData = {
-                sshPassword: server.sshPassword,
-                proxyPassword: server.proxyPassword
-            };
-            server.encryptedCredentials = encryptCredentials(sensitiveData);
-            delete server.sshPassword;
-            delete server.proxyPassword;
-            
-            if (mode === 'edit') {
-                // Update existing server
-                const index = servers.findIndex(s => s.id === serverId);
-                if (index !== -1) {
+
+            try {
+                // Encrypt sensitive data
+                const sensitiveData = {
+                    sshPassword: server.sshPassword,
+                    proxyPassword: server.proxyPassword
+                };
+                server.encryptedCredentials = await encryptCredentials(sensitiveData);
+                delete server.sshPassword;
+                delete server.proxyPassword;
+
+                if (mode === 'edit') {
                     server.id = serverId;
-                    server.status = servers[index].status; // Preserve status
-                    servers[index] = server;
+                } else {
+                    server.id = Date.now().toString();
                 }
-            } else {
-                // Add new server
-                server.id = Date.now().toString();
-                servers.push(server);
+
+                // Save to IndexedDB
+                await dbManager.saveServer(server);
+                
+                // Update local array
+                if (mode === 'edit') {
+                    const index = servers.findIndex(s => s.id === serverId);
+                    if (index !== -1) {
+                        servers[index] = server;
+                    }
+                } else {
+                    servers.push(server);
+                }
+
+                renderServers();
+                document.getElementById('servers-tab').click();
+                showNotification(`Server ${mode === 'edit' ? 'updated' : 'added'} successfully`, 'green');
+                resetForm();
+            } catch (error) {
+                console.error('Failed to save server:', error);
+                showNotification('Failed to save server configuration', 'red');
             }
-            
-            saveServers();
-            renderServers();
-            document.getElementById('servers-tab').click();
-            
-            // Show notification
-            showNotification(`Server ${mode === 'edit' ? 'updated' : 'added'} successfully`, 'green');
-            
-            // Reset form
-            resetForm();
         }
 
         // Reset form
@@ -883,69 +1015,70 @@
         }
 
         // Update server status
-        function updateConnectionState(serverId, state, error = null) {
-            const server = servers.find(s => s.id === serverId);
-            if (server) {
-                server.status = state;
-                server.lastError = error;
-                server.lastStateChange = new Date().toISOString();
-                saveServers();
+        async function updateConnectionState(serverId, state, error = null) {
+            try {
+                const updatedServer = await dbManager.updateServerStatus(serverId, state);
+                const index = servers.findIndex(s => s.id === serverId);
+                if (index !== -1) {
+                    servers[index] = updatedServer;
+                }
                 renderServers();
                 updateUIForConnectionState(state, error);
+            } catch (error) {
+                console.error('Failed to update server status:', error);
+                showNotification('Failed to update server status', 'red');
             }
         }
 
         // Export servers
-        function exportServers() {
-            const dataStr = JSON.stringify(servers, null, 2);
-            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
-            
-            const exportName = 'ssh-proxy-servers-' + new Date().toISOString().slice(0, 10) + '.json';
-            
-            const linkElement = document.createElement('a');
-            linkElement.setAttribute('href', dataUri);
-            linkElement.setAttribute('download', exportName);
-            linkElement.click();
-            
-            // Show notification
-            showNotification('Server configurations exported successfully', 'green');
+        async function exportServers() {
+            try {
+                const allServers = await dbManager.getAllServers();
+                const dataStr = JSON.stringify(allServers, null, 2);
+                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+                
+                const exportName = 'ssh-proxy-servers-' + new Date().toISOString().slice(0, 10) + '.json';
+                
+                const linkElement = document.createElement('a');
+                linkElement.setAttribute('href', dataUri);
+                linkElement.setAttribute('download', exportName);
+                linkElement.click();
+                
+                showNotification('Server configurations exported successfully', 'green');
+            } catch (error) {
+                console.error('Failed to export servers:', error);
+                showNotification('Failed to export server configurations', 'red');
+            }
         }
 
         // Import servers
-        function importServers(event) {
+        async function importServers(event) {
             const file = event.target.files[0];
             if (!file) return;
             
             const reader = new FileReader();
-            reader.onload = (e) => {
+            reader.onload = async (e) => {
                 try {
                     const importedServers = JSON.parse(e.target.result);
                     if (Array.isArray(importedServers) && importedServers.length > 0) {
-                        // Merge with existing servers, avoiding duplicates
-                        const existingIds = servers.map(s => s.id);
-                        const newServers = importedServers.filter(s => !existingIds.includes(s.id));
-                        
-                        if (newServers.length > 0) {
-                            servers = [...servers, ...newServers];
-                            saveServers();
-                            renderServers();
-                            
-                            // Show notification
-                            showNotification(`Imported ${newServers.length} server configuration(s)`, 'green');
-                        } else {
-                            // Show notification
-                            showNotification('No new server configurations to import', 'yellow');
+                        // Save each server to IndexedDB
+                        for (const server of importedServers) {
+                            await dbManager.saveServer(server);
                         }
+                        
+                        // Update local array
+                        servers = await dbManager.getAllServers();
+                        renderServers();
+                        
+                        showNotification(`Imported ${importedServers.length} server configuration(s)`, 'green');
                     } else {
-                        // Show notification
-                        showNotification('Invalid server configurations file', 'red');
+                        showNotification('No valid server configurations found', 'yellow');
                     }
                 } catch (error) {
-                    // Show notification
-                    showNotification('Error parsing server configurations file', 'red');
+                    console.error('Failed to import servers:', error);
+                    showNotification('Failed to import server configurations', 'red');
                 }
                 
-                // Reset file input
                 event.target.value = '';
             };
             reader.readAsText(file);
@@ -1051,10 +1184,35 @@
             term.setOption('theme', themeConfig);
         }
 
-        // Add password encryption for stored credentials
-        function encryptCredentials(data) {
-            // Use a proper encryption library like CryptoJS
-            return btoa(JSON.stringify(data)); // Basic encoding for example
+        // Enhanced encryption using WebCrypto API
+        async function encryptCredentials(data) {
+            const encoder = new TextEncoder();
+            const key = await window.crypto.subtle.generateKey(
+                {
+                    name: "AES-GCM",
+                    length: 256
+                },
+                true,
+                ["encrypt", "decrypt"]
+            );
+            
+            const iv = window.crypto.getRandomValues(new Uint8Array(12));
+            const encoded = encoder.encode(JSON.stringify(data));
+            
+            const encrypted = await window.crypto.subtle.encrypt(
+                {
+                    name: "AES-GCM",
+                    iv: iv
+                },
+                key,
+                encoded
+            );
+            
+            return {
+                encrypted: Array.from(new Uint8Array(encrypted)),
+                iv: Array.from(iv),
+                key: await exportKey(key)
+            };
         }
 
         // Enhanced error handling
@@ -1096,12 +1254,19 @@
             };
         }
 
-        const debouncedSearch = debounce((searchTerm) => {
-            const serverCards = document.querySelectorAll('.server-card');
-            serverCards.forEach(card => {
-                const name = card.querySelector('.server-name').textContent.toLowerCase();
-                card.classList.toggle('hidden', !name.includes(searchTerm.toLowerCase()));
-            });
+        const debouncedSearch = debounce(async (searchTerm) => {
+            try {
+                const results = await dbManager.searchServers(searchTerm);
+                const serverCards = document.querySelectorAll('.server-card');
+                serverCards.forEach(card => {
+                    const serverId = card.dataset.id;
+                    const found = results.some(server => server.id === serverId);
+                    card.classList.toggle('hidden', !found);
+                });
+            } catch (error) {
+                console.error('Failed to search servers:', error);
+                showNotification('Failed to search servers', 'red');
+            }
         }, 300);
 
         // Add accessibility