webspresso 0.0.13 → 0.0.14

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

@@ -0,0 +1,124 @@
+/**
+ * File Upload Field Renderer
+ * Droppable file upload component
+ */
+
+module.exports = {
+  FileUploadField: {
+    oncreate: (vnode) => {
+      const { name, value = '', onchange, meta = {} } = vnode.attrs;
+      const dropZoneId = 'drop-zone-' + name;
+      
+      const dropZone = document.getElementById(dropZoneId);
+      if (!dropZone) return;
+      
+      // Prevent default drag behaviors
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      });
+      
+      // Highlight drop zone when item is dragged over it
+      ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => {
+          dropZone.classList.add('border-blue-500', 'bg-blue-50');
+        });
+      });
+      
+      ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => {
+          dropZone.classList.remove('border-blue-500', 'bg-blue-50');
+        });
+      });
+      
+      // Handle dropped files
+      dropZone.addEventListener('drop', (e) => {
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+          handleFile(files[0], vnode, meta);
+        }
+      });
+      
+      // Handle file input change
+      const fileInput = dropZone.querySelector('input[type=file]');
+      if (fileInput) {
+        fileInput.addEventListener('change', (e) => {
+          if (e.target.files.length > 0) {
+            handleFile(e.target.files[0], vnode, meta);
+          }
+        });
+      }
+    },
+    
+    view: (vnode) => {
+      const { name, value = '', meta = {}, required = false } = vnode.attrs;
+      const dropZoneId = 'drop-zone-' + name;
+      const maxSize = meta.maxSize || 5 * 1024 * 1024; // 5MB default
+      const accept = meta.accept || '*/*';
+      
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.mb-2',
+          meta.label || name,
+          required ? m('span.text-red-500', ' *') : null
+        ),
+        m('div#drop-zone-' + name + '.border-2.border-dashed.border-gray-300.rounded.p-8.text-center', {
+          style: 'cursor: pointer;'
+        }, [
+          m('input[type=file]', {
+            class: 'hidden',
+            id: 'file-input-' + name,
+            accept,
+            onchange: (e) => {
+              if (e.target.files.length > 0) {
+                handleFile(e.target.files[0], vnode, meta);
+              }
+            }
+          }),
+          m('div', [
+            m('p.text-gray-600.mb-2', 'Drag and drop a file here, or'),
+            m('label.text-blue-600.hover:text-blue-800.cursor-pointer', {
+              for: 'file-input-' + name
+            }, 'browse'),
+          ]),
+          value ? m('.mt-4', [
+            m('p.text-sm.text-gray-600', 'Current file: ' + (typeof value === 'string' ? value : value.name || 'uploaded')),
+            m('button.text-red-600.hover:text-red-800.text-sm.mt-2', {
+              onclick: () => {
+                if (vnode.attrs.onchange) {
+                  vnode.attrs.onchange('');
+                }
+              }
+            }, 'Remove'),
+          ]) : null,
+        ]),
+        m('input[type=hidden]', {
+          name,
+          value: typeof value === 'string' ? value : '',
+        }),
+      ]);
+    }
+  },
+};
+
+/**
+ * Handle file upload
+ * @param {File} file - File object
+ * @param {Object} vnode - Mithril vnode
+ * @param {Object} meta - Field metadata
+ */
+function handleFile(file, vnode, meta) {
+  const maxSize = meta.maxSize || 5 * 1024 * 1024;
+  
+  if (file.size > maxSize) {
+    alert(`File size exceeds maximum allowed size of ${Math.round(maxSize / 1024 / 1024)}MB`);
+    return;
+  }
+  
+  // For now, just store the file name
+  // In a real implementation, you'd upload to server and get URL
+  if (vnode.attrs.onchange) {
+    vnode.attrs.onchange(file.name);
+  }
+}

package/plugins/admin-panel/field-renderers/index.js

