ldap-rest 0.4.6 → 0.5.0

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

@@ -0,0 +1,915 @@
+/**
+ * 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);
+    }
+}
+
+export { LdapBrowser, RawApiClient, SchemaView };
+//# sourceMappingURL=ldap-browser.esm.js.map