ldap-rest 0.0.1

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

@@ -0,0 +1,1905 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LdapUserEditor = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * 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;
+        }
+    }
+
+    exports.LdapUserEditor = LdapUserEditor;
+
+}));
+//# sourceMappingURL=ldap-user-editor.js.map