GallerySubscriber/extension/options/options.js

/**
 * Options page script
 */

document.addEventListener('DOMContentLoaded', async () => {
  await loadSettings();
  setupEventListeners();
});

/**
 * Load saved settings into form
 */
async function loadSettings() {
  const config = await browser.storage.local.get(['apiUrl', 'apiKey']);

  document.getElementById('api-url').value = config.apiUrl || '';
  document.getElementById('api-key').value = config.apiKey || '';
}

/**
 * Setup event listeners
 */
function setupEventListeners() {
  // Toggle API key visibility
  const toggleBtn = document.getElementById('toggle-key-btn');
  const apiKeyInput = document.getElementById('api-key');

  toggleBtn.addEventListener('click', () => {
    if (apiKeyInput.type === 'password') {
      apiKeyInput.type = 'text';
      toggleBtn.textContent = 'Hide';
    } else {
      apiKeyInput.type = 'password';
      toggleBtn.textContent = 'Show';
    }
  });

  // Test connection
  document.getElementById('test-btn').addEventListener('click', testConnection);

  // Save settings
  document.getElementById('save-btn').addEventListener('click', saveSettings);

  // Auto-save on enter key
  document.getElementById('api-url').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') saveSettings();
  });
  document.getElementById('api-key').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') saveSettings();
  });
}

/**
 * Test connection to backend
 */
async function testConnection() {
  const testBtn = document.getElementById('test-btn');
  const statusDot = document.getElementById('test-status');
  const testMessage = document.getElementById('test-message');

  testBtn.disabled = true;
  testBtn.textContent = 'Testing...';
  statusDot.className = 'status-dot';
  testMessage.textContent = '';

  // Get current values
  const apiUrl = normalizeApiUrl(document.getElementById('api-url').value.trim());
  const apiKey = document.getElementById('api-key').value.trim();

  if (!apiUrl || !apiKey) {
    statusDot.className = 'status-dot error';
    testMessage.textContent = 'Please fill in both fields';
    testBtn.disabled = false;
    testBtn.textContent = 'Test Connection';
    return;
  }

  // Temporarily save for testing
  await browser.storage.local.set({ apiUrl, apiKey });

  try {
    const result = await browser.runtime.sendMessage({ type: 'TEST_CONNECTION' });

    if (result.connected) {
      statusDot.className = 'status-dot connected';
      testMessage.textContent = 'Connected successfully!';
    } else {
      statusDot.className = 'status-dot error';
      testMessage.textContent = result.error || 'Connection failed';
    }
  } catch (error) {
    statusDot.className = 'status-dot error';
    testMessage.textContent = error.message;
  } finally {
    testBtn.disabled = false;
    testBtn.textContent = 'Test Connection';
  }
}

/**
 * Save settings
 */
async function saveSettings() {
  const saveBtn = document.getElementById('save-btn');
  const saveResult = document.getElementById('save-result');

  saveBtn.disabled = true;
  saveResult.textContent = '';
  saveResult.className = 'result';

  let apiUrl = document.getElementById('api-url').value.trim();
  const apiKey = document.getElementById('api-key').value.trim();

  // Validate
  if (!apiUrl) {
    showSaveResult('API URL is required', 'error');
    saveBtn.disabled = false;
    return;
  }

  if (!apiKey) {
    showSaveResult('API Key is required', 'error');
    saveBtn.disabled = false;
    return;
  }

  // Normalize URL
  apiUrl = normalizeApiUrl(apiUrl);
  document.getElementById('api-url').value = apiUrl;

  // Save
  try {
    await browser.storage.local.set({ apiUrl, apiKey });
    await browser.runtime.sendMessage({
      type: 'SAVE_CONFIG',
      config: { apiUrl, apiKey }
    });

    showSaveResult('Settings saved!', 'success');
  } catch (error) {
    showSaveResult(`Failed to save: ${error.message}`, 'error');
  } finally {
    saveBtn.disabled = false;
  }
}

/**
 * Normalize API URL to ensure it ends with /api
 * @param {string} url - Input URL
 * @returns {string} - Normalized URL
 */
function normalizeApiUrl(url) {
  if (!url) return '';

  // Remove trailing slash
  url = url.replace(/\/+$/, '');

  // Ensure it ends with /api
  if (!url.endsWith('/api')) {
    url = url + '/api';
  }

  return url;
}

/**
 * Show save result message
 * @param {string} message - Message to display
 * @param {string} type - 'success' or 'error'
 */
function showSaveResult(message, type) {
  const saveResult = document.getElementById('save-result');
  saveResult.textContent = message;
  saveResult.className = `result ${type}`;

  // Auto-hide success messages
  if (type === 'success') {
    setTimeout(() => {
      saveResult.textContent = '';
      saveResult.className = 'result';
    }, 3000);
  }
}