ldap-rest 0.0.1

package/static/browser/shared.js

@@ -0,0 +1,723 @@
+(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.MiniDmShared = {}));
+})(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]);
+    }
+    /**
+     * 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',
+        },
+    };
+
+    exports.Modal = Modal;
+    exports.StatusMessage = StatusMessage;
+    exports.THEMES = THEMES;
+    exports.clearPointerOptionsCache = clearPointerOptionsCache;
+    exports.collectPointerArrayValues = collectPointerArrayValues;
+    exports.createElement = createElement;
+    exports.escapeHtml = escapeHtml;
+    exports.generateFormField = generateFormField;
+    exports.getElementByIdSafe = getElementByIdSafe;
+    exports.getFieldLabel = getFieldLabel;
+    exports.getOrganizationPath = getOrganizationPath;
+    exports.groupSchemaFields = groupSchemaFields;
+    exports.loadPointerOptions = loadPointerOptions;
+    exports.loadSchema = loadSchema;
+    exports.processFormData = processFormData;
+    exports.querySelectorAllSafe = querySelectorAllSafe;
+    exports.querySelectorSafe = querySelectorSafe;
+    exports.replacePlaceholders = replacePlaceholders;
+    exports.replaceSchemaPlaceholders = replaceSchemaPlaceholders;
+    exports.setInnerHTML = setInnerHTML;
+    exports.showStatus = showStatus;
+    exports.toTitleCase = toTitleCase;
+
+}));
+//# sourceMappingURL=shared.js.map