imcp 0.1.5 → 0.1.6

package/src/web/public/js/settings.js

@@ -0,0 +1,314 @@
+import { buildUrlWithFlights } from './flights/flights.js';
+
+// Toast notification function
+function showToast(message, type = 'success') {
+    const toastContainer = document.querySelector('.toast-container');
+    if (!toastContainer) return;
+
+    const toastId = `toast-${Date.now()}`;
+    const toastHTML = `
+        <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                    ${message}
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    `;
+    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
+    const toastElement = document.getElementById(toastId);
+    const toast = new bootstrap.Toast(toastElement, { delay: 3000 });
+    toast.show();
+    toastElement.addEventListener('hidden.bs.toast', () => {
+        toastElement.remove();
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    // All DOM element queries and event listeners must be inside this block!
+    const settingsForm = document.getElementById('settingsForm');
+    const nodePathInput = document.getElementById('nodePath');
+    const browserPathInput = document.getElementById('browserPath');
+    const systemEnvironmentsDiv = document.getElementById('systemEnvironments');
+    
+    // Python Environments elements
+    const pythonEnvsContainer = document.getElementById('pythonEnvsContainer');
+    const addPythonEnvButton = document.getElementById('addPythonEnvButton');
+    const pythonEnvsLoadingMsg = document.getElementById('pythonEnvsLoadingMsg');
+    
+    // User Configurations elements
+    const userConfigurationsContainer = document.getElementById('userConfigurationsContainer');
+    const addUserConfigButton = document.getElementById('addUserConfigButton');
+    const userConfigLoadingMsg = document.getElementById('userConfigLoadingMsg');
+    
+    const cancelButton = document.getElementById('cancelButton');
+    const setupButton = document.getElementById('setupButton');
+
+// (Removed duplicate showToast function here)
+
+
+    async function loadSettings() {
+        try {
+            const response = await fetch('/api/settings');
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+            }
+            const apiResponse = await response.json();
+            if (apiResponse.success && apiResponse.data) {
+                const settings = apiResponse.data;
+                
+                // Populate Python Environments
+                if(pythonEnvsLoadingMsg) pythonEnvsLoadingMsg.remove(); // Remove loading message
+                pythonEnvsContainer.innerHTML = ''; // Clear previous entries
+                
+                if (settings.pythonEnvs && Object.keys(settings.pythonEnvs).length > 0) {
+                    Object.entries(settings.pythonEnvs).forEach(([server, path]) => {
+                        renderPythonEnvInput(server, path);
+                    });
+                } else if (settings.pythonEnv) {
+                    // Handle legacy pythonEnv
+                    renderPythonEnvInput('system', settings.pythonEnv);
+                } else {
+                    if (!pythonEnvsContainer.querySelector('.python-env-row')) { // Add placeholder if no rows exist
+                        const p = document.createElement('p');
+                        p.className = 'text-gray-500 python-env-placeholder';
+                        p.textContent = 'No Python environments defined. Click "Add Python Environment" to add one.';
+                        pythonEnvsContainer.appendChild(p);
+                    }
+                }
+                
+                nodePathInput.value = settings.nodePath || '';
+                browserPathInput.value = settings.browserPath || '';
+
+                // Populate System Environments
+                systemEnvironmentsDiv.innerHTML = ''; // Clear loading message
+                if (settings.systemEnvironments && Object.keys(settings.systemEnvironments).length > 0) {
+                    // Create a modern, scrollable list (not a table)
+                    const list = document.createElement('div');
+                    list.className = 'flex flex-col';
+
+                    Object.entries(settings.systemEnvironments).forEach(([key, value], idx) => {
+                        const item = document.createElement('div');
+                        item.className =
+                            'flex flex-col sm:flex-row sm:items-center bg-white rounded-md border border-gray-200 px-4 py-2 shadow-sm hover:shadow transition group';
+                        item.innerHTML = `
+                            <div class="flex items-center min-w-0 w-full sm:w-1/4 sm:mb-0">
+                                <i class='bx bx-cog text-blue-400 mr-2'></i>
+                                <span class="font-mono font-semibold text-gray-800 text-base truncate" title="${key}">${key}</span>
+                            </div>
+                            <div class="flex-1 min-w-0 break-all text-gray-700 text-sm pl-7 sm:pl-4">
+                                ${value}
+                            </div>
+                        `;
+                        list.appendChild(item);
+                    });
+
+                    // Restore frame styling for the new layout
+                    systemEnvironmentsDiv.classList.remove('shadow');
+                    systemEnvironmentsDiv.classList.add('rounded-lg', 'bg-white', 'border', 'border-gray-200', 'border-1');
+                    systemEnvironmentsDiv.classList.remove('border-2', 'border-4', 'border-8');
+                    systemEnvironmentsDiv.classList.add('p-0');
+                    systemEnvironmentsDiv.style.padding = '0.5rem 0.5rem 0.5rem 0.5rem';
+                    systemEnvironmentsDiv.appendChild(list);
+                } else {
+                    systemEnvironmentsDiv.innerHTML = '<p class="text-gray-500">No system environment variables loaded or available.</p>';
+                }
+
+                // Populate User Configurations
+                if(userConfigLoadingMsg) userConfigLoadingMsg.remove(); // Remove loading message
+                userConfigurationsContainer.innerHTML = ''; // Clear previous entries
+                if (settings.userConfigurations && Object.keys(settings.userConfigurations).length > 0) {
+                    Object.entries(settings.userConfigurations).forEach(([key, value]) => {
+                        renderUserConfigInput(key, value);
+                    });
+                } else {
+                    if (!userConfigurationsContainer.querySelector('.user-config-row')) { // Add placeholder if no rows exist
+                        const p = document.createElement('p');
+                        p.className = 'text-gray-500 user-config-placeholder';
+                        p.textContent = 'No user configurations defined. Click "Add User Configuration" to add one.';
+                        userConfigurationsContainer.appendChild(p);
+                    }
+                }
+
+            } else {
+                throw new Error(apiResponse.error || 'Failed to load settings.');
+            }
+        } catch (error) {
+            console.error('Error loading settings:', error);
+            showToast(`Error loading settings: ${error.message}`, 'danger');
+            systemEnvironmentsDiv.innerHTML = `<p class="text-red-500">Error loading environment variables: ${error.message}</p>`;
+            if(userConfigLoadingMsg) userConfigLoadingMsg.textContent = `Error loading user configurations: ${error.message}`;
+        }
+    }
+
+    function renderPythonEnvInput(server = 'system', path = '') {
+        const placeholder = pythonEnvsContainer.querySelector('.python-env-placeholder');
+        if (placeholder) placeholder.remove();
+
+        const uniqueId = `python-env-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+        const div = document.createElement('div');
+        div.className = 'python-env-row flex items-center gap-3 mb-2';
+        div.innerHTML = `
+            <input type="text" value="${server}" class="form-input form-control w-1/3 px-3 py-2 rounded-md python-env-server" placeholder="Server Name (e.g., system)">
+            <input type="text" value="${path}" class="form-input form-control w-2/3 px-3 py-2 rounded-md python-env-path" placeholder="e.g., /usr/bin/python3 or C:/Python39/python.exe">
+            <button type="button" class="btn btn-danger btn-sm remove-python-env-button flex items-center">
+                <i class='bx bx-trash'></i>
+            </button>
+        `;
+        pythonEnvsContainer.appendChild(div);
+        div.querySelector('.remove-python-env-button').addEventListener('click', function() {
+            this.closest('.python-env-row').remove();
+            if (!pythonEnvsContainer.querySelector('.python-env-row')) { // Add placeholder if no rows exist after removal
+                const p = document.createElement('p');
+                p.className = 'text-gray-500 python-env-placeholder';
+                p.textContent = 'No Python environments defined. Click "Add Python Environment" to add one.';
+                pythonEnvsContainer.appendChild(p);
+            }
+        });
+    }
+
+    function renderUserConfigInput(key = '', value = '') {
+        const placeholder = userConfigurationsContainer.querySelector('.user-config-placeholder');
+        if (placeholder) placeholder.remove();
+
+        const uniqueId = `user-config-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+        const div = document.createElement('div');
+        div.className = 'user-config-row flex items-center gap-3 mb-2';
+        const isSecret = key.toLowerCase().includes('key');
+        const valueInputType = isSecret ? 'password' : 'text';
+
+        // Key Input
+        const keyInputHTML = `<input type="text" value="${key}" class="form-input form-control w-1/3 px-3 py-2 rounded-md user-config-key" placeholder="Key">`;
+
+        // Value Input & Eye Icon (if secret)
+        let valueSectionHTML;
+        if (isSecret) {
+            valueSectionHTML = `
+                <div class="relative w-2/3">
+                    <input type="${valueInputType}" value="${value}" class="form-input form-control w-full px-3 py-2 rounded-md user-config-value pr-10" placeholder="Value">
+                    <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 toggle-visibility-button" style="background: transparent; border: none;">
+                        <i class='bx bx-show text-lg'></i>
+                    </button>
+                </div>
+            `;
+        } else {
+            valueSectionHTML = `<input type="${valueInputType}" value="${value}" class="form-input form-control w-2/3 px-3 py-2 rounded-md user-config-value" placeholder="Value">`;
+        }
+
+        // Remove Button
+        const removeButtonHTML = `
+            <button type="button" class="btn btn-danger btn-sm remove-user-config-button flex items-center">
+                <i class='bx bx-trash'></i>
+            </button>
+        `;
+
+        div.innerHTML = keyInputHTML + valueSectionHTML + removeButtonHTML;
+        userConfigurationsContainer.appendChild(div);
+
+        if (isSecret) {
+            const toggleButton = div.querySelector('.toggle-visibility-button');
+            const valueInput = div.querySelector('.user-config-value');
+            const eyeIcon = toggleButton.querySelector('i');
+
+            toggleButton.addEventListener('click', (e) => {
+                e.preventDefault(); // Prevent form submission if inside a form
+                if (valueInput.type === 'password') {
+                    valueInput.type = 'text';
+                    eyeIcon.classList.remove('bx-show');
+                    eyeIcon.classList.add('bx-hide');
+                } else {
+                    valueInput.type = 'password';
+                    eyeIcon.classList.remove('bx-hide');
+                    eyeIcon.classList.add('bx-show');
+                }
+            });
+        }
+
+        div.querySelector('.remove-user-config-button').addEventListener('click', function() {
+            this.closest('.user-config-row').remove();
+            if (!userConfigurationsContainer.querySelector('.user-config-row')) { // Add placeholder if no rows exist after removal
+                const p = document.createElement('p');
+                p.className = 'text-gray-500 user-config-placeholder';
+                p.textContent = 'No user configurations defined. Click "Add User Configuration" to add one.';
+                userConfigurationsContainer.appendChild(p);
+            }
+        });
+    }
+
+
+    async function saveSettings(event) {
+        event.preventDefault();
+        setupButton.disabled = true;
+        setupButton.innerHTML = `<i class='bx bx-loader-alt bx-spin mr-2'></i>Saving...`;
+
+        const pythonEnvs = {};
+        document.querySelectorAll('.python-env-row').forEach(row => {
+            const serverInput = row.querySelector('.python-env-server');
+            const pathInput = row.querySelector('.python-env-path');
+            if (serverInput && pathInput && serverInput.value.trim()) {
+                pythonEnvs[serverInput.value.trim()] = pathInput.value.trim();
+            }
+        });
+        
+        const userConfigs = {};
+        document.querySelectorAll('.user-config-row').forEach(row => {
+            const keyInput = row.querySelector('.user-config-key');
+            const valueInput = row.querySelector('.user-config-value');
+            if (keyInput && valueInput && keyInput.value.trim()) {
+                userConfigs[keyInput.value.trim()] = valueInput.value.trim();
+            }
+        });
+
+        const settingsData = {
+            pythonEnvs: pythonEnvs,
+            // Include pythonEnv for backward compatibility (use system value if available)
+            pythonEnv: pythonEnvs['system'] || null,
+            nodePath: nodePathInput.value.trim() || null,
+            browserPath: browserPathInput.value.trim() || null,
+            userConfigurations: userConfigs,
+        };
+
+        try {
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(settingsData),
+            });
+
+            const apiResponse = await response.json();
+
+            if (response.ok && apiResponse.success) {
+                showToast('Settings saved successfully!', 'success');
+                // Optionally, reload settings to reflect any backend-applied defaults
+                await loadSettings();
+            } else {
+                throw new Error(apiResponse.error || `HTTP error! status: ${response.status}`);
+            }
+        } catch (error) {
+            console.error('Error saving settings:', error);
+            showToast(`Error saving settings: ${error.message}`, 'danger');
+        } finally {
+            setupButton.disabled = false;
+            setupButton.innerHTML = `<i class='bx bx-save mr-2'></i>Save Settings`;
+        }
+    }
+
+    cancelButton.addEventListener('click', () => {
+        // Navigate back to index.html, preserving flight parameters
+        window.location.href = buildUrlWithFlights('index.html');
+    });
+
+    addPythonEnvButton.addEventListener('click', () => renderPythonEnvInput());
+    addUserConfigButton.addEventListener('click', () => renderUserConfigInput());
+
+    settingsForm.addEventListener('submit', saveSettings);
+
+    // Initial load
+    loadSettings();
+
+    // (Collapse/expand functionality removed as requested)
+});

