webspresso 0.0.97 → 0.0.99

package/plugins/admin-panel/app.js

@@ -9,6 +9,50 @@ module.exports = components + `
 // Set route prefix to admin path
 m.route.prefix = window.__ADMIN_PATH__ || '/_admin';
 
+// Title formatting and synchronization helper
+function formatAdminTitle(pageTitle, baseTitle, template) {
+  baseTitle = baseTitle || 'Admin Panel';
+  if (!pageTitle || pageTitle === baseTitle) {
+    return baseTitle;
+  }
+  if (typeof template === 'function') {
+    return template(pageTitle, baseTitle);
+  }
+  if (typeof template === 'string' && template.trim()) {
+    var formatted = template;
+    if (formatted.indexOf('%s') !== -1) {
+      formatted = formatted.replace(/%s/g, pageTitle);
+    }
+    if (formatted.indexOf('%b') !== -1) {
+      formatted = formatted.replace(/%b/g, baseTitle);
+    }
+    return formatted;
+  }
+  return pageTitle + ' | ' + baseTitle;
+}
+
+function setAdminPageTitle(pageTitle, options) {
+  try {
+    var config = window.__ADMIN_CONFIG__ || {};
+    var settings = config.settings || {};
+    var baseTitle = settings.title || 'Admin Panel';
+    var template = (options && options.template) || settings.titleTemplate || '%s | %b';
+
+    if (options && options.raw) {
+      document.title = pageTitle || baseTitle;
+      return;
+    }
+
+    document.title = formatAdminTitle(pageTitle, baseTitle, template);
+  } catch (e) {
+    if (pageTitle) {
+      document.title = pageTitle;
+    }
+  }
+}
+window.formatAdminTitle = formatAdminTitle;
+window.setAdminPageTitle = setAdminPageTitle;
+
 // Helper to check auth status
 async function checkAuth() {
   if (state.user) return true;
@@ -45,7 +89,7 @@ function getUserManagementModel() {
 async function guardUserManagementRoutes() {
   var isAuth = await checkAuth();
   if (!isAuth) {
-    redirectToLogin();
+    redirectToLogin('expired');
     return false;
   }
   if (!getUserManagementModel()) {
@@ -98,13 +142,20 @@ const UserSessionsPage = {
                   m('td.px-3.py-2.text-gray-700.dark:text-slate-300', r.created_at ? new Date(r.created_at).toLocaleString() : ''),
                   m('td.px-3.py-2', m('button.text-red-600.dark:text-red-400.text-xs', {
                     onclick: async function () {
-                      if (!confirm('Revoke this session?')) return;
+                      var ok = await confirmAction({
+                        title: 'Revoke Session',
+                        message: 'Revoke this session?',
+                        danger: true,
+                        confirmText: 'Revoke'
+                      });
+                      if (!ok) return;
                       try {
                         await api.delete('/users/sessions/' + encodeURIComponent(r.token));
                         vnode.state.rows = vnode.state.rows.filter(function (x) { return x.token !== r.token; });
+                        notifySuccess('Session revoked successfully');
                         m.redraw();
                       } catch (err) {
-                        alert(err.message || err);
+                        notifyError(err.message || String(err));
                       }
                     },
                   }, 'Revoke')),
@@ -122,12 +173,15 @@ var routes = {
     onmatch: async () => {
       const needsSetup = await checkSetupNeeded();
       if (needsSetup) {
+        setAdminPageTitle('Setup');
         return SetupForm;
       }
       const isAuth = await checkAuth();
       if (!isAuth) {
+        setAdminPageTitle('Sign In');
         return LoginForm;
       }
+      setAdminPageTitle('Dashboard');
       return Dashboard;
     }
   },
@@ -138,6 +192,7 @@ var routes = {
         m.route.set(consumeIntendedRoute('/'));
         return;
       }
+      setAdminPageTitle('Sign In');
       return LoginForm;
     }
   },
@@ -148,6 +203,7 @@ var routes = {
         m.route.set('/login');
         return;
       }
+      setAdminPageTitle('Setup');
       return SetupForm;
     }
   },
@@ -155,9 +211,10 @@ var routes = {
     onmatch: async () => {
       const isAuth = await checkAuth();
       if (!isAuth) {
-        redirectToLogin();
+        redirectToLogin('expired');
         return;
       }
+      setAdminPageTitle('Settings');
       return SettingsPage;
     }
   },
@@ -165,9 +222,10 @@ var routes = {
     onmatch: async () => {
       const isAuth = await checkAuth();
       if (!isAuth) {
-        redirectToLogin();
+        redirectToLogin('expired');
         return;
       }
+      setAdminPageTitle('Profile');
       return ProfilePage;
     }
   },
@@ -175,15 +233,17 @@ var routes = {
     onmatch: async () => {
       const isAuth = await checkAuth();
       if (!isAuth) {
-        redirectToLogin();
+        redirectToLogin('expired');
         return;
       }
+      setAdminPageTitle('Staff Users');
       return AdminUsersPage;
     }
   },
   '/users/sessions': {
     onmatch: async () => {
       if (!(await guardUserManagementRoutes())) return;
+      setAdminPageTitle('Active Sessions');
       return UserSessionsPage;
     }
   },
@@ -213,9 +273,11 @@ var routes = {
     onmatch: async () => {
       const isAuth = await checkAuth();
       if (!isAuth) {
-        redirectToLogin();
+        redirectToLogin('expired');
         return;
       }
+      const model = m.route.param('model');
+      setAdminPageTitle(model);
       return RecordList;
     }
   },
@@ -223,9 +285,11 @@ var routes = {
     onmatch: async () => {
       const isAuth = await checkAuth();
       if (!isAuth) {
-        redirectToLogin();
+        redirectToLogin('expired');
         return;
       }
+      const model = m.route.param('model');
+      setAdminPageTitle('New ' + model);
       return RecordForm;
     }
   },
@@ -233,9 +297,11 @@ var routes = {
     onmatch: async () => {
       const isAuth = await checkAuth();
       if (!isAuth) {
-        redirectToLogin();
+        redirectToLogin('expired');
         return;
       }
+      const model = m.route.param('model');
+      setAdminPageTitle('Edit ' + model);
       return RecordForm;
     }
   },
@@ -243,10 +309,16 @@ var routes = {
 
 function wrapCustomPageWithLayout(page, rawComp) {
   if (!rawComp) return createCustomPage(page);
-  if (page.layout === false) return rawComp;
 
   return {
     oninit: function(vnode) {
+      if (page) {
+        if (page.documentTitle) {
+          document.title = page.documentTitle;
+        } else if (page.title || page.id) {
+          setAdminPageTitle(page.title || page.id);
+        }
+      }
       try {
         const instance = typeof rawComp === 'function' ? rawComp.call(rawComp, vnode) : rawComp;
         vnode.state.instance = instance;
@@ -293,14 +365,15 @@ function wrapCustomPageWithLayout(page, rawComp) {
     view: function(vnode) {
       if (vnode.state.renderError) {
         var err = vnode.state.renderError;
-        var breadcrumbs = [{ label: page.title, href: page.path }];
-        return m(Layout, [
-          m(Breadcrumb, { items: breadcrumbs }),
-          m('.p-6.bg-red-50.border.border-red-200.rounded-xl', [
-            m('h3.text-lg.font-semibold.text-red-800', 'Sayfa Yüklenirken Hata Oluştu'),
-            m('p.text-sm.text-red-600.mt-1', err.message || String(err)),
-          ])
-        ]);
+        return typeof renderCustomPageError === 'function'
+          ? renderCustomPageError(page, err)
+          : m(Layout, [
+              m(Breadcrumb, { items: [{ label: page.title, href: page.path }] }),
+              m('.p-6.bg-red-50.border.border-red-200.rounded-xl', [
+                m('h3.text-lg.font-semibold.text-red-800', 'Custom Page Component Error'),
+                m('p.text-sm.text-red-600.mt-1', err.message || String(err)),
+              ])
+            ]);
       }
       const comp = vnode.state.instance || rawComp;
       var content;
@@ -314,11 +387,25 @@ function wrapCustomPageWithLayout(page, rawComp) {
         }
       } catch (err) {
         console.error('[Admin Panel] Error rendering custom page "' + page.id + '":', err);
-        content = m('.p-6.bg-red-50.border.border-red-200.rounded-xl', [
-          m('h3.text-lg.font-semibold.text-red-800', 'Sayfa Çizilirken Hata Oluştu'),
-          m('p.text-sm.text-red-600.mt-1', err.message || String(err)),
+        return typeof renderCustomPageError === 'function'
+          ? renderCustomPageError(page, err)
+          : m(Layout, [
+              m(Breadcrumb, { items: [{ label: page.title, href: page.path }] }),
+              m('.p-6.bg-red-50.border.border-red-200.rounded-xl', [
+                m('h3.text-lg.font-semibold.text-red-800', 'Custom Page Component Error'),
+                m('p.text-sm.text-red-600.mt-1', err.message || String(err)),
+              ])
+            ]);
+      }
+
+      if (page.layout === false) {
+        return m('div.custom-canvas-page', [
+          content,
+          typeof ToastContainer !== 'undefined' ? m(ToastContainer) : null,
+          typeof ConfirmModalContainer !== 'undefined' ? m(ConfirmModalContainer) : null,
         ]);
       }
+
       if (content && (content.tag === Layout || (content.tag && content.tag.name === 'Layout'))) {
         return content;
       }
@@ -340,9 +427,14 @@ if (config && config.pages) {
       onmatch: async () => {
         const isAuth = await checkAuth();
         if (!isAuth) {
-          redirectToLogin();
+          redirectToLogin('expired');
           return;
         }
+        if (page.documentTitle) {
+          document.title = page.documentTitle;
+        } else {
+          setAdminPageTitle(page.title || page.id);
+        }
         const comp = (window.__customPages && window.__customPages[page.id])
           ? wrapCustomPageWithLayout(page, window.__customPages[page.id])
           : createCustomPage(page);

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

@@ -16,11 +16,12 @@ const api = {
     if (!response.ok) {
       const error = await response.json().catch(() => ({ error: 'Request failed' }));
       if (response.status === 401 && path.indexOf('/auth/') !== 0) {
-        redirectToLogin();
+        redirectToLogin('expired');
       }
-      const err = new Error(error.error || 'Request failed');
+      const err = new Error(error.error || error.message || 'Request failed');
       if (error.fields) err.fields = error.fields;
       err.response = error;
+      err.status = response.status;
       throw err;
     }
     
@@ -90,6 +91,8 @@ const state = {
   needsSetup: false,
   loading: false,
   error: null,
+  notice: null,
+  toasts: [],
   models: [],
   currentModel: null,
   currentModelMeta: null, // Full model metadata with columns
@@ -118,14 +121,19 @@ var INTENDED_ROUTE_KEY = 'webspresso.admin.intendedRoute';
 
 function isSafeIntendedRoute(path) {
   if (!path || typeof path !== 'string') return false;
-  if (path.charAt(0) !== '/') return false;
-  if (path === '/login' || path === '/setup') return false;
+  var p = path.trim();
+  if (p.charAt(0) !== '/' || p.indexOf('//') === 0 || p.indexOf('/\\') === 0) return false;
+  if (p === '/login' || p === '/setup' || p.indexOf('/login?') === 0 || p.indexOf('/setup?') === 0) return false;
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(p)) return false;
   return true;
 }
 
-function saveIntendedRoute() {
+function saveIntendedRoute(explicitPath) {
   try {
-    var path = m.route.get();
+    var path = explicitPath;
+    if (!path && typeof m !== 'undefined' && m.route && typeof m.route.get === 'function') {
+      path = m.route.get();
+    }
     if (!isSafeIntendedRoute(path)) return;
     sessionStorage.setItem(INTENDED_ROUTE_KEY, path);
   } catch (e) {}
@@ -139,17 +147,314 @@ function clearIntendedRoute() {
 
 function consumeIntendedRoute(defaultPath) {
   defaultPath = defaultPath || '/';
+
+  // 1. Try route parameter or query string returnTo
+  try {
+    if (typeof m !== 'undefined' && m.route && typeof m.route.param === 'function') {
+      var param = m.route.param('returnTo');
+      if (param && isSafeIntendedRoute(param)) {
+        clearIntendedRoute();
+        return param;
+      }
+    }
+  } catch (e) {}
+
+  try {
+    if (typeof window !== 'undefined' && window.location && window.location.search) {
+      var match = window.location.search.match(/[?&]returnTo=([^&]+)/);
+      if (match && match[1]) {
+        var decoded = decodeURIComponent(match[1]);
+        if (isSafeIntendedRoute(decoded)) {
+          clearIntendedRoute();
+          return decoded;
+        }
+      }
+    }
+  } catch (e) {}
+
+  // 2. Fall back to sessionStorage
   try {
     var path = sessionStorage.getItem(INTENDED_ROUTE_KEY);
     sessionStorage.removeItem(INTENDED_ROUTE_KEY);
     if (isSafeIntendedRoute(path)) return path;
   } catch (e) {}
+
   return defaultPath;
 }
 
-function redirectToLogin() {
-  saveIntendedRoute();
-  m.route.set('/login');
+function redirectToLogin(reason) {
+  var currentRoute = '';
+  try {
+    if (typeof m !== 'undefined' && m.route && typeof m.route.get === 'function') {
+      currentRoute = m.route.get();
+    }
+  } catch (e) {}
+
+  if (isSafeIntendedRoute(currentRoute)) {
+    saveIntendedRoute(currentRoute);
+  }
+
+  var params = [];
+  if (isSafeIntendedRoute(currentRoute)) {
+    params.push('returnTo=' + encodeURIComponent(currentRoute));
+  }
+  if (reason) {
+    params.push('reason=' + encodeURIComponent(reason));
+  }
+
+  var target = '/login' + (params.length > 0 ? '?' + params.join('&') : '');
+  try {
+    if (typeof m !== 'undefined' && m.route && typeof m.route.set === 'function') {
+      m.route.set(target);
+    }
+  } catch (e) {}
+}
+
+// ==========================================
+// Toast Notification & Confirm Modal System
+// ==========================================
+var toastState = (typeof window !== 'undefined' && window.toastState) ? window.toastState : {
+  items: [],
+  add: function(type, message, options) {
+    options = options || {};
+    if (typeof type === 'object') {
+      options = type;
+      type = options.type || 'info';
+      message = options.message || '';
+    }
+    var id = 'toast_' + Math.random().toString(36).substring(2, 9);
+    var duration = options.duration !== undefined ? options.duration : 4000;
+    var item = {
+      id: id,
+      type: type || 'info',
+      message: message,
+      title: options.title || '',
+      duration: duration,
+    };
+    toastState.items.push(item);
+    if (typeof state !== 'undefined') {
+      state.toasts = toastState.items;
+    }
+    if (item.duration > 0) {
+      setTimeout(function() {
+        toastState.remove(id);
+      }, item.duration);
+    }
+    try {
+      if (typeof m !== 'undefined' && typeof m.redraw === 'function') {
+        m.redraw();
+      }
+    } catch (e) {}
+    return id;
+  },
+  remove: function(id) {
+    toastState.items = toastState.items.filter(function(t) { return t.id !== id; });
+    if (typeof state !== 'undefined') {
+      state.toasts = toastState.items;
+    }
+    try {
+      if (typeof m !== 'undefined' && typeof m.redraw === 'function') {
+        m.redraw();
+      }
+    } catch (e) {}
+  },
+  clear: function() {
+    toastState.items = [];
+    if (typeof state !== 'undefined') {
+      state.toasts = [];
+    }
+    try {
+      if (typeof m !== 'undefined' && typeof m.redraw === 'function') {
+        m.redraw();
+      }
+    } catch (e) {}
+  },
+};
+
+function normalizeToastOptions(options) {
+  if (typeof options === 'number') {
+    return { duration: options };
+  }
+  return options || {};
+}
+
+var notify = function(message, type, options) {
+  var opts = normalizeToastOptions(options);
+  if (typeof type === 'object') {
+    opts = type;
+    type = opts.type || 'info';
+  }
+  return toastState.add(type || 'info', message, opts);
+};
+notify.success = function(message, options) { return toastState.add('success', message, normalizeToastOptions(options)); };
+notify.error = function(message, options) { return toastState.add('error', message, normalizeToastOptions(options)); };
+notify.warning = function(message, options) { return toastState.add('warning', message, normalizeToastOptions(options)); };
+notify.info = function(message, options) { return toastState.add('info', message, normalizeToastOptions(options)); };
+notify.remove = function(id) { return toastState.remove(id); };
+notify.clear = function() { return toastState.clear(); };
+
+var ToastContainer = {
+  view: function() {
+    var items = (typeof toastState !== 'undefined' && toastState.items) || (typeof state !== 'undefined' && state.toasts) || [];
+    if (!items || items.length === 0) return null;
+    return m('div.fixed.top-4.right-4.z-50.flex.flex-col.gap-2.5.max-w-sm.w-full.pointer-events-none.px-4.sm:px-0',
+      items.map(function(t) {
+        var typeConfig = {
+          success: {
+            border: 'border-emerald-200 dark:border-emerald-800/80',
+            bg: 'bg-white dark:bg-slate-900',
+            iconColor: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/60',
+            symbol: '✓',
+          },
+          error: {
+            border: 'border-red-200 dark:border-red-800/80',
+            bg: 'bg-white dark:bg-slate-900',
+            iconColor: 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/60',
+            symbol: '!',
+          },
+          warning: {
+            border: 'border-amber-200 dark:border-amber-800/80',
+            bg: 'bg-white dark:bg-slate-900',
+            iconColor: 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/60',
+            symbol: '⚠',
+          },
+          info: {
+            border: 'border-blue-200 dark:border-blue-800/80',
+            bg: 'bg-white dark:bg-slate-900',
+            iconColor: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/60',
+            symbol: 'ℹ',
+          },
+        };
+        var cfg = typeConfig[t.type] || typeConfig.info;
+
+        return m('div.pointer-events-auto.shadow-xl.rounded-xl.border.p-4.flex.items-start.gap-3.transition-all.transform', {
+          key: t.id,
+          class: cfg.border + ' ' + cfg.bg
+        }, [
+          m('div.w-7.h-7.rounded-lg.flex.items-center.justify-center.text-xs.font-bold.flex-shrink-0', {
+            class: cfg.iconColor
+          }, cfg.symbol),
+          m('div.flex-1.min-w-0', [
+            t.title ? m('h4.text-sm.font-semibold.text-gray-900.dark:text-slate-100', t.title) : null,
+            m('p.text-xs.text-gray-600.dark:text-slate-300.break-words', t.message)
+          ]),
+          m('button.text-gray-400.hover:text-gray-600.dark:hover:text-slate-200.p-1.text-xs', {
+            onclick: function() { toastState.remove(t.id); }
+          }, '✕')
+        ]);
+      })
+    );
+  }
+};
+
+var confirmState = (typeof window !== 'undefined' && window.confirmState) ? window.confirmState : {
+  current: null,
+  open: function(options) {
+    options = options || {};
+    if (typeof options === 'string') {
+      options = { message: options };
+    }
+    return new Promise(function(resolve) {
+      confirmState.current = {
+        title: options.title || 'Confirmation',
+        message: options.message || 'Are you sure you want to proceed?',
+        confirmText: options.confirmText || 'Confirm',
+        cancelText: options.cancelText || 'Cancel',
+        confirmColor: options.confirmColor || (options.danger ? 'red' : 'blue'),
+        danger: options.danger || false,
+        resolve: resolve,
+      };
+      try {
+        if (typeof m !== 'undefined' && typeof m.redraw === 'function') {
+          m.redraw();
+        }
+      } catch (e) {}
+    });
+  },
+  close: function(result) {
+    if (confirmState.current && confirmState.current.resolve) {
+      confirmState.current.resolve(Boolean(result));
+    }
+    confirmState.current = null;
+    try {
+      if (typeof m !== 'undefined' && typeof m.redraw === 'function') {
+        m.redraw();
+      }
+    } catch (e) {}
+  }
+};
+
+var confirmModal = function(options) {
+  return confirmState.open(options);
+};
+
+var ConfirmModalContainer = {
+  view: function() {
+    var cur = (typeof confirmState !== 'undefined' && confirmState.current) || null;
+    if (!cur) return null;
+    var isDanger = cur.danger || cur.confirmColor === 'red';
+
+    return m('div.fixed.inset-0.z-50.flex.items-center.justify-center.p-4', [
+      m('div.fixed.inset-0.bg-black/50.backdrop-blur-sm', {
+        onclick: function() { confirmState.close(false); }
+      }),
+      m('div.relative.bg-white.dark:bg-slate-900.rounded-xl.shadow-2xl.border.border-gray-200.dark:border-slate-700.max-w-md.w-full.p-6.z-10', [
+        m('div.flex.items-start.gap-4', [
+          m('div.w-10.h-10.rounded-full.flex.items-center.justify-center.flex-shrink-0', {
+            class: isDanger ? 'bg-red-100 dark:bg-red-950/60 text-red-600 dark:text-red-400' : 'bg-blue-100 dark:bg-blue-950/60 text-blue-600 dark:text-blue-400'
+          }, isDanger ? '⚠' : '?'),
+          m('div.flex-1', [
+            m('h3.text-base.font-bold.text-gray-900.dark:text-slate-100', cur.title),
+            m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1.5', cur.message)
+          ])
+        ]),
+        m('div.mt-6.flex.items-center.justify-end.gap-3', [
+          m('button.px-4.py-2.text-xs.font-medium.text-gray-700.dark:text-slate-300.bg-gray-100.dark:bg-slate-800.hover:bg-gray-200.dark:hover:bg-slate-700.rounded-lg', {
+            onclick: function() { confirmState.close(false); }
+          }, cur.cancelText),
+          m('button.px-4.py-2.text-xs.font-medium.text-white.rounded-lg.shadow-sm', {
+            class: isDanger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700',
+            onclick: function() { confirmState.close(true); }
+          }, cur.confirmText)
+        ])
+      ])
+    ]);
+  }
+};
+
+// Convenience notification & confirmation helpers
+function notifySuccess(msg, optionsOrTtl) {
+  return notify.success(msg, optionsOrTtl);
+}
+
+function notifyError(msg, optionsOrTtl) {
+  return notify.error(msg, optionsOrTtl);
+}
+
+function notifyWarning(msg, optionsOrTtl) {
+  return notify.warning(msg, optionsOrTtl);
+}
+
+function notifyInfo(msg, optionsOrTtl) {
+  return notify.info(msg, optionsOrTtl);
+}
+
+async function confirmAction(optionsOrMsg) {
+  return await confirmModal(optionsOrMsg);
+}
+
+// Global window bindings
+if (typeof window !== 'undefined') {
+  window.toastState = toastState;
+  window.confirmState = confirmState;
+  window.notify = notify;
+  window.toast = notify;
+  window.confirmModal = confirmModal;
+  window.ToastContainer = ToastContainer;
+  window.ConfirmModalContainer = ConfirmModalContainer;
+  window.Admin = window.Admin || {};
+  window.Admin.toast = notify;
+  window.Admin.confirm = confirmModal;
 }
 
 // Breadcrumb Component