webspresso 0.0.97 → 0.0.99

package/plugins/admin-panel/client/parts/06-login-setup-forms.js

@@ -1,8 +1,28 @@
 // Login Form Component
 const LoginForm = {
+  oninit: () => {
+    state.loading = false;
+    state.error = null;
+    state.notice = null;
+    var reason = null;
+    try {
+      if (typeof m !== 'undefined' && m.route && typeof m.route.param === 'function') {
+        reason = m.route.param('reason');
+      }
+      if (!reason && typeof window !== 'undefined' && window.location && window.location.search) {
+        var match = window.location.search.match(/[?&]reason=([^&]+)/);
+        if (match && match[1]) reason = decodeURIComponent(match[1]);
+      }
+    } catch (e) {}
+    if (reason === 'expired') {
+      state.notice = 'Your session has expired. Please sign in again.';
+    }
+  },
   view: () => m('.min-h-screen.flex.items-center.justify-center.p-4.sm:p-6.bg-gradient-to-br.from-blue-600.via-indigo-600.to-purple-700', [
+    typeof ToastContainer !== 'undefined' ? m(ToastContainer) : null,
+    typeof ConfirmModalContainer !== 'undefined' ? m(ConfirmModalContainer) : null,
     m('.w-full.max-w-md', [
-      m('.bg-white dark:bg-slate-800.rounded-2xl.shadow-2xl.p-6.sm:p-8', [
+      m('.bg-white.dark:bg-slate-800.rounded-2xl.shadow-2xl.p-6.sm:p-8', [
         m('div.text-center.mb-6', [
           m('h1.text-2xl.sm:text-3xl.font-bold.text-gray-900.dark:text-slate-50', 'Admin Login'),
           m('p.text-gray-500.dark:text-slate-400.text-sm.mt-1', 'Sign in to your account'),
@@ -12,22 +32,41 @@ const LoginForm = {
             e.preventDefault();
             state.loading = true;
             state.error = null;
+            m.redraw();
             try {
               const data = new FormData(e.target);
+              const email = (data.get('email') || '').trim();
+              const password = data.get('password') || '';
+              if (!email || !password) {
+                state.error = 'Please enter both email and password';
+                state.loading = false;
+                m.redraw();
+                return;
+              }
               const result = await api.post('/auth/login', {
-                email: data.get('email'),
-                password: data.get('password'),
+                email,
+                password,
               });
               state.user = result.user;
+              state.error = null;
+              state.notice = null;
               m.route.set(consumeIntendedRoute('/'));
             } catch (err) {
-              state.error = err.message;
+              state.error = err.message || 'Invalid email or password';
             } finally {
               state.loading = false;
+              m.redraw();
             }
           }
         }, [
-          state.error ? m('.bg-red-50.border.border-red-200.text-red-700.dark:bg-red-950/50.dark:border-red-800/80.dark:text-red-200.px-4.py-3.rounded-lg.mb-4.text-sm', state.error) : null,
+          state.notice ? m('.bg-amber-50.border.border-amber-200.text-amber-800.dark:bg-amber-950/50.dark:border-amber-800/80.dark:text-amber-200.px-4.py-3.rounded-lg.mb-4.text-sm.flex.items-center.gap-2', [
+            m('span.text-base.select-none', 'ℹ️'),
+            m('span.flex-1', state.notice),
+          ]) : null,
+          state.error ? m('.bg-red-50.border.border-red-200.text-red-700.dark:bg-red-950/50.dark:border-red-800/80.dark:text-red-200.px-4.py-3.rounded-lg.mb-4.text-sm.flex.items-center.gap-2', [
+            m('span.text-base.select-none', '⚠️'),
+            m('span.flex-1', state.error),
+          ]) : null,
           m('.mb-4', [
             m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'email' }, 'Email'),
             m('input#email.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.placeholder-gray-400.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100.dark:placeholder-slate-500', {
@@ -35,6 +74,12 @@ const LoginForm = {
               name: 'email',
               required: true,
               placeholder: 'admin@example.com',
+              oninput: () => {
+                if (state.error) {
+                  state.error = null;
+                  m.redraw();
+                }
+              },
             }),
           ]),
           m('.mb-6', [
@@ -43,6 +88,12 @@ const LoginForm = {
               type: 'password',
               name: 'password',
               required: true,
+              oninput: () => {
+                if (state.error) {
+                  state.error = null;
+                  m.redraw();
+                }
+              },
             }),
           ]),
           m('button.w-full.bg-blue-600.text-white.py-2.5.px-4.rounded-lg.font-medium.hover:bg-blue-700.focus:ring-2.focus:ring-blue-500.focus:ring-offset-2.dark:focus:ring-offset-slate-800.disabled:opacity-50.transition-colors', {
@@ -57,42 +108,70 @@ const LoginForm = {
 
 // Setup Form Component
 const SetupForm = {
+  oninit: () => {
+    state.loading = false;
+    state.error = null;
+    state.notice = null;
+  },
   view: () => m('.min-h-screen.flex.items-center.justify-center.p-4.sm:p-6.bg-gradient-to-br.from-blue-600.via-indigo-600.to-purple-700', [
+    typeof ToastContainer !== 'undefined' ? m(ToastContainer) : null,
+    typeof ConfirmModalContainer !== 'undefined' ? m(ConfirmModalContainer) : null,
     m('.w-full.max-w-md', [
-      m('.bg-white dark:bg-slate-800.rounded-2xl.shadow-2xl.p-6.sm:p-8', [
+      m('.bg-white.dark:bg-slate-800.rounded-2xl.shadow-2xl.p-6.sm:p-8', [
         m('div.text-center.mb-6', [
           m('h1.text-2xl.sm:text-3xl.font-bold.text-gray-900.dark:text-slate-50', 'Setup Admin Account'),
           m('p.text-gray-500.dark:text-slate-400.text-sm.mt-1', 'Create the first admin user account.'),
         ]),
         m('form', {
-      onsubmit: async (e) => {
-        e.preventDefault();
-        state.loading = true;
-        state.error = null;
-        try {
-          const data = new FormData(e.target);
-          const result = await api.post('/auth/setup', {
-            email: data.get('email'),
-            password: data.get('password'),
-            name: data.get('name'),
-          });
-          state.user = result.user;
-          state.needsSetup = false;
-          m.route.set(consumeIntendedRoute('/'));
-        } catch (err) {
-          state.error = err.message;
-        } finally {
-          state.loading = false;
-        }
-      }
-    }, [
-      state.error ? m('.bg-red-50.border.border-red-200.text-red-700.dark:bg-red-950/50.dark:border-red-800/80.dark:text-red-200.px-4.py-3.rounded-lg.mb-4.text-sm', state.error) : null,
+          onsubmit: async (e) => {
+            e.preventDefault();
+            state.loading = true;
+            state.error = null;
+            m.redraw();
+            try {
+              const data = new FormData(e.target);
+              const name = (data.get('name') || '').trim();
+              const email = (data.get('email') || '').trim();
+              const password = data.get('password') || '';
+              if (!name || !email || !password) {
+                state.error = 'Please fill in all fields';
+                state.loading = false;
+                m.redraw();
+                return;
+              }
+              const result = await api.post('/auth/setup', {
+                email,
+                password,
+                name,
+              });
+              state.user = result.user;
+              state.needsSetup = false;
+              state.error = null;
+              m.route.set(consumeIntendedRoute('/'));
+            } catch (err) {
+              state.error = err.message || 'Failed to setup admin account';
+            } finally {
+              state.loading = false;
+              m.redraw();
+            }
+          }
+        }, [
+          state.error ? m('.bg-red-50.border.border-red-200.text-red-700.dark:bg-red-950/50.dark:border-red-800/80.dark:text-red-200.px-4.py-3.rounded-lg.mb-4.text-sm.flex.items-center.gap-2', [
+            m('span.text-base.select-none', '⚠️'),
+            m('span.flex-1', state.error),
+          ]) : null,
           m('.mb-4', [
             m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'name' }, 'Name'),
             m('input#name.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100', {
               type: 'text',
               name: 'name',
               required: true,
+              oninput: () => {
+                if (state.error) {
+                  state.error = null;
+                  m.redraw();
+                }
+              },
             }),
           ]),
           m('.mb-4', [
@@ -102,6 +181,12 @@ const SetupForm = {
               name: 'email',
               required: true,
               placeholder: 'admin@example.com',
+              oninput: () => {
+                if (state.error) {
+                  state.error = null;
+                  m.redraw();
+                }
+              },
             }),
           ]),
           m('.mb-6', [
@@ -110,6 +195,12 @@ const SetupForm = {
               type: 'password',
               name: 'password',
               required: true,
+              oninput: () => {
+                if (state.error) {
+                  state.error = null;
+                  m.redraw();
+                }
+              },
             }),
           ]),
           m('button.w-full.bg-blue-600.text-white.py-2.5.px-4.rounded-lg.font-medium.hover:bg-blue-700.focus:ring-2.focus:ring-blue-500.focus:ring-offset-2.dark:focus:ring-offset-slate-800.disabled:opacity-50.transition-colors', {

package/plugins/admin-panel/client/parts/07-model-list.js

@@ -84,7 +84,27 @@ function formatCellValue(value, col, record = null) {
       return String(value);
     }
   }
-  
+
+  // Badge formatting for status / enum / mapped values
+  const badgeMap = (col && col.badge) || (col && col.customField && col.customField.badge);
+  if (badgeMap && typeof badgeMap === 'object') {
+    const valStr = String(value);
+    const color = badgeMap[valStr] || badgeMap['*'] || 'gray';
+    const colorClasses = {
+      green: 'bg-green-100 text-green-800 dark:bg-green-950/60 dark:text-green-300 border border-green-200 dark:border-green-800',
+      red: 'bg-red-100 text-red-800 dark:bg-red-950/60 dark:text-red-300 border border-red-200 dark:border-red-800',
+      blue: 'bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-300 border border-blue-200 dark:border-blue-800',
+      amber: 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300 border border-amber-200 dark:border-amber-800',
+      yellow: 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300 border border-amber-200 dark:border-amber-800',
+      purple: 'bg-purple-100 text-purple-800 dark:bg-purple-950/60 dark:text-purple-300 border border-purple-200 dark:border-purple-800',
+      violet: 'bg-purple-100 text-purple-800 dark:bg-purple-950/60 dark:text-purple-300 border border-purple-200 dark:border-purple-800',
+      indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-950/60 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800',
+      gray: 'bg-gray-100 text-gray-800 dark:bg-slate-800 dark:text-slate-300 border border-gray-200 dark:border-slate-700',
+    }[color] || 'bg-gray-100 text-gray-800 dark:bg-slate-800 dark:text-slate-300 border border-gray-200 dark:border-slate-700';
+
+    return m('span.inline-flex.items-center.px-2.5.py-0.5.rounded-full.text-xs.font-medium.' + colorClasses, valStr);
+  }
+
   switch (col?.type) {
     case 'boolean':
       return value 
@@ -298,7 +318,7 @@ const BulkFieldUpdateDropdown = {
                             vnode.state._bulkFieldName = null;
                             if (onComplete) onComplete();
                           } catch (err) {
-                            alert('Error: ' + err.message);
+                            notifyError('Error: ' + err.message);
                           } finally {
                             state.bulkActionInProgress = false;
                             m.redraw();
@@ -319,9 +339,9 @@ const BulkFieldUpdateDropdown = {
                       const trimmed = vnode.state.bulkTemporalInput && String(vnode.state.bulkTemporalInput).trim();
                       if (!trimmed) {
                         if (state.selectedBulkField.nullable) {
-                          alert('Enter a date/time or use Clear (set null).');
+                          notifyWarning('Enter a date/time or use Clear (set null).');
                         } else {
-                          alert('Please enter a value.');
+                          notifyWarning('Please enter a value.');
                         }
                         return;
                       }
@@ -342,7 +362,7 @@ const BulkFieldUpdateDropdown = {
                         vnode.state._bulkFieldName = null;
                         if (onComplete) onComplete();
                       } catch (err) {
-                        alert('Error: ' + err.message);
+                        notifyError('Error: ' + err.message);
                       } finally {
                         state.bulkActionInProgress = false;
                         m.redraw();
@@ -363,7 +383,7 @@ const BulkFieldUpdateDropdown = {
                         state.selectedBulkField = null;
                         if (onComplete) onComplete();
                       } catch (err) {
-                        alert('Error: ' + err.message);
+                        notifyError('Error: ' + err.message);
                       } finally {
                         state.bulkActionInProgress = false;
                         m.redraw();
@@ -414,13 +434,27 @@ const BulkFieldUpdateDropdown = {
   },
 };
 
-// Get columns to display in table (limit to reasonable number)
-function getDisplayColumns(columns) {
+// Get columns to display in table (respects listColumns if configured, else limits to reasonable number)
+function getDisplayColumns(columns, modelMeta = null) {
   if (!columns || columns.length === 0) return [];
 
   // Filter out hidden columns (password_hash, api_token, etc.)
   const visible = [...columns].filter((col) => !col.hidden);
 
+  // If model defines listColumns, respect the explicit column list and ordering
+  if (modelMeta?.listColumns && Array.isArray(modelMeta.listColumns) && modelMeta.listColumns.length > 0) {
+    const colMap = new Map(visible.map((c) => [c.name, c]));
+    const customList = [];
+    for (const name of modelMeta.listColumns) {
+      if (colMap.has(name)) {
+        customList.push(colMap.get(name));
+      }
+    }
+    if (customList.length > 0) {
+      return customList;
+    }
+  }
+
   // Prioritize: id, name/title, then others (excluding long text/json fields)
   const priority = ['id', 'name', 'title', 'email', 'slug', 'status', 'published', 'created_at'];
   const exclude = ['password', 'content', 'body', 'description']; // Usually too long
@@ -633,6 +667,13 @@ function initializeModelView(modelName) {
     .then(modelMeta => {
       state.currentModelMeta = modelMeta;
       state.currentModel = modelMeta;
+      if (typeof setAdminPageTitle === 'function') {
+        setAdminPageTitle(modelMeta?.label || modelName);
+      }
+      if (!state.sortColumn && modelMeta?.defaultSort?.column) {
+        state.sortColumn = modelMeta.defaultSort.column;
+        state.sortDirection = (modelMeta.defaultSort.order || 'desc').toLowerCase();
+      }
       // Load bulk-updatable fields for this model
       loadBulkFields(modelName);
       return loadRecords(modelName, page, state.filters, state.sortColumn, state.sortDirection);