@@ -0,0 +1,93 @@
+/**
+ * Field Renderer Registry
+ * Registry for field renderer components
+ */
+
+const basicRenderers = require('./basic');
+const arrayRenderer = require('./array');
+const jsonRenderer = require('./json');
+const richTextRenderer = require('./rich-text');
+const fileUploadRenderer = require('./file-upload');
+const relationRenderers = require('./relations');
+
+/**
+ * Field renderer registry
+ */
+const registry = new Map();
+
+/**
+ * Register a field renderer
+ * @param {string} type - Field type (e.g., 'string', 'integer', 'rich-text')
+ * @param {Function} component - Mithril component function
+ */
+function registerFieldRenderer(type, component) {
+  registry.set(type, component);
+}
+
+/**
+ * Get field renderer for a column
+ * @param {Object} columnMeta - Column metadata
+ * @param {Object} modelMeta - Model metadata (for custom fields)
+ * @returns {Function|null} Mithril component or null
+ */
+function getFieldRenderer(columnMeta, modelMeta = {}) {
+  const { name, type, customField } = columnMeta;
+  
+  // Check for custom field first
+  if (customField && customField.type) {
+    const customRenderer = registry.get(customField.type);
+    if (customRenderer) {
+      return customRenderer;
+    }
+  }
+  
+  // Check for standard type
+  const standardRenderer = registry.get(type);
+  if (standardRenderer) {
+    return standardRenderer;
+  }
+  
+  // Fallback to text
+  return registry.get('text') || registry.get('string');
+}
+
+/**
+ * Initialize default renderers
+ */
+function initializeDefaultRenderers() {
+  // Basic types
+  registerFieldRenderer('string', basicRenderers.TextField);
+  registerFieldRenderer('text', basicRenderers.TextAreaField);
+  registerFieldRenderer('integer', basicRenderers.NumberField);
+  registerFieldRenderer('bigint', basicRenderers.NumberField);
+  registerFieldRenderer('float', basicRenderers.NumberField);
+  registerFieldRenderer('decimal', basicRenderers.NumberField);
+  registerFieldRenderer('boolean', basicRenderers.BooleanField);
+  registerFieldRenderer('date', basicRenderers.DateField);
+  registerFieldRenderer('datetime', basicRenderers.DateTimeField);
+  registerFieldRenderer('timestamp', basicRenderers.DateTimeField);
+  registerFieldRenderer('enum', basicRenderers.SelectField);
+  registerFieldRenderer('uuid', basicRenderers.TextField);
+  registerFieldRenderer('id', basicRenderers.NumberField);
+  
+  // Complex types
+  registerFieldRenderer('array', arrayRenderer.ArrayField);
+  registerFieldRenderer('json', jsonRenderer.JsonField);
+  
+  // Custom field types
+  registerFieldRenderer('rich-text', richTextRenderer.RichTextField);
+  registerFieldRenderer('file-upload', fileUploadRenderer.FileUploadField);
+  
+  // Relation types
+  registerFieldRenderer('belongsTo', relationRenderers.BelongsToField);
+  registerFieldRenderer('hasMany', relationRenderers.HasManyField);
+}
+
+// Initialize on load
+initializeDefaultRenderers();
+
+module.exports = {
+  registerFieldRenderer,
+  getFieldRenderer,
+  registry,
+};

package/plugins/admin-panel/field-renderers/json.js

@@ -0,0 +1,52 @@
+/**
+ * JSON Field Renderer
+ * Component for editing JSON fields
+ */
+
+module.exports = {
+  JsonField: {
+    view: (vnode) => {
+      const { name, value = {}, meta = {}, required = false } = vnode.attrs;
+      let jsonString = '';
+      let parseError = null;
+      
+      try {
+        jsonString = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+      } catch (e) {
+        jsonString = String(value);
+        parseError = 'Invalid JSON';
+      }
+      
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.mb-2',
+          meta.label || name,
+          required ? m('span.text-red-500', ' *') : null
+        ),
+        m('textarea.w-full.px-3.py-2.border.border-gray-300.rounded.font-mono.text-sm', {
+          rows: 10,
+          value: jsonString,
+          oninput: (e) => {
+            const newValue = e.target.value;
+            try {
+              const parsed = JSON.parse(newValue);
+              parseError = null;
+              if (vnode.attrs.onchange) {
+                vnode.attrs.onchange(parsed);
+              }
+            } catch (err) {
+              parseError = 'Invalid JSON';
+              if (vnode.attrs.onchange) {
+                vnode.attrs.onchange(newValue);
+              }
+            }
+          }
+        }),
+        parseError ? m('.text-red-600.text-sm.mt-1', parseError) : null,
+        m('input[type=hidden]', {
+          name,
+          value: typeof value === 'string' ? value : JSON.stringify(value),
+        }),
+      ]);
+    }
+  },
+};

package/plugins/admin-panel/field-renderers/relations.js