package/src/web/public/modal.html

@@ -0,0 +1,84 @@
+<div id="installModal" class="modal">
+    <div class="modal-content">
+        <span class="close" onclick="closeModal()">&times;</span>
+        <div class="modal-header">
+            <h2 id="modalTitle" class="text-2xl font-bold text-gray-800"></h2>
+            <p class="text-gray-600 mt-2">Configure your installation settings below</p>
+        </div>
+
+        <div class="modal-sections">
+            <!-- Requirements Section -->
+            <div class="section-container">
+                <div id="modalRequirements"></div>
+            </div>
+
+            <!-- Client Status Section -->
+            <div class="section-container">
+                <div id="modalTargets" class="client-grid"></div>
+            </div>
+
+            <div class="section-container">
+                <div id="modalEnvInputs" class="space-y-4">
+                    <!-- Environment Variables will be injected here -->
+                </div>
+            </div>
+
+            <div class="section-container">
+                <div id="modalArguments" class="space-y-4">
+                    <!-- Arguments will be injected here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <form id="installForm" class="mt-8">
+        <!-- Arguments Section -->
+        <div id="modalArguments" class="mb-6 space-y-4">
+            <!-- Arguments will be injected here -->
+        </div>
+
+        <div class="flex justify-end space-x-4">
+            <button type="button" onclick="closeModal()"
+                class="px-6 py-2.5 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">
+                Cancel
+            </button>
+            <button type="submit" class="submit-button">
+                Apply
+            </button>
+        </div>
+    </form>
+</div>
+</div>
+
+<!-- Loading Modal -->
+<div id="installLoadingModal" class="modal" style="display:none; z-index:2000;">
+    <div class="modal-content"
+        style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; pointer-events:auto; position:relative;">
+        <button class="modal-close-button" onclick="hideInstallLoadingModal()" aria-label="Close">&times;</button>
+        <div style="width: 100%;">
+            <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
+                <div class="loading-icon" style="margin-bottom:8px;">
+                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+                        style="display: block; margin-left: auto; margin-right: auto;">
+                        <circle cx="24" cy="24" r="20" stroke="#888" stroke-width="4" opacity="0.2" />
+                        <circle cx="24" cy="24" r="20" stroke="#3498db" stroke-width="4" stroke-linecap="round"
+                            stroke-dasharray="100" stroke-dashoffset="60">
+                            <animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24"
+                                dur="1s" repeatCount="indefinite" />
+                        </circle>
+                    </svg>
+                </div>
+                <div class="loading-title"
+                    style="font-size:1.5rem; font-weight:bold; margin-bottom:8px; text-align:center;">Installing...
+                </div>
+                <div id="installLoadingMessage"
+                    style="min-height:48px; max-height:160px; overflow:auto; background:#f8f8f8; border-radius:6px; padding:12px; font-size:1rem; color:#444; text-align:left; width:100%;">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<link rel="stylesheet" href="/css/modal.css">
+<link rel="stylesheet" href="/css/modal.css">