web-mojo 2.2.72 → 2.2.74

package/dist/web-mojo.lite.iife.js

@@ -4023,6 +4023,9 @@ var MOJO = (function(exports) {
         const actionEl = event.target.closest("[data-action]");
         if (actionEl && this.shouldHandle(actionEl, event)) {
           const action = actionEl.getAttribute("data-action");
+          if (actionEl.tagName === "A") {
+            event.preventDefault();
+          }
           this.hideTooltip(actionEl);
           const handled = await this.dispatch(action, event, actionEl);
           if (handled) {
@@ -7213,38 +7216,105 @@ var MOJO = (function(exports) {
       return this.hasPermission(p);
     }
   }
+  User.CATEGORY_PERMISSIONS = [
+    { name: "security", label: "Security", tooltip: "Incidents, events, rules, tickets, firewall, bouncer, GeoIP, system logs" },
+    { name: "users", label: "Users", tooltip: "User records, passkeys, TOTP, API keys, OAuth, devices, locations" },
+    { name: "groups", label: "Groups", tooltip: "Groups, members, group API keys, settings" },
+    { name: "comms", label: "Communications", tooltip: "Email, phone, SMS, push notifications, chat, notifications" },
+    { name: "jobs", label: "Jobs", tooltip: "Jobs, job events, job logs, runners, queue control, system stats" },
+    { name: "metrics", label: "Metrics", tooltip: "Metrics recording, fetching, categories, values, permissions" },
+    { name: "files", label: "Files", tooltip: "File managers, files, renditions, vault files, vault data, S3 buckets" }
+  ];
+  User.GRANULAR_PERMISSION_TABS = [
+    {
+      label: "Account",
+      permissions: [
+        { name: "view_users", label: "View Users" },
+        { name: "manage_users", label: "Manage Users" },
+        { name: "view_groups", label: "View Groups" },
+        { name: "manage_groups", label: "Manage Groups" },
+        { name: "manage_group", label: "Manage Own Group" },
+        { name: "view_members", label: "View Members" },
+        { name: "manage_settings", label: "Manage Settings" }
+      ]
+    },
+    {
+      label: "Communication",
+      permissions: [
+        { name: "manage_chat", label: "Manage Chat" },
+        { name: "manage_aws", label: "Manage Email (AWS)" },
+        { name: "view_notifications", label: "View Notifications" },
+        { name: "manage_notifications", label: "Manage Notifications" },
+        { name: "send_notifications", label: "Send Notifications" },
+        { name: "view_devices", label: "View Push Devices" },
+        { name: "manage_devices", label: "Manage Push Devices" },
+        { name: "manage_push_config", label: "Push Config" },
+        { name: "view_phone_numbers", label: "View Phone Numbers" },
+        { name: "manage_phone_numbers", label: "Manage Phone Numbers" },
+        { name: "manage_phone_config", label: "Phone Config" },
+        { name: "view_sms", label: "View SMS" },
+        { name: "manage_sms", label: "Manage SMS" },
+        { name: "send_sms", label: "Send SMS" }
+      ]
+    },
+    {
+      label: "Platform",
+      permissions: [
+        { name: "view_security", label: "View Security" },
+        { name: "manage_security", label: "Manage Security" },
+        { name: "admin", label: "Log Admin" },
+        { name: "view_logs", label: "View Logs" },
+        { name: "manage_logs", label: "Manage Logs" },
+        { name: "view_jobs", label: "View Jobs" },
+        { name: "manage_jobs", label: "Manage Jobs" },
+        { name: "view_metrics", label: "View Metrics" },
+        { name: "manage_metrics", label: "Manage Metrics" },
+        { name: "write_metrics", label: "Write Metrics" },
+        { name: "view_fileman", label: "View File Managers" },
+        { name: "manage_files", label: "Manage Files" },
+        { name: "view_vault", label: "View Vault" },
+        { name: "manage_vault", label: "Manage Vault" },
+        { name: "manage_docit", label: "Manage Docs" },
+        { name: "manage_shortlinks", label: "Manage Shortlinks" }
+      ]
+    }
+  ];
+  User.APP_CATEGORY_PERMISSIONS = [];
+  User.APP_GRANULAR_PERMISSIONS = [];
   User.PERMISSIONS = [
-    { name: "manage_users", label: "Manage Users" },
-    { name: "view_users", label: "View Users" },
-    { name: "view_groups", label: "View Groups" },
-    { name: "manage_groups", label: "Manage Groups" },
-    { name: "view_metrics", label: "View System Metrics" },
-    { name: "manage_metrics", label: "Manage System Metrics" },
-    { name: "view_logs", label: "View Logs" },
-    { name: "view_incidents", label: "View Incidents" },
-    { name: "manage_incidents", label: "Manage Incidents" },
-    { name: "view_tickets", label: "View Tickets" },
-    { name: "manage_tickets", label: "Manage Tickets" },
-    { name: "view_admin", label: "View Admin" },
-    { name: "view_jobs", label: "View Jobs" },
-    { name: "manage_jobs", label: "Manage Jobs" },
-    { name: "view_global", label: "View Global" },
-    { name: "manage_notifications", label: "Manage Notifications" },
-    { name: "manage_files", label: "Manage Files" },
-    { name: "force_single_session", label: "Force Single Session" },
-    { name: "file_vault", label: "Access File Vault" },
-    { name: "manage_aws", label: "Manage AWS" },
-    { name: "manage_docit", label: "Manage DocIt" },
-    { name: "manage_settings", label: "Django Settings" }
+    ...User.CATEGORY_PERMISSIONS,
+    ...User.GRANULAR_PERMISSION_TABS.flatMap((tab) => tab.permissions),
+    ...User.APP_CATEGORY_PERMISSIONS,
+    ...User.APP_GRANULAR_PERMISSIONS
   ];
   User.PERMISSION_FIELDS = [
     ...User.PERMISSIONS.map((permission) => ({
       name: `permissions.${permission.name}`,
       type: "switch",
       label: permission.label,
-      columns: 4
+      columns: 6
     }))
   ];
+  const _permSwitch = (p) => ({ name: `permissions.${p.name}`, type: "switch", label: p.label, columns: 6, ...p.tooltip ? { tooltip: p.tooltip } : {} });
+  User.CATEGORY_PERMISSION_FIELDS = (() => {
+    const tabs = [
+      { label: "System", fields: User.CATEGORY_PERMISSIONS.map(_permSwitch) }
+    ];
+    if (User.APP_CATEGORY_PERMISSIONS.length > 0) {
+      tabs.push({ label: "App", fields: User.APP_CATEGORY_PERMISSIONS.map(_permSwitch) });
+    }
+    return [{ type: "tabset", tabs }];
+  })();
+  User.GRANULAR_PERMISSION_FIELDS = (() => {
+    const tabs = User.GRANULAR_PERMISSION_TABS.map((tab) => ({
+      label: tab.label,
+      fields: tab.permissions.map(_permSwitch)
+    }));
+    if (User.APP_GRANULAR_PERMISSIONS.length > 0) {
+      tabs.push({ label: "App", fields: User.APP_GRANULAR_PERMISSIONS.map(_permSwitch) });
+    }
+    return [{ type: "tabset", tabs }];
+  })();
   const UserForms = {
     create: {
       title: "Create User",
@@ -10552,7 +10622,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           {{#showCopy}}
@@ -10582,7 +10652,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           <div class="input-group">
@@ -10624,7 +10694,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           {{#showCopy}}
@@ -10652,7 +10722,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           <div class="position-relative">
@@ -10688,7 +10758,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           {{#searchInput}}{{{searchInput}}}{{/searchInput}}
@@ -10708,7 +10778,7 @@ var MOJO = (function(exports) {
                    class="form-check-input{{#error}} is-invalid{{/error}}" value="{{value}}"
                    {{#checked}}checked{{/checked}} {{#required}}required{{/required}}
                      {{#disabled}}disabled{{/disabled}} {{{attrs}}}>
-              <label class="form-check-label" for="{{fieldId}}">{{label}}</label>
+              <label class="form-check-label" for="{{fieldId}}">{{label}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}</label>
             </div>
             {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
             {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
@@ -10722,7 +10792,7 @@ var MOJO = (function(exports) {
                    {{#checked}}checked{{/checked}} {{#required}}required{{/required}}
                    {{#disabled}}disabled{{/disabled}} data-change-action="toggle-switch"
                    data-field="{{name}}" {{{attrs}}}>
-            <label class="form-check-label" for="{{fieldId}}">{{label}}</label>
+            <label class="form-check-label" for="{{fieldId}}">{{label}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}</label>
           </div>
           {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
           {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
@@ -10732,7 +10802,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control" style="display: flex; flex-direction: column; align-items: center;">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           <div class="image-field-container {{containerClass}}" id="{{dropZoneId}}" style="width: {{width}}px; height: {{height}}px;">
@@ -10780,7 +10850,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           <input type="file" id="{{fieldId}}" name="{{name}}" class="{{inputClass}}{{#error}} is-invalid{{/error}}"
@@ -10883,7 +10953,7 @@ var MOJO = (function(exports) {
         <div class="mojo-form-control">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
-            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}{{#tooltip}} <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="{{tooltip}}" style="font-size: 0.75rem; cursor: help;"></i>{{/tooltip}}
           </label>
           {{/label}}
           <div class="d-flex align-items-center gap-2">
@@ -11431,6 +11501,7 @@ var MOJO = (function(exports) {
         label: label ? this.escapeHtml(label) : null,
         placeholder: placeholder ? this.escapeHtml(placeholder) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         required,
         disabled,
@@ -11495,6 +11566,7 @@ var MOJO = (function(exports) {
         label: label ? this.escapeHtml(label) : null,
         placeholder: placeholder ? this.escapeHtml(placeholder) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         rows: rows || 3,
         required,
@@ -11541,6 +11613,7 @@ var MOJO = (function(exports) {
         label: label ? this.escapeHtml(label) : null,
         placeholder: placeholder ? this.escapeHtml(placeholder) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         rows: rows || 5,
         required,
@@ -11599,6 +11672,7 @@ var MOJO = (function(exports) {
         label: label ? this.escapeHtml(label) : null,
         placeholder: placeholder ? this.escapeHtml(placeholder) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         rows: rows || 3,
         required,
@@ -11676,6 +11750,7 @@ var MOJO = (function(exports) {
         name,
         label: label ? this.escapeHtml(label) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         searchInput: searchable ? searchInput : null,
         optionsHTML,
@@ -11762,6 +11837,7 @@ var MOJO = (function(exports) {
         name,
         label: this.escapeHtml(label),
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         value: this.escapeHtml(value),
         fieldClass,
@@ -11802,6 +11878,7 @@ var MOJO = (function(exports) {
         name,
         label: this.escapeHtml(label),
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         value: this.escapeHtml(value),
         sizeClass,
@@ -11864,7 +11941,7 @@ var MOJO = (function(exports) {
       return `
       <div class="mojo-form-control">
         ${label ? `<fieldset>
-          <legend class="${this.options.labelClass}">${this.escapeHtml(label)}</legend>
+          <legend class="${this.options.labelClass}">${this.escapeHtml(label)}${this.renderTooltipIcon(field)}</legend>
           <div class="${fieldClass}">
             ${optionsHTML}
           </div>
@@ -11928,6 +12005,7 @@ var MOJO = (function(exports) {
         name,
         label: label ? this.escapeHtml(label) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         accept,
         required,
@@ -11981,6 +12059,7 @@ var MOJO = (function(exports) {
         name,
         label: label ? this.escapeHtml(label) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         dropZoneId,
         previewId,
@@ -12064,6 +12143,7 @@ var MOJO = (function(exports) {
         label: label ? this.escapeHtml(label) : null,
         placeholder: placeholder ? this.escapeHtml(placeholder) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         required,
         disabled,
@@ -12104,6 +12184,7 @@ var MOJO = (function(exports) {
         name,
         label: label ? this.escapeHtml(label) : null,
         help: help ? this.escapeHtml(help) : null,
+        tooltip: field.tooltip ? this.escapeHtml(field.tooltip) : null,
         error: error ? this.escapeHtml(error) : null,
         min,
         max,
@@ -12277,7 +12358,7 @@ var MOJO = (function(exports) {
       const fieldValue = this.getFieldValue(name) ?? value;
       return `
       <div class="mojo-form-control">
-        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}${this.renderTooltipIcon(field)}</label>` : ""}
         <div class="tag-input-placeholder"
              data-field-name="${name}"
              data-field-type="tag"
@@ -12336,7 +12417,7 @@ var MOJO = (function(exports) {
       const fieldValue = this.getFieldValue(name) ?? value;
       return `
       <div class="mojo-form-control">
-        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}${this.renderTooltipIcon(field)}</label>` : ""}
         <div class="collection-select-placeholder"
              data-field-name="${name}"
              data-field-type="collection"
@@ -12402,7 +12483,7 @@ var MOJO = (function(exports) {
       const fieldValue = this.getFieldValue(name) ?? value;
       return `
       <div class="mojo-form-control">
-        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}${this.renderTooltipIcon(field)}</label>` : ""}
         <div class="collection-multiselect-placeholder"
              data-field-name="${name}"
              data-field-type="collectionmultiselect"
@@ -12456,7 +12537,7 @@ var MOJO = (function(exports) {
       const fieldValue = this.getFieldValue(name) ?? value;
       return `
       <div class="mojo-form-control">
-        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}${this.renderTooltipIcon(field)}</label>` : ""}
         <div class="date-picker-placeholder"
              data-field-name="${name}"
              data-field-type="datepicker"
@@ -12525,7 +12606,7 @@ var MOJO = (function(exports) {
       const endValue = this.getFieldValue(endFieldName) || endDate;
       return `
       <div class="mojo-form-control">
-        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        ${label ? `<label for="${fieldId}" class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}${this.renderTooltipIcon(field)}</label>` : ""}
         <div class="date-range-picker-placeholder"
              data-field-name="${name || startName || "daterange"}"
              data-field-type="daterange"
@@ -12670,7 +12751,7 @@ var MOJO = (function(exports) {
       const fieldValue = field.value ?? this.getFieldValue(name) ?? value;
       return `
       <div class="mojo-form-control">
-        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}${this.renderTooltipIcon(field)}</label>` : ""}
         <div class="combobox-placeholder"
              data-field-name="${name}"
              data-field-type="combobox"
@@ -12848,6 +12929,15 @@ var MOJO = (function(exports) {
       div.textContent = String(str);
       return div.innerHTML;
     }
+    /**
+     * Render a tooltip icon for a field
+     * @param {Object} field - Field configuration with optional tooltip property
+     * @returns {string} HTML for tooltip icon, or empty string
+     */
+    renderTooltipIcon(field) {
+      if (!field || !field.tooltip) return "";
+      return ` <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" title="${this.escapeHtml(field.tooltip)}" style="font-size: 0.75rem; cursor: help;"></i>`;
+    }
   }
   const FileDropMixin = {
     /**
@@ -16907,6 +16997,7 @@ var MOJO = (function(exports) {
       super({
         tagName: "div",
         className: "form-view",
+        enableTooltips: true,
         ...viewOptions
       });
       FormPlugins.onFormViewInit?.(this);