@@ -0,0 +1,96 @@
+/**
+ * Relation Field Renderers
+ * Components for editing relation fields (belongsTo, hasMany)
+ */
+
+module.exports = {
+  /**
+   * BelongsTo relation field (dropdown)
+   */
+  BelongsToField: {
+    view: (vnode) => {
+      const { name, value = null, meta = {}, relationData = [], required = false } = vnode.attrs;
+      const displayKey = meta.displayKey || 'id';
+      const valueKey = meta.valueKey || 'id';
+      
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.mb-2',
+          meta.label || name,
+          required ? m('span.text-red-500', ' *') : null
+        ),
+        m('select.w-full.px-3.py-2.border.border-gray-300.rounded', {
+          name,
+          value: value ? String(value) : '',
+          required,
+          onchange: (e) => {
+            const selectedValue = e.target.value === '' ? null : e.target.value;
+            if (vnode.attrs.onchange) {
+              vnode.attrs.onchange(selectedValue);
+            }
+          }
+        }, [
+          !required ? m('option', { value: '' }, '-- None --') : null,
+          ...relationData.map(item => {
+            const itemValue = item[valueKey];
+            const itemDisplay = item[displayKey] || String(itemValue);
+            return m('option', {
+              value: String(itemValue),
+              selected: value && String(value) === String(itemValue)
+            }, itemDisplay);
+          }),
+        ]),
+      ]);
+    }
+  },
+
+  /**
+   * HasMany relation field (multi-select)
+   */
+  HasManyField: {
+    view: (vnode) => {
+      const { name, value = [], meta = {}, relationData = [], required = false } = vnode.attrs;
+      const selectedIds = Array.isArray(value) ? value.map(v => String(v)) : [];
+      const displayKey = meta.displayKey || 'id';
+      const valueKey = meta.valueKey || 'id';
+      
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.mb-2',
+          meta.label || name,
+          required ? m('span.text-red-500', ' *') : null
+        ),
+        m('.border.border-gray-300.rounded.p-4.max-h-64.overflow-y-auto', [
+          relationData.map(item => {
+            const itemValue = String(item[valueKey]);
+            const itemDisplay = item[displayKey] || itemValue;
+            const isSelected = selectedIds.includes(itemValue);
+            
+            return m('label.flex.items-center.mb-2', [
+              m('input.mr-2', {
+                type: 'checkbox',
+                checked: isSelected,
+                onchange: (e) => {
+                  let newSelected = [...selectedIds];
+                  if (e.target.checked) {
+                    if (!newSelected.includes(itemValue)) {
+                      newSelected.push(itemValue);
+                    }
+                  } else {
+                    newSelected = newSelected.filter(id => id !== itemValue);
+                  }
+                  if (vnode.attrs.onchange) {
+                    vnode.attrs.onchange(newSelected);
+                  }
+                }
+              }),
+              m('span', itemDisplay),
+            ]);
+          }),
+        ]),
+        m('input[type=hidden]', {
+          name,
+          value: JSON.stringify(selectedIds),
+        }),
+      ]);
+    }
+  },
+};

package/plugins/admin-panel/field-renderers/rich-text.js

@@ -0,0 +1,83 @@
+/**
+ * Rich Text Editor Field Renderer
+ * Uses Quill editor (CDN)
+ */
+
+module.exports = {
+  RichTextField: {
+    oncreate: (vnode) => {
+      const { name, value = '', onchange } = vnode.attrs;
+      
+      // Load Quill if not already loaded
+      if (typeof window.Quill === 'undefined') {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 'https://cdn.quilljs.com/1.3.6/quill.snow.css';
+        document.head.appendChild(link);
+        
+        const script = document.createElement('script');
+        script.src = 'https://cdn.quilljs.com/1.3.6/quill.js';
+        script.onload = () => {
+          initEditor(vnode);
+        };
+        document.head.appendChild(script);
+      } else {
+        initEditor(vnode);
+      }
+      
+      function initEditor(vnode) {
+        const editorId = 'quill-editor-' + name;
+        const editorEl = document.getElementById(editorId);
+        if (editorEl && !editorEl._quill) {
+          const quill = new window.Quill(editorEl, {
+            theme: 'snow',
+            modules: {
+              toolbar: [
+                [{ 'header': [1, 2, 3, false] }],
+                ['bold', 'italic', 'underline', 'strike'],
+                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                ['link', 'image'],
+                ['clean']
+              ]
+            }
+          });
+          
+          // Set initial content
+          if (value) {
+            quill.root.innerHTML = value;
+          }
+          
+          // Handle content changes
+          quill.on('text-change', () => {
+            const content = quill.root.innerHTML;
+            if (onchange) {
+              onchange(content);
+            }
+          });
+          
+          editorEl._quill = quill;
+        }
+      }
+    },
+    
+    view: (vnode) => {
+      const { name, meta = {}, required = false } = vnode.attrs;
+      const editorId = 'quill-editor-' + name;
+      
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.mb-2',
+          meta.label || name,
+          required ? m('span.text-red-500', ' *') : null
+        ),
+        m('div.border.border-gray-300.rounded', {
+          id: editorId,
+          style: 'min-height: 200px;'
+        }),
+        m('input[type=hidden]', {
+          name,
+          id: name + '-value',
+        }),
+      ]);
+    }
+  },
+};

