ldap-rest 0.0.1

package/static/browser/ldap-user-editor.esm.js

@@ -0,0 +1,1897 @@
+/**
+ * Simple in-memory cache manager with LRU eviction
+ * Prevents excessive API calls when navigating the organization tree
+ */
+class CacheManager {
+    constructor(options = {}) {
+        this.cache = new Map();
+        this.ttl = options.ttl ?? 5 * 60 * 1000; // 5 minutes default
+        this.maxEntries = options.maxEntries ?? 200; // 200 entries max
+    }
+    /**
+     * Get an item from cache
+     * Returns null if not found or expired
+     */
+    get(key) {
+        const entry = this.cache.get(key);
+        if (!entry)
+            return null;
+        // Check if expired
+        if (Date.now() - entry.timestamp >= this.ttl) {
+            this.cache.delete(key);
+            return null;
+        }
+        // Update access count for LRU
+        entry.accessCount++;
+        entry.timestamp = Date.now();
+        return entry.data;
+    }
+    /**
+     * Set an item in cache
+     * Evicts least recently used items if cache is full
+     */
+    set(key, data) {
+        // If cache is full, evict LRU entry
+        if (this.cache.size >= this.maxEntries && !this.cache.has(key)) {
+            this.evictLRU();
+        }
+        this.cache.set(key, {
+            data,
+            timestamp: Date.now(),
+            accessCount: 0,
+        });
+    }
+    /**
+     * Check if key exists and is not expired
+     */
+    has(key) {
+        return this.get(key) !== null;
+    }
+    /**
+     * Invalidate a specific key
+     */
+    invalidate(key) {
+        this.cache.delete(key);
+    }
+    /**
+     * Invalidate all keys matching a pattern
+     * Pattern can contain wildcards (*)
+     */
+    invalidatePattern(pattern) {
+        const regex = new RegExp('^' + pattern.replace(/\*/g, '.*').replace(/\?/g, '.') + '$');
+        for (const key of this.cache.keys()) {
+            if (regex.test(key)) {
+                this.cache.delete(key);
+            }
+        }
+    }
+    /**
+     * Clear all cache
+     */
+    clear() {
+        this.cache.clear();
+    }
+    /**
+     * Get cache statistics
+     */
+    getStats() {
+        return {
+            size: this.cache.size,
+            maxSize: this.maxEntries,
+            ttl: this.ttl,
+            keys: Array.from(this.cache.keys()),
+        };
+    }
+    /**
+     * Evict least recently used entry
+     */
+    evictLRU() {
+        let lruKey = null;
+        let lruTime = Infinity;
+        let lruCount = Infinity;
+        for (const [key, entry] of this.cache.entries()) {
+            // Prioritize by access count, then by timestamp
+            if (entry.accessCount < lruCount ||
+                (entry.accessCount === lruCount && entry.timestamp < lruTime)) {
+                lruKey = key;
+                lruTime = entry.timestamp;
+                lruCount = entry.accessCount;
+            }
+        }
+        if (lruKey) {
+            this.cache.delete(lruKey);
+        }
+    }
+    /**
+     * Clean expired entries
+     * Should be called periodically
+     */
+    cleanExpired() {
+        const now = Date.now();
+        let cleaned = 0;
+        for (const [key, entry] of this.cache.entries()) {
+            if (now - entry.timestamp >= this.ttl) {
+                this.cache.delete(key);
+                cleaned++;
+            }
+        }
+        return cleaned;
+    }
+}
+
+/**
+ * LDAP User Editor - API Client
+ */
+class UserApiClient {
+    constructor(baseUrl = '', cacheOptions) {
+        this.baseUrl =
+            baseUrl || (typeof window !== 'undefined' ? window.location.origin : '');
+        this.cache = new CacheManager(cacheOptions);
+        // Clean expired entries every 5 minutes (only in browser context)
+        if (typeof window !== 'undefined') {
+            window.setInterval(() => this.cache.cleanExpired(), 5 * 60 * 1000);
+        }
+    }
+    getApiBase() {
+        return `${this.baseUrl}/api/v1`;
+    }
+    getFirstValue(value) {
+        if (!value)
+            return '';
+        if (Array.isArray(value))
+            return value[0] || '';
+        return String(value);
+    }
+    /**
+     * Fetch with cache support for GET requests
+     */
+    async cachedFetch(url, options) {
+        const method = options?.method || 'GET';
+        // Only cache GET requests
+        if (method === 'GET') {
+            const cached = this.cache.get(url);
+            if (cached !== null) {
+                return cached;
+            }
+        }
+        const res = await fetch(url, options);
+        if (!res.ok) {
+            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        const data = (await res.json());
+        // Cache GET responses
+        if (method === 'GET') {
+            this.cache.set(url, data);
+        }
+        return data;
+    }
+    async getConfig() {
+        return this.cachedFetch(`${this.getApiBase()}/config`);
+    }
+    async getSchema(schemaUrl) {
+        // Handle relative URLs by prepending baseUrl
+        const url = schemaUrl.startsWith('http')
+            ? schemaUrl
+            : `${this.baseUrl}${schemaUrl}`;
+        return this.cachedFetch(url);
+    }
+    async getUsers(search = '') {
+        const url = search
+            ? `${this.getApiBase()}/ldap/users?match=${encodeURIComponent(search)}&attribute=uid`
+            : `${this.getApiBase()}/ldap/users`;
+        const data = await this.cachedFetch(url);
+        // Convert from object format {uid: entry} to array format
+        return Array.isArray(data) ? data : Object.values(data);
+    }
+    async getUser(dn) {
+        const url = `${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}`;
+        return this.cachedFetch(url);
+    }
+    async updateUser(dn, data) {
+        const res = await fetch(`${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        });
+        if (!res.ok) {
+            const error = await res.text();
+            throw new Error(error || 'Failed to update user');
+        }
+        const result = await res.json();
+        // Invalidate cache for this user and user lists
+        this.cache.invalidate(`${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}`);
+        this.cache.invalidatePattern(`${this.getApiBase()}/ldap/users*`);
+        return result;
+    }
+    async createUser(data) {
+        const res = await fetch(`${this.getApiBase()}/ldap/users`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        });
+        if (!res.ok) {
+            const error = await res.text();
+            throw new Error(error || 'Failed to create user');
+        }
+        const result = await res.json();
+        // Invalidate cache for user lists
+        this.cache.invalidatePattern(`${this.getApiBase()}/ldap/users*`);
+        return result;
+    }
+    async deleteUser(dn) {
+        const res = await fetch(`${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}`, {
+            method: 'DELETE',
+        });
+        if (!res.ok) {
+            const error = await res.text();
+            throw new Error(error || 'Failed to delete user');
+        }
+        // Invalidate cache for this user and user lists
+        this.cache.invalidate(`${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}`);
+        this.cache.invalidatePattern(`${this.getApiBase()}/ldap/users*`);
+    }
+    async moveUser(dn, targetOrgDn) {
+        const res = await fetch(`${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}/move`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ targetOrgDn }),
+        });
+        if (!res.ok) {
+            const error = await res.text();
+            throw new Error(error || 'Failed to move user');
+        }
+        const result = await res.json();
+        // Invalidate cache for this user and user lists
+        this.cache.invalidate(`${this.getApiBase()}/ldap/users/${encodeURIComponent(dn)}`);
+        this.cache.invalidatePattern(`${this.getApiBase()}/ldap/users*`);
+        return result;
+    }
+    async getPointerOptions(branch) {
+        try {
+            // Load config to find the right endpoint by matching base
+            const config = await this.getConfig();
+            // Find resource that matches this branch by comparing base
+            const resource = config.features?.ldapFlatGeneric?.flatResources?.find(r => {
+                // Match if branch equals base or branch starts with base
+                return branch === r.base || branch.startsWith(r.base);
+            });
+            if (resource && resource.endpoints?.list) {
+                // Use the endpoint from config
+                const url = `${this.baseUrl}${resource.endpoints.list}`;
+                const data = await this.cachedFetch(url);
+                // Convert from object format {key: entry} to array
+                const items = Array.isArray(data) ? data : Object.values(data);
+                // Load schema to get displayName field
+                let displayNameField = 'cn'; // Default fallback
+                const identifierField = resource.mainAttribute;
+                if (resource.schemaUrl) {
+                    try {
+                        const schema = await this.getSchema(resource.schemaUrl);
+                        // Find field with displayName role
+                        const displayField = Object.entries(schema.attributes).find(([, attr]) => attr.role === 'displayName');
+                        if (displayField) {
+                            displayNameField = displayField[0];
+                        }
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    }
+                    catch (e) {
+                        // Use defaults if schema fails
+                    }
+                }
+                return items.map((item) => {
+                    const displayName = this.getFirstValue(item[displayNameField]);
+                    const identifier = this.getFirstValue(item[identifierField]);
+                    return {
+                        dn: item.dn,
+                        label: displayName || identifier || item.dn,
+                    };
+                });
+            }
+            // No matching resource found in config
+            throw new Error(`No flatResource found in config for branch: ${branch}`);
+        }
+        catch (error) {
+            console.error('Failed to load pointer options for branch:', branch, error);
+            return [];
+        }
+    }
+    /**
+     * Cache management methods
+     */
+    /**
+     * Clear all cache
+     */
+    clearCache() {
+        this.cache.clear();
+    }
+    /**
+     * Invalidate cache for a specific URL pattern
+     */
+    invalidateCache(pattern) {
+        this.cache.invalidatePattern(pattern);
+    }
+    /**
+     * Get cache statistics
+     */
+    getCacheStats() {
+        return this.cache.getStats();
+    }
+    /**
+     * Get cache instance (for advanced usage)
+     */
+    getCache() {
+        return this.cache;
+    }
+}
+
+/**
+ * LDAP User Editor - Organization Tree Component
+ * Shows only LDAP organization tree (filters out users/groups)
+ */
+class UserTree {
+    constructor(container, baseUrl, onSelectOrg) {
+        this.expandedNodes = new Set();
+        this.selectedDn = null;
+        this.rootDn = null;
+        this.container = container;
+        this.baseUrl = baseUrl;
+        this.onSelectOrg = onSelectOrg;
+        this.cache = new CacheManager();
+        // Clean expired entries every 5 minutes
+        window.setInterval(() => this.cache.cleanExpired(), 5 * 60 * 1000);
+    }
+    /**
+     * Fetch with cache support
+     */
+    async cachedFetch(url) {
+        const cached = this.cache.get(url);
+        if (cached !== null) {
+            return cached;
+        }
+        const res = await fetch(url);
+        if (!res.ok) {
+            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        const data = (await res.json());
+        this.cache.set(url, data);
+        return data;
+    }
+    async init() {
+        this.container.innerHTML = `
+      <div class="sidebar">
+        <div class="sidebar-header">
+          <h2>
+            <span class="material-icons">account_tree</span>
+            Organizations
+          </h2>
+        </div>
+        <div id="org-tree-viewer" class="user-tree">
+          <div class="loading"><div class="spinner"></div></div>
+        </div>
+      </div>
+    `;
+        try {
+            // Load top organization
+            const topOrg = await this.cachedFetch(`${this.baseUrl}/api/v1/ldap/organizations/top`);
+            this.rootDn = topOrg.dn;
+            await this.renderTree();
+        }
+        catch (error) {
+            console.error('Failed to init tree:', error);
+            const treeEl = this.container.querySelector('#org-tree-viewer');
+            if (treeEl) {
+                treeEl.innerHTML =
+                    '<div class="empty-state"><span class="material-icons">error</span><p>Failed to load organization tree</p></div>';
+            }
+        }
+    }
+    async renderTree() {
+        const treeEl = this.container.querySelector('#org-tree-viewer');
+        if (!treeEl || !this.rootDn)
+            return;
+        try {
+            const html = await this.renderNode(this.rootDn, 0);
+            treeEl.innerHTML = html;
+            this.attachEventListeners();
+        }
+        catch (error) {
+            console.error('Failed to render tree:', error);
+            treeEl.innerHTML =
+                '<div class="empty-state"><span class="material-icons">error</span><p>Error rendering tree</p></div>';
+        }
+    }
+    async renderNode(dn, level) {
+        const isExpanded = this.expandedNodes.has(dn);
+        const isSelected = this.selectedDn === dn;
+        const indent = level * 20;
+        // Get node info
+        const node = await this.cachedFetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        // Extract display name - handle both string and array
+        let displayName = dn;
+        if (node.ou) {
+            displayName = Array.isArray(node.ou) ? node.ou[0] : node.ou;
+        }
+        else if (node.cn) {
+            displayName = Array.isArray(node.cn) ? node.cn[0] : node.cn;
+        }
+        let html = `
+      <div class="tree-node ${isSelected ? 'active' : ''}" style="padding-left: ${indent}px">
+        <span class="material-icons tree-node-toggle" data-dn="${dn}">
+          ${isExpanded ? 'expand_more' : 'chevron_right'}
+        </span>
+        <span class="material-icons">business</span>
+        <span class="tree-node-label" data-dn="${dn}">${displayName}</span>
+      </div>
+    `;
+        if (isExpanded) {
+            try {
+                // Load subnodes and filter only organizations
+                const subnodes = await this.cachedFetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/subnodes`);
+                const orgs = subnodes.filter((n) => {
+                    const classes = Array.isArray(n.objectClass)
+                        ? n.objectClass
+                        : n.objectClass
+                            ? [n.objectClass]
+                            : [];
+                    return (classes.includes('organizationalUnit') ||
+                        classes.includes('organization'));
+                });
+                for (const subnode of orgs) {
+                    html += await this.renderNode(subnode.dn, level + 1);
+                }
+            }
+            catch (error) {
+                console.error('Failed to load subnodes for', dn, error);
+            }
+        }
+        return html;
+    }
+    attachEventListeners() {
+        // Toggle expand/collapse
+        this.container.querySelectorAll('.tree-node-toggle').forEach(el => {
+            el.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const dn = el.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                if (this.expandedNodes.has(dn)) {
+                    this.expandedNodes.delete(dn);
+                }
+                else {
+                    this.expandedNodes.add(dn);
+                }
+                await this.renderTree();
+            });
+        });
+        // Select organization
+        this.container.querySelectorAll('.tree-node-label').forEach(el => {
+            el.addEventListener('click', e => {
+                e.stopPropagation();
+                const dn = el.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                this.selectedDn = dn;
+                this.renderTree();
+                this.onSelectOrg(dn);
+            });
+        });
+    }
+    async refresh() {
+        await this.renderTree();
+    }
+    destroy() {
+        this.container.innerHTML = '';
+    }
+}
+
+/**
+ * LDAP User Editor - Pointer Field Component
+ */
+class PointerField {
+    constructor(api, fieldName, attribute, value, onChange) {
+        this.options = [];
+        this.api = api;
+        this.fieldName = fieldName;
+        this.attribute = attribute;
+        this.value = value;
+        this.onChange = onChange;
+    }
+    async init() {
+        await this.loadOptions();
+    }
+    async loadOptions() {
+        try {
+            const branch = this.attribute.type === 'array'
+                ? this.attribute.items?.branch?.[0]
+                : this.attribute.branch?.[0];
+            if (!branch) {
+                this.options = [];
+                return;
+            }
+            this.options = await this.api.getPointerOptions(branch);
+        }
+        catch (error) {
+            console.error('Failed to load pointer options:', error);
+            this.options = [];
+        }
+    }
+    render() {
+        const isArray = this.attribute.type === 'array';
+        const isRequired = this.attribute.required || false;
+        if (isArray) {
+            return this.renderArray(isRequired);
+        }
+        return this.renderSingle(isRequired);
+    }
+    renderSingle(required) {
+        const currentValue = Array.isArray(this.value)
+            ? this.value[0] || ''
+            : this.value || '';
+        return `
+      <div class="form-group">
+        <label class="form-label">
+          ${this.fieldName}
+          ${required ? '<span class="required">*</span>' : ''}
+        </label>
+        <select
+          class="form-select pointer-field-select"
+          data-field="${this.fieldName}"
+          ${required ? 'required' : ''}
+        >
+          <option value="">Select...</option>
+          ${this.options
+            .map(opt => `
+            <option value="${opt.dn}" ${currentValue === opt.dn ? 'selected' : ''}>
+              ${opt.label}
+            </option>
+          `)
+            .join('')}
+        </select>
+      </div>
+    `;
+    }
+    renderArray(required) {
+        const values = Array.isArray(this.value) ? this.value : [];
+        return `
+      <div class="form-group">
+        <label class="form-label">
+          ${this.fieldName}
+          ${required ? '<span class="required">*</span>' : ''}
+        </label>
+        <div class="array-field" data-field="${this.fieldName}">
+          ${values
+            .map((val, idx) => `
+            <div class="array-item" data-index="${idx}">
+              <select class="form-select pointer-array-item">
+                <option value="">Select...</option>
+                ${this.options
+            .map(opt => `
+                  <option value="${opt.dn}" ${val === opt.dn ? 'selected' : ''}>
+                    ${opt.label}
+                  </option>
+                `)
+            .join('')}
+              </select>
+              <button type="button" class="btn btn-secondary btn-icon remove-array-item">
+                <span class="material-icons">remove</span>
+              </button>
+            </div>
+          `)
+            .join('')}
+          <button type="button" class="btn btn-secondary add-array-item">
+            <span class="material-icons">add</span>
+            Add ${this.fieldName}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    attachHandlers(container) {
+        if (this.attribute.type === 'array') {
+            this.attachArrayHandlers(container);
+        }
+        else {
+            this.attachSingleHandlers(container);
+        }
+    }
+    attachSingleHandlers(container) {
+        const select = container.querySelector(`select[data-field="${this.fieldName}"]`);
+        select?.addEventListener('change', () => {
+            this.onChange(select.value);
+        });
+    }
+    attachArrayHandlers(container) {
+        const arrayContainer = container.querySelector(`.array-field[data-field="${this.fieldName}"]`);
+        if (!arrayContainer)
+            return;
+        // Handle item change
+        arrayContainer
+            .querySelectorAll('.pointer-array-item')
+            .forEach((select, idx) => {
+            select.addEventListener('change', () => {
+                const values = Array.isArray(this.value) ? [...this.value] : [];
+                values[idx] = select.value;
+                this.onChange(values);
+            });
+        });
+        // Handle remove
+        arrayContainer
+            .querySelectorAll('.remove-array-item')
+            .forEach((btn, idx) => {
+            btn.addEventListener('click', () => {
+                const values = Array.isArray(this.value) ? [...this.value] : [];
+                values.splice(idx, 1);
+                this.onChange(values);
+            });
+        });
+        // Handle add
+        const addBtn = arrayContainer.querySelector('.add-array-item');
+        addBtn?.addEventListener('click', () => {
+            const values = Array.isArray(this.value) ? [...this.value] : [];
+            values.push('');
+            this.onChange(values);
+        });
+    }
+}
+
+/**
+ * LDAP User Editor - Move User Modal Component
+ * Modal dialog for selecting target organization when moving a user
+ */
+class MoveUserModal {
+    constructor(api, currentOrgDn, onMove) {
+        this.modal = null;
+        this.selectedOrgDn = null;
+        this.expandedNodes = new Set();
+        this.rootDn = null;
+        this.api = api;
+        this.currentOrgDn = currentOrgDn;
+        this.onMove = onMove;
+    }
+    /**
+     * Escape HTML special characters to prevent XSS attacks
+     */
+    static escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+    async show() {
+        // Create modal container
+        this.modal = document.createElement('div');
+        this.modal.className = 'modal-overlay active';
+        this.modal.innerHTML = `
+      <div class="modal-container" style="max-width: 600px;">
+        <div class="modal-header">
+          <h3 style="margin: 0; display: flex; align-items: center; gap: 0.5rem;">
+            <span class="material-icons">folder_open</span>
+            Move User to Organization
+          </h3>
+          <button class="modal-close" id="modal-close-btn">
+            <span class="material-icons">close</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div id="move-modal-alert"></div>
+          <div style="margin-bottom: 1rem; color: #666; font-size: 0.9rem;">
+            Select the target organization where you want to move this user.
+          </div>
+          <div id="organization-tree-container" style="max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem;">
+            <div class="loading">
+              <div class="spinner"></div>
+              <p style="margin-top: 1rem">Loading organizations...</p>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" id="modal-cancel-btn">
+            Cancel
+          </button>
+          <button type="button" class="btn btn-primary" id="modal-move-btn" disabled>
+            <span class="material-icons">drive_file_move</span>
+            Move User
+          </button>
+        </div>
+      </div>
+    `;
+        document.body.appendChild(this.modal);
+        this.attachHandlers();
+        await this.loadOrganizationTree();
+    }
+    attachHandlers() {
+        if (!this.modal)
+            return;
+        // Close button
+        const closeBtn = this.modal.querySelector('#modal-close-btn');
+        closeBtn?.addEventListener('click', () => this.close());
+        // Cancel button
+        const cancelBtn = this.modal.querySelector('#modal-cancel-btn');
+        cancelBtn?.addEventListener('click', () => this.close());
+        // Move button
+        const moveBtn = this.modal.querySelector('#modal-move-btn');
+        moveBtn?.addEventListener('click', () => this.handleMove());
+        // Close on overlay click
+        this.modal.addEventListener('click', e => {
+            if (e.target === this.modal) {
+                this.close();
+            }
+        });
+        // Close on Escape key
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                this.close();
+                document.removeEventListener('keydown', handleEscape);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+    }
+    async loadOrganizationTree() {
+        console.log('loadOrganizationTree called');
+        const container = this.modal?.querySelector('#organization-tree-container');
+        if (!container) {
+            console.log('Container not found');
+            return;
+        }
+        try {
+            console.log('Fetching top organization...');
+            // Get top organization
+            const topOrg = await this.api['cachedFetch'](`${this.api['baseUrl'] || window.location.origin}/api/v1/ldap/organizations/top`);
+            console.log('Top org:', topOrg);
+            this.rootDn = topOrg.dn;
+            // Expand root by default
+            this.expandedNodes.add(this.rootDn);
+            console.log('Calling renderTree...');
+            await this.renderTree();
+            console.log('renderTree completed');
+        }
+        catch (error) {
+            console.error('Error in loadOrganizationTree:', error);
+            container.innerHTML = `
+        <div class="alert alert-error">
+          <span class="material-icons">error</span>
+          <div>Failed to load organizations: ${MoveUserModal.escapeHtml(error.message)}</div>
+        </div>
+      `;
+        }
+    }
+    async renderTree() {
+        console.log('renderTree called');
+        const container = this.modal?.querySelector('#organization-tree-container');
+        if (!container || !this.rootDn) {
+            console.log('renderTree: no container or rootDn', {
+                container,
+                rootDn: this.rootDn,
+            });
+            return;
+        }
+        try {
+            console.log('renderTree: calling renderNode for', this.rootDn);
+            const html = await this.renderNode(this.rootDn, 0);
+            console.log('renderTree: got html, length:', html.length);
+            container.innerHTML = html;
+            console.log('renderTree: html set, attaching handlers');
+            this.attachTreeHandlers();
+            console.log('renderTree: handlers attached');
+        }
+        catch (error) {
+            console.error('Error in renderTree:', error);
+            container.innerHTML = `
+        <div class="alert alert-error">
+          <span class="material-icons">error</span>
+          <div>Error rendering tree: ${MoveUserModal.escapeHtml(error.message)}</div>
+        </div>
+      `;
+        }
+    }
+    async renderNode(dn, level) {
+        console.log('renderNode called for', dn, 'level', level);
+        const isExpanded = this.expandedNodes.has(dn);
+        const isCurrentOrg = dn === this.currentOrgDn;
+        const isSelected = dn === this.selectedOrgDn;
+        const indent = level * 20;
+        // Get node info
+        const baseUrl = this.api['baseUrl'] || window.location.origin;
+        console.log('Fetching node details from:', `${baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        const node = await this.api['cachedFetch'](`${baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        console.log('Got node:', node);
+        // Extract display name
+        const ou = Array.isArray(node.ou) ? node.ou[0] : node.ou;
+        const path = node.twakeDepartmentPath
+            ? Array.isArray(node.twakeDepartmentPath)
+                ? node.twakeDepartmentPath[0]
+                : node.twakeDepartmentPath
+            : undefined;
+        const displayName = path || ou || dn;
+        let html = `
+      <div
+        class="org-node ${isCurrentOrg ? 'org-current' : ''} ${isSelected ? 'org-selected' : ''}"
+        data-org-dn="${MoveUserModal.escapeHtml(dn)}"
+        style="
+          padding: 0.5rem;
+          padding-left: ${indent + 8}px;
+          cursor: ${isCurrentOrg ? 'not-allowed' : 'pointer'};
+          background: ${isCurrentOrg ? '#f5f5f5' : isSelected ? '#e3f2fd' : 'white'};
+          opacity: ${isCurrentOrg ? '0.6' : '1'};
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          border-left: 2px solid ${isSelected ? '#2196f3' : 'transparent'};
+        "
+      >
+        <span class="material-icons tree-toggle" data-dn="${MoveUserModal.escapeHtml(dn)}" style="cursor: pointer; font-size: 1.2rem;">
+          ${isExpanded ? 'expand_more' : 'chevron_right'}
+        </span>
+        <span class="material-icons" style="font-size: 1.2rem; color: ${isCurrentOrg ? '#999' : '#2196f3'};">
+          ${isCurrentOrg ? 'business' : 'folder'}
+        </span>
+        <span style="flex: 1; font-weight: ${isSelected ? '600' : '500'};">
+          ${MoveUserModal.escapeHtml(displayName)}
+          ${isCurrentOrg ? '<span style="font-size: 0.85rem; color: #666; margin-left: 0.5rem;">(current)</span>' : ''}
+        </span>
+        ${isSelected ? '<span class="material-icons" style="color: #2196f3;">check_circle</span>' : ''}
+      </div>
+    `;
+        // If expanded, load and render subnodes
+        if (isExpanded) {
+            try {
+                const subnodes = await this.api['cachedFetch'](`${baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/subnodes?objectClass=organizationalUnit`);
+                for (const subnode of subnodes) {
+                    html += await this.renderNode(subnode.dn, level + 1);
+                }
+            }
+            catch {
+                // No subnodes or error loading them
+            }
+        }
+        return html;
+    }
+    attachTreeHandlers() {
+        // Handle tree toggle (expand/collapse)
+        const toggles = this.modal?.querySelectorAll('.tree-toggle');
+        toggles?.forEach(toggle => {
+            toggle.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const dn = toggle.getAttribute('data-dn');
+                if (!dn)
+                    return;
+                if (this.expandedNodes.has(dn)) {
+                    this.expandedNodes.delete(dn);
+                }
+                else {
+                    this.expandedNodes.add(dn);
+                }
+                await this.renderTree();
+            });
+        });
+        // Handle node selection
+        const nodes = this.modal?.querySelectorAll('.org-node');
+        nodes?.forEach(node => {
+            const orgDn = node.getAttribute('data-org-dn');
+            if (!orgDn || orgDn === this.currentOrgDn)
+                return;
+            node.addEventListener('click', () => {
+                this.selectOrganization(orgDn);
+            });
+        });
+    }
+    async selectOrganization(orgDn) {
+        this.selectedOrgDn = orgDn;
+        // Re-render tree to update selection state
+        await this.renderTree();
+        // Enable move button
+        const moveBtn = this.modal?.querySelector('#modal-move-btn');
+        if (moveBtn) {
+            moveBtn.disabled = false;
+        }
+    }
+    async handleMove() {
+        if (!this.selectedOrgDn)
+            return;
+        const moveBtn = this.modal?.querySelector('#modal-move-btn');
+        const alertContainer = this.modal?.querySelector('#move-modal-alert');
+        if (moveBtn) {
+            moveBtn.disabled = true;
+            moveBtn.innerHTML = `
+        <span class="spinner" style="width: 1rem; height: 1rem; border-width: 2px;"></span>
+        Moving...
+      `;
+        }
+        try {
+            this.onMove(this.selectedOrgDn);
+            this.close();
+        }
+        catch (error) {
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-error" style="margin-bottom: 1rem;">
+            <span class="material-icons">error</span>
+            <div>Move failed: ${MoveUserModal.escapeHtml(error.message)}</div>
+          </div>
+        `;
+            }
+            if (moveBtn) {
+                moveBtn.disabled = false;
+                moveBtn.innerHTML = `
+          <span class="material-icons">drive_file_move</span>
+          Move User
+        `;
+            }
+        }
+    }
+    close() {
+        if (this.modal) {
+            this.modal.remove();
+            this.modal = null;
+        }
+    }
+}
+
+/**
+ * LDAP User Editor - User Editor Component
+ */
+class UserEditor {
+    /**
+     * Escape HTML special characters to prevent XSS attacks
+     * Reference: https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html
+     */
+    static escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+    constructor(container, api, userDn, onSaved, onDeleted) {
+        this.user = null;
+        this.schema = null;
+        this.formData = {};
+        this.pointerFields = new Map();
+        this.ldapBase = '';
+        this.container = container;
+        this.api = api;
+        this.userDn = userDn;
+        this.onSaved = onSaved;
+        this.onDeleted = onDeleted;
+    }
+    async init() {
+        try {
+            this.showLoading();
+            await this.loadUserAndSchema();
+            this.render();
+            await this.initPointerFields();
+            this.attachHandlers();
+        }
+        catch (error) {
+            this.showError(error.message);
+        }
+    }
+    showLoading() {
+        this.container.innerHTML = `
+      <div class="loading">
+        <div class="spinner"></div>
+        <p style="margin-top: 1rem">Loading user data...</p>
+      </div>
+    `;
+    }
+    showError(message) {
+        this.container.innerHTML = `
+      <div class="alert alert-error">
+        <span class="material-icons">error</span>
+        <div>${UserEditor.escapeHtml(message)}</div>
+      </div>
+    `;
+    }
+    async loadUserAndSchema() {
+        const config = await this.api.getConfig();
+        this.ldapBase = config.ldapBase;
+        // Find users resource in flatResources array
+        const usersResource = config.features?.ldapFlatGeneric?.flatResources?.find(r => r.pluralName === 'users' || r.name === 'users');
+        const schemaUrl = usersResource?.schemaUrl;
+        if (!schemaUrl) {
+            throw new Error('Users schema not configured');
+        }
+        [this.schema, this.user] = await Promise.all([
+            this.api.getSchema(schemaUrl),
+            this.api.getUser(this.userDn),
+        ]);
+        // Replace __LDAP_BASE__ placeholder in schema branches
+        if (this.schema) {
+            this.replacePlaceholders(this.schema);
+        }
+        this.formData = { ...this.user };
+    }
+    replacePlaceholders(schema) {
+        for (const attr of Object.values(schema.attributes)) {
+            if (attr.branch) {
+                attr.branch = attr.branch.map(b => b.replace(/__LDAP_BASE__/g, this.ldapBase));
+            }
+            if (attr.items?.branch) {
+                attr.items.branch = attr.items.branch.map(b => b.replace(/__LDAP_BASE__/g, this.ldapBase));
+            }
+        }
+    }
+    getFirstValue(value) {
+        if (!value)
+            return '';
+        if (Array.isArray(value))
+            return value[0] || '';
+        return String(value);
+    }
+    getFieldByRole(role) {
+        if (!this.schema || !this.user)
+            return '';
+        const field = Object.entries(this.schema.attributes).find(([, attr]) => attr.role === role);
+        if (!field)
+            return '';
+        const [fieldName] = field;
+        return this.getFirstValue(this.user[fieldName]);
+    }
+    render() {
+        if (!this.user || !this.schema)
+            return;
+        const displayName = this.getFieldByRole('displayName');
+        const identifier = this.getFirstValue(this.user[this.schema.entity.mainAttribute]);
+        const userName = displayName || identifier || 'User';
+        this.container.innerHTML = `
+      <div class="editor-container">
+        <div class="editor-header">
+          <span class="material-icons">person</span>
+          <div class="editor-title">
+            <h3>${UserEditor.escapeHtml(userName)}</h3>
+            <div class="dn">${UserEditor.escapeHtml(this.userDn)}</div>
+          </div>
+        </div>
+
+        <div id="alert-container"></div>
+
+        <form id="user-edit-form" class="editor-form">
+          ${this.renderFormSections()}
+
+          <div class="editor-actions" style="margin-top: 2rem; display: flex; justify-content: space-between; align-items: center;">
+            <div style="display: flex; gap: 0.5rem;">
+              <button type="button" class="btn btn-secondary" id="move-user-btn">
+                <span class="material-icons">drive_file_move</span>
+                Move User
+              </button>
+              <button type="button" class="btn btn-secondary" id="delete-user-btn" style="background: #d32f2f; color: white;">
+                <span class="material-icons">person_remove</span>
+                Delete User
+              </button>
+            </div>
+            <button type="submit" class="btn btn-primary">
+              <span class="material-icons">save</span>
+              Save Changes
+            </button>
+          </div>
+        </form>
+      </div>
+    `;
+    }
+    renderFormSections() {
+        if (!this.schema)
+            return '';
+        // Group fields by the 'group' attribute from schema
+        const groupedFields = {};
+        const ungroupedFields = [];
+        for (const [fieldName, attr] of Object.entries(this.schema.attributes)) {
+            // Skip objectClass (it's fixed)
+            if (fieldName === 'objectClass')
+                continue;
+            if (attr.group) {
+                if (!groupedFields[attr.group]) {
+                    groupedFields[attr.group] = [];
+                }
+                groupedFields[attr.group].push(fieldName);
+            }
+            else {
+                ungroupedFields.push(fieldName);
+            }
+        }
+        // Render grouped sections
+        let html = Object.entries(groupedFields)
+            .map(([title, fields]) => `
+      <div class="form-section">
+        <div class="form-section-title">${UserEditor.escapeHtml(title)}</div>
+        <div class="form-row">
+          ${fields
+            .map(field => this.renderField(field))
+            .filter(f => f)
+            .join('')}
+        </div>
+      </div>
+    `)
+            .join('');
+        // Render ungrouped fields in a default section if any
+        if (ungroupedFields.length > 0) {
+            html += `
+      <div class="form-section">
+        <div class="form-section-title">Other Fields</div>
+        <div class="form-row">
+          ${ungroupedFields
+                .map(field => this.renderField(field))
+                .filter(f => f)
+                .join('')}
+        </div>
+      </div>
+    `;
+        }
+        return html;
+    }
+    renderField(fieldName) {
+        const attr = this.schema?.attributes[fieldName];
+        if (!attr)
+            return '';
+        // Skip fixed fields - they cannot be edited
+        if (attr.fixed) {
+            return '';
+        }
+        // Hide organizationLink and organizationPath fields - use Move button instead
+        if (attr.role === 'organizationLink' || attr.role === 'organizationPath') {
+            return '';
+        }
+        // Show identifier fields as disabled
+        if (attr.role === 'identifier') {
+            return this.renderIdentifierField(fieldName);
+        }
+        // Pointer fields
+        if (attr.type === 'pointer' || attr.items?.type === 'pointer') {
+            return `<div id="pointer-${UserEditor.escapeHtml(fieldName)}"></div>`;
+        }
+        // Array fields
+        if (attr.type === 'array') {
+            return this.renderArrayField(fieldName, attr);
+        }
+        // Number fields
+        if (attr.type === 'number' || attr.type === 'integer') {
+            return this.renderNumberField(fieldName, attr);
+        }
+        // String fields
+        return this.renderStringField(fieldName, attr);
+    }
+    renderIdentifierField(fieldName) {
+        const value = this.formData[fieldName];
+        const displayValue = Array.isArray(value) ? value[0] : value || '';
+        return `
+      <div class="form-group">
+        <label class="form-label">${UserEditor.escapeHtml(fieldName)}</label>
+        <input
+          type="text"
+          class="form-input"
+          value="${UserEditor.escapeHtml(displayValue)}"
+          disabled
+        />
+      </div>
+    `;
+    }
+    renderStringField(fieldName, attr) {
+        const value = this.formData[fieldName] || '';
+        const inputType = attr.test?.includes('@')
+            ? 'email'
+            : fieldName === 'userPassword'
+                ? 'password'
+                : 'text';
+        return `
+      <div class="form-group">
+        <label class="form-label">
+          ${UserEditor.escapeHtml(fieldName)}
+          ${attr.required ? '<span class="required">*</span>' : ''}
+        </label>
+        <input
+          type="${UserEditor.escapeHtml(inputType)}"
+          class="form-input"
+          name="${UserEditor.escapeHtml(fieldName)}"
+          value="${UserEditor.escapeHtml(value)}"
+          ${attr.required ? 'required' : ''}
+        />
+      </div>
+    `;
+    }
+    renderNumberField(fieldName, attr) {
+        const value = this.formData[fieldName] || '';
+        return `
+      <div class="form-group">
+        <label class="form-label">
+          ${UserEditor.escapeHtml(fieldName)}
+          ${attr.required ? '<span class="required">*</span>' : ''}
+        </label>
+        <input
+          type="number"
+          class="form-input"
+          name="${UserEditor.escapeHtml(fieldName)}"
+          value="${UserEditor.escapeHtml(value)}"
+          ${attr.required ? 'required' : ''}
+        />
+      </div>
+    `;
+    }
+    renderArrayField(fieldName, attr) {
+        const values = Array.isArray(this.formData[fieldName])
+            ? this.formData[fieldName]
+            : [];
+        const inputType = attr.items?.type === 'string' && attr.items?.test?.includes('@')
+            ? 'email'
+            : 'text';
+        return `
+      <div class="form-group">
+        <label class="form-label">
+          ${UserEditor.escapeHtml(fieldName)}
+          ${attr.required ? '<span class="required">*</span>' : ''}
+        </label>
+        <div class="array-field" data-field="${UserEditor.escapeHtml(fieldName)}">
+          ${values
+            .map((val, idx) => `
+            <div class="array-item" data-index="${idx}">
+              <input
+                type="${UserEditor.escapeHtml(inputType)}"
+                class="form-input array-string-item"
+                value="${UserEditor.escapeHtml(val)}"
+              />
+              <button type="button" class="btn btn-secondary btn-icon remove-array-item">
+                <span class="material-icons">remove</span>
+              </button>
+            </div>
+          `)
+            .join('')}
+          <button type="button" class="btn btn-secondary add-array-item" data-field="${UserEditor.escapeHtml(fieldName)}">
+            <span class="material-icons">add</span>
+            Add ${UserEditor.escapeHtml(fieldName)}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    async initPointerFields() {
+        if (!this.schema)
+            return;
+        const pointerFieldNames = Object.entries(this.schema.attributes)
+            .filter(([, attr]) => (attr.type === 'pointer' || attr.items?.type === 'pointer') &&
+            !attr.fixed)
+            .map(([name]) => name);
+        for (const fieldName of pointerFieldNames) {
+            const attr = this.schema.attributes[fieldName];
+            const value = this.formData[fieldName];
+            const pointerField = new PointerField(this.api, fieldName, attr, value, newValue => {
+                this.formData[fieldName] = newValue;
+                this.rerenderPointerField(fieldName);
+            });
+            await pointerField.init();
+            this.pointerFields.set(fieldName, pointerField);
+            // Render into placeholder
+            const placeholder = this.container.querySelector(`#pointer-${fieldName}`);
+            if (placeholder) {
+                placeholder.innerHTML = pointerField.render();
+                pointerField.attachHandlers(placeholder);
+            }
+        }
+    }
+    rerenderPointerField(fieldName) {
+        const pointerField = this.pointerFields.get(fieldName);
+        if (!pointerField)
+            return;
+        const placeholder = this.container.querySelector(`#pointer-${fieldName}`);
+        if (placeholder) {
+            placeholder.innerHTML = pointerField.render();
+            pointerField.attachHandlers(placeholder);
+        }
+    }
+    attachHandlers() {
+        const form = this.container.querySelector('#user-edit-form');
+        form?.addEventListener('submit', e => this.handleSubmit(e));
+        // Move button
+        const moveBtn = this.container.querySelector('#move-user-btn');
+        moveBtn?.addEventListener('click', () => this.handleMove());
+        // Delete button
+        const deleteBtn = this.container.querySelector('#delete-user-btn');
+        deleteBtn?.addEventListener('click', () => this.handleDelete());
+        // String/number inputs
+        this.container
+            .querySelectorAll('input[name]')
+            .forEach(input => {
+            input.addEventListener('input', () => {
+                const fieldName = input.name;
+                const attr = this.schema?.attributes[fieldName];
+                if (attr?.type === 'number' || attr?.type === 'integer') {
+                    this.formData[fieldName] = input.value
+                        ? parseInt(input.value, 10)
+                        : '';
+                }
+                else {
+                    this.formData[fieldName] = input.value;
+                }
+            });
+        });
+        // Array fields
+        this.attachArrayFieldHandlers();
+    }
+    attachArrayFieldHandlers() {
+        // Handle array item changes
+        this.container
+            .querySelectorAll('.array-field')
+            .forEach((arrayContainer) => {
+            const fieldName = arrayContainer.getAttribute('data-field');
+            if (!fieldName)
+                return;
+            arrayContainer
+                .querySelectorAll('.array-string-item')
+                .forEach((input, idx) => {
+                input.addEventListener('input', () => {
+                    const values = Array.isArray(this.formData[fieldName])
+                        ? [...this.formData[fieldName]]
+                        : [];
+                    values[idx] = input.value;
+                    this.formData[fieldName] = values;
+                });
+            });
+            arrayContainer
+                .querySelectorAll('.remove-array-item')
+                .forEach((btn, idx) => {
+                btn.addEventListener('click', () => {
+                    const values = Array.isArray(this.formData[fieldName])
+                        ? [...this.formData[fieldName]]
+                        : [];
+                    values.splice(idx, 1);
+                    this.formData[fieldName] = values;
+                    this.rerenderArrayField(fieldName);
+                });
+            });
+        });
+        // Handle add buttons
+        this.container.querySelectorAll('.add-array-item').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const fieldName = btn.getAttribute('data-field');
+                if (!fieldName)
+                    return;
+                const values = Array.isArray(this.formData[fieldName])
+                    ? [...this.formData[fieldName]]
+                    : [];
+                values.push('');
+                this.formData[fieldName] = values;
+                this.rerenderArrayField(fieldName);
+            });
+        });
+    }
+    rerenderArrayField(fieldName) {
+        const attr = this.schema?.attributes[fieldName];
+        if (!attr)
+            return;
+        const arrayContainer = this.container.querySelector(`.array-field[data-field="${fieldName}"]`)?.parentElement;
+        if (arrayContainer) {
+            const newHtml = attr.type === 'pointer' || attr.items?.type === 'pointer'
+                ? this.pointerFields.get(fieldName)?.render() || ''
+                : this.renderArrayField(fieldName, attr);
+            arrayContainer.outerHTML = newHtml;
+            // Reattach handlers
+            if (attr.type === 'pointer' || attr.items?.type === 'pointer') {
+                const placeholder = this.container.querySelector(`#pointer-${fieldName}`);
+                if (placeholder) {
+                    const pointerField = this.pointerFields.get(fieldName);
+                    pointerField?.attachHandlers(placeholder);
+                }
+            }
+            else {
+                this.attachArrayFieldHandlers();
+            }
+        }
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        const alertContainer = this.container.querySelector('#alert-container');
+        const submitBtn = this.container.querySelector('button[type="submit"]');
+        if (alertContainer)
+            alertContainer.innerHTML = '';
+        if (submitBtn)
+            submitBtn.disabled = true;
+        try {
+            await this.api.updateUser(this.userDn, this.formData);
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-success">
+            <span class="material-icons">check_circle</span>
+            <div>User updated successfully!</div>
+          </div>
+        `;
+            }
+            if (this.onSaved)
+                this.onSaved();
+        }
+        catch (error) {
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-error">
+            <span class="material-icons">error</span>
+            <div>${UserEditor.escapeHtml(error.message)}</div>
+          </div>
+        `;
+            }
+        }
+        finally {
+            if (submitBtn)
+                submitBtn.disabled = false;
+        }
+    }
+    async handleMove() {
+        if (!this.user || !this.schema)
+            return;
+        // Find the organizationLink field to get current organization
+        const orgLinkField = Object.entries(this.schema.attributes).find(([, attr]) => attr.role === 'organizationLink');
+        if (!orgLinkField) {
+            alert('This user type does not support moving between organizations');
+            return;
+        }
+        const [orgLinkFieldName] = orgLinkField;
+        const currentOrgDn = Array.isArray(this.user[orgLinkFieldName])
+            ? String(this.user[orgLinkFieldName][0])
+            : String(this.user[orgLinkFieldName] || '');
+        if (!currentOrgDn) {
+            alert('User does not have an organization link');
+            return;
+        }
+        const modal = new MoveUserModal(this.api, currentOrgDn, async (targetOrgDn) => {
+            await this.performMove(targetOrgDn);
+        });
+        await modal.show();
+    }
+    async performMove(targetOrgDn) {
+        const alertContainer = this.container.querySelector('#alert-container');
+        const moveBtn = this.container.querySelector('#move-user-btn');
+        if (alertContainer)
+            alertContainer.innerHTML = '';
+        if (moveBtn) {
+            moveBtn.disabled = true;
+            moveBtn.innerHTML = `
+        <span class="spinner" style="width: 1rem; height: 1rem; border-width: 2px;"></span>
+        Moving...
+      `;
+        }
+        try {
+            const result = await this.api.moveUser(this.userDn, targetOrgDn);
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-success">
+            <span class="material-icons">check_circle</span>
+            <div>User moved successfully!</div>
+          </div>
+        `;
+            }
+            // Update the userDn if it changed
+            if (result.newDn) {
+                this.userDn = result.newDn;
+            }
+            // Reload the user data to show updated organization
+            await this.init();
+            if (this.onSaved)
+                this.onSaved();
+        }
+        catch (error) {
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-error">
+            <span class="material-icons">error</span>
+            <div>${UserEditor.escapeHtml(error.message)}</div>
+          </div>
+        `;
+            }
+            // Re-enable button on error
+            if (moveBtn) {
+                moveBtn.disabled = false;
+                moveBtn.innerHTML = `
+          <span class="material-icons">drive_file_move</span>
+          Move User
+        `;
+            }
+            throw error;
+        }
+    }
+    async handleDelete() {
+        if (!confirm(`Are you sure you want to delete this user?\n\n${this.userDn}`)) {
+            return;
+        }
+        const alertContainer = this.container.querySelector('#alert-container');
+        const deleteBtn = this.container.querySelector('#delete-user-btn');
+        if (alertContainer)
+            alertContainer.innerHTML = '';
+        if (deleteBtn)
+            deleteBtn.disabled = true;
+        try {
+            await this.api.deleteUser(this.userDn);
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-success">
+            <span class="material-icons">check_circle</span>
+            <div>User deleted successfully!</div>
+          </div>
+        `;
+            }
+            if (this.onDeleted)
+                this.onDeleted();
+        }
+        catch (error) {
+            if (alertContainer) {
+                alertContainer.innerHTML = `
+          <div class="alert alert-error">
+            <span class="material-icons">error</span>
+            <div>${UserEditor.escapeHtml(error.message)}</div>
+          </div>
+        `;
+            }
+            if (deleteBtn)
+                deleteBtn.disabled = false;
+        }
+    }
+    async refresh() {
+        await this.init();
+    }
+}
+
+/**
+ * LDAP User Editor - User List Component
+ * Shows users in a selected organization
+ */
+class UserList {
+    constructor(container, api, orgDn, onSelectUser) {
+        this.users = [];
+        this.searchQuery = '';
+        this.schema = null;
+        this.config = null;
+        this.container = container;
+        this.api = api;
+        this.orgDn = orgDn;
+        this.onSelectUser = onSelectUser;
+    }
+    async init() {
+        // Load config and schema first
+        this.config = await this.api.getConfig();
+        const usersResource = this.config.features?.ldapFlatGeneric?.flatResources?.find(r => r.pluralName === 'users' || r.name === 'users');
+        if (usersResource?.schemaUrl) {
+            this.schema = await this.api.getSchema(usersResource.schemaUrl);
+        }
+        this.render();
+        await this.loadUsers();
+    }
+    render() {
+        this.container.innerHTML = `
+      <div class="user-list-container">
+        <div class="user-list-header">
+          <h2>
+            <span class="material-icons">people</span>
+            Users
+          </h2>
+          <div class="search-box">
+            <span class="material-icons">search</span>
+            <input
+              type="text"
+              placeholder="Search users in this organization..."
+              id="user-list-search-input"
+            />
+          </div>
+        </div>
+        <div class="user-list" id="user-list-items">
+          <div class="loading">
+            <div class="spinner"></div>
+          </div>
+        </div>
+      </div>
+    `;
+        const searchInput = this.container.querySelector('#user-list-search-input');
+        searchInput?.addEventListener('input', e => {
+            this.searchQuery = e.target.value;
+            this.renderUserList();
+        });
+    }
+    async loadUsers() {
+        const listEl = this.container.querySelector('#user-list-items');
+        if (!listEl)
+            return;
+        try {
+            listEl.innerHTML =
+                '<div class="loading"><div class="spinner"></div></div>';
+            // Use organization subnodes API to get users in this org
+            // Filter by the first objectClass from schema to get only users (not groups/OUs)
+            const baseUrl = this.api['baseUrl'] || window.location.origin;
+            const objectClass = this.schema?.entity?.objectClass?.[1] || 'twakeAccount'; // Use second objectClass (not 'top')
+            const res = await fetch(`${baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(this.orgDn)}/subnodes?objectClass=${encodeURIComponent(objectClass)}`);
+            if (!res.ok)
+                throw new Error('Failed to fetch organization users');
+            const items = (await res.json());
+            // Filter only user entries using schema objectClass
+            // An item is a user if it has ALL the expected objectClasses
+            const expectedObjectClasses = this.schema?.entity?.objectClass || [];
+            const mainAttribute = this.schema?.entity?.mainAttribute || '';
+            this.users = items.filter(item => {
+                const objectClass = Array.isArray(item.objectClass)
+                    ? item.objectClass
+                    : [item.objectClass];
+                // Must have the mainAttribute field (uid, sAMAccountName, etc.)
+                if (!item[mainAttribute])
+                    return false;
+                // Check if item has ALL the expected objectClasses
+                return expectedObjectClasses.every(expected => objectClass.includes(expected));
+            });
+            this.renderUserList();
+        }
+        catch (error) {
+            console.error('Failed to load users:', error);
+            listEl.innerHTML =
+                '<div class="empty-state"><span class="material-icons">error</span><p>Failed to load users</p></div>';
+        }
+    }
+    getFirstValue(value) {
+        if (!value)
+            return '';
+        if (Array.isArray(value))
+            return value[0] || '';
+        return String(value);
+    }
+    getFieldNameByRole(role) {
+        if (!this.schema)
+            return null;
+        const field = Object.entries(this.schema.attributes).find(([, attr]) => attr.role === role);
+        return field ? field[0] : null;
+    }
+    getFieldValueByRole(user, role) {
+        const fieldName = this.getFieldNameByRole(role);
+        if (!fieldName)
+            return '';
+        return this.getFirstValue(user[fieldName]);
+    }
+    renderUserList() {
+        const listEl = this.container.querySelector('#user-list-items');
+        if (!listEl)
+            return;
+        // Get field names from schema roles
+        const displayNameField = this.getFieldNameByRole('displayName');
+        const identifierField = this.schema?.entity?.mainAttribute || '';
+        const emailField = this.getFieldNameByRole('primaryEmail');
+        // Filter users by search query
+        const filteredUsers = this.searchQuery
+            ? this.users.filter(user => {
+                const displayName = displayNameField
+                    ? this.getFirstValue(user[displayNameField]).toLowerCase()
+                    : '';
+                const identifier = this.getFirstValue(user[identifierField]).toLowerCase();
+                const email = emailField
+                    ? this.getFirstValue(user[emailField]).toLowerCase()
+                    : '';
+                const query = this.searchQuery.toLowerCase();
+                return (displayName.includes(query) ||
+                    identifier.includes(query) ||
+                    email.includes(query));
+            })
+            : this.users;
+        if (filteredUsers.length === 0) {
+            listEl.innerHTML =
+                '<div class="empty-state"><span class="material-icons">person_search</span><p>No users found</p></div>';
+            return;
+        }
+        listEl.innerHTML = filteredUsers
+            .map(user => {
+            const displayName = displayNameField
+                ? this.getFirstValue(user[displayNameField])
+                : '';
+            const identifier = this.getFirstValue(user[identifierField]);
+            const email = emailField ? this.getFirstValue(user[emailField]) : '';
+            const name = displayName || identifier || 'Unknown';
+            return `
+      <div
+        class="tree-node"
+        data-dn="${user.dn}"
+      >
+        <span class="material-icons">person</span>
+        <div class="tree-node-content">
+          <div class="tree-node-name">
+            ${name}
+          </div>
+          ${email ? `<div class="tree-node-email">${email}</div>` : ''}
+        </div>
+      </div>
+    `;
+        })
+            .join('');
+        // Add click handlers
+        listEl.querySelectorAll('.tree-node').forEach(node => {
+            node.addEventListener('click', () => {
+                const dn = node.getAttribute('data-dn');
+                if (dn) {
+                    this.onSelectUser(dn);
+                }
+            });
+        });
+    }
+    async refresh() {
+        await this.loadUsers();
+    }
+}
+
+/**
+ * LDAP User Editor - Main class
+ * @author Xavier Guimard
+ */
+class LdapUserEditor {
+    constructor(options) {
+        this.container = null;
+        this.userTree = null;
+        this.userEditor = null;
+        this.userList = null;
+        this.currentUserDn = null;
+        this.currentOrgDn = null;
+        this.config = null;
+        this.options = {
+            apiBaseUrl: typeof window !== 'undefined' ? window.location.origin : '',
+            ...options,
+        };
+        this.api = new UserApiClient(this.options.apiBaseUrl);
+    }
+    async init() {
+        this.container = document.getElementById(this.options.containerId);
+        if (!this.container) {
+            throw new Error(`Container #${this.options.containerId} not found`);
+        }
+        // Load config first
+        this.config = await this.api.getConfig();
+        this.render();
+        await this.initComponents();
+    }
+    render() {
+        if (!this.container)
+            return;
+        this.container.innerHTML = `
+      <div class="ldap-user-editor">
+        <div class="editor-layout">
+          <div id="user-tree-container" class="demo-panel"></div>
+          <div id="user-editor-container" class="demo-panel">
+            <div class="empty-state">
+              <span class="material-icons">person_search</span>
+              <p>Select a user from the list to edit</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async initComponents() {
+        const treeContainer = document.getElementById('user-tree-container');
+        if (!treeContainer)
+            return;
+        this.userTree = new UserTree(treeContainer, this.options.apiBaseUrl || window.location.origin, orgDn => this.onOrganizationSelected(orgDn));
+        try {
+            await this.userTree.init();
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    async onOrganizationSelected(dn) {
+        const editorContainer = document.getElementById('user-editor-container');
+        if (!editorContainer)
+            return;
+        this.currentOrgDn = dn;
+        this.currentUserDn = null;
+        try {
+            // Show user list for this organization
+            this.userList = new UserList(editorContainer, this.api, dn, userDn => this.onUserSelected(userDn));
+            await this.userList.init();
+        }
+        catch (error) {
+            this.handleError(error);
+            editorContainer.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">error</span>
+          <p>Failed to load users for this organization</p>
+        </div>
+      `;
+        }
+    }
+    async onUserSelected(dn) {
+        this.currentUserDn = dn;
+        const editorContainer = document.getElementById('user-editor-container');
+        if (!editorContainer)
+            return;
+        this.userEditor = new UserEditor(editorContainer, this.api, dn, () => {
+            if (this.options.onUserSaved) {
+                this.options.onUserSaved(dn);
+            }
+            // Refresh the user list if we have one
+            if (this.currentOrgDn && this.userList) {
+                this.userList.refresh();
+            }
+        }, () => {
+            // On user deleted
+            this.deleteUser(dn);
+        });
+        try {
+            await this.userEditor.init();
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    handleError(error) {
+        console.error('LDAP User Editor error:', error);
+        if (this.options.onError) {
+            this.options.onError(error);
+        }
+    }
+    async refresh() {
+        await this.userTree?.refresh();
+        if (this.currentUserDn) {
+            await this.userEditor?.refresh();
+        }
+    }
+    destroy() {
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        this.userTree = null;
+        this.userEditor = null;
+        this.currentUserDn = null;
+    }
+    async createUser(userData) {
+        try {
+            const result = await this.api.createUser(userData);
+            // Refresh the user list if we have one
+            if (this.userList) {
+                await this.userList.refresh();
+            }
+            return result;
+        }
+        catch (error) {
+            this.handleError(error);
+            throw error;
+        }
+    }
+    async deleteUser(dn) {
+        try {
+            await this.api.deleteUser(dn);
+            // Clear current selection if we deleted the selected user
+            if (this.currentUserDn === dn) {
+                this.currentUserDn = null;
+                const editorContainer = document.getElementById('user-editor-container');
+                if (editorContainer) {
+                    editorContainer.innerHTML = `
+            <div class="empty-state">
+              <span class="material-icons">person_search</span>
+              <p>Select a user from the list to edit</p>
+            </div>
+          `;
+                }
+            }
+            // Refresh the user list
+            if (this.userList) {
+                await this.userList.refresh();
+            }
+        }
+        catch (error) {
+            this.handleError(error);
+            throw error;
+        }
+    }
+    getConfig() {
+        return this.config;
+    }
+    getApi() {
+        return this.api;
+    }
+    getCurrentOrgDn() {
+        return this.currentOrgDn;
+    }
+    getCurrentUserDn() {
+        return this.currentUserDn;
+    }
+}
+
+export { LdapUserEditor };
+//# sourceMappingURL=ldap-user-editor.esm.js.map