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') || '';
    }

    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 && this.apiKey;
    }

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

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

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

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

    // Handle form submission
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const newBaseUrl = apiBaseUrlInput.value.trim();
        const newApiKey = apiKeyInput.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();
    });
}

// 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;
    }

    if (!apiKey) {
        showAlert('API Key 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
        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.', 'success');
        
        // Save the working configuration
        config.setApiBaseUrl(apiBaseUrl);
        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);
    }
}