package/plugins/admin-panel/index.js

@@ -0,0 +1,187 @@
+/**
+ * Admin Panel Plugin
+ * Lightweight CRUD admin panel for Webspresso models
+ * @module plugins/admin-panel
+ */
+
+const { createAdminUserModel } = require('./admin-user-model');
+const { generateAdminUsersMigration } = require('./migration-template');
+const { createApiHandlers } = require('./api');
+const { requireAuth, optionalAuth } = require('./auth');
+
+/**
+ * Admin Panel Plugin Factory
+ * @param {Object} options - Plugin options
+ * @param {string} [options.path='/_admin'] - Admin panel path
+ * @param {boolean} [options.enabled=true] - Enable/disable plugin
+ * @param {string} [options.sessionSecret] - Session secret (default: random)
+ * @param {Object} [options.db] - Database instance (required)
+ * @returns {Object} Plugin definition
+ */
+function adminPanelPlugin(options = {}) {
+  const {
+    path: adminPath = '/_admin',
+    enabled = true,
+    sessionSecret,
+    db,
+  } = options;
+
+  // Validate required options
+  if (!db) {
+    throw new Error('Admin panel plugin requires a database instance. Pass `db` in options.');
+  }
+
+  // Check for peer dependencies
+  let session = null;
+  let bcrypt = null;
+
+  try {
+    session = require('express-session');
+  } catch (e) {
+    throw new Error(
+      'Admin panel plugin requires express-session. Install it with: npm install express-session'
+    );
+  }
+
+  try {
+    bcrypt = require('bcrypt');
+  } catch (e) {
+    throw new Error(
+      'Admin panel plugin requires bcrypt. Install it with: npm install bcrypt'
+    );
+  }
+
+  return {
+    name: 'admin-panel',
+    version: '1.0.0',
+    description: 'Lightweight CRUD admin panel for Webspresso models',
+    enabled,
+
+    /**
+     * Register hook - called when plugin is registered
+     */
+    async register(ctx) {
+      // Create and register AdminUser model
+      const AdminUser = createAdminUserModel();
+
+      // Store in plugin context for later use
+      this._adminUser = AdminUser;
+      this._db = db;
+      this._bcrypt = bcrypt;
+      this._session = session;
+      this._adminPath = adminPath;
+    },
+
+    /**
+     * Routes ready hook - called after routes are mounted
+     */
+    onRoutesReady(ctx) {
+      if (!this.enabled) {
+        return;
+      }
+
+      const { app } = ctx;
+      const AdminUser = this._adminUser;
+      const db = this._db;
+      const bcrypt = this._bcrypt;
+      const session = this._session;
+
+      // Setup session middleware
+      const sessionSecret = options.sessionSecret || process.env.SESSION_SECRET || 'webspresso-admin-secret-change-in-production';
+      
+      app.use(session({
+        secret: sessionSecret,
+        resave: false,
+        saveUninitialized: false,
+        cookie: {
+          secure: process.env.NODE_ENV === 'production',
+          httpOnly: true,
+          maxAge: 24 * 60 * 60 * 1000, // 24 hours
+        },
+      }));
+
+      // Create API handlers
+      const apiHandlers = createApiHandlers({
+        path: adminPath,
+        db,
+        AdminUser,
+        hashPassword: (password, rounds) => bcrypt.hash(password, rounds),
+        comparePassword: (password, hash) => bcrypt.compare(password, hash),
+      });
+
+      // Auth API routes (no auth required)
+      ctx.addRoute('get', `${adminPath}/api/auth/check`, apiHandlers.checkHandler);
+      ctx.addRoute('post', `${adminPath}/api/auth/setup`, apiHandlers.setupHandler);
+      ctx.addRoute('post', `${adminPath}/api/auth/login`, apiHandlers.loginHandler);
+      ctx.addRoute('post', `${adminPath}/api/auth/logout`, requireAuth, apiHandlers.logoutHandler);
+      ctx.addRoute('get', `${adminPath}/api/auth/me`, requireAuth, apiHandlers.meHandler);
+
+      // Model API routes (auth required)
+      ctx.addRoute('get', `${adminPath}/api/models`, requireAuth, apiHandlers.modelsHandler);
+      ctx.addRoute('get', `${adminPath}/api/models/:model`, requireAuth, apiHandlers.modelHandler);
+
+      // Record API routes (auth required)
+      ctx.addRoute('get', `${adminPath}/api/models/:model/records`, requireAuth, apiHandlers.recordsListHandler);
+      ctx.addRoute('get', `${adminPath}/api/models/:model/records/:id`, requireAuth, apiHandlers.recordHandler);
+      ctx.addRoute('post', `${adminPath}/api/models/:model/records`, requireAuth, apiHandlers.createRecordHandler);
+      ctx.addRoute('put', `${adminPath}/api/models/:model/records/:id`, requireAuth, apiHandlers.updateRecordHandler);
+      ctx.addRoute('delete', `${adminPath}/api/models/:model/records/:id`, requireAuth, apiHandlers.deleteRecordHandler);
+
+      // Relation API routes (auth required)
+      ctx.addRoute('get', `${adminPath}/api/models/:model/relations/:relation`, requireAuth, apiHandlers.relationHandler);
+
+      // Query API routes (auth required)
+      ctx.addRoute('get', `${adminPath}/api/models/:model/queries/:query`, requireAuth, apiHandlers.queryHandler);
+
+      // Admin panel HTML endpoint (optional auth - frontend handles routing)
+      ctx.addRoute('get', adminPath, optionalAuth, (req, res) => {
+        // This will be handled by Mithril SPA
+        // For now, return a simple HTML that loads the SPA
+        res.type('text/html');
+        res.send(generateAdminPanelHtml(adminPath));
+      });
+
+      // Log admin panel URL
+      console.log(`\n🔐 Admin Panel available at: http://localhost:${process.env.PORT || 3000}${adminPath}\n`);
+    },
+
+    /**
+     * Get migration template for admin_users table
+     */
+    getMigrationTemplate() {
+      return generateAdminUsersMigration();
+    },
+  };
+}
+
+/**
+ * Generate admin panel HTML
+ * @param {string} adminPath - Admin panel path
+ * @returns {string} HTML content
+ */
+function generateAdminPanelHtml(adminPath) {
+  const appScript = require('./app');
+  
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Panel</title>
+  <script src="https://unpkg.com/mithril/mithril.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.__ADMIN_PATH__ = ${JSON.stringify(adminPath)};
+  </script>
+  <script>${appScript}</script>
+</body>
+</html>`;
+}
+
+module.exports = adminPanelPlugin;

package/plugins/admin-panel/migration-template.js

@@ -0,0 +1,39 @@
+/**
+ * Migration Template for Admin Users Table
+ * @module plugins/admin-panel/migration-template
+ */
+
+/**
+ * Generate migration content for admin_users table
+ * @returns {string} Migration file content
+ */
+function generateAdminUsersMigration() {
+  return `/**
+ * Migration: Create admin_users table
+ * Auto-generated by admin panel plugin
+ */
+
+exports.up = function(knex) {
+  return knex.schema.createTable('admin_users', (table) => {
+    table.bigIncrements('id').primary();
+    table.string('email', 255).notNullable().unique();
+    table.string('password', 255).notNullable();
+    table.string('name', 255).notNullable();
+    table.string('role', 50).defaultTo('admin');
+    table.boolean('active').defaultTo(true);
+    table.timestamp('created_at').defaultTo(knex.fn.now());
+    table.timestamp('updated_at').defaultTo(knex.fn.now());
+    
+    table.index(['email']);
+  });
+};
+
+exports.down = function(knex) {
+  return knex.schema.dropTableIfExists('admin_users');
+};
+`;
+}
+
+module.exports = {
+  generateAdminUsersMigration,
+};

package/plugins/admin-panel/styles.js

@@ -0,0 +1,9 @@
+/**
+ * Admin Panel Styles
+ * Additional Tailwind CSS styles for admin panel
+ */
+
+module.exports = `
+/* Additional styles can be added here if needed */
+/* Most styling is handled by Tailwind CSS classes */
+`;