ldap-rest 0.0.1

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

@@ -0,0 +1,1021 @@
+(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.LdapUnitEditor = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * 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);
+        }
+    }
+
+    exports.LdapUnitEditor = LdapUnitEditor;
+
+}));
+//# sourceMappingURL=ldap-unit-editor.js.map