domma-cms 0.3.0 → 0.5.2

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

@@ -1,199 +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="#/plugins/form-builder" 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>
-            <label class="form-label">Layout</label>
-            <select id="setting-layout" class="form-input">
-              <option value="stacked">Stacked</option>
-              <option value="inline">Inline</option>
-            </select>
-          </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>
-
-      <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>
+<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/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>