gh-christianlouis-docuelevate/frontend/templates/settings.html

{% extends "base.html" %}
{% block title %}Settings - DocuElevate{% endblock %}

{% block head_extra %}
<style>
  .setting-input {
    font-family: 'Courier New', monospace;
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8" x-data="settingsApp()">
  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">Application Settings</h1>
    <p class="text-gray-600">
      Configure application settings through the web interface. 
      Settings saved here will take precedence over environment variables.
    </p>
    <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 my-4" role="alert">
      <p class="font-bold">⚠️ Important Notes:</p>
      <ul class="list-disc list-inside ml-4 mt-2">
        <li>Settings marked with <span class="text-red-600">*</span> require an application restart to take effect.</li>
        <li>Sensitive values (passwords, API keys) are masked for security.</li>
        <li>Changes are persisted in the database and override environment variables.</li>
        <li>Only administrators can access and modify these settings.</li>
      </ul>
    </div>
  </div>

  <!-- Alert Messages -->
  <div x-show="showAlert" x-transition class="mb-4">
    <div :class="alertType === 'success' ? 'bg-green-100 border-green-500 text-green-700' : 'bg-red-100 border-red-500 text-red-700'" 
         class="border-l-4 p-4" role="alert">
      <p class="font-bold" x-text="alertTitle"></p>
      <p x-text="alertMessage"></p>
    </div>
  </div>

  <!-- Form -->
  <form @submit.prevent="saveSettings">
    {% for category, settings_list in settings_data.items() %}
    <div class="bg-white shadow rounded-lg mb-6">
      <!-- Category Header -->
      <div class="bg-gray-100 px-6 py-4 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-800">{{ category }}</h2>
      </div>

      <!-- Settings in this category -->
      <div class="px-6 py-4 space-y-6">
        {% for setting in settings_list %}
        <div class="border-b border-gray-200 pb-6 last:border-b-0">
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <label for="{{ setting.key }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ setting.key.replace('_', ' ').title() }}
                {% if setting.metadata.restart_required %}
                <span class="text-red-600">*</span>
                {% endif %}
                {% if setting.metadata.required %}
                <span class="text-red-600 text-xs">(required)</span>
                {% endif %}
              </label>
              
              <p class="text-xs text-gray-500 mb-2">
                {{ setting.metadata.description }}
              </p>

              {% if setting.metadata.type == 'boolean' %}
              <!-- Boolean/Checkbox Input -->
              <div class="flex items-center">
                <input 
                  type="checkbox" 
                  id="{{ setting.key }}" 
                  name="{{ setting.key }}"
                  :checked="formData['{{ setting.key }}'] === 'true' || formData['{{ setting.key }}'] === true"
                  @change="formData['{{ setting.key }}'] = $event.target.checked ? 'true' : 'false'"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <label for="{{ setting.key }}" class="ml-2 text-sm text-gray-700">
                  Enable {{ setting.key.replace('_', ' ').title() }}
                </label>
              </div>
              {% else %}
              <!-- Text Input -->
              <div class="relative">
                {% if setting.metadata.sensitive %}
                <input 
                  :type="showPassword['{{ setting.key }}'] ? 'text' : 'password'"
                  id="{{ setting.key }}" 
                  name="{{ setting.key }}"
                  x-model="formData['{{ setting.key }}']"
                  class="setting-input w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  placeholder="{{ setting.metadata.description }}"
                  {% if setting.metadata.required %}required{% endif %}
                />
                <button 
                  type="button"
                  @click="togglePassword('{{ setting.key }}')"
                  class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
                >
                  <i :class="showPassword['{{ setting.key }}'] ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                </button>
                {% else %}
                <input 
                  type="text" 
                  id="{{ setting.key }}" 
                  name="{{ setting.key }}"
                  x-model="formData['{{ setting.key }}']"
                  class="setting-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                  placeholder="{{ setting.metadata.description }}"
                  {% if setting.metadata.required %}required{% endif %}
                />
                {% endif %}
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}

    <!-- Action Buttons -->
    <div class="flex justify-end space-x-4 mt-6">
      <button 
        type="button"
        @click="resetForm"
        class="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
      >
        Reset
      </button>
      <button 
        type="submit"
        :disabled="saving"
        class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <span x-show="!saving">Save Settings</span>
        <span x-show="saving">Saving...</span>
      </button>
    </div>
  </form>
</div>

<script>
function settingsApp() {
  return {
    formData: {},
    originalData: {},
    showPassword: {},
    saving: false,
    showAlert: false,
    alertType: 'success',
    alertTitle: '',
    alertMessage: '',

    init() {
      // Initialize form data from current settings
      {% for category, settings_list in settings_data.items() %}
        {% for setting in settings_list %}
          this.formData['{{ setting.key }}'] = {{ setting.display_value|tojson }};
          this.originalData['{{ setting.key }}'] = {{ setting.display_value|tojson }};
          this.showPassword['{{ setting.key }}'] = false;
        {% endfor %}
      {% endfor %}
    },

    togglePassword(key) {
      this.showPassword[key] = !this.showPassword[key];
    },

    resetForm() {
      this.formData = { ...this.originalData };
      this.hideAlert();
    },

    showSuccessAlert(title, message) {
      this.alertType = 'success';
      this.alertTitle = title;
      this.alertMessage = message;
      this.showAlert = true;
      setTimeout(() => this.hideAlert(), 5000);
    },

    showErrorAlert(title, message) {
      this.alertType = 'error';
      this.alertTitle = title;
      this.alertMessage = message;
      this.showAlert = true;
      setTimeout(() => this.hideAlert(), 10000);
    },

    hideAlert() {
      this.showAlert = false;
    },

    async saveSettings() {
      this.saving = true;
      this.hideAlert();

      try {
        // Prepare updates array
        const updates = [];
        for (const [key, value] of Object.entries(this.formData)) {
          // Only include changed settings
          if (value !== this.originalData[key]) {
            updates.push({ key, value });
          }
        }

        if (updates.length === 0) {
          this.showSuccessAlert('No Changes', 'No settings were modified.');
          this.saving = false;
          return;
        }

        // Send bulk update request
        const response = await fetch('/api/settings/bulk-update', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(updates),
        });

        const result = await response.json();

        if (response.ok && result.success) {
          this.originalData = { ...this.formData };
          let message = `${result.updated.length} setting(s) updated successfully.`;
          if (result.restart_required) {
            message += ' Please restart the application for changes to take effect.';
          }
          this.showSuccessAlert('Settings Saved', message);
        } else {
          const errorMessages = result.errors ? result.errors.map(e => `${e.key}: ${e.error}`).join(', ') : 'Unknown error';
          this.showErrorAlert('Save Failed', errorMessages);
        }
      } catch (error) {
        console.error('Error saving settings:', error);
        this.showErrorAlert('Error', 'Failed to save settings. Please try again.');
      } finally {
        this.saving = false;
      }
    }
  };
}
</script>
{% endblock %}