webspresso 0.0.80 → 0.0.81

package/index.js

@@ -63,6 +63,7 @@ const {
   redirectPlugin,
   rateLimitPlugin,
   contentPlugin,
+  csrfPlugin,
 } = require('./plugins');
 
 const content = require('./core/content');
@@ -133,6 +134,7 @@ module.exports = {
   redirectPlugin,
   rateLimitPlugin,
   contentPlugin,
+  csrfPlugin,
 
   // Schema-driven CMS core (framework-agnostic)
   content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "description": "Minimal, production-ready SSR framework for Node.js with file-based routing, Nunjucks templating, built-in i18n, and CLI tooling",
   "main": "index.js",
   "types": "index.d.ts",
@@ -67,7 +67,9 @@
     "helmet": "^7.2.0",
     "inquirer": "^8.2.6",
     "knex": "^3.1.0",
+    "mjml": "^5.4.0",
     "multer": "^2.1.1",
+    "nodemailer": "^9.0.3",
     "nunjucks": "^3.2.4",
     "sanitize-html": "^2.17.3",
     "sharp": "^0.33.5",
@@ -125,6 +127,7 @@
   "overrides": {
     "basic-ftp": "^5.3.0",
     "tar": "^7.5.11",
-    "undici": "^6.24.0"
+    "undici": "^6.24.0",
+    "uuid": "^11.1.1"
   }
 }

package/plugins/admin-panel/field-renderers/file-upload.js

