webspresso 0.0.83 → 0.0.84

package/README.md

@@ -846,18 +846,19 @@ if (adminApi) {
 }
 ```
 
-**registerModule config:**
 | Field | Description |
 |-------|-------------|
 | `id` | Unique module identifier (required) |
-| `pages` | Custom admin pages (`id`, `title`, `path`, `icon`, `description`, `componentFile`, `component`, `layout`) |
+| `pages` | Custom admin pages (`id`, `title`, `path`, `icon`, `description`, `url`, `iframeUrl`, `html`, `htmlFile`, `componentFile`, `component`, `layout`) |
 | `pagesDir` | Path to directory containing page folders/configs for automatic discovery |
 | `menu` | Sidebar menu items (`id`, `label`, `path`, `icon`, `order`) |
 | `menuGroups` | Collapsible menu groups (`id`, `label`, `order`) |
 | `api` | API routes (`prefix`, `routes`: `method`, `path`, `handler`, `auth`) |
 | `widgets` | Dashboard widgets (`id`, `title`, `dataLoader`) |
+| `scripts` | External script URLs, script objects, or inline scripts injected into SSR Admin Panel (`registerScript`) |
+| `styles` | External stylesheet URLs or inline CSS injected into SSR Admin Panel (`registerStyle`) |
 
-Pages support `componentFile` (path to a `.js` file exporting/returning a Mithril component), `pagesDir` (directory auto-discovery), or `component` (code string). By default (`layout: true`), page views are automatically wrapped in the Admin Layout with Breadcrumbs. Set `layout: false` for full-screen / custom canvas pages.
+Pages support JavaScript client components (`componentFile`, `pagesDir`, `component`) as well as **custom HTML & external URL pages** (`url` or `iframeUrl` for external web apps, and `html` or `htmlFile` for local HTML files like EUIX Engine apps). By default (`layout: true`), custom page views are automatically wrapped in the Admin Layout with Breadcrumbs. Set `layout: false` for full-screen / custom canvas pages.
 
 **Example component file (`admin/reports.js`):**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "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",

package/plugins/admin-panel/api.js

@@ -161,6 +161,78 @@ function createApiHandlers(options) {
     }
   }
 
+  /**
+   * Update current user profile
+   */
+  async function updateProfileHandler(req, res) {
+    try {
+      if (!req.session || !req.session.adminUser) {
+        return res.status(401).json({ error: 'Not authenticated' });
+      }
+
+      const userId = req.session.adminUser.id;
+      const { name, email, currentPassword, newPassword } = req.body || {};
+
+      if (!AdminUserRepo) {
+        return res.status(500).json({ error: 'Admin user system not initialized' });
+      }
+
+      const user = await AdminUserRepo.findById(userId);
+      if (!user) {
+        return res.status(404).json({ error: 'User not found' });
+      }
+
+      const updateData = {};
+
+      if (name && typeof name === 'string' && name.trim()) {
+        updateData.name = name.trim();
+      }
+
+      if (email && typeof email === 'string' && email.trim() && email.trim() !== user.email) {
+        const existing = await AdminUserRepo.query().where('email', email.trim()).whereNot('id', userId).first();
+        if (existing) {
+          return res.status(400).json({ error: 'Email is already in use by another user' });
+        }
+        updateData.email = email.trim();
+      }
+
+      if (newPassword) {
+        if (!currentPassword) {
+          return res.status(400).json({ error: 'Current password is required to set a new password' });
+        }
+        if (!comparePassword) {
+          return res.status(500).json({ error: 'Password comparison helper not available' });
+        }
+        const isValid = await comparePassword(currentPassword, user.password);
+        if (!isValid) {
+          return res.status(400).json({ error: 'Current password is incorrect' });
+        }
+        if (typeof newPassword !== 'string' || newPassword.length < 6) {
+          return res.status(400).json({ error: 'New password must be at least 6 characters long' });
+        }
+        updateData.password = await hashPassword(newPassword, 10);
+      }
+
+      if (Object.keys(updateData).length > 0) {
+        await AdminUserRepo.update(userId, updateData);
+      }
+
+      const updatedUser = await AdminUserRepo.findById(userId);
+      const sanitized = sanitizeForOutput(updatedUser, getModelFromDb('AdminUser') || { hidden: ['password'] });
+      if (sanitized) delete sanitized.password;
+
+      req.session.adminUser = {
+        ...req.session.adminUser,
+        name: updatedUser.name,
+        email: updatedUser.email,
+      };
+
+      res.json({ success: true, user: sanitized });
+    } catch (error) {
+      res.status(500).json({ error: error.message });
+    }
+  }
+
   /**
    * Get all models (admin enabled)
    */
@@ -680,6 +752,7 @@ function createApiHandlers(options) {
     loginHandler,
     logoutHandler,
     meHandler,
+    updateProfileHandler,
     modelsHandler,
     modelHandler,
     recordsListHandler,

package/plugins/admin-panel/app.js

@@ -161,6 +161,16 @@ var routes = {
       return SettingsPage;
     }
   },
+  '/profile': {
+    onmatch: async () => {
+      const isAuth = await checkAuth();
+      if (!isAuth) {
+        redirectToLogin();
+        return;
+      }
+      return ProfilePage;
+    }
+  },
   '/users/sessions': {
     onmatch: async () => {
       if (!(await guardUserManagementRoutes())) return;
@@ -274,20 +284,28 @@ function wrapCustomPageWithLayout(page, rawComp) {
 var config = window.__ADMIN_CONFIG__;
 if (config && config.pages) {
   config.pages.forEach(function(page) {
-    if (!routes[page.path]) {
-      routes[page.path] = {
-        onmatch: async () => {
-          const isAuth = await checkAuth();
-          if (!isAuth) {
-            redirectToLogin();
-            return;
-          }
-          if (window.__customPages && window.__customPages[page.id]) {
-            return wrapCustomPageWithLayout(page, window.__customPages[page.id]);
-          }
-          return createCustomPage(page);
+    var normPath = page.path ? (page.path.startsWith('/') ? page.path : '/' + page.path) : '/';
+    var routeHandler = {
+      onmatch: async () => {
+        const isAuth = await checkAuth();
+        if (!isAuth) {
+          redirectToLogin();
+          return;
         }
-      };
+        const comp = (window.__customPages && window.__customPages[page.id])
+          ? wrapCustomPageWithLayout(page, window.__customPages[page.id])
+          : createCustomPage(page);
+        setTimeout(function() { m.redraw(); }, 10);
+        setTimeout(function() { m.redraw(); }, 100);
+        return comp;
+      }
+    };
+
+    if (!routes[normPath]) {
+      routes[normPath] = routeHandler;
+    }
+    if (normPath !== '/' && !routes[normPath + '/']) {
+      routes[normPath + '/'] = routeHandler;
     }
   });
 }

package/plugins/admin-panel/core/admin-module.js

@@ -41,6 +41,7 @@ function loadPagesFromDir(dirPath) {
 
     let pageConfig = null;
     let componentFile = null;
+    let htmlFile = null;
 
     if (entry.isDirectory()) {
       const folderPath = path.join(resolvedDir, entry.name);
@@ -63,13 +64,34 @@ function loadPagesFromDir(dirPath) {
           break;
         }
       }
+
+      if (!componentFile) {
+        const htmlCandidates = ['index.html', 'page.html', 'component.html', `${entry.name}.html`];
+        for (const cand of htmlCandidates) {
+          const fullCandPath = path.join(folderPath, cand);
+          if (fs.existsSync(fullCandPath)) {
+            htmlFile = fullCandPath;
+            break;
+          }
+        }
+      }
     } else if (entry.isFile() && entry.name.endsWith('.json')) {
       const jsonPath = path.join(resolvedDir, entry.name);
       pageConfig = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
       const baseName = entry.name.slice(0, -5);
       const jsCandidate = path.join(resolvedDir, baseName + '.js');
+      const htmlCandidate = path.join(resolvedDir, baseName + '.html');
       if (fs.existsSync(jsCandidate)) {
         componentFile = jsCandidate;
+      } else if (fs.existsSync(htmlCandidate)) {
+        htmlFile = htmlCandidate;
+      }
+    } else if (entry.isFile() && entry.name.endsWith('.html')) {
+      const baseName = entry.name.slice(0, -5);
+      const jsonCandidate = path.join(resolvedDir, baseName + '.json');
+      if (!fs.existsSync(jsonCandidate)) {
+        pageConfig = { id: baseName, title: baseName, path: '/' + baseName };
+        htmlFile = path.join(resolvedDir, entry.name);
       }
     }
 
@@ -77,6 +99,9 @@ function loadPagesFromDir(dirPath) {
       if (componentFile && !pageConfig.componentFile) {
         pageConfig.componentFile = componentFile;
       }
+      if (htmlFile && !pageConfig.htmlFile && !pageConfig.componentFile) {
+        pageConfig.htmlFile = htmlFile;
+      }
       if (pageConfig.menu) {
         if (pageConfig.menu === true) {
           menuItems.push({
@@ -129,6 +154,24 @@ function registerModule(config, deps) {
     registerMenuGroups(config.menuGroups, registry);
   }
 
+  if (config.scripts) {
+    if (!Array.isArray(config.scripts)) {
+      throw new Error(`Module "${config.id}": scripts must be an array`);
+    }
+    for (const s of config.scripts) {
+      registry.registerScript(s);
+    }
+  }
+
+  if (config.styles) {
+    if (!Array.isArray(config.styles)) {
+      throw new Error(`Module "${config.id}": styles must be an array`);
+    }
+    for (const s of config.styles) {
+      registry.registerStyle(s);
+    }
+  }
+
   if (config.pages !== undefined) {
     if (!Array.isArray(config.pages)) {
       throw new Error(`Module "${config.id}": pages must be an array`);
@@ -150,6 +193,27 @@ function registerModule(config, deps) {
     menuList = menuList.concat(dirMenuItems);
   }
 
+  for (const p of pagesList) {
+    if (p.menu && !menuList.some(m => m.id === p.id)) {
+      if (p.menu === true) {
+        menuList.push({
+          id: p.id,
+          label: p.title,
+          path: p.path,
+          icon: p.icon,
+        });
+      } else if (typeof p.menu === 'object') {
+        menuList.push({
+          id: p.id,
+          label: p.title,
+          path: p.path,
+          icon: p.icon,
+          ...p.menu,
+        });
+      }
+    }
+  }
+
   if (pagesList.length > 0) {
     registerPages(config.id, pagesList, { registry, adminPath, ctx, optionalAuth, serveAdminPanel });
   }
@@ -192,8 +256,13 @@ function registerPages(moduleId, pages, deps) {
   for (const page of pages) {
     const pageId = page.id || moduleId;
 
-    if (!page.title || !page.path) {
-      throw new Error(`Module "${moduleId}", page "${pageId}": requires title and path`);
+    let htmlContent = page.html || null;
+    if (page.htmlFile) {
+      const resolvedHtmlPath = path.resolve(page.htmlFile);
+      if (!fs.existsSync(resolvedHtmlPath)) {
+        throw new Error(`Module "${moduleId}", page "${pageId}": htmlFile not found at ${page.htmlFile}`);
+      }
+      htmlContent = fs.readFileSync(resolvedHtmlPath, 'utf8');
     }
 
     registry.registerPage(pageId, {
@@ -203,6 +272,8 @@ function registerPages(moduleId, pages, deps) {
       description: page.description,
       permission: page.permission,
       layout: page.layout !== undefined ? page.layout : true,
+      url: page.url || page.iframeUrl || undefined,
+      html: htmlContent || undefined,
     });
 
     if (page.componentFile) {
@@ -218,7 +289,8 @@ function registerPages(moduleId, pages, deps) {
       registry.registerClientComponent(pageId, formattedCode);
     }
 
-    ctx.addRoute('get', `${adminPath}${page.path}`, optionalAuth, serveAdminPanel);
+    const normPath = page.path.startsWith('/') ? page.path : '/' + page.path;
+    ctx.addRoute('get', `${adminPath}${normPath}`, optionalAuth, serveAdminPanel);
   }
 }
 

package/plugins/admin-panel/core/registry.js

@@ -46,6 +46,10 @@ class AdminRegistry {
 
     // Client components: JS code strings for custom page rendering
     this.clientComponents = new Map();
+
+    // Custom scripts & styles for Admin Panel SSR rendering
+    this.scripts = [];
+    this.styles = [];
     
     // Hooks: lifecycle hooks
     this.hooks = {
@@ -266,6 +270,66 @@ class AdminRegistry {
     return this;
   }
 
+  /**
+   * Register a custom script URL or definition
+   * @param {string|Object} script - Script URL string or config object { src, code, async, defer, type, position }
+   */
+  registerScript(script) {
+    if (!script) return this;
+    if (typeof script === 'string') {
+      this.scripts.push({ src: script, position: 'head' });
+    } else if (typeof script === 'object') {
+      this.scripts.push({ position: 'head', ...script });
+    }
+    return this;
+  }
+
+  /**
+   * Register a custom style URL or CSS definition
+   * @param {string|Object} style - Style URL string or config object { href, code, rel }
+   */
+  registerStyle(style) {
+    if (!style) return this;
+    if (typeof style === 'string') {
+      this.styles.push({ href: style, rel: 'stylesheet' });
+    } else if (typeof style === 'object') {
+      this.styles.push({ rel: 'stylesheet', ...style });
+    }
+    return this;
+  }
+
+  /**
+   * Get formatted HTML tags for registered styles
+   */
+  getStylesHtml() {
+    return this.styles.map(s => {
+      if (s.code) return `<style>${s.code}</style>`;
+      if (s.href) return `<link rel="${s.rel || 'stylesheet'}" href="${s.href}">`;
+      return '';
+    }).filter(Boolean).join('\n');
+  }
+
+  /**
+   * Get formatted HTML tags for registered scripts
+   * @param {string} [position] - Filter by position ('head' or 'body')
+   */
+  getScriptsHtml(position) {
+    return this.scripts
+      .filter(s => !position || s.position === position)
+      .map(s => {
+        if (s.code) return `<script>${s.code}</script>`;
+        if (s.src) {
+          const asyncAttr = s.async ? ' async' : '';
+          const deferAttr = s.defer ? ' defer' : '';
+          const typeAttr = s.type ? ` type="${s.type}"` : '';
+          return `<script src="${s.src}"${asyncAttr}${deferAttr}${typeAttr}></script>`;
+        }
+        return '';
+      })
+      .filter(Boolean)
+      .join('\n');
+  }
+
   /**
    * Register a client-side component for a custom page
    * @param {string} pageId - Page ID (must match a registered page)
@@ -415,6 +479,8 @@ class AdminRegistry {
         description: p.description,
         permission: p.permission,
         layout: p.layout !== undefined ? p.layout : true,
+        url: p.url || p.iframeUrl,
+        html: p.html,
         hasClientComponent: this.clientComponents.has(p.id),
       })),
 
@@ -460,6 +526,8 @@ class AdminRegistry {
     this.menuGroups.clear();
     this.fieldRenderers.clear();
     this.clientComponents.clear();
+    this.scripts = [];
+    this.styles = [];
     Object.keys(this.hooks).forEach(k => this.hooks[k] = []);
   }
 }

package/plugins/admin-panel/index.js

@@ -15,6 +15,7 @@ const { registerDashboardWidgets, generateDashboardComponent } = require('./modu
 const { registerDefaultBulkActions, generateBulkActionsComponent } = require('./modules/bulk-actions');
 const { registerDefaultPages, createCustomPageApiHandlers, generateCustomPageComponent } = require('./modules/custom-pages');
 const { registerModelMenuItems, registerSystemMenuItems, generateMenuComponent } = require('./modules/menu');
+const { generateProfileComponent } = require('./modules/profile');
 const { registerModule, registerPageDir } = require('./core/admin-module');
 
 
@@ -120,6 +121,12 @@ function adminPanelPlugin(options = {}) {
           serveAdminPanel,
         });
       },
+      registerScript(script) {
+        return registry.registerScript(script);
+      },
+      registerStyle(style) {
+        return registry.registerStyle(style);
+      },
 
       _ctx: null,
     },
@@ -252,6 +259,7 @@ function adminPanelPlugin(options = {}) {
       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);
+      ctx.addRoute('put', `${adminPath}/api/auth/profile`, requireAuth, apiHandlers.updateProfileHandler);
 
       // Extensions API routes
       ctx.addRoute('get', `${adminPath}/api/extensions/config`, requireAuth, extensionHandlers.configHandler);
@@ -376,6 +384,7 @@ function generateAdminPanelHtml(adminPath, registry) {
   const dashboardComponent = generateDashboardComponent();
   const bulkActionsComponent = generateBulkActionsComponent();
   const customPageComponent = generateCustomPageComponent();
+  const profileComponent = generateProfileComponent();
 
   const settings = registry.settings;
   const fieldRenderersCode = Array.from(registry.fieldRenderers.entries()).map(([type, r]) => {
@@ -431,12 +440,14 @@ function generateAdminPanelHtml(adminPath, registry) {
     .dark .ql-snow .ql-fill { fill: #94a3b8; }
     .dark .ql-picker { color: #cbd5e1; }
   </style>
+  ${registry.getStylesHtml()}
+  ${registry.getScriptsHtml('head')}
 </head>
 <body class="min-h-screen bg-gray-50 dark:bg-slate-950 text-gray-900 dark:text-slate-100 antialiased">
   <div id="app"></div>
   <script>
     window.__ADMIN_PATH__ = ${JSON.stringify(adminPath)};
-    window.__ADMIN_CONFIG__ = ${JSON.stringify(registry.toClientConfig())};
+    window.__ADMIN_CONFIG__ = ${JSON.stringify(registry.toClientConfig()).replace(/</g, '\\u003c')};
   </script>
   <script>
     // Helper functions
@@ -455,6 +466,7 @@ function generateAdminPanelHtml(adminPath, registry) {
     ${dashboardComponent}
     ${bulkActionsComponent}
     ${customPageComponent}
+    ${profileComponent}
 
     // Custom page components container
     window.__customPages = window.__customPages || {};
@@ -465,6 +477,7 @@ function generateAdminPanelHtml(adminPath, registry) {
     ${fieldRenderersCode}
   </script>
   <script>${appScript}</script>
+  ${registry.getScriptsHtml('body')}
 </body>
 </html>`;
 }

