ldap-rest 0.0.1

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

@@ -0,0 +1,1013 @@
+/**
+ * Unit Tree Component - Shows organizations tree (same as UserTree)
+ */
+class UnitTree {
+    constructor(container, apiBaseUrl, onOrgSelect) {
+        this.expandedNodes = new Set();
+        this.selectedDn = null;
+        this.rootDn = null;
+        this.container = container;
+        this.apiBaseUrl = apiBaseUrl;
+        this.onOrgSelect = onOrgSelect;
+    }
+    async init() {
+        this.container.innerHTML = `
+      <div class="unit-tree">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+          <h3 style="margin: 0; display: flex; align-items: center; gap: 8px;">
+            <span class="material-icons">account_tree</span>
+            Organizations
+          </h3>
+          <button id="create-unit-btn" style="background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 14px;">
+            <span class="material-icons" style="font-size: 18px;">add</span>
+            Create
+          </button>
+        </div>
+        <div id="tree-content">
+          <div class="loading"><div class="spinner"></div></div>
+        </div>
+      </div>
+    `;
+        try {
+            const response = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations/top`);
+            if (!response.ok)
+                throw new Error('Failed to load organizations');
+            const topOrg = await response.json();
+            this.rootDn = topOrg.dn;
+            await this.renderTree();
+            // Attach create button listener
+            const createBtn = this.container.querySelector('#create-unit-btn');
+            if (createBtn) {
+                createBtn.addEventListener('click', () => this.handleCreateUnit());
+            }
+        }
+        catch (error) {
+            console.error('Failed to init tree:', error);
+            const treeEl = this.container.querySelector('#tree-content');
+            if (treeEl) {
+                treeEl.innerHTML =
+                    '<p style="color: #f44336;">Failed to load organizations</p>';
+            }
+        }
+    }
+    async handleCreateUnit() {
+        const parentDn = this.selectedDn || this.rootDn;
+        if (!parentDn) {
+            alert('Please select a parent organization first');
+            return;
+        }
+        // eslint-disable-next-line no-undef
+        const ouName = prompt('Enter the name for the new organizational unit (ou):');
+        if (!ouName || !ouName.trim())
+            return;
+        try {
+            const response = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    ou: ouName.trim(),
+                    parentDn,
+                }),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(error || 'Failed to create organizational unit');
+            }
+            alert(`Organizational unit "${ouName}" created successfully!`);
+            // Expand the parent node and refresh tree
+            this.expandedNodes.add(parentDn);
+            await this.renderTree();
+        }
+        catch (error) {
+            console.error('Failed to create unit:', error);
+            alert(`Failed to create unit: ${error.message}`);
+        }
+    }
+    async renderTree() {
+        const treeEl = this.container.querySelector('#tree-content');
+        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 = '<p style="color: #f44336;">Error rendering tree</p>';
+        }
+    }
+    async renderNode(dn, level) {
+        const isExpanded = this.expandedNodes.has(dn);
+        const isSelected = this.selectedDn === dn;
+        const indent = level * 20;
+        // Get node info
+        const response = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        if (!response.ok)
+            throw new Error('Failed to load node');
+        const node = await response.json();
+        // Extract display name
+        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; padding: 8px 8px 8px ${indent}px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
+        <span class="material-icons tree-node-toggle" data-dn="${this.escapeHtml(dn)}" style="font-size: 18px; cursor: pointer;">
+          ${isExpanded ? 'expand_more' : 'chevron_right'}
+        </span>
+        <span class="material-icons" style="font-size: 18px;">business</span>
+        <span class="tree-node-label" data-dn="${this.escapeHtml(dn)}">${this.escapeHtml(displayName)}</span>
+      </div>
+    `;
+        if (isExpanded) {
+            try {
+                const subnodesResponse = await fetch(`${this.apiBaseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/subnodes`);
+                if (!subnodesResponse.ok)
+                    throw new Error('Failed to load subnodes');
+                const subnodes = await subnodesResponse.json();
+                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.onOrgSelect(dn);
+                this.renderTree();
+            });
+        });
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+}
+
+/**
+ * LDAP Unit Editor - Move Unit Modal Component
+ * Modal dialog for selecting target organization when moving a unit
+ */
+class MoveUnitModal {
+    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 Unit 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 unit.
+          </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 Unit
+          </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() {
+        const container = this.modal?.querySelector('#organization-tree-container');
+        if (!container)
+            return;
+        try {
+            // Get top organization
+            const topOrg = await this.api.getOrganizations();
+            this.rootDn = topOrg.dn;
+            // Expand root by default
+            this.expandedNodes.add(this.rootDn);
+            await this.renderTree();
+        }
+        catch (error) {
+            container.innerHTML = `
+        <div class="alert alert-error">
+          <span class="material-icons">error</span>
+          <div>Failed to load organizations: ${MoveUnitModal.escapeHtml(error.message)}</div>
+        </div>
+      `;
+        }
+    }
+    async renderTree() {
+        const container = this.modal?.querySelector('#organization-tree-container');
+        if (!container || !this.rootDn)
+            return;
+        try {
+            const html = await this.renderNode(this.rootDn, 0);
+            container.innerHTML = html;
+            this.attachTreeHandlers();
+        }
+        catch (error) {
+            container.innerHTML = `
+        <div class="alert alert-error">
+          <span class="material-icons">error</span>
+          <div>Error rendering tree: ${MoveUnitModal.escapeHtml(error.message)}</div>
+        </div>
+      `;
+        }
+    }
+    async renderNode(dn, 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 node = await this.api.getUnit(dn);
+        // 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="${MoveUnitModal.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="${MoveUnitModal.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'};">
+          ${MoveUnitModal.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 {
+                // Use the organizations subnodes API to get only organizational units
+                const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/subnodes`);
+                if (!response.ok) {
+                    throw new Error('Failed to load subnodes');
+                }
+                const subnodes = await response.json();
+                // Filter for organizational units only
+                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);
+                // 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: ${MoveUnitModal.escapeHtml(error.message)}</div>
+          </div>
+        `;
+            }
+            if (moveBtn) {
+                moveBtn.disabled = false;
+                moveBtn.innerHTML = `
+          <span class="material-icons">drive_file_move</span>
+          Move Unit
+        `;
+            }
+        }
+    }
+    close() {
+        if (this.modal) {
+            this.modal.remove();
+            this.modal = null;
+        }
+    }
+}
+
+/**
+ * Unit Property Editor Component - Edits properties of a selected organizational unit
+ */
+class UnitPropertyEditor {
+    constructor(container, api, unitDn) {
+        this.unit = null;
+        this.schema = null;
+        this.saveCallback = null;
+        this.hasSubnodes = false;
+        this.container = container;
+        this.api = api;
+        this.unitDn = unitDn;
+    }
+    async init() {
+        await this.loadUnit();
+        await this.loadSchema();
+        await this.checkSubnodes();
+        this.render();
+        this.attachEventListeners();
+    }
+    async loadUnit() {
+        this.unit = await this.api.getUnit(this.unitDn);
+    }
+    async checkSubnodes() {
+        try {
+            const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/${encodeURIComponent(this.unitDn)}/subnodes`);
+            if (response.ok) {
+                const subnodes = await response.json();
+                // Check if there are any organizational subnodes
+                this.hasSubnodes = subnodes.some((node) => {
+                    const classes = Array.isArray(node.objectClass)
+                        ? node.objectClass
+                        : node.objectClass
+                            ? [node.objectClass]
+                            : [];
+                    return (classes.includes('organizationalUnit') ||
+                        classes.includes('organization'));
+                });
+            }
+        }
+        catch (error) {
+            console.error('Failed to check subnodes:', error);
+            // On error, assume it might have subnodes to be safe
+            this.hasSubnodes = false;
+        }
+    }
+    async loadSchema() {
+        console.warn('[UnitPropertyEditor] Loading schema...');
+        const config = await this.api.getConfig();
+        // First check in features.ldapOrganizations (from ldapOrganizations plugin)
+        const orgsConfig = config.features?.ldapOrganizations;
+        console.warn('[UnitPropertyEditor] Organizations config:', orgsConfig);
+        if (orgsConfig?.schemaUrl) {
+            console.warn('[UnitPropertyEditor] Loading schema from URL:', orgsConfig.schemaUrl);
+            const response = await fetch(orgsConfig.schemaUrl);
+            this.schema = await response.json();
+            console.warn('[UnitPropertyEditor] Schema loaded from URL:', this.schema);
+        }
+        else if (orgsConfig?.schema) {
+            console.warn('[UnitPropertyEditor] Using schema from config');
+            this.schema = orgsConfig.schema;
+        }
+        else {
+            // Fallback: check in flatResources
+            console.warn('[UnitPropertyEditor] Falling back to flatResources');
+            const unitsResource = config.features?.ldapFlatGeneric?.flatResources?.find(r => r.pluralName === 'organizations' || r.name === 'organizations');
+            if (unitsResource?.schemaUrl) {
+                const response = await fetch(unitsResource.schemaUrl);
+                this.schema = await response.json();
+            }
+            else if (unitsResource?.schema) {
+                this.schema = unitsResource.schema;
+            }
+            else {
+                console.warn('[UnitPropertyEditor] No schema found, using default');
+                // Create a minimal default schema
+                this.schema = {
+                    entity: {
+                        objectClass: ['organizationalUnit'],
+                    },
+                    attributes: {
+                        ou: { type: 'string', required: true },
+                        description: { type: 'string' },
+                    },
+                };
+            }
+        }
+    }
+    onSave(callback) {
+        this.saveCallback = callback;
+    }
+    render() {
+        if (!this.unit)
+            return;
+        this.container.innerHTML = `
+      <div class="unit-property-editor">
+        <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+          <span class="material-icons">business</span>
+          Edit Organizational Unit
+        </h3>
+        <form id="unit-edit-form">
+          ${this.renderFields()}
+          <div class="form-actions" style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #e0e0e0; display: flex; gap: 12px; justify-content: space-between;">
+            <button type="button" id="move-unit-btn" class="btn btn-secondary" style="background: #757575; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+              <span class="material-icons" style="font-size: 18px;">drive_file_move</span>
+              Move
+            </button>
+            <div style="display: flex; gap: 12px;">
+              <button type="button" id="delete-unit-btn" class="btn btn-danger" ${this.hasSubnodes ? 'disabled title="Cannot delete: organization has sub-organizations"' : ''} style="background: ${this.hasSubnodes ? '#ccc' : '#d32f2f'}; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: ${this.hasSubnodes ? 'not-allowed' : 'pointer'}; display: flex; align-items: center; gap: 8px; opacity: ${this.hasSubnodes ? '0.5' : '1'};">
+                <span class="material-icons" style="font-size: 18px;">delete</span>
+                Delete Unit
+              </button>
+              <button type="submit" class="btn btn-primary" style="background: var(--primary-color, #6200ee); color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+                <span class="material-icons" style="font-size: 18px;">save</span>
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    `;
+    }
+    renderFields() {
+        if (!this.unit || !this.schema) {
+            return '<div>Loading...</div>';
+        }
+        let html = '';
+        // Group fields by category
+        const basicFields = [];
+        const otherFields = [];
+        for (const [fieldName, attribute] of Object.entries(this.schema.attributes)) {
+            if (attribute.fixed || fieldName === 'objectClass')
+                continue;
+            if (fieldName === 'ou' || fieldName === 'description') {
+                basicFields.push([fieldName, attribute]);
+            }
+            else {
+                otherFields.push([fieldName, attribute]);
+            }
+        }
+        // Basic Information
+        if (basicFields.length > 0) {
+            html +=
+                '<div class="field-group" style="margin-bottom: 20px; padding: 16px; background: #f9f9f9; border-radius: 4px;">';
+            html +=
+                '<div class="field-group-title" style="font-weight: 500; color: var(--primary-color, #6200ee); margin-bottom: 12px; font-size: 14px; text-transform: uppercase;">Basic Information</div>';
+            for (const [fieldName, attribute] of basicFields) {
+                html += this.renderField(fieldName, attribute);
+            }
+            html += '</div>';
+        }
+        // Additional Properties
+        if (otherFields.length > 0) {
+            html +=
+                '<div class="field-group" style="margin-bottom: 20px; padding: 16px; background: #f9f9f9; border-radius: 4px;">';
+            html +=
+                '<div class="field-group-title" style="font-weight: 500; color: var(--primary-color, #6200ee); margin-bottom: 12px; font-size: 14px; text-transform: uppercase;">Additional Properties</div>';
+            for (const [fieldName, attribute] of otherFields) {
+                html += this.renderField(fieldName, attribute);
+            }
+            html += '</div>';
+        }
+        return html;
+    }
+    renderField(fieldName, attribute) {
+        const value = this.unit?.[fieldName];
+        const label = this.getFieldLabel(fieldName);
+        const required = attribute.required ? 'required' : '';
+        if (attribute.type === 'array') {
+            const arrayValue = Array.isArray(value) ? value.join('\n') : '';
+            return `
+        <div class="form-group" style="margin-bottom: 16px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+          <textarea name="${this.escapeHtml(fieldName)}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px; font-family: 'Roboto', sans-serif;" ${required}>${this.escapeHtml(arrayValue)}</textarea>
+          <div style="font-size: 12px; color: #666; margin-top: 4px;">Enter one value per line</div>
+        </div>
+      `;
+        }
+        if (attribute.type === 'number' || attribute.type === 'integer') {
+            return `
+        <div class="form-group" style="margin-bottom: 16px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+          <input type="number" name="${this.escapeHtml(fieldName)}" value="${value || ''}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" ${required} />
+        </div>
+      `;
+        }
+        // String field
+        return `
+      <div class="form-group" style="margin-bottom: 16px;">
+        <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+        <input type="text" name="${this.escapeHtml(fieldName)}" value="${this.escapeHtml(String(value || ''))}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;" ${required} />
+      </div>
+    `;
+    }
+    getFieldLabel(fieldName) {
+        const labelMap = {
+            ou: 'Organization Unit',
+            description: 'Description',
+        };
+        return (labelMap[fieldName] ||
+            fieldName
+                .replace(/([A-Z])/g, ' $1')
+                .replace(/_/g, ' ')
+                .replace(/^./, str => str.toUpperCase()));
+    }
+    attachEventListeners() {
+        const form = document.getElementById('unit-edit-form');
+        if (form) {
+            form.addEventListener('submit', e => this.handleSubmit(e));
+        }
+        const deleteBtn = document.getElementById('delete-unit-btn');
+        if (deleteBtn) {
+            deleteBtn.addEventListener('click', () => this.handleDelete());
+        }
+        const moveBtn = document.getElementById('move-unit-btn');
+        if (moveBtn) {
+            moveBtn.addEventListener('click', () => this.handleMove());
+        }
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        const form = e.target;
+        const formData = new FormData(form);
+        const updates = {};
+        for (const [key, value] of formData.entries()) {
+            if (this.schema?.attributes[key]?.type === 'array') {
+                updates[key] = value
+                    .split('\n')
+                    .map(v => v.trim())
+                    .filter(v => v);
+            }
+            else if (this.schema?.attributes[key]?.type === 'number' ||
+                this.schema?.attributes[key]?.type === 'integer') {
+                updates[key] = Number(value);
+            }
+            else {
+                updates[key] = value;
+            }
+        }
+        try {
+            await this.api.updateUnit(this.unitDn, updates);
+            alert('Organizational unit updated successfully!');
+            if (this.saveCallback) {
+                this.saveCallback();
+            }
+        }
+        catch (error) {
+            console.error('Failed to update unit:', error);
+            alert(`Failed to update unit: ${error.message}`);
+        }
+    }
+    async handleMove() {
+        if (!this.unit)
+            return;
+        // Extract parent DN from current unit DN
+        const parentDn = this.unitDn.split(',').slice(1).join(',');
+        const modal = new MoveUnitModal(this.api, parentDn, async (targetOrgDn) => {
+            try {
+                const result = await this.api.moveUnit(this.unitDn, targetOrgDn);
+                alert('Unit moved successfully!');
+                // Reload the unit with its new DN
+                if (result.newDn) {
+                    this.unitDn = result.newDn;
+                    await this.loadUnit();
+                    this.render();
+                    this.attachEventListeners();
+                }
+                if (this.saveCallback) {
+                    this.saveCallback();
+                }
+            }
+            catch (error) {
+                console.error('Failed to move unit:', error);
+                alert(`Failed to move unit: ${error.message}`);
+            }
+        });
+        await modal.show();
+    }
+    async handleDelete() {
+        // Don't allow delete if there are subnodes
+        if (this.hasSubnodes) {
+            alert('Cannot delete this organizational unit because it contains sub-organizations. Please delete all sub-organizations first.');
+            return;
+        }
+        if (!confirm(`Are you sure you want to delete this organizational unit?\n\n${this.unitDn}\n\nThis action cannot be undone.`)) {
+            return;
+        }
+        try {
+            await this.api.deleteEntry(this.unitDn);
+            alert('Organizational unit deleted successfully!');
+            this.container.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">business</span>
+          <p>Unit deleted. Select another unit to edit.</p>
+        </div>
+      `;
+        }
+        catch (error) {
+            console.error('Failed to delete unit:', error);
+            alert(`Failed to delete unit: ${error.message}`);
+        }
+    }
+    escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+}
+
+/**
+ * API Client for LDAP Unit operations
+ */
+class UnitApiClient {
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+    async getConfig() {
+        const response = await fetch(`${this.baseUrl}/api/v1/config`);
+        if (!response.ok) {
+            throw new Error(`Failed to load config: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async getOrganizations() {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/top`);
+        if (!response.ok) {
+            throw new Error(`Failed to load organizations: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async getUnit(dn) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`);
+        if (!response.ok) {
+            throw new Error(`Failed to load unit: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async updateUnit(dn, data) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to update unit: ${error}`);
+        }
+    }
+    async createEntry(dn, data) {
+        // Use the organizations API for creating units
+        // Extract ou and parentDn from DN
+        // DN format: ou=value,parent,dn,parts
+        const match = dn.match(/^ou=([^,]+),(.+)$/);
+        if (!match) {
+            throw new Error(`Invalid DN format: ${dn}`);
+        }
+        const [, ou, parentDn] = match;
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ou, parentDn, ...data }),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to create entry: ${error}`);
+        }
+    }
+    async deleteEntry(dn) {
+        // Use the organizations API for deleting units
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}`, {
+            method: 'DELETE',
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Failed to delete entry: ${error}`);
+        }
+    }
+    async getPointerOptions(branch) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/search?base=${encodeURIComponent(branch)}&scope=one`);
+        if (!response.ok) {
+            throw new Error(`Failed to load pointer options: ${response.statusText}`);
+        }
+        const entries = await response.json();
+        return entries.map((entry) => ({
+            dn: entry.dn,
+            label: entry.cn?.[0] || entry.ou?.[0] || entry.dn,
+        }));
+    }
+    async moveUnit(dn, targetOrgDn) {
+        const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(dn)}/move`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ targetOrgDn }),
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(error || 'Failed to move unit');
+        }
+        return response.json();
+    }
+}
+
+/**
+ * LDAP Unit Editor - Main component for editing organizational units
+ */
+class LdapUnitEditor {
+    constructor(options) {
+        this.container = null;
+        this.unitTree = null;
+        this.unitEditor = null;
+        this.currentUnitDn = null;
+        this.config = null;
+        this.options = options;
+        this.api = new UnitApiClient(options.apiBaseUrl || '');
+    }
+    async init() {
+        const container = document.getElementById(this.options.containerId);
+        if (!container) {
+            throw new Error(`Container element with id '${this.options.containerId}' not found`);
+        }
+        this.container = container;
+        // Load config first
+        this.config = await this.api.getConfig();
+        this.render();
+        await this.initializeComponents();
+    }
+    render() {
+        if (!this.container)
+            return;
+        this.container.innerHTML = `
+      <div class="ldap-unit-editor" style="display: flex; gap: 24px; height: 100%;">
+        <div id="unit-tree-container" style="flex: 0 0 300px; overflow-y: auto; border-right: 1px solid #e0e0e0; padding-right: 24px;"></div>
+        <div id="unit-editor-container" style="flex: 1; overflow-y: auto;">
+          <div class="empty-state" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #999;">
+            <span class="material-icons" style="font-size: 64px; margin-bottom: 16px;">business</span>
+            <p style="font-size: 16px; margin: 0;">Select an organizational unit to edit</p>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async initializeComponents() {
+        const treeContainer = document.getElementById('unit-tree-container');
+        if (!treeContainer)
+            return;
+        this.unitTree = new UnitTree(treeContainer, this.options.apiBaseUrl || '', unitDn => this.onUnitSelected(unitDn));
+        await this.unitTree.init();
+    }
+    async onUnitSelected(unitDn) {
+        this.currentUnitDn = unitDn;
+        const editorContainer = document.getElementById('unit-editor-container');
+        if (!editorContainer)
+            return;
+        try {
+            this.unitEditor = new UnitPropertyEditor(editorContainer, this.api, unitDn);
+            await this.unitEditor.init();
+            this.unitEditor.onSave(() => {
+                if (this.options.onUnitSaved) {
+                    this.options.onUnitSaved(unitDn);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Failed to load unit editor:', error);
+            editorContainer.innerHTML = `
+        <div class="error-state" style="padding: 24px; color: #f44336;">
+          <h3>Error loading unit</h3>
+          <p>${error.message}</p>
+        </div>
+      `;
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
+        }
+    }
+    getCurrentUnitDn() {
+        return this.currentUnitDn;
+    }
+    async refresh() {
+        if (this.unitTree) {
+            await this.unitTree.init();
+        }
+        if (this.currentUnitDn && this.unitEditor) {
+            const editorContainer = document.getElementById('unit-editor-container');
+            if (editorContainer) {
+                this.unitEditor = new UnitPropertyEditor(editorContainer, this.api, this.currentUnitDn);
+                await this.unitEditor.init();
+            }
+        }
+    }
+    // Public API for compatibility with tests
+    getApi() {
+        return this.api;
+    }
+    getConfig() {
+        return this.config;
+    }
+    getCurrentOrgDn() {
+        // For units, the current org is the current unit
+        return this.currentUnitDn;
+    }
+    getCurrentUserDn() {
+        // For compatibility - in unit context, "user" means "unit"
+        return this.currentUnitDn;
+    }
+    async createUser(data) {
+        // For compatibility - actually creates an organizational unit
+        return this.api.createEntry(data.dn, data);
+    }
+    async deleteUser(dn) {
+        // For compatibility - actually deletes an organizational unit
+        return this.api.deleteEntry(dn);
+    }
+}
+
+export { LdapUnitEditor };
+//# sourceMappingURL=ldap-unit-editor.esm.js.map