webspresso 0.0.74 → 0.0.75

package/plugins/admin-panel/api.js

@@ -7,19 +7,8 @@
 const { getAllModels, getModel } = require('../../core/orm/model');
 const { sanitizeForOutput } = require('../../core/orm/utils');
 const { checkAdminExists, setupAdmin, login, logout, requireAuth } = require('./auth');
-
-/**
- * Check if rich-text content is empty
- * @param {string} value - Rich-text HTML value
- * @returns {boolean} True if empty
- */
-function isRichTextEmpty(value) {
-  if (!value) return true;
-  // Remove all HTML tags and check if only whitespace remains
-  const stripped = value.replace(/<[^>]*>/g, '').trim();
-  // Check for common empty Quill outputs
-  return stripped === '' || value === '<p><br></p>' || value === '<p></p>';
-}
+const { isRichTextEmpty } = require('./lib/is-rich-text-empty');
+const { sanitizeRichHtml } = require('./lib/sanitize-rich-html');
 
 /**
  * Create API route handlers
@@ -29,13 +18,37 @@ function isRichTextEmpty(value) {
  * @param {Object} options.AdminUser - AdminUser model
  * @param {Function} options.hashPassword - Bcrypt hash function
  * @param {Function} options.comparePassword - Bcrypt compare function
+ * @param {boolean} [options.richTextSanitize=true] - Sanitize rich-text HTML before create/update
  * @returns {Object} Route handlers
  */
 function createApiHandlers(options) {
-  const { path, db, AdminUser, hashPassword, comparePassword } = options;
+  const {
+    path,
+    db,
+    AdminUser,
+    hashPassword,
+    comparePassword,
+    richTextSanitize = true,
+  } = options;
   const adminPath = path || '/_admin';
   const apiPath = `${adminPath}/api`;
 
+  /** Strip XSS vectors from rich-text columns present on body; nullable columns normalize empty → null */
+  function mutateRichTextFieldsInBody(body, model) {
+    if (!richTextSanitize || !model.admin?.customFields) return;
+    for (const [colName, colMeta] of model.columns) {
+      if (model.admin.customFields[colName]?.type !== 'rich-text') continue;
+      if (!(colName in body)) continue;
+      const raw = body[colName];
+      if (raw === null || raw === undefined) continue;
+      if (typeof raw !== 'string') continue;
+      body[colName] = sanitizeRichHtml(raw);
+      if (colMeta.nullable && isRichTextEmpty(body[colName])) {
+        body[colName] = null;
+      }
+    }
+  }
+
   // Helper to get model from db instance or global registry
   function getModelFromDb(modelName) {
     if (db && typeof db.getModel === 'function') {
@@ -283,8 +296,19 @@ function createApiHandlers(options) {
         const from = filter.from;
         const to = filter.to;
 
+        if (op === 'is_null') {
+          query = query.whereNull(colName);
+          countQuery = countQuery.whereNull(colName);
+          continue;
+        }
+        if (op === 'is_not_null') {
+          query = query.whereNotNull(colName);
+          countQuery = countQuery.whereNotNull(colName);
+          continue;
+        }
+
         // Handle boolean values - convert string 'true'/'false' to actual boolean
-        if (colType === 'boolean' && value !== undefined && value !== null) {
+        if (colType === 'boolean' && value !== undefined && value !== null && value !== '') {
           const boolValue = value === 'true' || value === true ? 1 : 0;
           query = query.where(colName, '=', boolValue);
           countQuery = countQuery.where(colName, '=', boolValue);
@@ -448,6 +472,8 @@ function createApiHandlers(options) {
         return res.status(404).json({ error: 'Model not found or not enabled' });
       }
 
+      mutateRichTextFieldsInBody(req.body, model);
+
       // Validate rich-text fields
       for (const [colName, colMeta] of model.columns) {
         if (model.admin.customFields?.[colName]?.type === 'rich-text' && !colMeta.nullable) {
@@ -481,6 +507,8 @@ function createApiHandlers(options) {
         return res.status(404).json({ error: 'Model not found or not enabled' });
       }
 
+      mutateRichTextFieldsInBody(req.body, model);
+
       // Validate rich-text fields (only if field is being updated)
       for (const [colName, colMeta] of model.columns) {
         if (colName in req.body && model.admin.customFields?.[colName]?.type === 'rich-text' && !colMeta.nullable) {

package/plugins/admin-panel/client/README.md

@@ -0,0 +1,39 @@
+# Admin panel client (Mithril SPA)
+
+The embedded admin SPA is **browser-side JavaScript** assembled from plain snippet files (`parts/*.js`) and inlined in `generateAdminPanelHtml()` in [`../index.js`](../index.js). It is **not** compiled by default so the framework install stays simple.
+
+## Layout
+
+| Path | Purpose |
+|------|---------|
+| [`manifest.parts.json`](./manifest.parts.json) | **Order matters**: concatenated top-to-bottom. |
+| [`parts/*.js`](./parts/) | Raw script chunks (same content that used to live in a single `components.js` template). |
+| [`load-parts.js`](./load-parts.js) | Node loader: reads manifest → single string consumed by [`../components.js`](../components.js). |
+| [`../app.js`](../app.js) | Routes + bootstrap (still appended **after** the components blob in HTML). |
+
+Naming roughly follows DOM flow: filters → pagination → fields → CRUD screens.
+
+## Editing workflow
+
+1. Change or add chunks under **`parts/`**.
+2. If you **add/remove/reorder** files, update **`manifest.parts.json`** accordingly.
+3. Sanity check:
+
+```bash
+node plugins/admin-panel/client/verify-spa-parts.js
+```
+
+Unit tests cover manifest vs disk in **`tests/unit/admin-panel/spa-parts.test.js`**.
+
+## Optional tooling (local only)
+
+The Webspresso **core** package does **not** depend on Vite/esbuild/Rollup. If you want a bundler locally (analysis, splitting, compression experiments):
+
+```bash
+cd plugins/admin-panel/client
+npm install --no-save vite@5
+```
+
+Use a small rollup/esbuild concat script targeting `manifest.parts.json`, **or** keep editing snippets by hand — the shipped plugin always uses **`load-parts.js`** unless you deliberately replace `components.js` to read a generated file.
+
+`vite.config.example.mjs` (if present) is an illustrative stub; it is **not** run by CI or `webspresso` installs.

package/plugins/admin-panel/client/load-parts.js

@@ -0,0 +1,74 @@
+/**
+ * Concatenate browser SPA snippets for the admin panel (Mithril inline bundle).
+ * @module plugins/admin-panel/client/load-parts
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const MANIFEST_NAME = './manifest.parts.json';
+
+/**
+ * Absolute path to this folder (client/).
+ */
+function clientDir() {
+  return path.join(__dirname);
+}
+
+function partsDir() {
+  return path.join(__dirname, 'parts');
+}
+
+/**
+ * Inline admin SPA runs in the browser; CommonJS `module.exports` throws ReferenceError and breaks the whole bundle.
+ * @param {string} src
+ * @returns {string}
+ */
+function stripCommonJsExportsForBrowser(src) {
+  return src
+    .split(/\r?\n/)
+    .filter((line) => !/^\s*module\.exports\s*=/.test(line))
+    .join('\n');
+}
+
+/**
+ * @returns {string[]} ordered part filenames from manifest.parts.json
+ */
+function getManifestFilenames() {
+  const fp = path.join(clientDir(), 'manifest.parts.json');
+  /** @type {string[]} */
+  const list = JSON.parse(fs.readFileSync(fp, 'utf8'));
+  if (!Array.isArray(list) || list.length === 0) {
+    throw new Error('admin-panel client/manifest.parts.json must be a non-empty array');
+  }
+  return list;
+}
+
+/**
+ * Full SPA script body injected before app routes (no outer wrapper).
+ * @returns {string}
+ */
+function buildComponentsBody() {
+  const sharedLib = stripCommonJsExportsForBrowser(
+    fs.readFileSync(path.join(__dirname, '..', 'lib', 'is-rich-text-empty.js'), 'utf8'),
+  );
+  const dir = partsDir();
+  const body = getManifestFilenames()
+    .map((filename) => {
+      const p = path.join(dir, filename);
+      if (!fs.existsSync(p)) {
+        throw new Error(`Missing admin SPA part: ${filename} (${p})`);
+      }
+      return fs.readFileSync(p, 'utf8');
+    })
+    .join('\n');
+  return `${sharedLib}\n${body}`;
+}
+
+module.exports = {
+  buildComponentsBody,
+  getManifestFilenames,
+  partsDir,
+};

package/plugins/admin-panel/client/manifest.parts.json

@@ -0,0 +1,12 @@
+[
+  "01-state-api-breadcrumb.js",
+  "02-filter-components.js",
+  "03-pagination-intro.js",
+  "04-field-renderers.js",
+  "05-rich-text-file-helpers.js",
+  "06-login-setup-forms.js",
+  "07-model-list.js",
+  "08-record-list.js",
+  "09-record-form.js",
+  "10-export-registry.js"
+]

package/plugins/admin-panel/client/parts/01-state-api-breadcrumb.js

@@ -0,0 +1,150 @@
+
+// API helper
+const api = {
+  async request(path, options = {}) {
+    const adminPath = window.__ADMIN_PATH__ || '/_admin';
+    const url = adminPath + '/api' + path;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      credentials: 'include',
+    });
+    
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Request failed' }));
+      throw new Error(error.error || 'Request failed');
+    }
+    
+    return response.json();
+  },
+  
+  get(path) { return this.request(path, { method: 'GET' }); },
+  post(path, data) { return this.request(path, { method: 'POST', body: JSON.stringify(data) }); },
+  put(path, data) { return this.request(path, { method: 'PUT', body: JSON.stringify(data) }); },
+  delete(path) { return this.request(path, { method: 'DELETE' }); },
+};
+
+/** POST /data-exchange/export/:model — validates JSON errors vs .xlsx blob */
+async function downloadDataExchangeXlsx(modelName, payload) {
+  const adminPath = window.__ADMIN_PATH__ || '/_admin';
+  const res = await fetch(adminPath + '/api/data-exchange/export/' + modelName, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  const ct = (res.headers.get('content-type') || '').toLowerCase();
+  if (!res.ok || ct.indexOf('spreadsheet') === -1) {
+    var msg = 'Export failed';
+    try {
+      if (ct.indexOf('json') !== -1) {
+        var j = await res.json();
+        msg = j.error || msg;
+      } else {
+        var t = await res.text();
+        if (t) msg = t.slice(0, 300);
+      }
+    } catch (e) {}
+    throw new Error(msg);
+  }
+  const blob = await res.blob();
+  var url = URL.createObjectURL(blob);
+  var a = document.createElement('a');
+  a.href = url;
+  a.download = modelName + '-export.xlsx';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+// Helper: Capitalize first letter of each word
+function capitalizeWords(str) {
+  if (!str) return '';
+  return str.split(' ').map(function(word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+}
+
+// Helper: Format column name to label
+function formatColumnLabel(name) {
+  if (!name) return '';
+  return capitalizeWords(name.replace(/_/g, ' '));
+}
+
+// State
+const state = {
+  user: null,
+  needsSetup: false,
+  loading: false,
+  error: null,
+  models: [],
+  currentModel: null,
+  currentModelMeta: null, // Full model metadata with columns
+  records: [],
+  pagination: {
+    page: 1,
+    perPage: 20,
+    total: 0,
+    totalPages: 0,
+  },
+  currentRecord: null,
+  formData: {}, // Form field values
+  editing: false,
+  filters: {}, // Active filters { column: { op, value, from, to } }
+  filterPanelOpen: false, // Filter panel visibility (deprecated)
+  filterDrawerOpen: false, // Filter drawer visibility
+  bulkFields: [], // Bulk-updatable fields (enum/boolean/date/datetime/timestamp)
+  bulkFieldDropdownOpen: false, // Bulk field dropdown visibility
+  selectedBulkField: null, // Currently selected bulk field for update
+  selectAllMode: false, // true = all records selected (not just current page)
+};
+
+// Breadcrumb Component
+const Breadcrumb = {
+  view: (vnode) => {
+    const items = vnode.attrs.items || [];
+    if (items.length === 0) return null;
+    
+    return m('nav.mb-4', { 'aria-label': 'Breadcrumb' }, [
+      m('ol.flex.items-center.space-x-2.text-sm', [
+        // Home link
+        m('li', [
+          m('a.text-gray-500 dark:text-slate-400.hover:text-gray-700 dark:hover:text-slate-200 dark:hover:text-slate-200', {
+            href: '/',
+            onclick: (e) => {
+              e.preventDefault();
+              m.route.set('/');
+            }
+          }, [
+            m('svg.w-4.h-4', { fill: 'currentColor', viewBox: '0 0 20 20' }, [
+              m('path', { d: 'M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z' }),
+            ]),
+          ]),
+        ]),
+        // Dynamic items
+        ...items.map((item, idx) => [
+          m('li.flex.items-center', [
+            m('svg.w-4.h-4.text-gray-400 dark:text-slate-500.mx-1', { fill: 'currentColor', viewBox: '0 0 20 20' }, [
+              m('path', { 'fill-rule': 'evenodd', d: 'M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z', 'clip-rule': 'evenodd' }),
+            ]),
+            idx === items.length - 1
+              ? m('span.text-gray-700 dark:text-slate-300.font-medium', item.label)
+              : m('a.text-gray-500 dark:text-slate-400.hover:text-gray-700 dark:hover:text-slate-200 dark:hover:text-slate-200', {
+                  href: item.href,
+                  onclick: (e) => {
+                    e.preventDefault();
+                    m.route.set(item.href);
+                  }
+                }, item.label),
+          ]),
+        ]),
+      ]),
+    ]);
+  },
+};
+
+// ==========================================
+// NEW FILTER COMPONENTS - Imported from filter-components.js
+// ==========================================