package/plugins/admin-panel/modules/custom-pages.js

@@ -148,6 +148,37 @@ function generateCustomPageComponent() {
   return `
 // Custom Page Component Factory
 function createCustomPage(pageConfig) {
+  if (pageConfig && (pageConfig.url || pageConfig.html)) {
+    var iframeAttrs = {
+      src: pageConfig.url || undefined,
+      srcdoc: pageConfig.html || undefined,
+      style: 'width: 100%; height: ' + (pageConfig.layout === false ? '100vh' : 'calc(100vh - 12rem)') + '; min-height: 600px; border: 0; border-radius: 0.5rem;',
+      allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen',
+      allowfullscreen: true
+    };
+    if (pageConfig.layout === false) {
+      return {
+        view: function() {
+          return m('iframe', iframeAttrs);
+        }
+      };
+    }
+    return {
+      view: function() {
+        return m(Layout, [
+          m(Breadcrumb, { items: [{ label: pageConfig.title, href: pageConfig.path }] }),
+          m('div.mb-4.flex.items-start.justify-between.gap-4', [
+            m('div', [
+              m('h1.text-2xl.font-bold.text-gray-900.dark:text-slate-100', pageConfig.title),
+              pageConfig.description && m('p.text-gray-500.dark:text-slate-400.mt-1', pageConfig.description)
+            ])
+          ]),
+          m('iframe', iframeAttrs)
+        ]);
+      }
+    };
+  }
+
   return {
     oninit(vnode) {
       vnode.state.data = null;

package/plugins/admin-panel/modules/menu.js

@@ -200,9 +200,11 @@ const ThemeToggle = {
 const MenuItem = {
   view(vnode) {
     const { item, active } = vnode.attrs;
+    const adminPath = window.__ADMIN_PATH__ || '/_admin';
+    const href = item.path ? (item.path.startsWith('/') ? adminPath + item.path : adminPath + '/' + item.path) : '#';
     
     return m('a.flex.items-center.gap-3.px-3.py-2.rounded-lg.text-sm.font-medium.transition-colors', {
-      href: item.path,
+      href: href,
       class: active 
         ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300' 
         : 'text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700',
@@ -210,6 +212,7 @@ const MenuItem = {
         e.preventDefault();
         sidebarOpen = false;
         m.route.set(item.path);
+        setTimeout(() => m.redraw(), 0);
       },
     }, [
       item.icon && m(Icon, { name: item.icon, class: 'w-5 h-5 flex-shrink-0' }),
@@ -336,16 +339,25 @@ const Sidebar = {
         // User section
         state.user && m('div.p-4.border-t.border-gray-200.dark:border-slate-600', [
           m('div.flex.items-center.gap-3', [
-            m('div.w-8.h-8.bg-gray-200 dark:bg-slate-700.rounded-full.flex.items-center.justify-center', [
-              m('span.text-sm.font-medium.text-gray-600.dark:text-slate-300', 
-                (state.user.name || state.user.email || 'A').charAt(0).toUpperCase()
-              ),
-            ]),
-            m('div.flex-1.min-w-0', [
-              m('p.text-sm.font-medium.text-gray-900 dark:text-slate-100.truncate', state.user.name || 'Admin'),
-              m('p.text-xs.text-gray-500 dark:text-slate-400.truncate', state.user.email),
+            m('div.flex-1.flex.items-center.gap-3.min-w-0.cursor-pointer.hover:opacity-80.transition-opacity', {
+              title: 'Edit Profile',
+              onclick: () => { sidebarOpen = false; m.route.set('/profile'); },
+            }, [
+              m('div.w-8.h-8.bg-blue-100.dark:bg-blue-900/50.rounded-full.flex.items-center.justify-center.flex-shrink-0', [
+                m('span.text-sm.font-semibold.text-blue-600.dark:text-blue-300', 
+                  (state.user.name || state.user.email || 'A').charAt(0).toUpperCase()
+                ),
+              ]),
+              m('div.flex-1.min-w-0', [
+                m('p.text-sm.font-medium.text-gray-900.dark:text-slate-100.truncate', state.user.name || 'Admin'),
+                m('p.text-xs.text-gray-500.dark:text-slate-400.truncate', state.user.email),
+              ]),
             ]),
-            m('button.p-1.text-gray-400 dark:text-slate-500.hover:text-gray-600 dark:hover:text-slate-300', {
+            m('button.p-1.text-gray-400.dark:text-slate-500.hover:text-blue-600.dark:hover:text-blue-400.transition-colors', {
+              title: 'My Profile',
+              onclick: () => { sidebarOpen = false; m.route.set('/profile'); },
+            }, m(Icon, { name: 'user', class: 'w-4 h-4' })),
+            m('button.p-1.text-gray-400.dark:text-slate-500.hover:text-red-600.dark:hover:text-red-400.transition-colors', {
               title: 'Logout',
               onclick: async () => {
                 await api.post('/auth/logout');
@@ -354,7 +366,7 @@ const Sidebar = {
                 clearIntendedRoute();
                 m.route.set('/login');
               },
-            }, m(Icon, { name: 'logout', class: 'w-5 h-5' })),
+            }, m(Icon, { name: 'logout', class: 'w-4 h-4' })),
           ]),
         ]),
       ]),

package/plugins/admin-panel/modules/profile.js

@@ -0,0 +1,192 @@
+/**
+ * Profile Page Component
+ * Allows logged-in admin user to view and update name, email, and password
+ * @module plugins/admin-panel/modules/profile
+ */
+
+function generateProfileComponent() {
+  return `
+const ProfilePage = {
+  oninit(vnode) {
+    vnode.state.loading = true;
+    vnode.state.saving = false;
+    vnode.state.name = '';
+    vnode.state.email = '';
+    vnode.state.currentPassword = '';
+    vnode.state.newPassword = '';
+    vnode.state.confirmPassword = '';
+    vnode.state.error = null;
+    vnode.state.success = null;
+
+    api.get('/auth/me')
+      .then(res => {
+        if (res && res.user) {
+          vnode.state.name = res.user.name || '';
+          vnode.state.email = res.user.email || '';
+        }
+        vnode.state.loading = false;
+        m.redraw();
+      })
+      .catch(err => {
+        vnode.state.error = err.message || String(err);
+        vnode.state.loading = false;
+        m.redraw();
+      });
+  },
+
+  view(vnode) {
+    const s = vnode.state;
+
+    const handleSubmit = async (e) => {
+      e.preventDefault();
+      s.saving = true;
+      s.error = null;
+      s.success = null;
+
+      if (s.newPassword) {
+        if (!s.currentPassword) {
+          s.error = 'Current password is required to change your password';
+          s.saving = false;
+          m.redraw();
+          return;
+        }
+        if (s.newPassword.length < 6) {
+          s.error = 'New password must be at least 6 characters';
+          s.saving = false;
+          m.redraw();
+          return;
+        }
+        if (s.newPassword !== s.confirmPassword) {
+          s.error = 'New passwords do not match';
+          s.saving = false;
+          m.redraw();
+          return;
+        }
+      }
+
+      try {
+        const payload = {
+          name: s.name,
+          email: s.email,
+        };
+        if (s.newPassword) {
+          payload.currentPassword = s.currentPassword;
+          payload.newPassword = s.newPassword;
+        }
+
+        const res = await api.put('/auth/profile', payload);
+        s.saving = false;
+        if (res && res.success && res.user) {
+          s.success = 'Profile updated successfully';
+          s.currentPassword = '';
+          s.newPassword = '';
+          s.confirmPassword = '';
+          if (typeof state !== 'undefined' && state) {
+            state.user = res.user;
+          }
+        }
+        m.redraw();
+      } catch (err) {
+        s.saving = false;
+        s.error = err.message || 'Failed to update profile';
+        m.redraw();
+      }
+    };
+
+    return m(Layout, { breadcrumbs: [{ label: 'Profile', href: '/profile' }] }, [
+      m('div.max-w-4xl.mx-auto.space-y-6', [
+        m('div.flex.items-center.justify-between', [
+          m('div', [
+            m('h1.text-2xl.font-bold.text-gray-900.dark:text-slate-100', 'My Profile'),
+            m('p.text-sm.text-gray-500.dark:text-slate-400', 'Manage your personal details and account password'),
+          ]),
+        ]),
+
+        s.loading
+          ? m('div.flex.justify-center.py-12', m(Spinner))
+          : m('form', { onsubmit: handleSubmit }, [
+              s.error && m('div.p-4.mb-4.rounded-lg.bg-red-50.dark:bg-red-900/30.text-red-700.dark:text-red-300.text-sm', s.error),
+              s.success && m('div.p-4.mb-4.rounded-lg.bg-green-50.dark:bg-green-900/30.text-green-700.dark:text-green-300.text-sm', s.success),
+
+              // Personal Information Card
+              m('div.bg-white.dark:bg-slate-800.rounded-xl.border.border-gray-200.dark:border-slate-700.p-6.mb-6.shadow-sm.space-y-4', [
+                m('h2.text-lg.font-semibold.text-gray-900.dark:text-slate-100.border-b.border-gray-100.dark:border-slate-700.pb-3', 'Personal Information'),
+                m('div.grid.grid-cols-1.md:grid-cols-2.gap-4', [
+                  m('div', [
+                    m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', 'Name'),
+                    m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-lg.bg-white.dark:bg-slate-900.text-gray-900.dark:text-slate-100.focus:ring-2.focus:ring-blue-500', {
+                      type: 'text',
+                      required: true,
+                      value: s.name,
+                      oninput: (e) => { s.name = e.target.value; },
+                    }),
+                  ]),
+                  m('div', [
+                    m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', 'Email Address'),
+                    m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-lg.bg-white.dark:bg-slate-900.text-gray-900.dark:text-slate-100.focus:ring-2.focus:ring-blue-500', {
+                      type: 'email',
+                      required: true,
+                      value: s.email,
+                      oninput: (e) => { s.email = e.target.value; },
+                    }),
+                  ]),
+                ]),
+              ]),
+
+              // Password Change Card
+              m('div.bg-white.dark:bg-slate-800.rounded-xl.border.border-gray-200.dark:border-slate-700.p-6.mb-6.shadow-sm.space-y-4', [
+                m('h2.text-lg.font-semibold.text-gray-900.dark:text-slate-100.border-b.border-gray-100.dark:border-slate-700.pb-3', 'Change Password'),
+                m('p.text-xs.text-gray-500.dark:text-slate-400', 'Leave blank if you do not wish to change your password'),
+                m('div.space-y-4', [
+                  m('div', [
+                    m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', 'Current Password'),
+                    m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-lg.bg-white.dark:bg-slate-900.text-gray-900.dark:text-slate-100.focus:ring-2.focus:ring-blue-500', {
+                      type: 'password',
+                      value: s.currentPassword,
+                      oninput: (e) => { s.currentPassword = e.target.value; },
+                      placeholder: '••••••••',
+                    }),
+                  ]),
+                  m('div.grid.grid-cols-1.md:grid-cols-2.gap-4', [
+                    m('div', [
+                      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', 'New Password'),
+                      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-lg.bg-white.dark:bg-slate-900.text-gray-900.dark:text-slate-100.focus:ring-2.focus:ring-blue-500', {
+                        type: 'password',
+                        value: s.newPassword,
+                        oninput: (e) => { s.newPassword = e.target.value; },
+                        placeholder: 'Min 6 characters',
+                      }),
+                    ]),
+                    m('div', [
+                      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', 'Confirm New Password'),
+                      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-lg.bg-white.dark:bg-slate-900.text-gray-900.dark:text-slate-100.focus:ring-2.focus:ring-blue-500', {
+                        type: 'password',
+                        value: s.confirmPassword,
+                        oninput: (e) => { s.confirmPassword = e.target.value; },
+                        placeholder: 'Repeat new password',
+                      }),
+                    ]),
+                  ]),
+                ]),
+              ]),
+
+              m('div.flex.justify-end', [
+                m('button.px-6.py-2.bg-blue-600.hover:bg-blue-700.text-white.font-medium.rounded-lg.shadow-sm.transition-colors.disabled:opacity-50.flex.items-center.gap-2', {
+                  type: 'submit',
+                  disabled: s.saving,
+                }, [
+                  s.saving && m(Spinner),
+                  s.saving ? 'Saving...' : 'Save Profile',
+                ]),
+              ]),
+            ]),
+      ]),
+    ]);
+  },
+};
+`;
+}
+
+module.exports = {
+  generateProfileComponent,
+};

package/templates/skills/webspresso-usage/REFERENCE-framework.md

@@ -195,7 +195,7 @@ Pass **`db`** into **`createApp({ db })`** so **`ctx.db`** works in pages and pl
 | `dashboardPlugin` | Dev route `/_webspresso` — route list |
 | `sitemapPlugin` | `/sitemap.xml`, robots; optional DB-driven URLs |
 | `analyticsPlugin` | GA / GTM / Yandex / Bing / Facebook — `fsy` helpers |
-| `adminPanelPlugin` | SPA admin CRUD — needs **`db`**; optional **`uploadUrl`** (or infer from **`uploadPlugin`**); optional **`userManagement: { enabled, model, fields }`** + **`auth`** (same **`AuthManager`** as **`createApp({ auth })`**) for site-user CRUD + remember-me session UI — see **Session authentication** above |
+| `adminPanelPlugin` | SPA admin CRUD — needs **`db`**; supports custom HTML & external URL pages (`url`, `html`, `htmlFile`, `layout: false`) and SSR script/style imports (`scripts`, `styles`, `registerScript`, `registerStyle`); optional **`uploadUrl`** (or infer from **`uploadPlugin`**); optional **`userManagement: { enabled, model, fields }`** + **`auth`** (same **`AuthManager`** as **`createApp({ auth })`**) for site-user CRUD + remember-me session UI — see **Session authentication** above |
 | `dataExchangePlugin` | Admin-only **Excel export** + **CSV/XLSX import** under `${adminPath}/api/data-exchange/*`; register **after** `adminPanelPlugin` with same `db` / `adminPath`; optional `maxRows`, `maxFileBytes`; adds UI buttons + bulk `export-xlsx` |
 | `redirectPlugin` | Configurable **301–308** redirects in `register()` — runs **before** file-based SSR routes; `rules` (`from` path or `RegExp`, `to`, `status`, `methods`), `preserveQuery`, `allowExternal`, `trailingSlash`, `defaultMethods`; docs **[`doc/index.html#plugins-redirect`](../../../doc/index.html#plugins-redirect)**, README **Redirect plugin** |
 | `uploadPlugin` | `POST` multipart (`multer`), `createLocalFileProvider` or custom `provider`; set **`mimeAllowlist`** / **`maxBytes`** in production; pairs with admin **`zdb.file()`** / **`customFields.file-upload`** when registered before **`adminPanelPlugin`** |