ldap-rest 0.0.1

package/static/browser/shared.esm.js

@@ -0,0 +1,694 @@
+/**
+ * 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]);
+}
+/**
+ * Convert camelCase or snake_case to Title Case
+ */
+function toTitleCase(text) {
+    const label = text.replace(/([A-Z])/g, ' $1').replace(/_/g, ' ');
+    return label.charAt(0).toUpperCase() + label.slice(1);
+}
+/**
+ * Create an HTML element with attributes and children
+ */
+function createElement(tag, attributes = {}, children = []) {
+    const element = document.createElement(tag);
+    for (const [key, value] of Object.entries(attributes)) {
+        if (key === 'className') {
+            element.className = value;
+        }
+        else {
+            element.setAttribute(key, value);
+        }
+    }
+    for (const child of children) {
+        if (typeof child === 'string') {
+            element.appendChild(document.createTextNode(child));
+        }
+        else {
+            element.appendChild(child);
+        }
+    }
+    return element;
+}
+/**
+ * Set innerHTML safely (assumes content has been properly escaped)
+ */
+function setInnerHTML(element, html) {
+    element.innerHTML = html;
+}
+/**
+ * Get element by ID with type safety
+ */
+function getElementByIdSafe(id) {
+    return document.getElementById(id);
+}
+/**
+ * Query selector with type safety
+ */
+function querySelectorSafe(selector, parent = document) {
+    return parent.querySelector(selector);
+}
+/**
+ * Query selector all with type safety
+ */
+function querySelectorAllSafe(selector, parent = document) {
+    return parent.querySelectorAll(selector);
+}
+
+/**
+ * Form utility functions
+ * @module browser/shared/utils/form
+ */
+/**
+ * Get user-friendly field label from field name
+ */
+function getFieldLabel(fieldName, attribute, customLabels) {
+    // Check custom labels first
+    if (customLabels && customLabels[fieldName]) {
+        return customLabels[fieldName];
+    }
+    // Common label mappings
+    const labelMap = {
+        ou: 'Unit Name',
+        l: 'Location',
+        telephoneNumber: 'Phone Number',
+        facsimileTelephoneNumber: 'Fax Number',
+        postalAddress: 'Postal Address',
+        twakeDepartmentPath: 'Department Path',
+        twakeLocalAdminLink: 'Local Administrators',
+        twakeMailboxType: 'Mailbox Type',
+    };
+    if (labelMap[fieldName]) {
+        return labelMap[fieldName];
+    }
+    // Convert to title case
+    return toTitleCase(fieldName);
+}
+/**
+ * Generate HTML for a form field based on schema attribute
+ */
+async function generateFormField(fieldName, attribute, options) {
+    const label = getFieldLabel(fieldName, attribute, options?.customLabels);
+    const required = attribute.required ? 'required' : '';
+    const labelClass = attribute.required ? 'required' : '';
+    let fieldHtml = '';
+    if (attribute.type === 'pointer') {
+        // Pointer field - load options and display select
+        const branch = attribute.branch?.[0];
+        if (branch && options?.pointerOptionsLoader) {
+            const pointerOptions = await options.pointerOptionsLoader(branch);
+            fieldHtml = `
+        <div class="form-group">
+          <label for="${escapeHtml(fieldName)}" class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+          <select id="${escapeHtml(fieldName)}" name="${escapeHtml(fieldName)}" class="form-select" ${required}>
+            <option value="">Select...</option>
+            ${pointerOptions
+                .map(opt => `
+              <option value="${escapeHtml(opt.dn)}">${escapeHtml(opt.label)}</option>
+            `)
+                .join('')}
+          </select>
+          ${fieldName === 'twakeMailboxType' ? '<div class="help-text">Select "mailingList" or "teamMailbox" to enable mail functionality</div>' : ''}
+        </div>
+      `;
+        }
+        else {
+            // Fallback if no branch defined
+            fieldHtml = `
+        <div class="form-group">
+          <label for="${escapeHtml(fieldName)}" class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+          <input type="text" id="${escapeHtml(fieldName)}" name="${escapeHtml(fieldName)}" ${required} />
+          <div class="help-text">Enter DN (Distinguished Name)</div>
+        </div>
+      `;
+        }
+    }
+    else if (attribute.type === 'array' &&
+        attribute.items?.type === 'pointer') {
+        // Array of pointers - will be handled dynamically
+        const branch = attribute.items.branch?.[0];
+        if (branch) {
+            fieldHtml = `
+        <div class="form-group">
+          <label class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+          <div class="array-field pointer-array-field" data-field="${escapeHtml(fieldName)}" data-branch="${escapeHtml(branch)}">
+            <button type="button" class="btn btn-secondary add-pointer-item" data-field="${escapeHtml(fieldName)}">
+              <span class="material-icons">add</span>
+              Add ${escapeHtml(label)}
+            </button>
+          </div>
+          <input type="hidden" name="${escapeHtml(fieldName)}" id="${escapeHtml(fieldName)}-hidden" value="" />
+        </div>
+      `;
+        }
+        else {
+            // Fallback
+            fieldHtml = `
+        <div class="form-group">
+          <label for="${escapeHtml(fieldName)}" class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+          <textarea id="${escapeHtml(fieldName)}" name="${escapeHtml(fieldName)}" ${required}></textarea>
+          <div class="help-text">Enter one DN per line</div>
+        </div>
+      `;
+        }
+    }
+    else if (attribute.type === 'array' && attribute.items?.type === 'string') {
+        // Array field - use textarea
+        fieldHtml = `
+      <div class="form-group">
+        <label for="${escapeHtml(fieldName)}" class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+        <textarea id="${escapeHtml(fieldName)}" name="${escapeHtml(fieldName)}" ${required}></textarea>
+        <div class="help-text">Enter one value per line</div>
+      </div>
+    `;
+    }
+    else if (attribute.type === 'number' || attribute.type === 'integer') {
+        // Number field
+        fieldHtml = `
+      <div class="form-group">
+        <label for="${escapeHtml(fieldName)}" class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+        <input type="number" id="${escapeHtml(fieldName)}" name="${escapeHtml(fieldName)}" ${required} />
+      </div>
+    `;
+    }
+    else if (attribute.type === 'string') {
+        // String field - use input with appropriate type
+        const type = fieldName.toLowerCase().includes('password') ||
+            fieldName.toLowerCase().includes('pwd')
+            ? 'password'
+            : fieldName.toLowerCase().includes('mail')
+                ? 'email'
+                : fieldName.toLowerCase().includes('phone') ||
+                    fieldName.toLowerCase().includes('telephone')
+                    ? 'tel'
+                    : 'text';
+        fieldHtml = `
+      <div class="form-group">
+        <label for="${escapeHtml(fieldName)}" class="${escapeHtml(labelClass)}">${escapeHtml(label)}</label>
+        <input type="${escapeHtml(type)}" id="${escapeHtml(fieldName)}" name="${escapeHtml(fieldName)}" ${required} />
+      </div>
+    `;
+    }
+    return fieldHtml;
+}
+/**
+ * Process form data and convert types based on schema
+ */
+function processFormData(formData, schema) {
+    const data = {};
+    // Collect form data
+    for (const [key, value] of formData) {
+        if (data[key]) {
+            // Multiple values for the same key - convert to array
+            if (!Array.isArray(data[key])) {
+                data[key] = [data[key]];
+            }
+            data[key].push(value);
+        }
+        else {
+            data[key] = value;
+        }
+    }
+    // Process special field types based on schema
+    for (const [fieldName, attribute] of Object.entries(schema)) {
+        if (!data[fieldName])
+            continue;
+        if (attribute.type === 'array' && typeof data[fieldName] === 'string') {
+            // Split by newlines and filter empty lines
+            data[fieldName] = data[fieldName]
+                .split('\n')
+                .map(line => line.trim())
+                .filter(line => line.length > 0);
+        }
+        else if ((attribute.type === 'number' || attribute.type === 'integer') &&
+            typeof data[fieldName] === 'string') {
+            // Convert to number
+            data[fieldName] =
+                attribute.type === 'integer'
+                    ? parseInt(data[fieldName], 10)
+                    : parseFloat(data[fieldName]);
+        }
+    }
+    // Clean up: remove empty strings, null values, and empty arrays
+    const cleanedData = {};
+    for (const [key, value] of Object.entries(data)) {
+        if (value === '' || value === null || value === undefined) {
+            continue;
+        }
+        if (Array.isArray(value) && value.length === 0) {
+            continue;
+        }
+        cleanedData[key] = value;
+    }
+    return cleanedData;
+}
+/**
+ * Collect values from pointer array fields
+ */
+function collectPointerArrayValues(container) {
+    const values = {};
+    const pointerArrayFields = container.querySelectorAll('.pointer-array-field');
+    pointerArrayFields.forEach(field => {
+        const fieldName = field.getAttribute('data-field');
+        if (!fieldName)
+            return;
+        const selects = field.querySelectorAll('.pointer-array-select');
+        const fieldValues = Array.from(selects)
+            .map(select => select.value)
+            .filter(val => val); // Remove empty values
+        if (fieldValues.length > 0) {
+            values[fieldName] = fieldValues;
+        }
+    });
+    return values;
+}
+/**
+ * Group schema fields by category
+ */
+function groupSchemaFields(schema, categorizer) {
+    const groups = new Map();
+    for (const [fieldName, attribute] of Object.entries(schema)) {
+        if (attribute.fixed)
+            continue;
+        if (fieldName === 'objectClass')
+            continue;
+        const category = categorizer
+            ? categorizer(fieldName, attribute)
+            : attribute.group || 'default';
+        if (category === null)
+            continue; // Skip this field
+        if (!groups.has(category)) {
+            groups.set(category, []);
+        }
+        groups.get(category).push([fieldName, attribute]);
+    }
+    return groups;
+}
+
+/**
+ * Schema utility functions
+ * @module browser/shared/utils/schema
+ */
+/**
+ * Cache for pointer options to avoid repeated API calls
+ */
+const pointerOptionsCache = new Map();
+/**
+ * Load pointer options from API
+ */
+async function loadPointerOptions(branch, apiLoader, useCache = true) {
+    if (useCache && pointerOptionsCache.has(branch)) {
+        return pointerOptionsCache.get(branch);
+    }
+    try {
+        const options = await apiLoader(branch);
+        if (useCache) {
+            pointerOptionsCache.set(branch, options);
+        }
+        return options;
+    }
+    catch (error) {
+        console.error('Failed to load pointer options for branch:', branch, error);
+        return [];
+    }
+}
+/**
+ * Clear pointer options cache
+ */
+function clearPointerOptionsCache() {
+    pointerOptionsCache.clear();
+}
+/**
+ * Replace placeholders in schema branches
+ */
+function replacePlaceholders(value, replacements) {
+    const replace = (str) => {
+        let result = str;
+        for (const [key, val] of Object.entries(replacements)) {
+            result = result.replace(new RegExp(key, 'g'), val);
+        }
+        return result;
+    };
+    if (Array.isArray(value)) {
+        return value.map(replace);
+    }
+    return replace(value);
+}
+/**
+ * Replace placeholders in schema attributes
+ */
+function replaceSchemaPlaceholders(schema, replacements) {
+    const processValue = (value) => {
+        if (typeof value === 'string') {
+            return replacePlaceholders(value, replacements);
+        }
+        if (Array.isArray(value)) {
+            return value.map(processValue);
+        }
+        if (value && typeof value === 'object') {
+            return processObject(value);
+        }
+        return value;
+    };
+    const processObject = (obj) => {
+        const result = {};
+        for (const [key, value] of Object.entries(obj)) {
+            result[key] = processValue(value);
+        }
+        return result;
+    };
+    return processObject(schema);
+}
+/**
+ * Fetch organization path from API
+ */
+async function getOrganizationPath(orgDn, apiBaseUrl) {
+    try {
+        const response = await fetch(`${apiBaseUrl}/api/v1/ldap/organizations/${encodeURIComponent(orgDn)}`);
+        if (!response.ok) {
+            console.error('Failed to fetch organization:', response.status);
+            return orgDn;
+        }
+        const org = await response.json();
+        // Use twakeDepartmentPath if available (Twake schema)
+        if (org.twakeDepartmentPath) {
+            const pathValue = Array.isArray(org.twakeDepartmentPath)
+                ? org.twakeDepartmentPath[0]
+                : org.twakeDepartmentPath;
+            return pathValue;
+        }
+        // Fallback to ou name for non-Twake schemas
+        if (org.ou) {
+            const ouValue = Array.isArray(org.ou) ? org.ou[0] : org.ou;
+            return ouValue;
+        }
+        // Last resort: use DN
+        return orgDn;
+    }
+    catch (error) {
+        console.error('Failed to get organization info:', error);
+        return orgDn;
+    }
+}
+/**
+ * Load schema from URL or object
+ */
+async function loadSchema(schemaSource) {
+    if (typeof schemaSource === 'string') {
+        const response = await fetch(schemaSource);
+        if (!response.ok) {
+            throw new Error(`Failed to load schema from ${schemaSource}`);
+        }
+        return (await response.json());
+    }
+    return schemaSource;
+}
+
+/**
+ * Reusable Modal component
+ * @module browser/shared/components/Modal
+ */
+class Modal {
+    constructor(options) {
+        this.overlay = null;
+        this.options = options;
+        this.overlay = getElementByIdSafe(options.id);
+        if (!this.overlay) {
+            throw new Error(`Modal overlay with id "${options.id}" not found`);
+        }
+        this.attachEventListeners();
+    }
+    attachEventListeners() {
+        if (!this.overlay)
+            return;
+        // Close button
+        const closeBtn = this.overlay.querySelector('.close-button');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => this.close());
+        }
+        // Cancel button
+        const cancelBtn = this.overlay.querySelector('[data-modal-cancel]');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', () => this.close());
+        }
+        // Click outside to close
+        this.overlay.addEventListener('click', e => {
+            if (e.target === this.overlay) {
+                this.close();
+            }
+        });
+        // Escape key to close
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape' && this.isOpen()) {
+                this.close();
+            }
+        });
+    }
+    open() {
+        if (this.overlay) {
+            this.overlay.classList.add('active');
+            document.body.style.overflow = 'hidden'; // Prevent background scroll
+        }
+    }
+    close() {
+        if (this.overlay) {
+            this.overlay.classList.remove('active');
+            document.body.style.overflow = ''; // Restore scroll
+            if (this.options.onClose) {
+                this.options.onClose();
+            }
+        }
+    }
+    isOpen() {
+        return this.overlay?.classList.contains('active') || false;
+    }
+    getFormElement() {
+        return this.overlay?.querySelector('form') || null;
+    }
+    resetForm() {
+        const form = this.getFormElement();
+        if (form) {
+            form.reset();
+        }
+    }
+    setContent(html) {
+        const contentEl = this.overlay?.querySelector('[data-modal-content]');
+        if (contentEl) {
+            contentEl.innerHTML = html;
+        }
+    }
+    setTitle(title) {
+        const titleEl = this.overlay?.querySelector('.modal-header h2');
+        if (titleEl) {
+            titleEl.textContent = title;
+        }
+    }
+    /**
+     * Create modal HTML structure
+     */
+    static createModalHTML(options) {
+        const formId = options.formId || `${options.id}-form`;
+        const submitLabel = options.submitLabel || 'Submit';
+        return `
+      <div class="modal-overlay" id="${escapeHtml(options.id)}">
+        <div class="modal">
+          <div class="modal-header">
+            <h2>${escapeHtml(options.title)}</h2>
+            <button class="close-button" type="button">
+              <span class="material-icons">close</span>
+            </button>
+          </div>
+          <form id="${escapeHtml(formId)}">
+            <div data-modal-content></div>
+            <div class="modal-footer">
+              <button type="button" class="secondary" data-modal-cancel>
+                Cancel
+              </button>
+              <button type="submit" class="primary">${escapeHtml(submitLabel)}</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Create and inject modal into DOM
+     */
+    static create(options) {
+        const html = Modal.createModalHTML(options);
+        document.body.insertAdjacentHTML('beforeend', html);
+        return new Modal(options);
+    }
+}
+
+/**
+ * Status message component for displaying notifications
+ * @module browser/shared/components/StatusMessage
+ */
+class StatusMessage {
+    constructor(options) {
+        this.container = null;
+        this.timeoutId = null;
+        this.options = {
+            duration: 5000,
+            dismissible: true,
+            ...options,
+        };
+        this.container = getElementByIdSafe(options.containerId);
+        if (!this.container) {
+            throw new Error(`Status container with id "${options.containerId}" not found`);
+        }
+    }
+    /**
+     * Show a status message
+     */
+    show(message, type = 'info') {
+        if (!this.container)
+            return;
+        // Clear any existing timeout
+        if (this.timeoutId !== null) {
+            window.clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        const iconMap = {
+            error: 'error_outline',
+            success: 'check_circle',
+            info: 'info',
+            warning: 'warning',
+        };
+        const icon = iconMap[type] || 'info';
+        let html = `
+      <div class="status-message ${escapeHtml(type)}">
+        <span class="material-icons">${icon}</span>
+        <span class="status-message-text">${escapeHtml(message)}</span>
+    `;
+        if (this.options.dismissible) {
+            html += `
+        <button class="status-message-close" type="button" aria-label="Close">
+          <span class="material-icons">close</span>
+        </button>
+      `;
+        }
+        html += '</div>';
+        this.container.innerHTML = html;
+        // Attach close button handler
+        if (this.options.dismissible) {
+            const closeBtn = this.container.querySelector('.status-message-close');
+            if (closeBtn) {
+                closeBtn.addEventListener('click', () => this.hide());
+            }
+        }
+        // Auto-hide after duration
+        if (this.options.duration && this.options.duration > 0) {
+            this.timeoutId = window.setTimeout(() => {
+                this.hide();
+            }, this.options.duration);
+        }
+    }
+    /**
+     * Show error message
+     */
+    error(message) {
+        this.show(message, 'error');
+    }
+    /**
+     * Show success message
+     */
+    success(message) {
+        this.show(message, 'success');
+    }
+    /**
+     * Show info message
+     */
+    info(message) {
+        this.show(message, 'info');
+    }
+    /**
+     * Show warning message
+     */
+    warning(message) {
+        this.show(message, 'warning');
+    }
+    /**
+     * Hide the status message
+     */
+    hide() {
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        if (this.timeoutId !== null) {
+            window.clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+    }
+    /**
+     * Get the container element
+     */
+    getContainer() {
+        return this.container;
+    }
+}
+/**
+ * Simple functional API for showing status messages
+ */
+function showStatus(containerId, message, type = 'info', duration = 5000) {
+    const statusMessage = new StatusMessage({ containerId, duration });
+    statusMessage.show(message, type);
+}
+
+/**
+ * Shared TypeScript types for browser components
+ * @module browser/shared/types
+ */
+const THEMES = {
+    purple: {
+        name: 'Purple',
+        primaryColor: '#6200ee',
+        primaryColorDark: '#3700b3',
+        gradientStart: '#667eea',
+        gradientEnd: '#764ba2',
+    },
+    blue: {
+        name: 'Blue',
+        primaryColor: '#185a9d',
+        primaryColorDark: '#0d3a6b',
+        gradientStart: '#43cea2',
+        gradientEnd: '#185a9d',
+    },
+    pink: {
+        name: 'Pink',
+        primaryColor: '#f5576c',
+        primaryColorDark: '#d43d50',
+        gradientStart: '#f093fb',
+        gradientEnd: '#f5576c',
+    },
+    green: {
+        name: 'Green',
+        primaryColor: '#00c853',
+        primaryColorDark: '#009624',
+        gradientStart: '#56ab2f',
+        gradientEnd: '#a8e063',
+    },
+};
+
+export { Modal, StatusMessage, THEMES, clearPointerOptionsCache, collectPointerArrayValues, createElement, escapeHtml, generateFormField, getElementByIdSafe, getFieldLabel, getOrganizationPath, groupSchemaFields, loadPointerOptions, loadSchema, processFormData, querySelectorAllSafe, querySelectorSafe, replacePlaceholders, replaceSchemaPlaceholders, setInnerHTML, showStatus, toTitleCase };
+//# sourceMappingURL=shared.esm.js.map