feat(admin): progressive disclosure for LDAP config in tenant edit

Hide LDAP connection, search/bind, and attribute mapping cards until
the "Enable LDAP login" toggle is activated — same UX pattern as the
Microsoft SSO section using data-tenant-ldap-* attributes and a
mirrored JS toggle component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pages/admin/tenants/_form.phtml

@@ -811,10 +811,11 @@ $openOverrideCard = $detailsOpenAll;
               </button>
               <span id="ldap-test-connection-result" aria-live="polite"></span>
             </p>
+            </div>
           </div>
         </details>
 
-        <details class="app-details-card" name="tenant-ldap-search" <?php e($detailsOpenAll ? 'open' : ''); ?>>
+        <details class="app-details-card" name="tenant-ldap-search" data-tenant-ldap-when-enabled <?php e($detailsOpenAll ? 'open' : ''); ?>>
           <summary>
             <span class="app-details-card-summary-title"><?php e(t('Search and bind settings')); ?></span>
           </summary>
@@ -862,7 +863,7 @@ $openOverrideCard = $detailsOpenAll;
           </div>
         </details>
 
-        <details class="app-details-card" name="tenant-ldap-mapping" <?php e($detailsOpenAll ? 'open' : ''); ?>>
+        <details class="app-details-card" name="tenant-ldap-mapping" data-tenant-ldap-when-enabled <?php e($detailsOpenAll ? 'open' : ''); ?>>
           <summary>
             <span class="app-details-card-summary-title"><?php e(t('Attribute mapping and sync')); ?></span>
           </summary>
@@ -890,11 +891,12 @@ $openOverrideCard = $detailsOpenAll;
             <hr>
             <label class="app-field">
               <input type="checkbox" role="switch" name="ldap_sync_profile_on_login" value="1"
+                data-tenant-ldap-sync-toggle
                 <?php e($ldapSyncProfileOnLogin ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
               <span><?php e(t('Profile sync on LDAP login')); ?></span>
             </label>
             <small class="muted"><?php e(t('User profile fields are global and affect all tenants of this user')); ?></small>
-            <div class="grid grid-1-1">
+            <div data-tenant-ldap-sync-fields class="grid grid-1-1">
               <?php foreach ($ldapSyncFieldOptions as $syncFieldKey => $syncFieldLabel): ?>
                 <label class="app-field">
                   <input type="checkbox" name="ldap_sync_profile_fields[]"
@@ -920,6 +922,7 @@ $openOverrideCard = $detailsOpenAll;
             </label>
           </div>
         </details>
+        </div>
       </div>
     <?php endif; ?>
 

web/js/app-init.js

@@ -18,6 +18,7 @@ import { initTenantSwitcher } from './components/app-tenant-switcher.js';
 import { initColorDefaultToggle } from './components/app-color-default-toggle.js';
 import { initCustomFieldOptionsToggle } from './components/app-custom-field-options-toggle.js';
 import { initTenantSsoToggle } from './components/app-tenant-sso-toggle.js';
+import { initTenantLdapToggle } from './components/app-tenant-ldap-toggle.js';
 import { initTelemetrySettings } from './components/app-settings-telemetry.js';
 import { initStandardDetailPages } from './components/app-standard-detail-page.js';
 import { initAutoSubmit } from './components/app-auto-submit.js';
@@ -231,6 +232,10 @@ const bootRuntime = async () => {
     scope: 'global',
     configPath: 'components.tenantSsoToggle',
   });
+  runtime.register('tenant-ldap-toggle', initTenantLdapToggle, {
+    scope: 'global',
+    configPath: 'components.tenantLdapToggle',
+  });
   runtime.register('standard-detail-page', initStandardDetailPages, {
     scope: 'global',
     configPath: 'components.standardDetailPage',

web/js/components/app-tenant-ldap-toggle.js

@@ -0,0 +1,96 @@
+/**
+ * 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 };
+}