webspresso 0.0.96 → 0.0.98

package/plugins/admin-panel/client/parts/04-field-renderers.js

@@ -1,83 +1,231 @@
 // Field Renderers - render appropriate input based on column type
 
-// BelongsTo relation dropdown select component
+// BelongsTo relation searchable combobox dropdown component
 const BelongsToField = {
   oninit: (vnode) => {
-    const { col } = vnode.attrs;
-    const customField = col.customField || {};
-    const relationName = customField.relation || col.name.replace(/_id$/, '');
-    const modelName = m.route.param('model');
     vnode.state.loading = true;
+    vnode.state.loadingMore = false;
     vnode.state.options = [];
-    
-    api.get('/models/' + modelName + '/relations/' + relationName)
-      .then(result => {
-        vnode.state.options = result.data || [];
-      })
-      .catch(err => {
-        console.error('Failed to load relation data:', err);
-      })
-      .finally(() => {
-        vnode.state.loading = false;
-        m.redraw();
-      });
+    vnode.state.isOpen = false;
+    vnode.state.search = '';
+    vnode.state.page = 1;
+    vnode.state.hasMore = false;
+    vnode.state.total = 0;
+    vnode.state.displayField = null;
+    vnode.state.primaryKey = 'id';
+    vnode.state._searchTimer = null;
+
+    vnode.state.fetchOptions = (vn, opts = {}) => {
+      const page = opts.page || 1;
+      const append = opts.append === true;
+      const search = opts.search !== undefined ? opts.search : (vn.state.search || '');
+      const { col, value } = vn.attrs;
+      const customField = col.customField || {};
+      const relationName = customField.relation || col.name.replace(/_id$/, '');
+      const modelName = m.route.param('model');
+
+      let url = '/models/' + modelName + '/relations/' + relationName + '?page=' + page + '&limit=50';
+      if (search) url += '&search=' + encodeURIComponent(search);
+      if (value !== null && value !== undefined && value !== '') {
+        url += '&selected=' + encodeURIComponent(value);
+      }
+
+      if (append) {
+        vn.state.loadingMore = true;
+      } else {
+        vn.state.loading = true;
+      }
+      m.redraw();
+
+      return api.get(url)
+        .then(result => {
+          const incoming = result.data || [];
+          const pk = result.primaryKey || vn.state.primaryKey || 'id';
+          if (append) {
+            const existingIds = new Set(vn.state.options.map(o => String(o[pk])));
+            const newItems = incoming.filter(o => !existingIds.has(String(o[pk])));
+            vn.state.options = vn.state.options.concat(newItems);
+          } else {
+            vn.state.options = incoming;
+          }
+          if (result.displayField) vn.state.displayField = result.displayField;
+          if (result.primaryKey) vn.state.primaryKey = result.primaryKey;
+          if (result.pagination) {
+            vn.state.page = result.pagination.page;
+            vn.state.hasMore = result.pagination.hasMore;
+            vn.state.total = result.pagination.total;
+          } else {
+            vn.state.hasMore = false;
+          }
+        })
+        .catch(err => {
+          console.error('Failed to load relation data:', err);
+        })
+        .finally(() => {
+          vn.state.loading = false;
+          vn.state.loadingMore = false;
+          m.redraw();
+        });
+    };
+
+    vnode.state.fetchOptions(vnode);
+  },
+  onremove: (vnode) => {
+    if (vnode.state._searchTimer) {
+      clearTimeout(vnode.state._searchTimer);
+      vnode.state._searchTimer = null;
+    }
   },
   view: (vnode) => {
     const { col, value, onChange, readonly, error } = vnode.attrs;
     const customField = col.customField || {};
     const label = col.ui?.label || formatColumnLabel(col.name);
     const hint = col.ui?.hint || '';
-    const valueKey = customField.valueKey || 'id';
-    const displayKey = customField.displayKey || 
+    const valueKey = customField.valueKey || vnode.state.primaryKey || 'id';
+    const displayKey = customField.displayKey || vnode.state.displayField ||
       (vnode.state.options.length > 0 ? ['name', 'title', 'label', 'username', 'email'].find(k => k in vnode.state.options[0]) : null) || 
       'id';
-    
-    if (vnode.state.loading) {
-      return m('.mb-4', [
-        m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label),
-        m('.text-xs.text-gray-500.dark:text-slate-400', 'Loading options...')
-      ]);
-    }
+
+    const selectedItem = (value !== null && value !== undefined && value !== '')
+      ? vnode.state.options.find(item => String(item[valueKey]) === String(value))
+      : null;
+    const selectedDisplay = selectedItem
+      ? (selectedItem[displayKey] || String(selectedItem[valueKey]))
+      : (value !== null && value !== undefined && value !== '' ? String(value) : '-- Select --');
+    const hasSelection = value !== null && value !== undefined && value !== '';
+
+    const selectItem = (item) => {
+      const selectedValue = item ? item[valueKey] : null;
+      const typedValue = (col.type === 'integer' || col.type === 'bigint' || col.type === 'float' || col.type === 'decimal') && selectedValue !== null
+        ? Number(selectedValue)
+        : selectedValue;
+      onChange(typedValue);
+      vnode.state.isOpen = false;
+      vnode.state.search = '';
+    };
+
+    const clearSelection = (e) => {
+      e.stopPropagation();
+      onChange(null);
+      vnode.state.search = '';
+    };
 
     const borderClass = error
       ? 'border-red-500 dark:border-red-500 focus:ring-red-500'
       : 'border-gray-300 dark:border-slate-600 focus:ring-blue-500 dark:focus:ring-blue-400';
-    
+
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', { for: col.name }, [
         label,
-        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null
+        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null,
       ]),
