breadcrumb-the-shire/web/js/components/app-tenant-ldap-toggle.js

/**
 * Shows/hides LDAP configuration fields based on tenant LDAP toggle.
 * Mirrors app-tenant-sso-toggle.js pattern for Microsoft SSO.
 */
import { resolveHost } from '../core/app-dom.js';

const syncControlState = (container, show) => {
  if (!(container instanceof HTMLElement)) {
    return;
  }

  container.hidden = !show;
  container.querySelectorAll('input, select, textarea, button').forEach((control) => {
    if ((control instanceof HTMLInputElement) && control.type === 'hidden') {
      return;
    }

    if (!control.dataset.initialDisabled) {
      control.dataset.initialDisabled = control.hasAttribute('disabled') ? '1' : '0';
    }

    if (!show) {
      control.setAttribute('disabled', 'disabled');
      return;
    }

    if (control.dataset.initialDisabled === '1') {
      control.setAttribute('disabled', 'disabled');
      return;
    }

    control.removeAttribute('disabled');
  });
};

const initRoot = (root) => {
  const enabledInput = root.querySelector('[data-tenant-ldap-enabled]');
  if (!(enabledInput instanceof HTMLInputElement)) {
    return null;
  }

  const syncToggle = root.querySelector('[data-tenant-ldap-sync-toggle]');
  const enabledBlocks = root.querySelectorAll('[data-tenant-ldap-when-enabled]');
  const syncFieldsBlock = root.querySelector('[data-tenant-ldap-sync-fields]');

  const updateUi = () => {
    const ldapEnabled = enabledInput.checked;
    const syncEnabled = syncToggle instanceof HTMLInputElement ? syncToggle.checked : false;

    enabledBlocks.forEach((block) => syncControlState(block, ldapEnabled));
    syncControlState(syncFieldsBlock, ldapEnabled && syncEnabled);
  };

  enabledInput.addEventListener('change', updateUi);
  if (syncToggle instanceof HTMLInputElement) {
    syncToggle.addEventListener('change', updateUi);
  }

  updateUi();
  return () => {
    enabledInput.removeEventListener('change', updateUi);
    if (syncToggle instanceof HTMLInputElement) {
      syncToggle.removeEventListener('change', updateUi);
    }
  };
};

export function initTenantLdapToggle(root = document, options = {}) {
  const host = resolveHost(root);
  const selector = String(options.selector || '[data-tenant-ldap-root]').trim() || '[data-tenant-ldap-root]';
  const roots = Array.from(host.querySelectorAll(selector));
  if (!roots.length) {
    return { destroy: () => {} };
  }

  const cleanupFns = [];
  roots.forEach((item) => {
    if (!(item instanceof HTMLElement) || item.dataset.tenantLdapToggleBound === '1') {
      return;
    }
    item.dataset.tenantLdapToggleBound = '1';
    const cleanup = initRoot(item);
    if (typeof cleanup === 'function') {
      cleanupFns.push(cleanup);
    }
    cleanupFns.push(() => {
      delete item.dataset.tenantLdapToggleBound;
    });
  });

  const destroy = () => {
    cleanupFns.forEach((cleanup) => cleanup());
  };

  return { destroy };
}