domma-cms 0.2.1 → 0.5.0

package/admin/js/templates/form-editor.html

@@ -0,0 +1,238 @@
+<div class="view-header">
+    <h1 id="editor-title"><span data-icon="edit-3"></span> Form Editor</h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="#/forms" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Forms
+        </a>
+        <button id="preview-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="eye"></span> Preview
+        </button>
+        <button id="save-form-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save
+        </button>
+    </div>
+</div>
+
+<div class="tabs" id="editor-tabs">
+  <div class="tab-list">
+    <button class="tab-item active">Fields</button>
+    <button class="tab-item">Form Details</button>
+    <button class="tab-item">Settings</button>
+    <button class="tab-item">Actions</button>
+  </div>
+  <div class="tab-content">
+
+    <!-- Tab 1: Fields -->
+    <div class="tab-panel active">
+      <div class="card mb-4">
+        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+          <h2>Fields</h2>
+          <div id="add-element-dropdown" style="position:relative;">
+            <button id="add-element-btn" class="btn btn-ghost btn-sm" type="button">
+              <span data-icon="plus"></span> Add <span
+                style="font-size:.65rem;opacity:.6;margin-left:.1rem;">▾</span>
+            </button>
+            <div id="add-element-menu"
+                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--card-bg,#1e1e2e);border:1px solid var(--border-color,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3);overflow:hidden;">
+              <button id="add-field-btn" type="button"
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                Field
+              </button>
+              <button id="add-spacer-btn" type="button"
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                Spacer
+              </button>
+              <button id="add-page-break-btn" type="button"
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;">
+                Page Break
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card-body" style="padding:0;">
+          <div id="fields-list" style="padding:1rem;">
+            <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click
+              "Add Field" to get started.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4" id="preview-card" style="display:none;">
+        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+          <h2><span data-icon="eye"></span> Preview</h2>
+          <span id="preview-test-badge"
+                style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(99,102,241,.15);color:var(--primary,#6366f1);">Test Mode — submissions are stored</span>
+        </div>
+        <div class="card-body">
+          <div id="preview-container"></div>
+          <div id="preview-test-result"
+               style="display:none;margin-top:.75rem;padding:.6rem .9rem;border-radius:6px;font-size:.9rem;"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab 2: Form Details -->
+    <div class="tab-panel">
+      <div class="card mb-4">
+        <div class="card-header"><h2>Form Details</h2></div>
+        <div class="card-body">
+          <div class="row mb-3">
+            <div class="col-7">
+              <label class="form-label">Title</label>
+              <input id="field-title" type="text" class="form-input" placeholder="My Form">
+            </div>
+            <div class="col-5">
+              <label class="form-label">Slug</label>
+              <input id="field-slug" type="text" class="form-input" placeholder="my-form">
+              <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Used in embed: <code>data-form="slug"</code>
+              </p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <label class="form-label">Description</label>
+              <textarea id="field-description" class="form-input" rows="2"
+                        placeholder="Optional form description..."></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab 3: Settings -->
+    <div class="tab-panel">
+      <div class="card mb-4">
+        <div class="card-header"><h2>Settings</h2></div>
+        <div class="card-body">
+          <div class="mb-3">
+            <label class="form-label">Submit Button Text</label>
+            <input id="setting-submit-text" type="text" class="form-input" placeholder="Submit" value="Submit">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Success Message</label>
+            <textarea id="setting-success-message" class="form-input" rows="3"
+                      placeholder="Thank you for your submission."></textarea>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Success Redirect URL</label>
+            <input id="setting-success-redirect" type="text" class="form-input"
+                   placeholder="/thank-you">
+            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">
+              If set, redirects the visitor to this URL on success. Takes priority over the success message.
+            </p>
+          </div>
+            <div class="mb-3">
+            <label class="form-label">Layout</label>
+            <select id="setting-layout" class="form-input">
+              <option value="stacked">Stacked</option>
+              <option value="inline">Inline</option>
+                <option value="grid">Grid</option>
+            </select>
+            </div>
+            <div id="columns-group" style="display:none;">
+                <label class="form-label">Columns</label>
+                <input id="setting-columns" type="number" class="form-input" min="1" max="6" value="2">
+              <div class="mt-3">
+                <label class="form-label">Submit Button Span</label>
+                <select id="setting-submit-span" class="form-input">
+                  <option value="">Auto (1 column)</option>
+                  <option value="full">Full width</option>
+                </select>
+                <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Controls how wide the submit
+                  button is in grid layout.</p>
+              </div>
+          </div>
+                </div>
+            </div>
+        </div>
+
+    <!-- Tab 4: Actions -->
+    <div class="tab-panel">
+      <div class="row">
+        <div class="col-6">
+          <div class="card mb-4">
+            <div class="card-header"><h2>Email Action</h2></div>
+            <div class="card-body">
+              <div class="mb-3">
+                <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                  <input id="action-email-enabled" type="checkbox"> Send email on submit
+                </label>
+              </div>
+              <div class="mb-3">
+                <label class="form-label">Recipients</label>
+                <input id="action-email-recipients" type="text" class="form-input" placeholder="admin@example.com">
+                <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Comma-separated. Uses global
+                  SMTP settings.</p>
+              </div>
+              <div>
+                <label class="form-label">Subject Prefix</label>
+                <input id="action-email-subject-prefix" type="text" class="form-input" placeholder="[Form]">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="card mb-4">
+            <div class="card-header"><h2>Webhook Action</h2></div>
+            <div class="card-body">
+              <div class="mb-3">
+                <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                  <input id="action-webhook-enabled" type="checkbox"> POST to webhook on submit
+                </label>
+              </div>
+              <div class="mb-3">
+                <label class="form-label">URL</label>
+                <input id="action-webhook-url" type="url" class="form-input"
+                       placeholder="https://hooks.example.com/form">
+              </div>
+              <div>
+                <label class="form-label">Method</label>
+                <select id="action-webhook-method" class="form-input">
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="card mb-4">
+            <div class="card-header"><h2>CMS Action</h2></div>
+            <div class="card-body">
+              <div class="mb-3">
+                <label class="form-label">Action on Submit</label>
+                <select id="action-cms-slug" class="form-input">
+                  <option value="">— None —</option>
+                </select>
+                <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">
+                  Run a CMS Action after the entry is stored. Requires Pro (MongoDB).
+                  Failures are non-fatal — the submission is always saved first.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-header"><h2>Spam Protection</h2></div>
+        <div class="card-body">
+          <div class="mb-3">
+            <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+              <input id="setting-honeypot" type="checkbox" checked> Enable honeypot field
+            </label>
+            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Silently discards bot submissions
+              that fill a hidden field.</p>
+          </div>
+          <div>
+            <label class="form-label">Rate Limit (per minute)</label>
+            <input id="setting-rate-limit" type="number" class="form-input" min="1" max="60" value="3">
+            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Max submissions per IP per
+              minute.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/{plugins/form-builder/admin → admin/js}/templates/form-submissions.html

@@ -1,30 +1,30 @@
-<div class="view-header">
-    <h1><span data-icon="inbox"></span> <span id="submissions-title">Submissions</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/plugins/form-builder" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Forms
-        </a>
-        <button id="export-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="download"></span> Export
-        </button>
-        <button id="clear-all-btn" class="btn btn-danger btn-sm">
-            <span data-icon="trash-2"></span> Clear All
-        </button>
-    </div>
-</div>
-
-<div class="card mb-3">
-    <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
-        <input id="sub-search" type="text" class="form-input" placeholder="Search submissions…" style="flex:1;min-width:200px;">
-        <input id="sub-date-from" type="date" class="form-input" style="width:auto;">
-        <span style="color:var(--text-muted,#888);">to</span>
-        <input id="sub-date-to" type="date" class="form-input" style="width:auto;">
-        <span id="sub-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
-    </div>
-</div>
-
-<div class="card">
-    <div class="card-body">
-        <div id="submissions-table"></div>
-    </div>
-</div>
+<div class="view-header">
+    <h1><span data-icon="inbox"></span> <span id="submissions-title">Submissions</span></h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="#/forms" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Forms
+        </a>
+        <button id="export-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="download"></span> Export
+        </button>
+        <button id="clear-all-btn" class="btn btn-danger btn-sm">
+            <span data-icon="trash-2"></span> Clear All
+        </button>
+    </div>
+</div>
+
+<div class="card mb-3">
+    <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
+        <input id="sub-search" type="text" class="form-input" placeholder="Search submissions…" style="flex:1;min-width:200px;">
+        <input id="sub-date-from" type="date" class="form-input" style="width:auto;">
+        <span style="color:var(--text-muted,#888);">to</span>
+        <input id="sub-date-to" type="date" class="form-input" style="width:auto;">
+        <span id="sub-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="submissions-table"></div>
+    </div>
+</div>

package/{plugins/form-builder/admin/templates/forms-list.html → admin/js/templates/forms.html}

@@ -1,17 +1,17 @@
-<div class="view-header">
-    <h1><span data-icon="layout"></span> Forms</h1>
-    <div style="display:flex;gap:.5rem;">
-        <a href="#/plugins/form-builder/settings" class="btn btn-ghost btn-sm">
-            <span data-icon="settings"></span> Settings
-        </a>
-        <button id="create-form-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> Create Form
-        </button>
-    </div>
-</div>
-
-<div class="card">
-    <div class="card-body">
-        <div id="forms-table"></div>
-    </div>
-</div>
+<div class="view-header">
+    <h1><span data-icon="layout"></span> Forms</h1>
+    <div style="display:flex;gap:.5rem;">
+        <button id="test-email-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="mail"></span> Test Email
+        </button>
+        <button id="create-form-btn" class="btn btn-primary">
+            <span data-icon="plus"></span> Create Form
+        </button>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="forms-table"></div>
+    </div>
+</div>

package/admin/js/templates/layouts.html

@@ -1,11 +1,48 @@
 <div class="view-header">
-    <h1><span data-icon="layout"></span> Layout Presets</h1>
-    <button id="save-layouts-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+  <h1><span data-icon="layout"></span> Layouts</h1>
 </div>
 
-<p class="text-muted mb-4">
-    Layout presets define which structural elements appear on pages using that layout.
-    Assign a layout to each page via the page editor.
-</p>
+<div class="tabs" id="layouts-tabs">
+  <div class="tab-list">
+    <button class="tab-item active" data-tab="panel-presets">Layout Presets</button>
+    <button class="tab-item" data-tab="panel-options">Layout Options</button>
+  </div>
+  <div class="tab-content">
 
-<div id="presets-grid" class="presets-grid"></div>
+    <div class="tab-panel active" id="panel-presets">
+      <div class="view-actions mb-4">
+        <p class="text-muted">Layout presets define which structural elements appear on pages using that layout. Assign
+          a layout to each page via the page editor.</p>
+        <button id="save-layouts-btn" class="btn btn-primary"><span data-icon="save"></span> Save Presets</button>
+      </div>
+      <div id="presets-grid" class="presets-grid"></div>
+    </div>
+
+    <div class="tab-panel" id="panel-options">
+      <div class="card mb-4">
+        <div class="card-header"><h3>Spacer Shortcode</h3></div>
+        <div class="card-body">
+          <p class="text-muted mb-3">
+            The <code>[spacer /]</code> shortcode inserts a vertical gap. Set the default height here;
+            individual spacers can override it with <code>size="N"</code>.
+          </p>
+          <div class="form-group">
+            <label class="form-label" for="spacer-size-input">Default spacer height (px)</label>
+            <input id="spacer-size-input" type="number" class="form-input" style="max-width:120px" min="0" max="500"
+                   step="1" value="8">
+          </div>
+          <div class="form-group mt-3">
+            <label class="form-label" for="spacer-class-input">Default spacer CSS class</label>
+            <input id="spacer-class-input" type="text" class="form-input" style="max-width:240px"
+                   placeholder="e.g. my-gap">
+            <small class="text-muted">Applied to every <code>[spacer /]</code> unless overridden per-instance with
+              <code>class="…"</code>.</small>
+          </div>
+          <button id="save-options-btn" class="btn btn-primary mt-3"><span data-icon="save"></span> Save Options
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/admin/js/templates/login.html

@@ -17,13 +17,13 @@
             <div id="onboarding-site-panel" style="display:none">
                 <h2 class="login-heading">Name your site</h2>
                 <p class="text-muted mb-4">You can change these any time from Settings.</p>
-                <div class="form-group mb-3">
+                <div class="mb-3">
                     <label class="form-label" for="ob-title">Site title</label>
-                    <input type="text" id="ob-title" class="form-control" placeholder="My Blog">
+                    <input type="text" id="ob-title" class="form-input" placeholder="My Blog">
                 </div>
-                <div class="form-group mb-4">
+                <div class="mb-4">
                     <label class="form-label" for="ob-tagline">Tagline <span class="text-muted">(optional)</span></label>
-                    <input type="text" id="ob-tagline" class="form-control" placeholder="A short description of your site">
+                    <input type="text" id="ob-tagline" class="form-input" placeholder="A short description of your site">
                 </div>
                 <div id="ob-site-error" class="alert alert-danger mb-3" style="display:none"></div>
                 <button id="ob-site-btn" class="btn btn-primary btn-block">Continue</button>
@@ -52,6 +52,31 @@
             <div id="login-panel" style="display:none">
                 <h2 class="login-heading">Sign in</h2>
                 <div id="login-form-container"></div>
+                <a href="#" id="forgot-link" class="btn-skip">Forgot your password?</a>
+            </div>
+
+            <!-- ── Forgot password ── -->
+            <div id="forgot-panel" style="display:none">
+                <h2 class="login-heading">Reset your password</h2>
+                <p class="text-muted mb-4">Enter your email and we'll send you a reset link.</p>
+                <div id="forgot-form-container"></div>
+                <a href="#" id="forgot-back-link" class="btn-skip">Back to sign in</a>
+            </div>
+
+            <!-- ── Forgot success ── -->
+            <div id="forgot-success-panel" style="display:none">
+                <div class="ob-done-icon"><span data-icon="mail"></span></div>
+                <h2 class="login-heading">Check your email</h2>
+                <p class="text-muted mb-4">If an account exists for that address, we've sent a reset link. It expires in
+                    1 hour.</p>
+                <a href="#" id="forgot-success-back-link" class="btn btn-primary btn-block">Back to sign in</a>
+            </div>
+
+            <!-- ── Reset password ── -->
+            <div id="reset-panel" style="display:none">
+                <h2 class="login-heading">Set a new password</h2>
+                <p class="text-muted mb-4">Choose a strong password of at least 8 characters.</p>
+                <div id="reset-form-container"></div>
             </div>
         </div>
     </div>

package/admin/js/templates/my-profile.html

@@ -0,0 +1,17 @@
+<div class="view-header">
+    <h1><span data-icon="user"></span> My Profile</h1>
+</div>
+
+<div class="card">
+    <div class="card-header"><h2>Account</h2></div>
+    <div class="card-body">
+        <div id="account-form-container"></div>
+    </div>
+</div>
+
+<div class="card mt-4" id="profile-card" style="display:none;">
+    <div class="card-header"><h2>Profile</h2></div>
+    <div class="card-body">
+        <div id="profile-form-container"></div>
+    </div>
+</div>

package/admin/js/templates/page-editor.html

@@ -1,6 +1,9 @@
 <div class="view-header">
     <h1 id="editor-title"><span data-icon="edit"></span> Page Editor</h1>
     <div class="view-header-actions">
+      <a id="view-page-btn" class="btn btn-ghost" target="_blank" rel="noopener" style="display:none;">
+        <span data-icon="external-link"></span> View Page
+      </a>
         <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
         <button id="save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
     </div>
@@ -12,6 +15,7 @@
     <button class="tab-item">Page Details</button>
     <button class="tab-item">SEO</button>
     <button class="tab-item">DConfig</button>
+    <button class="tab-item" id="live-preview-tab" style="display:none;">Live Preview</button>
   </div>
   <div class="tab-content">
 
@@ -87,6 +91,40 @@
           </select>
         </div>
       </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Theme Override</label>
+          <select id="field-theme" class="form-select">
+            <option value="">— Use site default —</option>
+            <option value="charcoal-dark">Charcoal Dark</option>
+            <option value="charcoal-light">Charcoal Light</option>
+            <option value="ocean-dark">Ocean Dark</option>
+            <option value="ocean-light">Ocean Light</option>
+            <option value="forest-dark">Forest Dark</option>
+            <option value="forest-light">Forest Light</option>
+            <option value="sunset-dark">Sunset Dark</option>
+            <option value="sunset-light">Sunset Light</option>
+            <option value="royal-dark">Royal Dark</option>
+            <option value="royal-light">Royal Light</option>
+            <option value="lemon-dark">Lemon Dark</option>
+            <option value="lemon-light">Lemon Light</option>
+            <option value="silver-dark">Silver Dark</option>
+            <option value="silver-light">Silver Light</option>
+            <option value="grayve-dark">Grayve Dark</option>
+            <option value="grayve-light">Grayve Light</option>
+              <option value="mint-dark">Mint Dark</option>
+              <option value="mint-light">Mint Light</option>
+          </select>
+          <small class="form-hint">Overrides the site-wide theme for this page only.</small>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-label">Tags</label>
+          <div id="field-tags"></div>
+          <small class="form-hint">Comma-separated keywords for filtering and search.</small>
+        </div>
+      </div>
       <div class="row">
         <div class="col-auto">
           <label class="form-check-label">
@@ -98,6 +136,11 @@
             <input id="field-sidebar" type="checkbox" class="form-check"> Show Sidebar
           </label>
         </div>
+        <div class="col-auto">
+          <label class="form-check-label">
+            <input id="field-show-breadcrumbs" type="checkbox" class="form-check" checked> Show Breadcrumbs
+          </label>
+        </div>
       </div>
     </div>
 
@@ -126,6 +169,11 @@
         shortcodes in the content body — inline shortcodes win on selector conflict. Leave blank if unused.</small>
     </div>
 
+    <!-- Live Preview -->
+    <div class="tab-panel" id="live-preview-panel">
+      <iframe id="live-preview-frame" class="page-live-preview-frame" src="about:blank"></iframe>
+    </div>
+
   </div>
 </div>
 

package/admin/js/templates/pages.html

@@ -3,16 +3,21 @@
     <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
 </div>
 
-<div class="toolbar mb-3">
+<div class="toolbar mb-3" style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
     <select id="status-filter" class="form-select form-select-sm" style="width:auto">
         <option value="">All statuses</option>
         <option value="published">Published</option>
         <option value="draft">Draft</option>
     </select>
+    <div class="btn-group" style="margin-left:auto;">
+        <button id="view-table-btn" class="btn btn-sm btn-primary" data-tooltip="Table view"><span data-icon="list"></span></button>
+        <button id="view-tree-btn" class="btn btn-sm btn-ghost" data-tooltip="Tree view"><span data-icon="tree"></span></button>
+    </div>
 </div>
 
 <div class="card">
     <div class="card-body">
         <div id="pages-table"></div>
+        <div id="pages-tree" style="display:none;"></div>
     </div>
 </div>