-      m('select.w-full.px-3.py-2.border.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.focus:outline-none.focus:ring-2', {
-        id: col.name,
-        name: col.name,
-        value: value !== null && value !== undefined ? String(value) : '',
-        disabled: readonly,
-        class: (readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed ' : '') + borderClass,
-        onchange: (e) => {
-          const selectedValue = e.target.value === '' ? null : e.target.value;
-          const typedValue = (col.type === 'integer' || col.type === 'bigint' || col.type === 'float' || col.type === 'decimal') && selectedValue !== null
-            ? Number(selectedValue)
-            : selectedValue;
-          onChange(typedValue);
-        },
-      }, [
-        col.nullable ? m('option', { value: '' }, '-- Select --') : m('option', { value: '' }, '-- Select --'),
-        vnode.state.options.map(item => {
-          const itemValue = item[valueKey];
-          const itemDisplay = item[displayKey] || String(itemValue);
-          return m('option', {
-            value: String(itemValue),
-            selected: value !== null && value !== undefined && String(value) === String(itemValue)
-          }, itemDisplay);
-        }),
+      m('.relative', [
+        // Backdrop to close popover when clicked outside
+        vnode.state.isOpen ? m('.fixed.inset-0.z-30', {
+          onclick: () => { vnode.state.isOpen = false; },
+        }) : null,
+
+        // Trigger Button / Combobox Display
+        m('button.w-full.flex.items-center.justify-between.px-3.py-2.border.rounded-md.bg-white.dark:bg-slate-900/70.text-left.text-sm.transition-colors.relative.z-30', {
+          id: col.name,
+          type: 'button',
+          disabled: readonly,
+          class: (readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed text-gray-500 ' : 'hover:border-gray-400 dark:hover:border-slate-500 ') + borderClass,
+          onclick: () => {
+            if (!readonly) {
+              vnode.state.isOpen = !vnode.state.isOpen;
+            }
+          },
+        }, [
+          m('span.truncate', {
+            class: hasSelection ? 'text-gray-900 dark:text-slate-100 font-medium' : 'text-gray-400 dark:text-slate-500',
+          }, selectedDisplay),
+          m('.flex.items-center.gap-1.ml-2', [
+            hasSelection && !readonly ? m('span.text-gray-400.hover:text-red-500.cursor-pointer.px-1', {
+              title: 'Clear',
+              onclick: clearSelection,
+            }, '✕') : null,
+            m('svg.w-4.h-4.text-gray-400.transition-transform', {
+              class: vnode.state.isOpen ? 'rotate-180' : '',
+              fill: 'none',
+              stroke: 'currentColor',
+              viewBox: '0 0 24 24',
+            }, m('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M19 9l-7 7-7-7' })),
+          ]),
+        ]),
+
+        // Dropdown Popover
+        vnode.state.isOpen ? m('.absolute.left-0.right-0.top-full.mt-1.bg-white.dark:bg-slate-900.border.border-gray-200.dark:border-slate-700.rounded-md.shadow-lg.z-40.overflow-hidden', [
+          // Search input bar
+          m('.p-2.border-b.border-gray-100.dark:border-slate-800.bg-gray-50/50.dark:bg-slate-900/50', [
+            m('input.w-full.px-2.5.py-1.5.text-xs.border.border-gray-300.dark:border-slate-700.rounded.bg-white.dark:bg-slate-800.text-gray-900.dark:text-slate-100.focus:outline-none.focus:ring-1.focus:ring-blue-500', {
+              type: 'text',
+              placeholder: 'Search ' + label.toLowerCase() + '...',
+              value: vnode.state.search,
+              oncreate: (v) => {
+                if (v.dom && typeof v.dom.focus === 'function') v.dom.focus();
+              },
+              oninput: (e) => {
+                const term = e.target.value;
+                vnode.state.search = term;
+                clearTimeout(vnode.state._searchTimer);
+                vnode.state._searchTimer = setTimeout(() => {
+                  vnode.state.fetchOptions(vnode, { page: 1, append: false, search: term });
+                }, 250);
+              },
+            }),
+          ]),
+
+          // Options list
+          m('.max-h-60.overflow-y-auto.py-1', [
+            vnode.state.loading ? m('.py-4.text-center.text-xs.text-gray-400', 'Loading...') : null,
+
+            // Clear / None option
+            col.nullable ? m('.px-3.py-2.text-xs.text-gray-500.hover:bg-gray-100.dark:hover:bg-slate-800.cursor-pointer', {
+              onclick: () => selectItem(null),
+            }, '-- None --') : null,
+
+            // Item options
+            !vnode.state.loading && vnode.state.options.length === 0 ? m('.py-4.text-center.text-xs.text-gray-400', 'No results found') : null,
+
+            vnode.state.options.map(item => {
+              const itemValue = item[valueKey];
+              const itemDisplay = item[displayKey] || String(itemValue);
+              const isSelected = String(value) === String(itemValue);
+              return m('.px-3.py-2.text-xs.flex.items-center.justify-between.cursor-pointer.transition-colors', {
+                class: isSelected
+                  ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 font-medium'
+                  : 'text-gray-800 dark:text-slate-200 hover:bg-gray-100 dark:hover:bg-slate-800',
+                onclick: () => selectItem(item),
+              }, [
+                m('span.truncate', itemDisplay),
+                isSelected ? m('span.text-blue-600.dark:text-blue-400.font-bold.ml-2', '✓') : null,
+              ]);
+            }),
+          ]),
+
+          // Pagination Load More
+          vnode.state.hasMore ? m('.p-2.border-t.border-gray-100.dark:border-slate-800.text-center.bg-gray-50/50.dark:bg-slate-900/50', [
+            m('button.text-xs.text-blue-600.dark:text-blue-400.hover:underline.font-medium.py-1.px-2', {
+              type: 'button',
+              disabled: vnode.state.loadingMore,
+              onclick: () => {
+                vnode.state.fetchOptions(vnode, {
+                  page: vnode.state.page + 1,
+                  append: true,
+                  search: vnode.state.search,
+                });
+              },
+            }, vnode.state.loadingMore ? 'Loading more...' : 'Load more (' + (vnode.state.total - vnode.state.options.length) + ' remaining)'),
+          ]) : null,
+        ]) : null,
       ]),
       error ? m('p.text-xs.text-red-600.dark:text-red-400.mt-1.font-medium', error) : (hint ? m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', hint) : null),
     ]);
   }
 };
 