@@ -223,6 +223,8 @@ module.exports = {
   FilesUploadField: {
     oninit: (vnode) => {
       vnode.state.uploading = false;
+      vnode.state.draggedIndex = null;
+      vnode.state.dragOverIndex = null;
     },
     oncreate: (vnode) => {
       const { name, meta = {} } = vnode.attrs;
@@ -298,19 +300,63 @@ module.exports = {
 
         urls.length > 0
           ? m('.grid.grid-cols-2.sm:grid-cols-3.md:grid-cols-4.gap-4.mb-3', urls.map((url, idx) => {
-              return m('.relative.group.border.border-gray-200.dark:border-slate-700.rounded-lg.p-2.bg-gray-50.dark:bg-slate-900', [
+              const isDragOver = state.dragOverIndex === idx;
+              const baseClasses = '.relative.group.border.rounded-lg.p-2.transition-all';
+              const cursorClass = readonly ? '' : '.cursor-move';
+              const borderClasses = isDragOver ? '.border-blue-500.border-2.dark:border-blue-500' : '.border-gray-200.dark:border-slate-700';
+              const bgClasses = isDragOver ? '.bg-blue-50.dark:bg-slate-800' : '.bg-gray-50.dark:bg-slate-900';
+              
+              return m(baseClasses + cursorClass + borderClasses + bgClasses, {
+                draggable: !readonly,
+                ondragstart: (e) => {
+                  state.draggedIndex = idx;
+                  e.dataTransfer.effectAllowed = 'move';
+                  e.dataTransfer.setData('text/plain', idx);
+                },
+                ondragover: (e) => {
+                  e.preventDefault();
+                  e.dataTransfer.dropEffect = 'move';
+                },
+                ondragenter: (e) => {
+                  state.dragOverIndex = idx;
+                },
+                ondragleave: (e) => {
+                  if (state.dragOverIndex === idx) {
+                    state.dragOverIndex = null;
+                  }
+                },
+                ondrop: (e) => {
+                  e.preventDefault();
+                  const fromIdx = state.draggedIndex;
+                  const toIdx = idx;
+                  if (fromIdx !== null && fromIdx !== undefined && fromIdx !== toIdx) {
+                    const newUrls = [...urls];
+                    const [movedItem] = newUrls.splice(fromIdx, 1);
+                    newUrls.splice(toIdx, 0, movedItem);
+                    if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+                  }
+                  state.draggedIndex = null;
+                  state.dragOverIndex = null;
+                },
+                ondragend: (e) => {
+                  state.draggedIndex = null;
+                  state.dragOverIndex = null;
+                }
+              }, [
                 shouldShowImagePreview(url, accept)
-                  ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer' },
+                  ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer', draggable: false },
                       m('img.h-32.w-full.rounded.object-contain.bg-white.dark:bg-slate-950', {
                         src: url,
                         alt: `${label} ${idx + 1}`,
                         loading: 'lazy',
+                        draggable: false,
                       })
                     )
                   : m('a.flex.items-center.justify-center.h-32.w-full.text-sm.text-indigo-600.dark:text-indigo-400.break-all.p-2', {
                       href: url,
                       target: '_blank',
                       rel: 'noopener noreferrer',
+                      draggable: false,
                     }, url.substring(url.lastIndexOf('/') + 1) || url),
                 !readonly
                   ? m('button.absolute.top-1.right-1.bg-red-500.text-white.rounded-full.p-1.shadow-md.opacity-0.group-hover:opacity-100.hover:bg-red-700.transition-opacity', {

package/plugins/csrf/index.js

@@ -0,0 +1,222 @@
+/**
+ * CSRF protection plugin — session/cookie double-submit CSRF validation + Nunjucks helpers
+ * @module plugins/csrf
+ */
+
+const crypto = require('crypto');
+const { AsyncLocalStorage } = require('async_hooks');
+const cookieParser = require('cookie-parser');
+const nunjucks = require('nunjucks');
+
+// Storage to pass the active request to Nunjucks template helpers in a thread-safe manner
+const csrfStorage = new AsyncLocalStorage();
+
+/**
+ * Compare two strings in constant time to prevent timing attacks
+ * @param {string} a
+ * @param {string} b
+ * @returns {boolean}
+ */
+function safeCompare(a, b) {
+  if (typeof a !== 'string' || typeof b !== 'string') return false;
+  if (a.length !== b.length) return false;
+  try {
+    return crypto.timingSafeEqual(Buffer.from(a), Buffer.from(b));
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Check if the request path matches any ignore patterns
+ * @param {import('express').Request} req
+ * @param {Array<string|RegExp|Function>} ignorePaths
+ * @returns {boolean}
+ */
+function isIgnored(req, ignorePaths) {
+  if (!ignorePaths || !Array.isArray(ignorePaths)) return false;
+  const path = req.path || '';
+
+  for (const pattern of ignorePaths) {
+    if (typeof pattern === 'string') {
+      // Prefix matching
+      if (path.startsWith(pattern)) return true;
+      // Basic glob matching
+      if (pattern.includes('*')) {
+        const regexPattern = pattern
+          .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+          .replace(/\*\*/g, '.*')
+          .replace(/\*/g, '[^/]*');
+        if (new RegExp(`^${regexPattern}$`).test(path)) return true;
+      }
+    } else if (pattern instanceof RegExp) {
+      if (pattern.test(path)) return true;
+    } else if (typeof pattern === 'function') {
+      if (pattern(req)) return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Nunjucks Helper: Get raw CSRF token
+ * @returns {string}
+ */
+function csrfToken() {
+  const req = csrfStorage.getStore();
+  if (req && typeof req.csrfToken === 'function') {
+    return req.csrfToken();
+  }
+  return '';
+}
+
+/**
+ * Nunjucks Helper: Get hidden input HTML element with CSRF token
+ * @returns {nunjucks.runtime.SafeString}
+ */
+function csrfInput() {
+  const token = csrfToken();
+  if (!token) return '';
+  return new nunjucks.runtime.SafeString(
+    `<input type="hidden" name="_csrf" value="${token}">`
+  );
+}
+
+/**
+ * CSRF Plugin
+ * @param {Object} [options]
+ * @param {boolean|Object} [options.cookie=false] - Cookie options. If true or object, cookie-based storage is used.
+ * @param {string} [options.cookie.key='_csrf'] - Cookie name.
+ * @param {boolean} [options.cookie.signed=false] - Whether to sign the cookie.
+ * @param {string} [options.cookie.path='/'] - Cookie path.
+ * @param {boolean} [options.cookie.httpOnly=true] - Cookie httpOnly flag.
+ * @param {boolean} [options.cookie.secure] - Cookie secure flag.
+ * @param {'lax'|'strict'|'none'} [options.cookie.sameSite='lax'] - Cookie SameSite policy.
+ * @param {number} [options.cookie.maxAge] - Cookie maxAge.
+ * @param {string} [options.sessionKey='csrfToken'] - Session key name.
+ * @param {string[]} [options.methods=['POST', 'PUT', 'DELETE', 'PATCH']] - Methods to protect.
+ * @param {Array<string|RegExp|Function>} [options.ignorePaths=[]] - Routes to skip verification.
+ * @param {boolean} [options.global=false] - Mount CSRF middleware globally on all routes.
+ * @param {string} [options.errorMessage='Invalid or missing CSRF token'] - Error message on failure.
+ * @param {number} [options.errorStatus=403] - HTTP status code on failure.
+ */
+function csrfPlugin(options = {}) {
+  const {
+    cookie = false,
+    sessionKey = 'csrfToken',
+    methods = ['POST', 'PUT', 'DELETE', 'PATCH'],
+    ignorePaths = [],
+    global: applyGlobal = false,
+    errorMessage = 'Invalid or missing CSRF token',
+    errorStatus = 403,
+  } = options;
+
+  // Resolve cookie config
+  const cookieEnabled = !!cookie;
+  const cookieOpts = typeof cookie === 'object' ? cookie : {};
+  const cookieKey = cookieOpts.key || '_csrf';
+  const cookieOptions = {
+    httpOnly: cookieOpts.httpOnly !== undefined ? cookieOpts.httpOnly : true,
+    path: cookieOpts.path || '/',
+    secure: cookieOpts.secure !== undefined ? cookieOpts.secure : (process.env.NODE_ENV === 'production'),
+    sameSite: cookieOpts.sameSite || 'lax',
+    signed: !!cookieOpts.signed,
+  };
+  if (cookieOpts.maxAge !== undefined) {
+    cookieOptions.maxAge = cookieOpts.maxAge;
+  }
+
+  /**
+   * Internal middleware creator
+   * @param {Object} [overrideOpts]
+   */
+  function createMiddleware(overrideOpts = {}) {
+    const activeMethods = overrideOpts.methods || methods;
+    const activeIgnorePaths = overrideOpts.ignorePaths || ignorePaths;
+
+    return (req, res, next) => {
+      // Determine if cookie or session storage should be used
+      const useCookie = cookieEnabled || !req.session;
+
+      // Initialize cookie parser dynamically if needed
+      if (useCookie && !req.cookies) {
+        const secret = cookieOptions.signed ? (cookieOpts.secret || process.env.SESSION_SECRET) : undefined;
+        cookieParser(secret)(req, res, () => {});
+      }
+
+      // 1. Retrieve or generate secret token
+      let secret;
+      if (useCookie) {
+        secret = cookieOptions.signed ? req.signedCookies[cookieKey] : req.cookies[cookieKey];
+        if (!secret) {
+          secret = crypto.randomBytes(32).toString('hex');
+          res.cookie(cookieKey, secret, cookieOptions);
+        }
+      } else {
+        // Session based
+        if (!req.session[sessionKey]) {
+          req.session[sessionKey] = crypto.randomBytes(32).toString('hex');
+        }
+        secret = req.session[sessionKey];
+      }
+
+      // Define standard req.csrfToken()
+      req.csrfToken = () => secret;
+
+      // 2. Perform CSRF verification for mutating HTTP methods
+      const method = req.method ? req.method.toUpperCase() : 'GET';
+      if (activeMethods.includes(method) && !isIgnored(req, activeIgnorePaths)) {
+        const body = req.body && typeof req.body === 'object' ? req.body : {};
+        const query = req.query && typeof req.query === 'object' ? req.query : {};
+        const submitted = (
+          body._csrf ||
+          query._csrf ||
+          req.headers['x-csrf-token'] ||
+          req.headers['xsrf-token'] ||
+          req.headers['x-xsrf-token']
+        );
+
+        if (!submitted || !safeCompare(submitted, secret)) {
+          res.status(errorStatus);
+          if (req.accepts('html') && !req.path.startsWith('/api')) {
+            return res.send(`<h1>${errorStatus} Forbidden</h1><p>${errorMessage}</p>`);
+          } else {
+            return res.json({ error: errorMessage });
+          }
+        }
+      }
+
+      // 3. Run downstream handlers inside AsyncLocalStorage context
+      csrfStorage.run(req, () => {
+        next();
+      });
+    };
+  }
+
+  return {
+    name: 'csrf',
+    version: '1.0.0',
+    description: 'CSRF protection plugin for Webspresso with cookie/session storage and template helpers',
+
+    api: {
+      createMiddleware,
+    },
+
+    register(ctx) {
+      // Register named route middleware
+      ctx.middlewares.csrf = (routeOpts = {}) => createMiddleware(routeOpts);
+
+      // Register template helpers
+      ctx.addHelper('csrfToken', csrfToken);
+      ctx.addHelper('csrfInput', csrfInput);
+
+      // If global validation is enabled, mount the middleware globally on the Express app
+      if (applyGlobal) {
+        ctx.app.use(createMiddleware());
+      }
+    },
+  };
+}
+
+module.exports = csrfPlugin;
+module.exports.csrfPlugin = csrfPlugin;

package/plugins/email/admin-component.js

@@ -0,0 +1,226 @@
+/**
+ * Email admin page — Mithril component source (string)
+ * @module plugins/email/admin-component
+ */
+
+/**
+ * @param {Object} [options={}]
+ * @param {string} [options.apiPrefix='/email']
+ */
+function generateEmailComponent(options = {}) {
+  const apiPrefix = options.apiPrefix || '/email';
+
+  return `
+(function() {
+  var API = '${apiPrefix}';
+
+  function EmailPage() {
+    var tab = 'logs';
+    var logs = [];
+    var templates = [];
+    var loading = true;
+    var error = null;
+    var page = 1;
+    var perPage = 25;
+    var total = 0;
+    var statusFilter = '';
+    var testTo = '';
+    var testSubject = 'Test email';
+    var testTemplate = '';
+    var testData = '{}';
+    var previewHtml = '';
+    var verifyMsg = '';
+    var actionMsg = '';
+
+    function loadLogs() {
+      loading = true;
+      error = null;
+      var q = '?page=' + page + '&perPage=' + perPage;
+      if (statusFilter) q += '&status=' + encodeURIComponent(statusFilter);
+      api.get(API + '/logs' + q).then(function(res) {
+        logs = res.data || [];
+        total = (res.meta && res.meta.total) || 0;
+        loading = false;
+      }).catch(function(e) {
+        error = e.message || String(e);
+        loading = false;
+      });
+    }
+
+    function loadTemplates() {
+      api.get(API + '/templates').then(function(res) {
+        templates = res.data || [];
+      }).catch(function() {});
+    }
+
+    return {
+      oninit: function() {
+        loadTemplates();
+        loadLogs();
+      },
+      view: function() {
+        return m('div.p-6.space-y-4', [
+          m('div.flex.gap-2.border-b.pb-2', [
+            ['logs', 'send', 'preview', 'verify'].map(function(t) {
+              return m('button.px-3.py-1.rounded.text-sm', {
+                class: tab === t ? 'bg-blue-600 text-white' : 'bg-gray-100',
+                onclick: function() { tab = t; actionMsg = ''; verifyMsg = ''; },
+              }, t === 'logs' ? 'Logs' : t === 'send' ? 'Test send' : t === 'preview' ? 'Preview' : 'Verify SMTP');
+            }),
+          ]),
+
+          tab === 'logs' && (loading
+            ? m('div.text-gray-500', 'Loading…')
+            : error
+              ? m('div.text-red-600', error)
+              : m('div.space-y-3', [
+                m('div.flex.flex-wrap.gap-2.items-end', [
+                  m('select.border.rounded.px-2.py-1', {
+                    value: statusFilter,
+                    onchange: function(e) { statusFilter = e.target.value; page = 1; loadLogs(); },
+                  }, [
+                    m('option', { value: '' }, 'All statuses'),
+                    m('option', { value: 'sent' }, 'sent'),
+                    m('option', { value: 'failed' }, 'failed'),
+                  ]),
+                  m('button.border.px-3.py-1.rounded', { onclick: loadLogs }, 'Refresh'),
+                  m('button.border.px-3.py-1.rounded.text-red-700', {
+                    onclick: function() {
+                      if (!confirm('Delete logs older than 90 days?')) return;
+                      api.post(API + '/purge', { days: 90 }).then(function() { loadLogs(); });
+                    },
+                  }, 'Purge 90d'),
+                ]),
+                m('div.text-sm.text-gray-500', 'Total: ' + total),
+                m('div.overflow-x-auto.border.rounded', [
+                  m('table.min-w-full.text-sm', [
+                    m('thead.bg-gray-50', m('tr', [
+                      m('th.text-left.p-2', 'Time'),
+                      m('th.text-left.p-2', 'To'),
+                      m('th.text-left.p-2', 'Subject'),
+                      m('th.text-left.p-2', 'Template'),
+                      m('th.text-left.p-2', 'Status'),
+                      m('th.text-left.p-2', 'Error'),
+                    ])),
+                    m('tbody', logs.map(function(r) {
+                      return m('tr.border-t', [
+                        m('td.p-2.whitespace-nowrap', r.created_at || ''),
+                        m('td.p-2', r.to || ''),
+                        m('td.p-2', r.subject || ''),
+                        m('td.p-2', r.template_id || '—'),
+                        m('td.p-2', r.status),
+                        m('td.p-2.text-red-600.max-w-xs.truncate', { title: r.error || '' }, r.error || ''),
+                      ]);
+                    })),
+                  ]),
+                ]),
+              ])),
+
+          tab === 'send' && m('div.space-y-3.max-w-xl', [
+            m('div', [
+              m('label.block.text-xs.text-gray-500.mb-1', 'To'),
+              m('input.border.rounded.w-full.px-2.py-1', {
+                value: testTo,
+                oninput: function(e) { testTo = e.target.value; },
+                placeholder: 'user@example.com',
+              }),
+            ]),
+            m('div', [
+              m('label.block.text-xs.text-gray-500.mb-1', 'Subject'),
+              m('input.border.rounded.w-full.px-2.py-1', {
+                value: testSubject,
+                oninput: function(e) { testSubject = e.target.value; },
+              }),
+            ]),
+            m('div', [
+              m('label.block.text-xs.text-gray-500.mb-1', 'Template'),
+              m('select.border.rounded.w-full.px-2.py-1', {
+                value: testTemplate,
+                onchange: function(e) { testTemplate = e.target.value; },
+              }, [
+                m('option', { value: '' }, '(none — use data only if template empty)'),
+              ].concat(templates.map(function(t) {
+                return m('option', { value: t.id }, t.id);
+              }))),
+            ]),
+            m('div', [
+              m('label.block.text-xs.text-gray-500.mb-1', 'Data (JSON)'),
+              m('textarea.border.rounded.w-full.px-2.py-1.font-mono.text-xs', {
+                rows: 4,
+                value: testData,
+                oninput: function(e) { testData = e.target.value; },
+              }),
+            ]),
+            m('button.bg-blue-600.text-white.px-4.py-2.rounded', {
+              onclick: function() {
+                actionMsg = 'Sending…';
+                api.post(API + '/send-test', {
+                  to: testTo,
+                  subject: testSubject,
+                  template: testTemplate || undefined,
+                  data: testData,
+                }).then(function() {
+                  actionMsg = 'Sent.';
+                  loadLogs();
+                }).catch(function(e) {
+                  actionMsg = e.message || String(e);
+                });
+              },
+            }, 'Send test'),
+            actionMsg && m('div.text-sm', actionMsg),
+          ]),
+
+          tab === 'preview' && m('div.space-y-3', [
+            m('div.max-w-xl.space-y-2', [
+              m('select.border.rounded.w-full.px-2.py-1', {
+                value: testTemplate,
+                onchange: function(e) { testTemplate = e.target.value; },
+              }, templates.map(function(t) {
+                return m('option', { value: t.id }, t.id);
+              })),
+              m('textarea.border.rounded.w-full.px-2.py-1.font-mono.text-xs', {
+                rows: 3,
+                value: testData,
+                oninput: function(e) { testData = e.target.value; },
+              }),
+              m('button.border.px-3.py-1.rounded', {
+                onclick: function() {
+                  api.post(API + '/preview', { template: testTemplate, data: testData }).then(function(res) {
+                    previewHtml = res.html || '';
+                  });
+                },
+              }, 'Preview'),
+            ]),
+            previewHtml && m('iframe.border.rounded.w-full', {
+              style: 'height: 420px',
+              srcdoc: previewHtml,
+            }),
+          ]),
+
+          tab === 'verify' && m('div.space-y-3', [
+            m('button.bg-blue-600.text-white.px-4.py-2.rounded', {
+              onclick: function() {
+                verifyMsg = 'Checking…';
+                api.post(API + '/verify').then(function(res) {
+                  verifyMsg = res.message || 'OK';
+                }).catch(function(e) {
+                  verifyMsg = e.message || String(e);
+                });
+              },
+            }, 'Verify SMTP connection'),
+            verifyMsg && m('div.text-sm', verifyMsg),
+          ]),
+        ]);
+      },
+    };
+  }
+
+  window.__customPages = window.__customPages || {};
+  window.__customPages['email'] = EmailPage;
+})();
+`;
+}
+
+module.exports = {
+  generateEmailComponent,
+};