image_management_api/client/js/config.js

// Configuration management
class Config {
    constructor() {
        this.apiBaseUrl = localStorage.getItem('apiBaseUrl') || 'http://localhost:8000';
        this.apiKey = localStorage.getItem('apiKey') || '';
        
        // Set default configuration if not already set
        if (!localStorage.getItem('apiBaseUrl')) {
            this.setApiBaseUrl('http://localhost:8000');
        }
    }

    setApiBaseUrl(url) {
        this.apiBaseUrl = url.replace(/\/$/, ''); // Remove trailing slash
        localStorage.setItem('apiBaseUrl', this.apiBaseUrl);
    }

    setApiKey(key) {
        this.apiKey = key;
        localStorage.setItem('apiKey', this.apiKey);
    }

    getApiBaseUrl() {
        return this.apiBaseUrl;
    }

    getApiKey() {
        return this.apiKey;
    }

    isConfigured() {
        return this.apiBaseUrl; // Only require base URL, make API key optional for now
    }

    clear() {
        this.apiBaseUrl = '';
        this.apiKey = '';
        localStorage.removeItem('apiBaseUrl');
        localStorage.removeItem('apiKey');
    }
}

// Global config instance
const config = new Config();

// Initialize configuration form
function initializeConfigForm() {
    console.log('initializeConfigForm called');
    
    const form = document.getElementById('configForm');
    const apiBaseUrlInput = document.getElementById('apiBaseUrl');
    const apiKeyInput = document.getElementById('apiKey');

    if (!form || !apiBaseUrlInput || !apiKeyInput) {
        console.error('Config form elements not found:', {
            form: !!form,
            apiBaseUrlInput: !!apiBaseUrlInput,
            apiKeyInput: !!apiKeyInput
        });
        return;
    }

    console.log('Config form elements found, initializing...');

    // Load current values
    apiBaseUrlInput.value = config.getApiBaseUrl();
    apiKeyInput.value = config.getApiKey();

    // Remove any existing event listeners to prevent duplicates
    const newForm = form.cloneNode(true);
    form.parentNode.replaceChild(newForm, form);

    // Handle form submission
    newForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const newBaseUrl = document.getElementById('apiBaseUrl').value.trim();
        const newApiKey = document.getElementById('apiKey').value.trim();

        if (!newBaseUrl) {
            showAlert('API Base URL is required', 'danger');
            return;
        }

        config.setApiBaseUrl(newBaseUrl);
        if (newApiKey) {
            config.setApiKey(newApiKey);
        }

        showAlert('Configuration saved successfully!', 'success');
        
        // Update navigation state
        updateNavigationState();
    });

    console.log('Config form initialized successfully');
}

// Test API connection
async function testConnection() {
    const apiBaseUrl = document.getElementById('apiBaseUrl').value.trim();
    const apiKey = document.getElementById('apiKey').value.trim();

    if (!apiBaseUrl) {
        showAlert('API Base URL is required', 'danger');
        return;
    }

    const testButton = document.querySelector('button[onclick="testConnection()"]');
    const originalText = testButton.innerHTML;
    testButton.innerHTML = '<span class="loading-spinner"></span> Testing...';
    testButton.disabled = true;

    try {
        // Test health endpoint first
        const healthResponse = await fetch(`${apiBaseUrl}/health`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        if (!healthResponse.ok) {
            throw new Error(`Health check failed with status ${healthResponse.status}`);
        }

        // Test API authentication only if API key is provided
        if (apiKey) {
            const authResponse = await fetch(`${apiBaseUrl}/api/v1/teams`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-API-Key': apiKey
                }
            });

            if (authResponse.status === 401) {
                throw new Error('Authentication failed - Invalid API key');
            } else if (authResponse.status === 403) {
                throw new Error('Access forbidden - API key lacks permissions');
            } else if (!authResponse.ok) {
                throw new Error(`API request failed with status ${authResponse.status}`);
            }
            
            showAlert('API connection successful! Backend is up and running with authentication.', 'success');
        } else {
            showAlert('API connection successful! Backend is up and running (no authentication tested).', 'success');
        }
        
        // Save the working configuration
        config.setApiBaseUrl(apiBaseUrl);
        if (apiKey) {
            config.setApiKey(apiKey);
        }
        
        // Update form values
        document.getElementById('apiBaseUrl').value = apiBaseUrl;
        document.getElementById('apiKey').value = apiKey;

    } catch (error) {
        console.error('Connection test failed:', error);
        showAlert(`Connection test failed: ${error.message}`, 'danger');
    } finally {
        testButton.innerHTML = originalText;
        testButton.disabled = false;
    }
}

// Update navigation state based on configuration
function updateNavigationState() {
    const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
    const isConfigured = config.isConfigured();

    navLinks.forEach(link => {
        const onclick = link.getAttribute('onclick');
        if (onclick && onclick.includes('showPage') && !onclick.includes('config') && !onclick.includes('home')) {
            if (isConfigured) {
                link.classList.remove('disabled');
                link.style.opacity = '1';
            } else {
                link.classList.add('disabled');
                link.style.opacity = '0.5';
            }
        }
    });

    // Show configuration warning if not configured
    if (!isConfigured && window.location.hash !== '#config') {
        showAlert('Please configure your API settings first.', 'warning', true);
    }
}

// Test function for debugging config page
function testConfigPage() {
    console.log('Testing config page...');
    console.log('Config page element:', document.getElementById('configPage'));
    console.log('Config form element:', document.getElementById('configForm'));
    console.log('API Base URL input:', document.getElementById('apiBaseUrl'));
    console.log('API Key input:', document.getElementById('apiKey'));
    
    // Try to show config page
    showPage('config');
}

// Make test function available globally
window.testConfigPage = testConfigPage;