-// HasMany relation multi-select checkbox component
+// HasMany relation multi-select checkbox component with filter & select-all
 const HasManyField = {
   oninit: (vnode) => {
     const { col } = vnode.attrs;
@@ -86,10 +234,13 @@ const HasManyField = {
     const modelName = m.route.param('model');
     vnode.state.loading = true;
     vnode.state.options = [];
+    vnode.state.filter = '';
     
-    api.get('/models/' + modelName + '/relations/' + relationName)
+    api.get('/models/' + modelName + '/relations/' + relationName + '?all=true')
       .then(result => {
         vnode.state.options = result.data || [];
+        if (result.displayField) vnode.state.displayField = result.displayField;
+        if (result.primaryKey) vnode.state.primaryKey = result.primaryKey;
       })
       .catch(err => {
         console.error('Failed to load relation data:', err);
@@ -104,12 +255,38 @@ const HasManyField = {
     const customField = col.customField || {};
     const label = col.ui?.label || formatColumnLabel(col.name);
     const hint = col.ui?.hint || '';
-    const valueKey = customField.valueKey || 'id';
-    const displayKey = customField.displayKey || 
+    const valueKey = customField.valueKey || vnode.state.primaryKey || 'id';
+    const displayKey = customField.displayKey || vnode.state.displayField ||
       (vnode.state.options.length > 0 ? ['name', 'title', 'label', 'username', 'email'].find(k => k in vnode.state.options[0]) : null) || 
       'id';
     const selectedIds = Array.isArray(value) ? value.map(v => String(v)) : [];
-    
+
+    const filterTerm = (vnode.state.filter || '').trim().toLowerCase();
+    const visibleOptions = vnode.state.options.filter(item => {
+      if (!filterTerm) return true;
+      const text = String(item[displayKey] || item[valueKey] || '').toLowerCase();
+      return text.includes(filterTerm);
+    });
+
+    const updateSelection = (newSelected) => {
+      const typedSelected = col.type === 'array' || (Array.isArray(value) && typeof value[0] === 'string')
+        ? newSelected
+        : newSelected.map(Number);
+      onChange(typedSelected);
+    };
+
+    const selectAll = () => {
+      const visibleIds = visibleOptions.map(item => String(item[valueKey]));
+      const merged = Array.from(new Set([...selectedIds, ...visibleIds]));
+      updateSelection(merged);
+    };
+
+    const deselectAll = () => {
+      const visibleIds = new Set(visibleOptions.map(item => String(item[valueKey])));
+      const filtered = selectedIds.filter(id => !visibleIds.has(id));
+      updateSelection(filtered);
+    };
+
     if (vnode.state.loading) {
       return m('.mb-4', [
         m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label),
@@ -120,14 +297,39 @@ const HasManyField = {
     const borderClass = error
       ? 'border-red-500 dark:border-red-500'
       : 'border-gray-300 dark:border-slate-600';
-    
+
     return m('.mb-4', [
-      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', [
-        label,
-        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null
+      m('.flex.items-center.justify-between.mb-1', [
+        m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300', [
+          label,
+          !col.nullable && !readonly ? m('span.text-red-500', ' *') : null,
+        ]),
+        m('.text-xs.text-gray-500.dark:text-slate-400', selectedIds.length + ' of ' + vnode.state.options.length + ' selected'),
       ]),
+
+      // Search & select all controls
+      vnode.state.options.length > 5 ? m('.flex.items-center.gap-2.mb-2', [
+        m('input.flex-1.px-2.5.py-1.text-xs.border.border-gray-300.dark:border-slate-700.rounded.bg-white.dark:bg-slate-800.text-gray-900.dark:text-slate-100.focus:outline-none.focus:ring-1.focus:ring-blue-500', {
+          type: 'text',
+          placeholder: 'Filter ' + label.toLowerCase() + '...',
+          value: vnode.state.filter,
+          oninput: (e) => { vnode.state.filter = e.target.value; },
+        }),
+        !readonly ? m('.flex.items-center.gap-1', [
+          m('button.px-2.py-1.text-xs.border.border-gray-300.dark:border-slate-700.rounded.hover:bg-gray-100.dark:hover:bg-slate-800.text-gray-700.dark:text-slate-300', {
+            type: 'button',
+            onclick: selectAll,
+          }, 'All'),
+          m('button.px-2.py-1.text-xs.border.border-gray-300.dark:border-slate-700.rounded.hover:bg-gray-100.dark:hover:bg-slate-800.text-gray-700.dark:text-slate-300', {
+            type: 'button',
+            onclick: deselectAll,
+          }, 'None'),
+        ]) : null,
+      ]) : null,
+
       m('.border.rounded-md.p-3.max-h-48.overflow-y-auto.bg-white.dark:bg-slate-900/70', { class: borderClass }, [
-        vnode.state.options.map(item => {
+        visibleOptions.length === 0 ? m('.py-2.text-center.text-xs.text-gray-400', 'No matching items') : null,
+        visibleOptions.map(item => {
           const itemValue = String(item[valueKey]);
           const itemDisplay = item[displayKey] || itemValue;
           const isSelected = selectedIds.includes(itemValue);
@@ -146,12 +348,7 @@ const HasManyField = {
                 } else {
                   newSelected = newSelected.filter(id => id !== itemValue);
                 }
-                
-                // Convert type if needed
-                const typedSelected = col.type === 'array' || typeof value[0] === 'string'
-                  ? newSelected
-                  : newSelected.map(Number);
-                onChange(typedSelected);
+                updateSelection(newSelected);
               }
             }),
             m('span', itemDisplay),

package/plugins/admin-panel/client/parts/05-rich-text-file-helpers.js

@@ -343,12 +343,12 @@ async function handleAdminFileUpload(file, onChange, meta, state) {
     uploadUrl = (cfg && cfg.settings && cfg.settings.uploadUrl) ? String(cfg.settings.uploadUrl) : '';
   } catch (e) {}
   if (!uploadUrl) {
-    alert('Upload URL is not configured.');
+    notifyError('Upload URL is not configured.');
     return;
   }
   var maxSize = meta.maxSize || meta.maxBytes || (10 * 1024 * 1024);
   if (file.size > maxSize) {
-    alert('File too large (max ' + Math.round(maxSize / 1024 / 1024) + ' MB).');
+    notifyWarning('File too large (max ' + Math.round(maxSize / 1024 / 1024) + ' MB).');
     return;
   }
   if (state && file.type && file.type.indexOf('image/') === 0) {
@@ -365,7 +365,7 @@ async function handleAdminFileUpload(file, onChange, meta, state) {
     if (!res.ok) {
       revokeLocalPreview(state);
       m.redraw();
-      alert(data.message || data.error || ('Upload failed (' + res.status + ')'));
+      notifyError(data.message || data.error || ('Upload failed (' + res.status + ')'));
       return;
     }
     revokeLocalPreview(state);
@@ -375,7 +375,7 @@ async function handleAdminFileUpload(file, onChange, meta, state) {
   } catch (err) {
     revokeLocalPreview(state);
     m.redraw();
-    alert(err.message || 'Upload failed');
+    notifyError(err.message || 'Upload failed');
   }
 }
 
@@ -459,7 +459,12 @@ function getFieldRenderer(col, modelMeta) {
       });
     };
   }
-  
+
+  // Auto-detect belongsTo relation for foreign key columns (ends with _id or has references)
+  if (!col.primary && !col.autoIncrement && ((col.name && col.name.endsWith('_id')) || col.references)) {
+    return FieldRenderers.belongsTo;
+  }
+
   // Fallback to standard type renderers
   const typeMap = {
     string: 'string',

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', {