breadcrumb-the-shire/modules/helpdesk/web/js/helpdesk-settings.js

/**
 * Helpdesk settings page — auth mode toggle and connection test.
 */
import { showAsyncFlash } from '/js/components/app-async-flash.js';

const settingsForm = document.getElementById('helpdesk-settings-form');

const getMessage = (key, fallback) => {
  if (!settingsForm || !settingsForm.dataset) {
    return fallback;
  }

  return settingsForm.dataset[key] || fallback;
};

// Toggle OAuth2 vs Basic Auth field visibility
const authModeSelect = document.getElementById('auth_mode');
const basicFields = document.getElementById('helpdesk-basic-auth-fields');
const oauth2Fields = document.getElementById('helpdesk-oauth2-fields');

const toggleAuthFields = () => {
  if (!authModeSelect || !basicFields || !oauth2Fields) {
    return;
  }

  const isOAuth2 = authModeSelect.value === 'oauth2';
  basicFields.toggleAttribute('hidden', isOAuth2);
  oauth2Fields.toggleAttribute('hidden', !isOAuth2);
};

if (authModeSelect) {
  authModeSelect.addEventListener('change', toggleAuthFields);
  toggleAuthFields();
}

// Connection test button
const testButton = document.getElementById('helpdesk-test-connection-button');
const testResult = document.getElementById('helpdesk-connection-test-result');

const setTestResult = (variant, message) => {
  if (!testResult) {
    return;
  }

  testResult.textContent = message;
  testResult.dataset.variant = variant;
  testResult.hidden = !message;
};

const setButtonLoadingState = (isLoading) => {
  if (!testButton) {
    return;
  }

  const defaultLabel = testButton.dataset.labelDefault || getMessage('testDefaultLabel', 'Test connection');
  const loadingLabel = testButton.dataset.labelLoading || getMessage('testLoadingLabel', 'Testing...');

  testButton.disabled = isLoading;
  testButton.toggleAttribute('aria-busy', isLoading);
  testButton.textContent = isLoading ? loadingLabel : defaultLabel;
};

const parseJsonSafely = async (response) => {
  try {
    return await response.json();
  } catch {
    return null;
  }
};

if (testButton) {
  testButton.addEventListener('click', async () => {
    setButtonLoadingState(true);
    setTestResult('info', getMessage('testLoadingLabel', 'Testing...'));

    try {
      const csrfMeta = document.querySelector('meta[name="csrf-token"]');
      const csrfInput = document.querySelector('input[name="csrf_token"]');
      const csrfToken = csrfInput?.value || csrfMeta?.content || '';

      const formData = new FormData();
      if (csrfToken) {
        formData.append('csrf_token', csrfToken);
      }

      const response = await fetch(
        new URL('helpdesk/settings/test-connection-data', document.baseURI).href,
        {
          method: 'POST',
          body: formData,
          credentials: 'same-origin',
        },
      );

      const data = await parseJsonSafely(response);
      const successMessage = getMessage('testSuccessMessage', 'Connection successful');
      const defaultErrorMessage = getMessage('testErrorMessage', 'Connection failed');

      if (response.ok && data?.ok) {
        const message = data.message || successMessage;
        setTestResult('success', message);
        showAsyncFlash('success', message);
      } else {
        let message = defaultErrorMessage;
        if (data?.error) {
          message = data.error;
        } else if (!response.ok) {
          message = `${defaultErrorMessage} (HTTP ${response.status})`;
        }

        if (data?.debug?.http_code) {
          message += ` (HTTP ${data.debug.http_code})`;
        }

        setTestResult('warning', message);
        showAsyncFlash('error', message);
      }
    } catch {
      const message = getMessage('testErrorMessage', 'Connection failed');
      setTestResult('warning', message);
      showAsyncFlash('error', message);
    } finally {
      setButtonLoadingState(false);
    }
  });
}