settings-site: phase 4 client refactor (split app.js into focused modules, shared dropdown helper, strict-CSP-ready)

settings-site/public/js/fields.js

@@ -0,0 +1,137 @@
+(function () {
+  'use strict';
+
+  let savedConfig = {};
+  let pendingChanges = {};
+
+  function setSavedConfig(config) {
+    savedConfig = config;
+  }
+
+  function populateFields(config) {
+    document.querySelectorAll('[data-key]').forEach(el => {
+      const key = el.dataset.key;
+      const value = config[key] || '';
+      if (el.type === 'checkbox') {
+        el.checked = value === 'true' || value === true;
+      } else if (el.type === 'color') {
+        const num = parseInt(value) || 0;
+        el.value = '#' + num.toString(16).padStart(6, '0');
+      } else {
+        el.value = value;
+      }
+      el.addEventListener('change', () => handleFieldChange(el, key));
+      el.addEventListener('input', () => {
+        if (el.type === 'text' || el.type === 'number' || el.type === 'password' || el.tagName === 'TEXTAREA') {
+          handleFieldChange(el, key);
+        }
+      });
+    });
+  }
+
+  function handleFieldChange(el, key) {
+    let value;
+    if (el.type === 'checkbox') {
+      value = el.checked ? 'true' : 'false';
+    } else if (el.type === 'color') {
+      value = '0x' + el.value.slice(1).toUpperCase();
+    } else {
+      value = el.value;
+    }
+    markChanged(key, value);
+    el.classList.toggle('changed', key in pendingChanges);
+  }
+
+  function initSmartSelects(config) {
+    document.querySelectorAll('[data-smart]').forEach(el => {
+      const key = el.dataset.key;
+      const type = el.dataset.smart;
+      const value = config[key] || '';
+      if (type === 'channel') DiscordFields.renderChannelSelect(el, value);
+      else if (type === 'category') DiscordFields.renderCategorySelect(el, value);
+      else if (type === 'role') DiscordFields.renderRoleSelect(el, value);
+      else if (type === 'member') DiscordFields.renderMemberSelect(el, value);
+      else if (type === 'multi-member') DiscordFields.renderMultiMemberSelect(el, value);
+    });
+  }
+
+  function markChanged(key, value) {
+    if (String(value) === String(savedConfig[key] || '')) {
+      delete pendingChanges[key];
+    } else {
+      pendingChanges[key] = value;
+    }
+    updateSaveBar();
+  }
+
+  function isChanged(key) {
+    return key in pendingChanges;
+  }
+
+  function updateSaveBar() {
+    const bar = document.getElementById('save-bar');
+    const count = Object.keys(pendingChanges).length;
+    bar.classList.toggle('visible', count > 0);
+    document.getElementById('change-count').textContent =
+      `${count} unsaved change${count !== 1 ? 's' : ''}`;
+  }
+
+  function setupSaveBar() {
+    updateSaveBar();
+  }
+
+  async function saveConfig(mode) {
+    const buttons = document.querySelectorAll('#save-bar button');
+    buttons.forEach(b => b.disabled = true);
+    try {
+      if (mode === 'restart' && !confirm('Save changes and restart the bot now?')) {
+        return;
+      }
+      const res = await fetch('/api/config', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: Util.csrfHeaders({ 'Content-Type': 'application/json' }),
+        body: JSON.stringify(pendingChanges)
+      });
+      const data = await res.json();
+      if (data.applied) {
+        for (const key of data.applied) savedConfig[key] = pendingChanges[key];
+        pendingChanges = {};
+        updateSaveBar();
+        document.querySelectorAll('.changed').forEach(el => el.classList.remove('changed'));
+        Util.showToast(`${data.applied.length} settings saved.`, 'success');
+      }
+      const hasErrors = data.errors && data.errors.length > 0;
+      if (hasErrors) {
+        Util.showToast(`Errors: ${data.errors.join(', ')}`, 'error');
+      }
+      if (mode === 'restart' && !hasErrors) {
+        await fetch('/api/restart', {
+          method: 'POST',
+          credentials: 'same-origin',
+          headers: Util.csrfHeaders({ 'Content-Type': 'application/json' }),
+          body: JSON.stringify({ mode: 'immediate' })
+        });
+        Util.showToast('Restart initiated.', 'warning');
+      } else if (mode === 'restart' && hasErrors) {
+        Util.showToast(`Restart cancelled — save returned errors: ${data.errors.join(', ')}`, 'warning');
+      }
+    } catch (e) {
+      Util.showToast('Failed to save. Bot may be unreachable.', 'error');
+    } finally {
+      buttons.forEach(b => b.disabled = false);
+    }
+  }
+
+  window.Fields = {
+    setSavedConfig,
+    populateFields,
+    handleFieldChange,
+    initSmartSelects,
+    markChanged,
+    isChanged,
+    updateSaveBar,
+    setupSaveBar,
+    saveConfig
+  };
+})();