ldap-rest 0.4.7 → 0.6.0

package/static/browser/ldap-browser.js

@@ -0,0 +1,925 @@
+(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.LdapBrowser = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * DOM utility functions
+     * @module browser/shared/utils/dom
+     */
+    /**
+     * Escape HTML special characters to prevent XSS attacks
+     * Reference: https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html
+     */
+    function escapeHtml(text) {
+        if (text == null)
+            return '';
+        const map = {
+            '&': '&',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;',
+        };
+        return String(text).replace(/[&<>"'/]/g, m => map[m]);
+    }
+
+    /**
+     * Client of the low-level LDAP API (`core/ldap/raw` plugin).
+     * @module browser/ldap-browser/api/RawApiClient
+     */
+    class RawApiClient {
+        constructor(baseUrl = '', authToken) {
+            this.baseUrl = baseUrl.replace(/\/$/, '');
+            this.authToken = authToken;
+        }
+        /**
+         * Issue a GET on the raw API and decode its JSON answer.
+         *
+         * @param path path below `/api/v1/ldap/raw`
+         * @returns decoded body
+         * @throws Error carrying the server message when the status is not 2xx
+         */
+        async get(path) {
+            const headers = { Accept: 'application/json' };
+            if (this.authToken)
+                headers.Authorization = `Bearer ${this.authToken}`;
+            const response = await fetch(`${this.baseUrl}/api/v1/ldap/raw${path}`, {
+                headers,
+            });
+            if (!response.ok) {
+                let message = response.statusText;
+                try {
+                    const body = (await response.json());
+                    if (body.error)
+                        message = body.error;
+                }
+                catch {
+                    // keep the status text
+                }
+                throw new Error(`${response.status}: ${message}`);
+            }
+            return (await response.json());
+        }
+        /**
+         * Subtrees the server exposes, used as roots of the tree.
+         *
+         * @returns list of base DNs
+         */
+        async getBases() {
+            const data = await this.get('/bases');
+            return data.bases;
+        }
+        /**
+         * Server capabilities.
+         *
+         * @returns root DSE
+         */
+        getRootDse() {
+            return this.get('/rootdse');
+        }
+        /**
+         * Directory schema.
+         *
+         * @returns object classes, attribute types, syntaxes and matching rules
+         */
+        getSchema() {
+            return this.get('/schema');
+        }
+        /**
+         * Read one entry.
+         *
+         * @param dn DN of the entry
+         * @returns the entry with all its attributes
+         */
+        getEntry(dn) {
+            return this.get(`/entry/${encodeURIComponent(dn)}`);
+        }
+        /**
+         * List the direct children of an entry.
+         *
+         * @param dn DN of the parent
+         * @param withChildrenFlag ask the server which children have children
+         * @returns children sorted by RDN, with the truncation flag
+         */
+        getChildren(dn, withChildrenFlag = true) {
+            return this.get(`/children/${encodeURIComponent(dn)}${withChildrenFlag ? '?children=1' : ''}`);
+        }
+        /**
+         * Run a search.
+         *
+         * @param params search base, scope, filter and limit
+         * @returns matching entries
+         */
+        search(params) {
+            const query = new URLSearchParams({ base: params.base });
+            if (params.scope)
+                query.set('scope', params.scope);
+            if (params.filter)
+                query.set('filter', params.filter);
+            if (params.attributes?.length)
+                query.set('attributes', params.attributes.join(','));
+            if (params.limit)
+                query.set('limit', String(params.limit));
+            return this.get(`/search?${query.toString()}`);
+        }
+    }
+
+    /**
+     * Base class for browser components with proper lifecycle management
+     * Ensures all event listeners and intervals are cleaned up on destroy
+     * @module browser/shared/components/DisposableComponent
+     */
+    class DisposableComponent {
+        constructor() {
+            this._eventListeners = [];
+            this._intervals = [];
+            this._isDestroyed = false;
+        }
+        /**
+         * Register an event listener for automatic cleanup
+         * Use this instead of element.addEventListener directly
+         */
+        addManagedEventListener(target, type, listener, options) {
+            if (this._isDestroyed)
+                return;
+            target.addEventListener(type, listener, options);
+            this._eventListeners.push({ target, type, listener, options });
+        }
+        /**
+         * Register an interval for automatic cleanup
+         * Use this instead of setInterval directly
+         */
+        addManagedInterval(callback, ms) {
+            const id = setInterval(callback, ms);
+            this._intervals.push(id);
+            return id;
+        }
+        /**
+         * Check if the component has been destroyed
+         */
+        get isDestroyed() {
+            return this._isDestroyed;
+        }
+        /**
+         * Clean up all managed resources
+         * Override in subclasses but ALWAYS call super.destroy()
+         */
+        destroy() {
+            if (this._isDestroyed)
+                return;
+            this._isDestroyed = true;
+            // Remove all event listeners
+            for (const { target, type, listener, options } of this._eventListeners) {
+                target.removeEventListener(type, listener, options);
+            }
+            this._eventListeners = [];
+            // Clear all intervals
+            for (const id of this._intervals) {
+                clearInterval(id);
+            }
+            this._intervals = [];
+        }
+    }
+
+    /**
+     * Lazy directory tree: one root per exposed base, children fetched on expand.
+     * @module browser/ldap-browser/components/EntryTree
+     */
+    /** Icon picked from the object classes of an entry */
+    function iconFor(objectClass) {
+        const classes = objectClass.map(c => c.toLowerCase());
+        if (classes.includes('organizationalunit') ||
+            classes.includes('organization'))
+            return 'folder';
+        if (classes.includes('groupofnames') ||
+            classes.includes('groupofuniquenames') ||
+            classes.includes('posixgroup'))
+            return 'group';
+        if (classes.includes('inetorgperson') ||
+            classes.includes('person') ||
+            classes.includes('organizationalperson'))
+            return 'person';
+        if (classes.includes('domain') || classes.includes('dcobject'))
+            return 'dns';
+        return 'article';
+    }
+    class EntryTree extends DisposableComponent {
+        constructor(container, api, onSelect, onError) {
+            super();
+            this.roots = [];
+            this.children = new Map();
+            this.expanded = new Set();
+            this.loading = new Set();
+            this.selectedDn = null;
+            this.container = container;
+            this.api = api;
+            this.onSelect = onSelect;
+            this.onError = onError;
+            this.addManagedEventListener(this.container, 'click', event => {
+                const target = event.target.closest('[data-dn]');
+                if (!target)
+                    return;
+                const dn = target.dataset.dn;
+                if (target.classList.contains('ldap-browser-tree__toggle')) {
+                    void this.toggle(dn);
+                }
+                else {
+                    void this.select(dn);
+                }
+            });
+        }
+        /**
+         * Load the exposed bases and draw them as roots.
+         *
+         * @param bases base DNs to use as roots
+         */
+        async init(bases) {
+            this.roots = bases;
+            // Open the first root so the tree is never empty on arrival
+            if (bases.length > 0)
+                await this.expand(bases[0]);
+            this.render();
+        }
+        /**
+         * DN currently highlighted in the tree.
+         *
+         * @returns selected DN, or null
+         */
+        getSelectedDn() {
+            return this.selectedDn;
+        }
+        /**
+         * Highlight an entry and notify the parent component.
+         *
+         * @param dn DN to select
+         * @returns whatever the selection handler returns, so callers can await
+         *          the entry actually being displayed
+         */
+        select(dn) {
+            this.selectedDn = dn;
+            this.render();
+            return this.onSelect(dn);
+        }
+        /**
+         * Expand the tree down to a DN, loading every level on the way, then
+         * select it. Used to follow a search result or a DN typed by the user.
+         *
+         * @param dn DN to reveal
+         */
+        async revealAndSelect(dn) {
+            const root = this.roots.find(base => dn.toLowerCase() === base.toLowerCase() ||
+                dn.toLowerCase().endsWith(`,${base.toLowerCase()}`));
+            if (root) {
+                // Walk down from the root, expanding each ancestor
+                const relative = dn
+                    .substring(0, dn.length - root.length)
+                    .replace(/,$/, '');
+                const rdns = relative ? splitDn(relative) : [];
+                let current = root;
+                await this.expand(current);
+                // Expand the ancestors only: the target itself stays closed
+                for (let i = rdns.length - 1; i >= 1; i--) {
+                    current = `${rdns[i]},${current}`;
+                    await this.expand(current);
+                }
+            }
+            await this.select(dn);
+        }
+        /**
+         * Drop cached children so the next expand hits the server again.
+         *
+         * @param dn DN whose children must be reloaded, or undefined for all
+         */
+        invalidate(dn) {
+            if (dn)
+                this.children.delete(dn);
+            else
+                this.children.clear();
+        }
+        /**
+         * Expand a node, fetching its children the first time.
+         *
+         * @param dn DN of the node
+         */
+        async expand(dn) {
+            this.expanded.add(dn);
+            if (this.children.has(dn))
+                return;
+            this.loading.add(dn);
+            this.render();
+            try {
+                this.children.set(dn, await this.api.getChildren(dn));
+            }
+            catch (err) {
+                this.expanded.delete(dn);
+                this.onError(err);
+            }
+            finally {
+                this.loading.delete(dn);
+                this.render();
+            }
+        }
+        /**
+         * Expand or collapse a node.
+         *
+         * @param dn DN of the node
+         */
+        async toggle(dn) {
+            if (this.expanded.has(dn)) {
+                this.expanded.delete(dn);
+                this.render();
+                return;
+            }
+            await this.expand(dn);
+        }
+        /** Redraw the whole tree */
+        render() {
+            if (this.isDestroyed)
+                return;
+            this.container.innerHTML = `<ul class="ldap-browser-tree">${this.roots
+            .map(root => this.renderNode(root, root, ['dcObject'], true))
+            .join('')}</ul>`;
+        }
+        /**
+         * Render one node and, when expanded, its children.
+         *
+         * @param dn DN of the node
+         * @param label text shown for the node
+         * @param objectClass object classes, used to pick the icon
+         * @param expandable whether the node may have children
+         * @returns HTML of the node
+         */
+        renderNode(dn, label, objectClass, expandable) {
+            const isExpanded = this.expanded.has(dn);
+            const isLoading = this.loading.has(dn);
+            const isSelected = this.selectedDn === dn;
+            const children = this.children.get(dn);
+            const toggle = expandable
+                ? `<span class="ldap-browser-tree__toggle material-icons" data-dn="${escapeHtml(dn)}">${isLoading
+                ? 'hourglass_empty'
+                : isExpanded
+                    ? 'expand_more'
+                    : 'chevron_right'}</span>`
+                : '<span class="ldap-browser-tree__toggle ldap-browser-tree__toggle--leaf"></span>';
+            const sub = isExpanded && children
+                ? `<ul>${children.children.length === 0
+                ? '<li class="ldap-browser-tree__empty">(no child)</li>'
+                : children.children
+                    .map(child => this.renderNode(child.dn, child.rdn, child.objectClass, child.hasChildren))
+                    .join('')}${children.truncated
+                ? `<li class="ldap-browser-tree__truncated" title="Raise --ldap-raw-max-results to see more">
+                   first ${children.children.length} entries only — use the search to find the others
+                 </li>`
+                : ''}</ul>`
+                : '';
+            return `<li>
+      <div class="ldap-browser-tree__node${isSelected ? ' ldap-browser-tree__node--selected' : ''}">
+        ${toggle}
+        <span class="ldap-browser-tree__label" data-dn="${escapeHtml(dn)}" title="${escapeHtml(dn)}">
+          <span class="material-icons">${iconFor(objectClass)}</span>
+          <span class="ldap-browser-tree__name">${escapeHtml(label)}</span>
+        </span>
+      </div>
+      ${sub}
+    </li>`;
+        }
+    }
+    /**
+     * Split a DN into its components, honouring `\,` escapes.
+     *
+     * @param dn DN to split
+     * @returns RDN components, outermost first
+     */
+    function splitDn(dn) {
+        const parts = [];
+        let current = '';
+        for (let i = 0; i < dn.length; i++) {
+            if (dn[i] === '\\' && i + 1 < dn.length) {
+                current += dn[i] + dn[i + 1];
+                i++;
+            }
+            else if (dn[i] === ',') {
+                parts.push(current.trim());
+                current = '';
+            }
+            else {
+                current += dn[i];
+            }
+        }
+        if (current.trim())
+            parts.push(current.trim());
+        return parts;
+    }
+
+    /**
+     * Attribute table of one entry, annotated with the directory schema.
+     * @module browser/ldap-browser/components/EntryView
+     */
+    /** Operational attributes are shown apart from the ones the admin sets */
+    const OPERATIONAL_USAGE = new Set([
+        'directoryOperation',
+        'distributedOperation',
+        'dSAOperation',
+    ]);
+    class EntryView {
+        constructor(container, schema) {
+            this.container = container;
+            this.schema = schema;
+        }
+        /** Draw the placeholder shown when nothing is selected */
+        renderEmpty() {
+            this.container.innerHTML = `
+      <div class="ldap-browser-entry__empty">
+        <span class="material-icons">description</span>
+        <p>Select an entry in the tree</p>
+      </div>`;
+        }
+        /**
+         * Draw an error in place of the entry.
+         *
+         * @param message message to display
+         */
+        renderError(message) {
+            this.container.innerHTML = `<div class="ldap-browser-entry__error">${escapeHtml(message)}</div>`;
+        }
+        /** Draw a loading indicator */
+        renderLoading() {
+            this.container.innerHTML =
+                '<div class="ldap-browser-entry__loading">Loading…</div>';
+        }
+        /**
+         * Draw an entry: its DN, its object classes with the attributes they allow,
+         * then the attribute table.
+         *
+         * @param entry entry to display
+         */
+        render(entry) {
+            const objectClasses = entry.attributes.objectClass?.values || [];
+            const resolved = this.schema?.resolveAttributes(objectClasses);
+            const mandatory = new Set((resolved?.must || []).map(name => name.toLowerCase()));
+            const present = new Set(Object.keys(entry.attributes).map(name => name.split(';')[0].toLowerCase()));
+            const names = Object.keys(entry.attributes).sort((a, b) => a.localeCompare(b));
+            const isOperational = (name) => {
+                const type = this.schema?.getAttributeType(name);
+                return type ? OPERATIONAL_USAGE.has(type.usage) : false;
+            };
+            const userAttributes = names.filter(name => !isOperational(name));
+            const operational = names.filter(isOperational);
+            // Mandatory attributes the entry does not carry: the directory should
+            // reject that, but a UI that hides it makes debugging harder
+            const missing = (resolved?.must || []).filter(name => !present.has(name.toLowerCase()));
+            this.container.innerHTML = `
+      <div class="ldap-browser-entry">
+        <h2 class="ldap-browser-entry__dn" title="${escapeHtml(entry.dn)}">
+          <span class="material-icons">description</span>
+          ${escapeHtml(entry.dn || '(root DSE)')}
+        </h2>
+
+        ${this.renderObjectClasses(objectClasses, resolved)}
+
+        ${missing.length
+            ? `<p class="ldap-browser-entry__warning">
+                 Missing mandatory attribute(s): ${escapeHtml(missing.join(', '))}
+               </p>`
+            : ''}
+
+        ${this.renderTable(entry, mandatory, userAttributes, 'Attributes')}
+        ${operational.length
+            ? this.renderTable(entry, mandatory, operational, 'Operational attributes')
+            : ''}
+      </div>`;
+        }
+        /**
+         * Render the object class list and, when the schema is available, the
+         * attributes those classes allow.
+         *
+         * @param objectClasses object classes of the entry
+         * @param resolved mandatory and optional attributes they imply
+         * @returns HTML of the section
+         */
+        renderObjectClasses(objectClasses, resolved) {
+            if (objectClasses.length === 0)
+                return '';
+            const chips = objectClasses
+                .map(name => {
+                const definition = this.schema?.getObjectClass(name);
+                const title = definition
+                    ? `${definition.kind}${definition.desc ? ` — ${definition.desc}` : ''}`
+                    : 'unknown in schema';
+                return `<span class="ldap-browser-chip${definition ? '' : ' ldap-browser-chip--unknown'}" title="${escapeHtml(title)}">${escapeHtml(name)}</span>`;
+            })
+                .join('');
+            const allowed = resolved
+                ? `<div class="ldap-browser-entry__allowed">
+           <span><strong>Required:</strong> ${escapeHtml(resolved.must.join(', ') || '—')}</span>
+           <span><strong>Allowed:</strong> ${escapeHtml(resolved.may.join(', ') || '—')}</span>
+         </div>`
+                : '';
+            return `<div class="ldap-browser-entry__classes">${chips}</div>${allowed}`;
+        }
+        /**
+         * Render one attribute table.
+         *
+         * @param entry entry being displayed
+         * @param mandatory lowercase names of the mandatory attributes
+         * @param names attributes to include, in display order
+         * @param title heading of the table
+         * @returns HTML of the table
+         */
+        renderTable(entry, mandatory, names, title) {
+            if (names.length === 0)
+                return '';
+            const rows = names
+                .map(name => {
+                const attribute = entry.attributes[name];
+                const type = this.schema?.getAttributeType(name);
+                const isMandatory = mandatory.has(name.split(';')[0].toLowerCase());
+                const tooltip = type
+                    ? [
+                        type.desc,
+                        type.syntax ? `syntax ${type.syntax}` : '',
+                        type.singleValue ? 'single-valued' : '',
+                        type.noUserModification ? 'read-only' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' — ')
+                    : 'unknown in schema';
+                return `<tr>
+          <th class="${isMandatory ? 'ldap-browser-attr--must' : ''}${type ? '' : ' ldap-browser-attr--unknown'}" title="${escapeHtml(tooltip)}">
+            ${escapeHtml(name)}${isMandatory ? ' *' : ''}
+          </th>
+          <td>${this.renderValues(name, attribute)}</td>
+        </tr>`;
+            })
+                .join('');
+            return `<h3 class="ldap-browser-entry__section">${escapeHtml(title)}</h3>
+      <table class="ldap-browser-entry__table"><tbody>${rows}</tbody></table>`;
+        }
+        /**
+         * Render the values of one attribute: images as thumbnails, other binary
+         * values as their size plus the base64 payload, text as text.
+         *
+         * @param name attribute name
+         * @param attribute values and binary flag
+         * @returns HTML of the value cell
+         */
+        renderValues(name, attribute) {
+            return attribute.values
+                .map(value => {
+                if (attribute.binary && this.schema?.isImageAttribute(name))
+                    // Keep only base64 characters: the value ends up in an attribute
+                    return `<img class="ldap-browser-entry__photo" alt="${escapeHtml(name)}" src="data:image/jpeg;base64,${value.replace(/[^A-Za-z0-9+/=]/g, '')}" />`;
+                if (attribute.binary)
+                    return `<details class="ldap-browser-entry__binary">
+              <summary>${byteLength(value)} bytes (base64)</summary>
+              <code>${escapeHtml(value)}</code>
+            </details>`;
+                return `<div class="ldap-browser-entry__value">${escapeHtml(value)}</div>`;
+            })
+                .join('');
+        }
+    }
+    /**
+     * Decoded size of a base64 payload, without decoding it.
+     *
+     * @param base64 base64-encoded value
+     * @returns number of octets
+     */
+    function byteLength(base64) {
+        const padding = base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0;
+        return Math.max(0, Math.floor((base64.length * 3) / 4) - padding);
+    }
+
+    /**
+     * Client-side view of the directory schema: the lookups the UI needs to
+     * annotate an entry (mandatory attributes, descriptions, binary values).
+     *
+     * This mirrors `src/lib/ldapSchema.ts` on the server, minus the parsing:
+     * the browser receives the schema already parsed.
+     *
+     * @module browser/ldap-browser/schema
+     */
+    /** Syntaxes whose values are octets rather than text */
+    const BINARY_SYNTAXES = new Set([
+        '1.3.6.1.4.1.1466.115.121.1.5',
+        '1.3.6.1.4.1.1466.115.121.1.8',
+        '1.3.6.1.4.1.1466.115.121.1.9',
+        '1.3.6.1.4.1.1466.115.121.1.10',
+        '1.3.6.1.4.1.1466.115.121.1.28',
+        '1.3.6.1.4.1.1466.115.121.1.40',
+        '1.3.6.1.4.1.1466.115.121.1.49',
+    ]);
+    /** Attributes whose values are images, previewed as such */
+    const IMAGE_ATTRIBUTES = new Set([
+        'jpegphoto',
+        'photo',
+        'thumbnailphoto',
+        'thumbnaillogo',
+    ]);
+    class SchemaView {
+        constructor(schema) {
+            this.objectClasses = new Map();
+            this.attributeTypes = new Map();
+            this.schema = schema;
+            for (const oc of schema.objectClasses) {
+                this.objectClasses.set(oc.oid.toLowerCase(), oc);
+                for (const name of oc.names)
+                    this.objectClasses.set(name.toLowerCase(), oc);
+            }
+            for (const at of schema.attributeTypes) {
+                this.attributeTypes.set(at.oid.toLowerCase(), at);
+                for (const name of at.names)
+                    this.attributeTypes.set(name.toLowerCase(), at);
+            }
+        }
+        /**
+         * Look up an object class by name or OID.
+         *
+         * @param name object class name or OID
+         * @returns the definition, or undefined when unknown
+         */
+        getObjectClass(name) {
+            return this.objectClasses.get(name.toLowerCase());
+        }
+        /**
+         * Look up an attribute type by name or OID, ignoring attribute options.
+         *
+         * @param name attribute name, `;binary` and friends included
+         * @returns the definition, or undefined when unknown
+         */
+        getAttributeType(name) {
+            return this.attributeTypes.get(name.split(';')[0].toLowerCase());
+        }
+        /**
+         * Resolve the syntax of an attribute through its `SUP` chain.
+         *
+         * @param name attribute name
+         * @returns syntax OID, or undefined
+         */
+        getAttributeSyntax(name) {
+            const seen = new Set();
+            let current = this.getAttributeType(name);
+            while (current && !seen.has(current.oid)) {
+                if (current.syntax)
+                    return current.syntax;
+                seen.add(current.oid);
+                current = current.sup ? this.getAttributeType(current.sup) : undefined;
+            }
+            return undefined;
+        }
+        /**
+         * Tell whether an attribute is meant to be displayed as an image.
+         *
+         * @param name attribute name
+         * @returns true for photo-like attributes
+         */
+        isImageAttribute(name) {
+            return IMAGE_ATTRIBUTES.has(name.split(';')[0].toLowerCase());
+        }
+        /**
+         * Tell whether an attribute holds octets rather than text.
+         *
+         * @param name attribute name
+         * @returns true when values are binary
+         */
+        isBinaryAttribute(name) {
+            if (name
+                .split(';')
+                .slice(1)
+                .some(o => o.toLowerCase() === 'binary'))
+                return true;
+            const syntax = this.getAttributeSyntax(name);
+            return syntax ? BINARY_SYNTAXES.has(syntax) : false;
+        }
+        /**
+         * Collect the mandatory and optional attributes of a set of object
+         * classes, walking every `SUP` chain.
+         *
+         * @param objectClasses object class names carried by an entry
+         * @returns `must` and `may` attribute names, `may` excluding mandatory ones
+         */
+        resolveAttributes(objectClasses) {
+            const must = new Set();
+            const may = new Set();
+            const visited = new Set();
+            const walk = (name) => {
+                const key = name.toLowerCase();
+                if (visited.has(key))
+                    return;
+                visited.add(key);
+                const oc = this.getObjectClass(name);
+                if (!oc)
+                    return;
+                oc.must.forEach(a => must.add(a));
+                oc.may.forEach(a => may.add(a));
+                oc.sup.forEach(walk);
+            };
+            objectClasses.forEach(walk);
+            const mustLower = new Set([...must].map(a => a.toLowerCase()));
+            return {
+                must: [...must],
+                may: [...may].filter(a => !mustLower.has(a.toLowerCase())),
+            };
+        }
+    }
+
+    /**
+     * Low-level LDAP browser: a tree of the directory on the left, the raw
+     * content of the selected entry on the right, and a filter search on top.
+     *
+     * Read-only: it renders what the `core/ldap/raw` plugin serves.
+     *
+     * @module browser/ldap-browser/LdapBrowser
+     */
+    class LdapBrowser {
+        constructor(options) {
+            this.container = null;
+            this.tree = null;
+            this.entryView = null;
+            this.schema = null;
+            this.bases = [];
+            this.currentDn = null;
+            this.options = options;
+            this.api = new RawApiClient(options.apiBaseUrl || '', options.authToken);
+        }
+        /**
+         * Build the interface, load the schema and open the first base.
+         *
+         * @throws Error when the container does not exist or the API is unreachable
+         */
+        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;
+            this.bases = await this.api.getBases();
+            this.render();
+            // The schema only decorates the display: a directory that refuses it
+            // must not prevent browsing
+            try {
+                this.schema = new SchemaView(await this.api.getSchema());
+            }
+            catch (err) {
+                this.reportError(err);
+            }
+            const treeContainer = container.querySelector('.ldap-browser__tree');
+            const entryContainer = container.querySelector('.ldap-browser__entry');
+            if (!treeContainer || !entryContainer)
+                return;
+            this.entryView = new EntryView(entryContainer, this.schema);
+            this.entryView.renderEmpty();
+            this.tree = new EntryTree(treeContainer, this.api, dn => this.showEntry(dn), error => this.reportError(error));
+            await this.tree.init(this.bases);
+            this.bindToolbar();
+            const initial = this.options.initialDn || this.bases[0];
+            if (initial)
+                await this.tree.revealAndSelect(initial);
+        }
+        /** Release the listeners held by the tree */
+        destroy() {
+            this.tree?.destroy();
+            this.tree = null;
+        }
+        /**
+         * DN currently displayed.
+         *
+         * @returns selected DN, or null when none
+         */
+        getCurrentDn() {
+            return this.currentDn;
+        }
+        /** Draw the static layout */
+        render() {
+            if (!this.container)
+                return;
+            this.container.classList.add('ldap-browser-container');
+            this.container.innerHTML = `
+      <div class="ldap-browser">
+        <div class="ldap-browser__toolbar">
+          <input class="ldap-browser__filter" type="text"
+                 placeholder="LDAP filter, e.g. (uid=alice)" />
+          <select class="ldap-browser__scope">
+            <option value="sub">sub</option>
+            <option value="one">one</option>
+            <option value="base">base</option>
+          </select>
+          <select class="ldap-browser__base">
+            ${this.bases
+            .map(base => `<option value="${escapeHtml(base)}">${escapeHtml(base)}</option>`)
+            .join('')}
+          </select>
+          <button class="ldap-browser__search" type="button">
+            <span class="material-icons">search</span> Search
+          </button>
+          <button class="ldap-browser__refresh" type="button" title="Reload">
+            <span class="material-icons">refresh</span>
+          </button>
+        </div>
+        <div class="ldap-browser__body">
+          <div class="ldap-browser__tree"></div>
+          <div class="ldap-browser__entry"></div>
+        </div>
+        <div class="ldap-browser__results" hidden></div>
+      </div>`;
+        }
+        /** Wire the search and refresh controls */
+        bindToolbar() {
+            const filter = this.container?.querySelector('.ldap-browser__filter');
+            const searchButton = this.container?.querySelector('.ldap-browser__search');
+            const refreshButton = this.container?.querySelector('.ldap-browser__refresh');
+            const results = this.container?.querySelector('.ldap-browser__results');
+            searchButton?.addEventListener('click', () => void this.runSearch());
+            filter?.addEventListener('keydown', event => {
+                if (event.key === 'Enter')
+                    void this.runSearch();
+            });
+            refreshButton?.addEventListener('click', () => {
+                this.tree?.invalidate();
+                if (this.currentDn)
+                    void this.showEntry(this.currentDn);
+            });
+            results?.addEventListener('click', event => {
+                const target = event.target.closest('[data-dn]');
+                if (target?.dataset.dn)
+                    void this.tree?.revealAndSelect(target.dataset.dn);
+            });
+        }
+        /**
+         * Load an entry and display it.
+         *
+         * @param dn DN of the entry
+         */
+        async showEntry(dn) {
+            if (!this.entryView)
+                return;
+            this.currentDn = dn;
+            this.entryView.renderLoading();
+            try {
+                const entry = await this.api.getEntry(dn);
+                this.entryView.render(entry);
+                this.options.onEntrySelected?.(dn);
+            }
+            catch (err) {
+                this.entryView.renderError(err.message);
+                this.reportError(err);
+            }
+        }
+        /** Run the search typed in the toolbar and list the matching DNs */
+        async runSearch() {
+            const filter = this.container?.querySelector('.ldap-browser__filter')
+                ?.value || '';
+            const scope = this.container?.querySelector('.ldap-browser__scope')
+                ?.value || 'sub';
+            const base = this.container?.querySelector('.ldap-browser__base')
+                ?.value || this.bases[0];
+            const results = this.container?.querySelector('.ldap-browser__results');
+            if (!results)
+                return;
+            if (!filter.trim()) {
+                results.hidden = true;
+                results.innerHTML = '';
+                return;
+            }
+            results.hidden = false;
+            results.innerHTML = '<p>Searching…</p>';
+            try {
+                const found = await this.api.search({
+                    base,
+                    scope: scope,
+                    filter,
+                    attributes: ['dn'],
+                });
+                results.innerHTML = found.entries.length
+                    ? `<p>${found.entries.length} result(s)${found.truncated ? ' (truncated)' : ''}</p>
+           <ul>${found.entries
+                    .map(entry => `<li><a href="#" data-dn="${escapeHtml(entry.dn)}">${escapeHtml(entry.dn)}</a></li>`)
+                    .join('')}</ul>`
+                    : '<p>No result</p>';
+            }
+            catch (err) {
+                results.innerHTML = `<p class="ldap-browser__error">${escapeHtml(err.message)}</p>`;
+                this.reportError(err);
+            }
+        }
+        /**
+         * Forward an error to the host page, or log it when no handler was given.
+         *
+         * @param error error to report
+         */
+        reportError(error) {
+            if (this.options.onError)
+                this.options.onError(error);
+            else
+                console.error('[ldap-browser]', error);
+        }
+    }
+
+    exports.LdapBrowser = LdapBrowser;
+    exports.RawApiClient = RawApiClient;
+    exports.SchemaView = SchemaView;
+
+}));
+//# sourceMappingURL=ldap-browser.js.map