ldap-rest 0.0.1

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

@@ -0,0 +1,1407 @@
+(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.LdapGroupEditor = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * API Client for LDAP Group operations
+     */
+    class GroupApiClient {
+        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 getGroups(orgDn) {
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/organizations/${encodeURIComponent(orgDn)}/subnodes?objectClass=groupOfNames`);
+            if (!response.ok) {
+                throw new Error(`Failed to load groups: ${response.statusText}`);
+            }
+            const subnodes = await response.json();
+            // Filter to keep only groups
+            return subnodes.filter((node) => {
+                const classes = Array.isArray(node.objectClass)
+                    ? node.objectClass
+                    : [node.objectClass];
+                return classes.includes('groupOfNames') || classes.includes('group');
+            });
+        }
+        async getGroup(dn) {
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(dn)}`);
+            if (!response.ok) {
+                throw new Error(`Failed to load group: ${response.statusText}`);
+            }
+            return response.json();
+        }
+        async updateGroup(dn, data) {
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${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 group: ${error}`);
+            }
+        }
+        async createEntry(dn, data) {
+            // Use the groups API for creating groups
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(`Failed to create entry: ${error}`);
+            }
+        }
+        async deleteEntry(dn) {
+            // Use the groups API for deleting groups
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(dn)}`, {
+                method: 'DELETE',
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(`Failed to delete entry: ${error}`);
+            }
+        }
+        async moveGroup(cn, targetOrgDn) {
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(cn)}/move`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ targetOrgDn }),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(`Failed to move group: ${error}`);
+            }
+        }
+        async renameGroup(cn, newCn) {
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/groups/${encodeURIComponent(cn)}/rename`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ newCn }),
+            });
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(`Failed to rename group: ${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,
+            }));
+        }
+    }
+
+    /**
+     * Group Tree Component - Shows organizations tree (same as UserTree)
+     */
+    class GroupTree {
+        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="group-tree">
+        <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+          <span class="material-icons">account_tree</span>
+          Organizations
+        </h3>
+        <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();
+            }
+            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 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]);
+        }
+    }
+
+    /**
+     * Move Group Modal Component - Modal for selecting target organization when moving a group
+     */
+    class MoveGroupModal {
+        constructor(api, currentOrgDn, onMove) {
+            this.modal = null;
+            this.expandedNodes = new Set();
+            this.selectedOrgDn = null;
+            this.api = api;
+            this.currentOrgDn = currentOrgDn;
+            this.onMove = onMove;
+        }
+        async show() {
+            // Create modal backdrop
+            this.modal = document.createElement('div');
+            this.modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    `;
+            // Create modal content
+            const modalContent = document.createElement('div');
+            modalContent.style.cssText = `
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    `;
+            modalContent.innerHTML = `
+      <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+        <span class="material-icons">drive_file_move</span>
+        Move Group to Organization
+      </h3>
+      <p style="margin: 0 0 16px 0; color: #666;">Select the target organization:</p>
+      <div id="org-tree" style="margin-bottom: 24px; max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; padding: 12px;">
+        <div class="loading"><div class="spinner"></div></div>
+      </div>
+      <div style="display: flex; gap: 12px; justify-content: flex-end;">
+        <button type="button" id="cancel-move-btn" style="padding: 10px 20px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer;">Cancel</button>
+        <button type="button" id="confirm-move-btn" disabled style="padding: 10px 20px; background: var(--primary-color, #6200ee); color: white; 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 Here
+        </button>
+      </div>
+    `;
+            this.modal.appendChild(modalContent);
+            document.body.appendChild(this.modal);
+            // Attach event listeners
+            const cancelBtn = this.modal.querySelector('#cancel-move-btn');
+            if (cancelBtn) {
+                cancelBtn.addEventListener('click', () => this.close());
+            }
+            const confirmBtn = this.modal.querySelector('#confirm-move-btn');
+            if (confirmBtn) {
+                confirmBtn.addEventListener('click', () => this.handleConfirm());
+            }
+            // Click outside to close
+            this.modal.addEventListener('click', e => {
+                if (e.target === this.modal) {
+                    this.close();
+                }
+            });
+            // Load organization tree
+            await this.loadOrgTree();
+        }
+        async loadOrgTree() {
+            const treeContainer = this.modal?.querySelector('#org-tree');
+            if (!treeContainer)
+                return;
+            try {
+                // Get top organization
+                const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/top`);
+                if (!response.ok)
+                    throw new Error('Failed to load organizations');
+                const topOrg = await response.json();
+                const rootDn = topOrg.dn;
+                // Render tree starting from root
+                const html = await this.renderNode(rootDn, 0);
+                treeContainer.innerHTML = html;
+                this.attachTreeEventListeners();
+            }
+            catch (error) {
+                console.error('Failed to load organization tree:', error);
+                treeContainer.innerHTML = `<p style="color: #f44336;">Failed to load organizations</p>`;
+            }
+        }
+        async renderNode(dn, level) {
+            const isExpanded = this.expandedNodes.has(dn);
+            const isSelected = this.selectedOrgDn === dn;
+            const isCurrent = this.currentOrgDn === dn;
+            const indent = level * 20;
+            // Get node info
+            const response = await fetch(`${this.api['baseUrl']}/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;
+            }
+            const nodeClass = `tree-node ${isSelected ? 'selected' : ''} ${isCurrent ? 'current-org' : ''}`;
+            const nodeStyle = `padding-left: ${indent}px; padding: 8px 8px 8px ${indent}px; cursor: ${isCurrent ? 'not-allowed' : 'pointer'}; display: flex; align-items: center; gap: 4px; ${isCurrent ? 'opacity: 0.5; background: #f5f5f5;' : isSelected ? 'background: #e3f2fd;' : ''}`;
+            let html = `
+      <div class="${nodeClass}" style="${nodeStyle}" data-dn="${this.escapeHtml(dn)}" data-is-current="${isCurrent}">
+        <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>
+        ${isCurrent ? '<span style="font-size: 12px; color: #666; margin-left: 8px;">(current)</span>' : ''}
+      </div>
+    `;
+            // If expanded, load and render subnodes
+            if (isExpanded) {
+                try {
+                    const subnodesResponse = await fetch(`${this.api['baseUrl']}/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;
+        }
+        attachTreeEventListeners() {
+            const treeContainer = this.modal?.querySelector('#org-tree');
+            if (!treeContainer)
+                return;
+            // Toggle expand/collapse
+            treeContainer.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.loadOrgTree();
+                });
+            });
+            // Select organization
+            treeContainer.querySelectorAll('.tree-node').forEach(el => {
+                el.addEventListener('click', () => {
+                    const isCurrent = el.getAttribute('data-is-current') === 'true';
+                    if (isCurrent)
+                        return; // Cannot select current organization
+                    const dn = el.getAttribute('data-dn');
+                    if (!dn)
+                        return;
+                    this.selectedOrgDn = dn;
+                    // Update UI
+                    treeContainer.querySelectorAll('.tree-node').forEach(node => {
+                        node.classList.remove('selected');
+                        node.style.background = '';
+                    });
+                    el.classList.add('selected');
+                    el.style.background = '#e3f2fd';
+                    // Enable confirm button
+                    const confirmBtn = this.modal?.querySelector('#confirm-move-btn');
+                    if (confirmBtn) {
+                        confirmBtn.disabled = false;
+                        confirmBtn.style.opacity = '1';
+                        confirmBtn.style.cursor = 'pointer';
+                    }
+                });
+            });
+        }
+        async handleConfirm() {
+            if (!this.selectedOrgDn)
+                return;
+            try {
+                await this.onMove(this.selectedOrgDn);
+                this.close();
+            }
+            catch (error) {
+                console.error('Failed to move group:', error);
+                // Error will be shown by the parent component
+            }
+        }
+        close() {
+            if (this.modal) {
+                document.body.removeChild(this.modal);
+                this.modal = null;
+            }
+        }
+        escapeHtml(text) {
+            if (text == null)
+                return '';
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#x27;',
+                '/': '&#x2F;',
+            };
+            return String(text).replace(/[&<>"'/]/g, m => map[m]);
+        }
+    }
+
+    /**
+     * Group Property Editor Component - Edits properties of a selected group
+     */
+    class GroupPropertyEditor {
+        constructor(container, api, groupDn) {
+            this.group = null;
+            this.schema = null;
+            this.saveCallback = null;
+            this.container = container;
+            this.api = api;
+            this.groupDn = groupDn;
+        }
+        async init() {
+            try {
+                await this.loadGroup();
+                await this.loadSchema();
+                this.render();
+                this.attachEventListeners();
+            }
+            catch (error) {
+                console.error('Failed to init GroupPropertyEditor:', error);
+                throw error;
+            }
+        }
+        async loadGroup() {
+            console.warn('[GroupPropertyEditor] Loading group:', this.groupDn);
+            this.group = await this.api.getGroup(this.groupDn);
+            console.warn('[GroupPropertyEditor] Group loaded:', this.group);
+        }
+        async loadSchema() {
+            console.warn('[GroupPropertyEditor] Loading schema...');
+            const config = await this.api.getConfig();
+            console.warn('[GroupPropertyEditor] Config loaded:', config);
+            // First check in features.ldapGroups (from ldapGroups plugin)
+            const groupsConfig = config.features?.ldapGroups;
+            console.warn('[GroupPropertyEditor] Groups config:', groupsConfig);
+            if (groupsConfig?.schemaUrl) {
+                const response = await fetch(groupsConfig.schemaUrl);
+                this.schema = await response.json();
+                console.warn('[GroupPropertyEditor] Schema loaded from URL:', this.schema);
+            }
+            else if (groupsConfig?.schema) {
+                this.schema = groupsConfig.schema;
+                console.warn('[GroupPropertyEditor] Schema loaded from config:', this.schema);
+            }
+            else {
+                // Fallback: check in flatResources
+                const groupsResource = config.features?.ldapFlatGeneric?.flatResources?.find(r => r.pluralName === 'groups' || r.name === 'groups');
+                console.warn('[GroupPropertyEditor] Groups resource (flatResources):', groupsResource);
+                if (groupsResource?.schemaUrl) {
+                    const response = await fetch(groupsResource.schemaUrl);
+                    this.schema = await response.json();
+                    console.warn('[GroupPropertyEditor] Schema loaded from URL (flatResources):', this.schema);
+                }
+                else if (groupsResource?.schema) {
+                    this.schema = groupsResource.schema;
+                    console.warn('[GroupPropertyEditor] Schema loaded from config (flatResources):', this.schema);
+                }
+                else {
+                    // No schema configured - create a default schema from the group's attributes
+                    console.warn('[GroupPropertyEditor] No schema configured, creating default schema from group attributes');
+                    this.schema = this.createDefaultSchema();
+                    console.warn('[GroupPropertyEditor] Default schema created:', this.schema);
+                }
+            }
+        }
+        createDefaultSchema() {
+            if (!this.group) {
+                return { entity: { objectClass: [] }, attributes: {} };
+            }
+            const attributes = {};
+            // Create schema attributes from the group's actual attributes
+            for (const [key, value] of Object.entries(this.group)) {
+                if (key === 'dn' || key === '*' || key === 'objectClass')
+                    continue;
+                const isArray = Array.isArray(value);
+                attributes[key] = {
+                    type: isArray ? 'array' : 'string',
+                    required: false,
+                    fixed: key === 'dn',
+                };
+            }
+            return {
+                entity: {
+                    objectClass: Array.isArray(this.group.objectClass)
+                        ? this.group.objectClass
+                        : [this.group.objectClass],
+                },
+                attributes,
+            };
+        }
+        onSave(callback) {
+            this.saveCallback = callback;
+        }
+        render() {
+            if (!this.group)
+                return;
+            this.container.innerHTML = `
+      <div class="group-property-editor">
+        <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+          <span class="material-icons">group</span>
+          Edit Group
+        </h3>
+        <form id="group-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-group-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-group-btn" class="btn btn-danger" style="background: #d32f2f; 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;">delete</span>
+                Delete Group
+              </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.group || !this.schema) {
+                return '<div>Loading...</div>';
+            }
+            let html = '';
+            // Group fields by category
+            const basicFields = [];
+            const memberFields = [];
+            const mailFields = [];
+            for (const [fieldName, attribute] of Object.entries(this.schema.attributes)) {
+                if (attribute.fixed || fieldName === 'objectClass')
+                    continue;
+                if (fieldName === 'member' || fieldName === 'owner') {
+                    memberFields.push([fieldName, attribute]);
+                }
+                else if (fieldName.includes('mail') || fieldName.includes('Mail')) {
+                    mailFields.push([fieldName, attribute]);
+                }
+                else {
+                    basicFields.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>';
+            }
+            // Email/Mailbox Settings
+            if (mailFields.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;">Email/Mailbox Settings</div>';
+                for (const [fieldName, attribute] of mailFields) {
+                    html += this.renderField(fieldName, attribute);
+                }
+                html += '</div>';
+            }
+            // Members & Owners
+            if (memberFields.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;">Members & Owners</div>';
+                for (const [fieldName, attribute] of memberFields) {
+                    html += this.renderField(fieldName, attribute);
+                }
+                html += '</div>';
+            }
+            return html;
+        }
+        renderField(fieldName, attribute) {
+            const value = this.group?.[fieldName];
+            const label = this.getFieldLabel(fieldName);
+            const required = attribute.required ? 'required' : '';
+            if (attribute.type === 'array') {
+                const arrayValue = Array.isArray(value) ? value.join('\n') : '';
+                // Special handling for member/owner fields with add/delete buttons
+                if (fieldName === 'member' || fieldName === 'owner') {
+                    return `
+          <div class="form-group" style="margin-bottom: 16px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500;">${this.escapeHtml(label)}</label>
+            <div style="display: flex; gap: 8px; margin-bottom: 8px;">
+              <input type="text" id="${fieldName}-add-input" placeholder="Search DN or email..." style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" list="${fieldName}-suggestions" />
+              <datalist id="${fieldName}-suggestions"></datalist>
+              <button type="button" class="btn-add-${fieldName}" style="padding: 8px 16px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
+                <span class="material-icons" style="font-size: 16px;">add</span>
+                Add
+              </button>
+            </div>
+            <textarea name="${this.escapeHtml(fieldName)}" id="${fieldName}-list" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 120px; font-family: 'Roboto', sans-serif;" ${required}>${this.escapeHtml(arrayValue)}</textarea>
+            <div style="font-size: 12px; color: #666; margin-top: 4px;">
+              One DN per line. Type to search for users, or enter DN/email manually. Select a line and press Delete to remove.
+            </div>
+          </div>
+        `;
+                }
+                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
+            const type = fieldName.toLowerCase().includes('mail') ? 'email' : 'text';
+            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="${type}" 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 = {
+                cn: 'Group Name',
+                description: 'Description',
+                member: 'Members',
+                owner: 'Owners',
+                mail: 'Email Address',
+                twakeMailboxType: 'Mailbox Type',
+            };
+            return (labelMap[fieldName] ||
+                fieldName
+                    .replace(/([A-Z])/g, ' $1')
+                    .replace(/_/g, ' ')
+                    .replace(/^./, str => str.toUpperCase()));
+        }
+        attachEventListeners() {
+            const form = document.getElementById('group-edit-form');
+            if (form) {
+                form.addEventListener('submit', e => this.handleSubmit(e));
+            }
+            const deleteBtn = document.getElementById('delete-group-btn');
+            if (deleteBtn) {
+                deleteBtn.addEventListener('click', () => this.handleDelete());
+            }
+            const moveBtn = document.getElementById('move-group-btn');
+            if (moveBtn) {
+                moveBtn.addEventListener('click', () => this.handleMove());
+            }
+            // Attach listeners for member/owner add buttons
+            const addMemberBtn = this.container.querySelector('.btn-add-member');
+            if (addMemberBtn) {
+                addMemberBtn.addEventListener('click', () => this.handleAddMember('member'));
+            }
+            const addOwnerBtn = this.container.querySelector('.btn-add-owner');
+            if (addOwnerBtn) {
+                addOwnerBtn.addEventListener('click', () => this.handleAddMember('owner'));
+            }
+            // Handle Delete key for removing members/owners
+            ['member', 'owner'].forEach(fieldName => {
+                const textarea = document.getElementById(`${fieldName}-list`);
+                if (textarea) {
+                    textarea.addEventListener('keydown', e => {
+                        if (e.key === 'Delete') {
+                            this.handleDeleteMember(textarea, e);
+                        }
+                    });
+                }
+                // Add autocomplete for member/owner inputs
+                const input = document.getElementById(`${fieldName}-add-input`);
+                if (input) {
+                    let searchTimeout;
+                    input.addEventListener('input', () => {
+                        clearTimeout(searchTimeout);
+                        searchTimeout = window.setTimeout(() => {
+                            this.searchUsers(input.value, fieldName);
+                        }, 300);
+                    });
+                }
+            });
+        }
+        async searchUsers(query, fieldName) {
+            if (!query || query.length < 2)
+                return;
+            try {
+                // Search for users by CN, UID, or mail
+                const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/search?filter=(|(cn=*${encodeURIComponent(query)}*)(uid=*${encodeURIComponent(query)}*)(mail=*${encodeURIComponent(query)}*))`);
+                if (!response.ok)
+                    return;
+                const results = await response.json();
+                const datalist = document.getElementById(`${fieldName}-suggestions`);
+                if (!datalist)
+                    return;
+                datalist.innerHTML = results
+                    .slice(0, 10)
+                    .map((user) => {
+                    const label = user.cn?.[0] || user.uid?.[0] || user.mail?.[0] || user.dn;
+                    return `<option value="${this.escapeHtml(user.dn)}">${this.escapeHtml(label)}</option>`;
+                })
+                    .join('');
+            }
+            catch (error) {
+                console.error('Failed to search users:', error);
+            }
+        }
+        async handleAddMember(fieldName) {
+            const input = document.getElementById(`${fieldName}-add-input`);
+            const textarea = document.getElementById(`${fieldName}-list`);
+            if (!input || !textarea)
+                return;
+            const valueToAdd = input.value.trim();
+            if (!valueToAdd) {
+                alert('Please enter a DN or email address');
+                return;
+            }
+            // Get current members/owners
+            const currentValues = textarea.value
+                .split('\n')
+                .map(v => v.trim())
+                .filter(v => v);
+            // Check if already exists
+            if (currentValues.includes(valueToAdd)) {
+                alert(`This ${fieldName} already exists`);
+                return;
+            }
+            // Add to list
+            currentValues.push(valueToAdd);
+            textarea.value = currentValues.join('\n');
+            // Clear input
+            input.value = '';
+            input.focus();
+        }
+        handleDeleteMember(textarea, e) {
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const value = textarea.value;
+            // Find the line(s) being selected
+            const lines = value.split('\n');
+            let currentPos = 0;
+            let startLine = 0;
+            let endLine = 0;
+            for (let i = 0; i < lines.length; i++) {
+                const lineLength = lines[i].length + 1; // +1 for newline
+                if (currentPos <= start && start < currentPos + lineLength) {
+                    startLine = i;
+                }
+                if (currentPos <= end && end <= currentPos + lineLength) {
+                    endLine = i;
+                    break;
+                }
+                currentPos += lineLength;
+            }
+            // Remove selected lines
+            e.preventDefault();
+            const newLines = lines.filter((_, i) => i < startLine || i > endLine);
+            textarea.value = newLines.join('\n');
+        }
+        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 {
+                // Check if cn has changed - if so, use rename API instead
+                if (updates.cn && this.group?.cn) {
+                    const oldCn = Array.isArray(this.group.cn)
+                        ? this.group.cn[0]
+                        : this.group.cn;
+                    const newCn = updates.cn;
+                    if (oldCn !== newCn) {
+                        // Remove cn from updates
+                        delete updates.cn;
+                        // First rename the group
+                        await this.api.renameGroup(this.groupDn, newCn);
+                        // Update the groupDn for subsequent operations
+                        const newDn = this.groupDn.replace(new RegExp(`^cn=${oldCn},`), `cn=${newCn},`);
+                        this.groupDn = newDn;
+                        // If there are other updates, apply them to the renamed group
+                        if (Object.keys(updates).length > 0) {
+                            await this.api.updateGroup(this.groupDn, updates);
+                        }
+                    }
+                    else {
+                        // cn hasn't changed, just do a normal update
+                        await this.api.updateGroup(this.groupDn, updates);
+                    }
+                }
+                else {
+                    // No cn change, normal update
+                    await this.api.updateGroup(this.groupDn, updates);
+                }
+                alert('Group updated successfully!');
+                if (this.saveCallback) {
+                    this.saveCallback();
+                }
+            }
+            catch (error) {
+                console.error('Failed to update group:', error);
+                alert(`Failed to update group: ${error.message}`);
+            }
+        }
+        async handleMove() {
+            if (!this.group)
+                return;
+            // Get current organization DN from twakeDepartmentLink attribute
+            const currentOrgDn = this.group.twakeDepartmentLink;
+            if (!currentOrgDn) {
+                alert('Cannot move group: no organization link attribute found. This group may not support move operation.');
+                return;
+            }
+            // Extract group cn from DN
+            const cnMatch = this.groupDn.match(/^cn=([^,]+)/);
+            const cn = cnMatch ? cnMatch[1] : this.groupDn;
+            const modal = new MoveGroupModal(this.api, currentOrgDn, async (targetOrgDn) => {
+                try {
+                    await this.api.moveGroup(cn, targetOrgDn);
+                    alert('Group moved successfully!');
+                    // Reload the group
+                    await this.loadGroup();
+                    this.render();
+                    this.attachEventListeners();
+                    if (this.saveCallback) {
+                        this.saveCallback();
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to move group:', error);
+                    alert(`Failed to move group: ${error.message}`);
+                }
+            });
+            await modal.show();
+        }
+        async handleDelete() {
+            if (!confirm(`Are you sure you want to delete this group?\n\n${this.groupDn}\n\nThis action cannot be undone.`)) {
+                return;
+            }
+            try {
+                await this.api.deleteEntry(this.groupDn);
+                alert('Group deleted successfully!');
+                this.container.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">group</span>
+          <p>Group deleted. Select another group to edit.</p>
+        </div>
+      `;
+            }
+            catch (error) {
+                console.error('Failed to delete group:', error);
+                alert(`Failed to delete group: ${error.message}`);
+            }
+        }
+        escapeHtml(text) {
+            if (text == null)
+                return '';
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#x27;',
+                '/': '&#x2F;',
+            };
+            return String(text).replace(/[&<>"'/]/g, m => map[m]);
+        }
+    }
+
+    /**
+     * Create Group Modal Component - Modal for creating a new group
+     */
+    class CreateGroupModal {
+        constructor(api, config, orgDn, onCreated) {
+            this.modal = null;
+            this.api = api;
+            this.config = config;
+            this.orgDn = orgDn;
+            this.onCreated = onCreated;
+        }
+        async show() {
+            // Create modal backdrop
+            this.modal = document.createElement('div');
+            this.modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    `;
+            // Get organization path for the new group
+            const orgPath = await this.getOrgPath(this.orgDn);
+            // Create modal content
+            const modalContent = document.createElement('div');
+            modalContent.style.cssText = `
+      background: white;
+      border-radius: 8px;
+      padding: 24px;
+      max-width: 500px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    `;
+            modalContent.innerHTML = `
+      <h3 style="margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;">
+        <span class="material-icons">group_add</span>
+        Create New Group
+      </h3>
+      <form id="create-group-form" style="display: flex; flex-direction: column; gap: 16px;">
+        <div>
+          <label for="group-cn" style="display: block; margin-bottom: 4px; font-weight: 500;">Group Name (cn) *</label>
+          <input type="text" id="group-cn" required pattern="[a-zA-Z][a-zA-Z0-9-]{0,254}"
+            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
+            placeholder="e.g., developers" />
+          <small style="color: #666; font-size: 12px;">Must start with a letter, contain only letters, numbers, and hyphens</small>
+        </div>
+
+        <div>
+          <label for="group-mail" style="display: block; margin-bottom: 4px; font-weight: 500;">Email Address</label>
+          <input type="email" id="group-mail"
+            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
+            placeholder="e.g., developers@example.com" />
+        </div>
+
+        <div>
+          <label for="group-description" style="display: block; margin-bottom: 4px; font-weight: 500;">Description</label>
+          <textarea id="group-description" rows="3"
+            style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"
+            placeholder="Group description..."></textarea>
+        </div>
+
+        <div style="padding: 12px; background: #f5f5f5; border-radius: 4px;">
+          <p style="margin: 0 0 8px 0; font-size: 14px; color: #666;">Organization:</p>
+          <p style="margin: 0; font-weight: 500;">${this.escapeHtml(orgPath || this.orgDn)}</p>
+        </div>
+
+        <div id="error-message" style="display: none; padding: 12px; background: #ffebee; border-radius: 4px; color: #c62828;"></div>
+
+        <div style="display: flex; gap: 12px; justify-content: flex-end;">
+          <button type="button" id="cancel-create-btn" style="padding: 10px 20px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer;">Cancel</button>
+          <button type="submit" style="padding: 10px 20px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+            <span class="material-icons" style="font-size: 18px;">group_add</span>
+            Create Group
+          </button>
+        </div>
+      </form>
+    `;
+            this.modal.appendChild(modalContent);
+            document.body.appendChild(this.modal);
+            // Attach event listeners
+            const cancelBtn = this.modal.querySelector('#cancel-create-btn');
+            if (cancelBtn) {
+                cancelBtn.addEventListener('click', () => this.close());
+            }
+            const form = this.modal.querySelector('#create-group-form');
+            if (form) {
+                form.addEventListener('submit', e => this.handleSubmit(e));
+            }
+            // Click outside to close
+            this.modal.addEventListener('click', e => {
+                if (e.target === this.modal) {
+                    this.close();
+                }
+            });
+        }
+        async getOrgPath(orgDn) {
+            try {
+                const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/organizations/${encodeURIComponent(orgDn)}`);
+                if (!response.ok)
+                    return null;
+                const org = await response.json();
+                const pathAttr = this.config.features?.organizations
+                    ?.pathAttribute;
+                if (pathAttr && org[pathAttr]) {
+                    return Array.isArray(org[pathAttr]) ? org[pathAttr][0] : org[pathAttr];
+                }
+                // If no path attribute, use the DN as fallback (for root organization)
+                return orgDn;
+            }
+            catch (error) {
+                console.error('Failed to load organization path:', error);
+                return null;
+            }
+        }
+        async handleSubmit(e) {
+            e.preventDefault();
+            const cnInput = this.modal?.querySelector('#group-cn');
+            const mailInput = this.modal?.querySelector('#group-mail');
+            const descInput = this.modal?.querySelector('#group-description');
+            const errorDiv = this.modal?.querySelector('#error-message');
+            if (!cnInput)
+                return;
+            const cn = cnInput.value.trim();
+            if (!cn) {
+                this.showError(errorDiv, 'Group name is required');
+                return;
+            }
+            try {
+                // Get the group branch from config
+                // const groupBranch = this.config.ldap_groups_branch as string;
+                // const dn = `cn=${cn},${groupBranch}`;
+                // Get organization path for the group
+                const orgPath = await this.getOrgPath(this.orgDn);
+                // Build group data - only send cn, the backend will add objectClass, member, and default attributes
+                const groupData = {
+                    cn: cn,
+                };
+                // Add optional fields
+                if (mailInput?.value.trim()) {
+                    groupData.mail = mailInput.value.trim();
+                }
+                if (descInput?.value.trim()) {
+                    groupData.description = descInput.value.trim();
+                }
+                // Add organization link and path (required for twake groups)
+                const linkAttr = this.config.features?.organizations
+                    ?.linkAttribute;
+                const pathAttr = this.config.features?.organizations
+                    ?.pathAttribute;
+                if (linkAttr && pathAttr) {
+                    if (!orgPath) {
+                        this.showError(errorDiv, 'Failed to get organization path');
+                        return;
+                    }
+                    groupData[linkAttr] = this.orgDn;
+                    groupData[pathAttr] = orgPath;
+                }
+                // Create the group using the proper API
+                const response = await fetch(`${this.api['baseUrl']}/api/v1/ldap/groups`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(groupData),
+                });
+                if (!response.ok) {
+                    const error = await response.text();
+                    throw new Error(error || 'Failed to create group');
+                }
+                // Call success callback and close
+                await this.onCreated();
+                this.close();
+            }
+            catch (error) {
+                console.error('Failed to create group:', error);
+                this.showError(errorDiv, error.message);
+            }
+        }
+        showError(errorDiv, message) {
+            if (errorDiv) {
+                errorDiv.textContent = `Error: ${message}`;
+                errorDiv.style.display = 'block';
+            }
+        }
+        close() {
+            if (this.modal) {
+                document.body.removeChild(this.modal);
+                this.modal = null;
+            }
+        }
+        escapeHtml(text) {
+            if (text == null)
+                return '';
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#x27;',
+                '/': '&#x2F;',
+            };
+            return String(text).replace(/[&<>"'/]/g, m => map[m]);
+        }
+    }
+
+    /**
+     * LDAP Group Editor - Main class for editing group properties
+     * @author Xavier Guimard
+     */
+    class LdapGroupEditor {
+        constructor(options) {
+            this.container = null;
+            this.groupTree = null;
+            this.groupEditor = null;
+            this.currentGroupDn = null;
+            this.currentOrgDn = null;
+            this.config = null;
+            this.options = {
+                apiBaseUrl: typeof window !== 'undefined' ? window.location.origin : '',
+                ...options,
+            };
+            this.api = new GroupApiClient(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-group-editor">
+        <div class="editor-layout">
+          <div id="group-tree-container" class="demo-panel"></div>
+          <div id="group-editor-container" class="demo-panel">
+            <div class="empty-state">
+              <span class="material-icons">group</span>
+              <p>Select a group from the tree to edit its properties</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        }
+        async initComponents() {
+            const treeContainer = document.getElementById('group-tree-container');
+            if (!treeContainer)
+                return;
+            this.groupTree = new GroupTree(treeContainer, this.options.apiBaseUrl || window.location.origin, orgDn => this.onOrgSelected(orgDn));
+            try {
+                await this.groupTree.init();
+            }
+            catch (error) {
+                this.handleError(error);
+            }
+        }
+        async onOrgSelected(orgDn) {
+            const editorContainer = document.getElementById('group-editor-container');
+            if (!editorContainer)
+                return;
+            this.currentOrgDn = orgDn;
+            try {
+                // Load groups for this organization
+                const groups = await this.api.getGroups(orgDn);
+                // Show list of groups with create button
+                editorContainer.innerHTML = `
+        <div style="padding: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+            <h3 style="margin: 0;">Groups</h3>
+            <button type="button" id="create-group-btn" style="padding: 8px 16px; background: var(--primary-color, #6200ee); color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+              <span class="material-icons" style="font-size: 18px;">group_add</span>
+              Create
+            </button>
+          </div>
+          ${groups.length === 0
+                ? `
+            <div class="empty-state">
+              <span class="material-icons">group</span>
+              <p>No groups in this organization</p>
+            </div>
+          `
+                : `
+            <div style="display: flex; flex-direction: column; gap: 8px;">
+              ${groups
+                    .map(group => `
+                <div class="group-item" data-dn="${this.escapeHtml(group.dn)}" style="padding: 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+                  <span class="material-icons">group</span>
+                  <span>${this.escapeHtml(group.cn || group.dn)}</span>
+                </div>
+              `)
+                    .join('')}
+            </div>
+          `}
+        </div>
+      `;
+                // Attach click handlers for group items
+                editorContainer.querySelectorAll('.group-item').forEach(item => {
+                    item.addEventListener('click', () => {
+                        const groupDn = item.dataset.dn;
+                        this.onGroupSelected(groupDn);
+                    });
+                });
+                // Attach click handler for create button
+                const createBtn = editorContainer.querySelector('#create-group-btn');
+                if (createBtn) {
+                    createBtn.addEventListener('click', () => this.handleCreateGroup());
+                }
+            }
+            catch (error) {
+                this.handleError(error);
+                editorContainer.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">error</span>
+          <p>Failed to load groups</p>
+        </div>
+      `;
+            }
+        }
+        async onGroupSelected(groupDn) {
+            const editorContainer = document.getElementById('group-editor-container');
+            if (!editorContainer)
+                return;
+            this.currentGroupDn = groupDn;
+            try {
+                // Show group property editor
+                this.groupEditor = new GroupPropertyEditor(editorContainer, this.api, groupDn);
+                await this.groupEditor.init();
+                // Notify parent
+                if (this.options.onGroupSaved) {
+                    this.groupEditor.onSave(() => {
+                        this.options.onGroupSaved?.(groupDn);
+                    });
+                }
+            }
+            catch (error) {
+                this.handleError(error);
+                editorContainer.innerHTML = `
+        <div class="empty-state">
+          <span class="material-icons">error</span>
+          <p>Failed to load group properties</p>
+        </div>
+      `;
+            }
+        }
+        async handleCreateGroup() {
+            if (!this.currentOrgDn || !this.config)
+                return;
+            const modal = new CreateGroupModal(this.api, this.config, this.currentOrgDn, async () => {
+                // Refresh the group list after creation
+                await this.onOrgSelected(this.currentOrgDn);
+                if (this.options.onGroupSaved) {
+                    this.options.onGroupSaved('');
+                }
+            });
+            await modal.show();
+        }
+        escapeHtml(text) {
+            if (text == null)
+                return '';
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#x27;',
+                '/': '&#x2F;',
+            };
+            return String(text).replace(/[&<>"'/]/g, m => map[m]);
+        }
+        handleError(error) {
+            console.error('LdapGroupEditor error:', error);
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
+        }
+        // Public API
+        getApi() {
+            return this.api;
+        }
+        getConfig() {
+            return this.config;
+        }
+        getCurrentOrgDn() {
+            return this.currentOrgDn;
+        }
+        getCurrentUserDn() {
+            // For compatibility with HTML that calls getCurrentUserDn
+            return this.currentGroupDn;
+        }
+        async createUser(data) {
+            // For compatibility - actually creates a group
+            return this.api.createEntry(data.dn, data);
+        }
+        async deleteUser(dn) {
+            // For compatibility - actually deletes a group
+            return this.api.deleteEntry(dn);
+        }
+    }
+
+    exports.LdapGroupEditor = LdapGroupEditor;
+
+}));
+//# sourceMappingURL=ldap-group-editor.js.map