domma-cms 0.1.0

package/plugins/form-builder/admin/views/form-settings.js

@@ -0,0 +1,38 @@
+/**
+ * Form Builder Plugin — Settings View
+ * SMTP is now managed in global Site Settings.
+ * This view provides a test email button only.
+ */
+import { apiRequest } from '/admin/js/api.js';
+
+export const formSettingsView = {
+    templateUrl: '/plugins/form-builder/admin/templates/form-settings.html',
+
+    async onMount($container) {
+        $container.find('#test-email-btn').off('click').on('click', async () => {
+            const btn = $container.find('#test-email-btn');
+            const resultEl = $container.find('#test-email-result').get(0);
+            btn.prop('disabled', true);
+            try {
+                const data = await apiRequest('/plugins/form-builder/test-email', { method: 'POST' });
+                E.toast(data?.message || 'Test email sent.', { type: 'success' });
+                if (resultEl) {
+                    resultEl.textContent = data?.message || 'Test email sent successfully.';
+                    resultEl.className = 'form-hint text-success';
+                    resultEl.style.display = '';
+                }
+            } catch (err) {
+                E.toast(err.message || 'Test email failed.', { type: 'error' });
+                if (resultEl) {
+                    resultEl.textContent = err.message || 'Test email failed. Check your SMTP settings in Site Settings.';
+                    resultEl.className = 'form-hint text-danger';
+                    resultEl.style.display = '';
+                }
+            } finally {
+                btn.prop('disabled', false);
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};

package/plugins/form-builder/admin/views/form-submissions.js

@@ -0,0 +1,295 @@
+/**
+ * Form Builder Plugin — Form Submissions View
+ * Dynamic columns built from the form's field definitions.
+ * Export CSV, clear all, delete single submission.
+ * Search/filter by text + date range with live count.
+ * Row click opens a detail modal.
+ */
+import { apiRequest } from '/admin/js/api.js';
+
+let currentSlug   = null;
+let currentFields = [];
+let allSubmissions = [];
+
+export const formSubmissionsView = {
+    templateUrl: '/plugins/form-builder/admin/templates/form-submissions.html',
+
+    async onMount($container) {
+        // Parse slug from route
+        const hash  = window.location.hash;
+        const match = hash.match(/\/plugins\/form-builder\/([^/?#]+)\/submissions/);
+        currentSlug = match ? match[1] : null;
+
+        if (!currentSlug) {
+            E.toast('No form selected.', { type: 'error' });
+            return;
+        }
+
+        // Load form definition for column headers
+        try {
+            const form = await apiRequest(`/plugins/form-builder/forms/${currentSlug}`);
+            currentFields = (form.fields || []).filter(f => f.type !== 'page-break');
+            $container.find('#submissions-title').get(0).textContent = `${form.title} — Submissions`;
+        } catch {
+            E.toast('Could not load form definition.', { type: 'error' });
+        }
+
+        await loadSubmissions($container);
+
+        // Export — opens a Domma slideover to choose CSV or JSON format
+        $container.find('#export-btn').off('click').on('click', () => {
+            const so = E.slideover({ title: 'Export Submissions', size: 'sm', position: 'right' });
+
+            const panel = document.createElement('div');
+            panel.style.cssText = 'padding:1.25rem;display:flex;flex-direction:column;gap:1rem;';
+
+            function makeExportBtn(label, icon, url, filename) {
+                const wrap = document.createElement('div');
+                wrap.style.cssText = 'display:flex;flex-direction:column;gap:.4rem;';
+
+                const btn = document.createElement('button');
+                btn.className = 'btn btn-ghost';
+                btn.style.cssText = 'justify-content:flex-start;gap:.5rem;';
+                const ic = document.createElement('span');
+                ic.setAttribute('data-icon', icon);
+                btn.appendChild(ic);
+                btn.appendChild(document.createTextNode(' ' + label));
+
+                btn.addEventListener('click', () => {
+                    fetch(url, { headers: { 'Authorization': 'Bearer ' + (S.get('auth_token') || '') } })
+                        .then(r => r.blob())
+                        .then(blob => {
+                            const a = document.createElement('a');
+                            a.href = URL.createObjectURL(blob);
+                            a.download = filename;
+                            document.body.appendChild(a);
+                            a.click();
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(a.href);
+                            so.close();
+                        })
+                        .catch(() => E.toast('Export failed.', { type: 'error' }));
+                });
+                wrap.appendChild(btn);
+                return wrap;
+            }
+
+            panel.appendChild(makeExportBtn(
+                'Export as CSV',
+                'file-text',
+                `/api/plugins/form-builder/forms/${currentSlug}/submissions/export`,
+                `${currentSlug}-submissions.csv`
+            ));
+            panel.appendChild(makeExportBtn(
+                'Export as JSON',
+                'code',
+                `/api/plugins/form-builder/forms/${currentSlug}/submissions/export/json`,
+                `${currentSlug}-submissions.json`
+            ));
+
+            so.setContent(panel);
+            Domma.icons.scan(panel);
+            so.open();
+        });
+
+        // Clear all
+        $container.find('#clear-all-btn').off('click').on('click', async () => {
+            const confirmed = await E.confirm('Delete all submissions? This cannot be undone.');
+            if (!confirmed) return;
+            try {
+                await apiRequest(`/plugins/form-builder/forms/${currentSlug}/submissions`, {
+                    method: 'DELETE'
+                });
+                allSubmissions = [];
+                E.toast('All submissions cleared.', { type: 'success' });
+                renderTable([], $container);
+            } catch {
+                E.toast('Failed to clear submissions.', { type: 'error' });
+            }
+        });
+
+        // Search + date filters
+        const searchEl   = $container.find('#sub-search').get(0);
+        const dateFromEl = $container.find('#sub-date-from').get(0);
+        const dateToEl   = $container.find('#sub-date-to').get(0);
+
+        function applyFilters() {
+            const term    = searchEl?.value.toLowerCase() || '';
+            const from    = dateFromEl?.value ? new Date(dateFromEl.value) : null;
+            const to      = dateToEl?.value   ? new Date(dateToEl.value + 'T23:59:59') : null;
+
+            const filtered = allSubmissions.filter(sub => {
+                // Text search across all data values
+                if (term) {
+                    const values = Object.values(sub.data || {}).map(v => String(v).toLowerCase());
+                    if (!values.some(v => v.includes(term))) return false;
+                }
+                // Date range
+                if (from || to) {
+                    const created = sub.meta?.createdAt ? new Date(sub.meta.createdAt) : null;
+                    if (!created) return false;
+                    if (from && created < from) return false;
+                    if (to   && created > to)   return false;
+                }
+                return true;
+            });
+
+            renderTable(filtered, $container);
+        }
+
+        if (searchEl)   searchEl.addEventListener('input',  applyFilters);
+        if (dateFromEl) dateFromEl.addEventListener('change', applyFilters);
+        if (dateToEl)   dateToEl.addEventListener('change',   applyFilters);
+
+        Domma.icons.scan();
+    }
+};
+
+async function loadSubmissions($container) {
+    try {
+        allSubmissions = await apiRequest(`/plugins/form-builder/forms/${currentSlug}/submissions`);
+    } catch {
+        allSubmissions = [];
+        E.toast('Could not load submissions.', { type: 'error' });
+    }
+    renderTable(allSubmissions, $container);
+}
+
+function renderTable(submissions, $container) {
+    // Update count badge
+    const countEl = $container.find('#sub-count').get(0);
+    if (countEl) {
+        if (submissions.length === allSubmissions.length) {
+            countEl.textContent = `${allSubmissions.length} submission${allSubmissions.length !== 1 ? 's' : ''}`;
+        } else {
+            countEl.textContent = `Showing ${submissions.length} of ${allSubmissions.length}`;
+        }
+    }
+
+    // Build dynamic columns from form field definitions (excludes page-break fields)
+    const fieldCols = currentFields.map(field => ({
+        key:    `data.${field.name}`,
+        label:  field.label || field.name,
+        render: (val, row) => {
+            const raw = row.data?.[field.name] ?? '';
+            const str = String(raw);
+            const span = document.createElement('span');
+            span.title       = str;
+            span.textContent = str.length > 80 ? str.slice(0, 80) + '\u2026' : str;
+            return span.outerHTML;
+        }
+    }));
+
+    const columns = [
+        ...fieldCols,
+        {
+            key:    'meta',
+            label:  'Date',
+            render: (val) => D(val?.createdAt).format('DD MMM YYYY HH:mm')
+        },
+        {
+            key:    'id',
+            label:  '',
+            render: (val) => {
+                const btn = document.createElement('button');
+                btn.className        = 'btn btn-sm btn-danger js-delete-submission';
+                btn.dataset.id       = val;
+                btn.textContent      = 'Delete';
+                btn.style.whiteSpace = 'nowrap';
+                return btn.outerHTML;
+            }
+        }
+    ];
+
+    T.create('#submissions-table', {
+        data:         submissions,
+        columns,
+        emptyMessage: 'No submissions yet.'
+    });
+
+    // Bind delete buttons directly — namespaced delegation is broken in Domma
+    const tableEl = document.querySelector('#submissions-table');
+    if (tableEl) {
+        tableEl.querySelectorAll('.js-delete-submission').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const id        = btn.dataset.id;
+                const confirmed = await E.confirm('Delete this submission?');
+                if (!confirmed) return;
+                try {
+                    await apiRequest(`/plugins/form-builder/forms/${currentSlug}/submissions/${id}`, {
+                        method: 'DELETE'
+                    });
+                    allSubmissions = allSubmissions.filter(s => s.id !== id);
+                    E.toast('Submission deleted.', { type: 'success' });
+                    renderTable(allSubmissions, $container);
+                } catch {
+                    E.toast('Failed to delete submission.', { type: 'error' });
+                }
+            });
+        });
+
+        // Row click → detail modal (skip delete button column)
+        tableEl.querySelectorAll('tbody tr').forEach((row, idx) => {
+            const sub = submissions[idx];
+            if (!sub) return;
+            row.style.cursor = 'pointer';
+            row.addEventListener('click', (e) => {
+                if (e.target.closest('.js-delete-submission')) return;
+                showDetailModal(sub);
+            });
+        });
+    }
+}
+
+function showDetailModal(sub) {
+    const content = document.createElement('div');
+
+    // Field values
+    const fieldsSection = document.createElement('div');
+    fieldsSection.style.cssText = 'display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem;';
+
+    currentFields.forEach(field => {
+        const val = sub.data?.[field.name];
+        if (val === undefined || val === null || val === '') return;
+
+        const row = document.createElement('div');
+        row.style.cssText = 'border-bottom:1px solid var(--border-color,#333);padding-bottom:.6rem;';
+
+        const lbl = document.createElement('strong');
+        lbl.textContent   = field.label || field.name;
+        lbl.style.cssText = 'display:block;font-size:.8rem;color:var(--text-muted,#888);margin-bottom:.2rem;';
+
+        const val_el = document.createElement('p');
+        val_el.textContent  = String(val);
+        val_el.style.cssText = 'margin:0;word-break:break-word;';
+
+        row.appendChild(lbl);
+        row.appendChild(val_el);
+        fieldsSection.appendChild(row);
+    });
+
+    // Meta section
+    const meta = document.createElement('div');
+    meta.style.cssText = 'font-size:.8rem;color:var(--text-muted,#888);display:flex;flex-direction:column;gap:.3rem;border-top:1px solid var(--border-color,#333);padding-top:.75rem;';
+
+    if (sub.meta?.createdAt) {
+        const dateRow = document.createElement('span');
+        dateRow.textContent = `Submitted: ${D(sub.meta.createdAt).format('DD MMM YYYY HH:mm')}`;
+        meta.appendChild(dateRow);
+    }
+    if (sub.meta?.ip) {
+        const ipRow = document.createElement('span');
+        ipRow.textContent = `IP: ${sub.meta.ip}`;
+        meta.appendChild(ipRow);
+    }
+
+    content.appendChild(fieldsSection);
+    content.appendChild(meta);
+
+    // Use slot approach — modal.element is the domma-modal host, light DOM children
+    // project into the body <slot>, so Domma CSS applies correctly
+    const detailModal = E.modal({ title: 'Submission Details', size: 'md' });
+    detailModal.element.appendChild(content);
+    detailModal.open();
+}

package/plugins/form-builder/admin/views/forms-list.js

@@ -0,0 +1,164 @@
+/**
+ * Form Builder Plugin — Forms List View
+ * Displays all forms with field counts, submission counts, and action buttons.
+ */
+import {apiRequest} from '/admin/js/api.js';
+
+function esc(str) {
+    return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+export const formsListView = {
+    templateUrl: '/plugins/form-builder/admin/templates/forms-list.html',
+
+    async onMount($container) {
+        await loadForms($container);
+
+      $container.find('#create-form-btn').off('click').on('click', () => {
+        // Don't pass content — modal body gets a <slot>, so light DOM children
+        // project into it and receive Domma's global CSS
+        const modal = E.modal({title: 'Create Form', size: 'sm'});
+
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = 'padding:.25rem 0 .5rem;';
+
+        // Use F.create() for a properly styled Domma form field
+        const formContainer = document.createElement('div');
+        F.create(
+          { title: { type: 'string', label: 'Form Title', placeholder: 'e.g. Contact, Feedback…', required: true } },
+          {},
+          { showSubmitButton: false }
+        ).renderTo(formContainer);
+        wrapper.appendChild(formContainer);
+
+        const btnWrap = document.createElement('div');
+        btnWrap.style.cssText = 'display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem;';
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'btn btn-ghost';
+        cancelBtn.textContent = 'Cancel';
+        const createBtn = document.createElement('button');
+        createBtn.className = 'btn btn-primary';
+        createBtn.textContent = 'Create';
+        btnWrap.appendChild(cancelBtn);
+        btnWrap.appendChild(createBtn);
+        wrapper.appendChild(btnWrap);
+
+        // Append to modal.element (light DOM) — slots into modal body via <slot>
+        modal.element.appendChild(wrapper);
+        modal.open();
+
+        const titleInput = formContainer.querySelector('input[name="title"]');
+        setTimeout(() => titleInput?.focus(), 50);
+
+        async function doCreate() {
+          const title = titleInput?.value.trim();
+          if (!title) return;
+          try {
+            const form = await apiRequest('/plugins/form-builder/forms', {
+              method: 'POST',
+              body: JSON.stringify({title})
+            });
+            modal.close();
+            R.navigate(`/plugins/form-builder/edit/${form.slug}`);
+          } catch (err) {
+            E.toast(err.message || 'Failed to create form.', {type: 'error'});
+          }
+        }
+
+        cancelBtn.addEventListener('click', () => modal.close());
+        createBtn.addEventListener('click', doCreate);
+        titleInput?.addEventListener('keydown', (e) => { if (e.key === 'Enter') doCreate(); });
+        });
+
+        Domma.icons.scan();
+    }
+};
+
+async function loadForms($container) {
+    let forms = [];
+    try {
+        forms = await apiRequest('/plugins/form-builder/forms');
+    } catch {
+        E.toast('Could not load forms.', { type: 'error' });
+    }
+
+    T.create('#forms-table', {
+        data: forms,
+        columns: [
+            {
+                key:    'title',
+                label:  'Title',
+                render: (val, row) => {
+                    const a = document.createElement('a');
+                    a.href        = `#/plugins/form-builder/edit/${esc(row.slug)}`;
+                    a.textContent = val;
+                    a.style.fontWeight = '600';
+                    return a.outerHTML;
+                }
+            },
+            {
+                key:    'slug',
+                label:  'Slug',
+                render: val => {
+                    const code = document.createElement('code');
+                    code.textContent = val;
+                    return code.outerHTML;
+                }
+            },
+            { key: 'fields', label: 'Fields', render: val => String(val?.length ?? 0) },
+            { key: 'submissionCount', label: 'Submissions', render: val => String(val ?? 0) },
+            {
+                key:    'slug',
+                label:  '',
+                render: (val) => {
+                    const wrap = document.createElement('div');
+                    wrap.style.cssText = 'display:flex;gap:.4rem;justify-content:flex-end;';
+
+                    const editBtn = document.createElement('a');
+                    editBtn.href      = `#/plugins/form-builder/edit/${esc(val)}`;
+                    editBtn.className = 'btn btn-sm btn-ghost';
+                    editBtn.textContent = 'Edit';
+
+                    const subsBtn = document.createElement('a');
+                    subsBtn.href      = `#/plugins/form-builder/${esc(val)}/submissions`;
+                    subsBtn.className = 'btn btn-sm btn-ghost';
+                    subsBtn.textContent = 'Submissions';
+
+                    const delBtn = document.createElement('button');
+                    delBtn.className        = 'btn btn-sm btn-danger js-delete-form';
+                    delBtn.dataset.slug     = val;
+                    delBtn.textContent      = 'Delete';
+
+                    wrap.appendChild(editBtn);
+                    wrap.appendChild(subsBtn);
+                    wrap.appendChild(delBtn);
+                    return wrap.outerHTML;
+                }
+            }
+        ],
+        emptyMessage: 'No forms yet. Click "Create Form" to get started.'
+    });
+
+    // Bind delete buttons directly after table renders (namespaced delegation broken in Domma)
+    document.querySelectorAll('.js-delete-form').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            const slug      = btn.dataset.slug;
+            const confirmed = await E.confirm(`Delete form "${slug}" and all its submissions? This cannot be undone.`);
+            if (!confirmed) return;
+            try {
+                await apiRequest(`/plugins/form-builder/forms/${slug}`, { method: 'DELETE' });
+                E.toast('Form deleted.', { type: 'success' });
+                await loadForms($container);
+            } catch {
+                E.toast('Failed to delete form.', { type: 'error' });
+            }
+        });
+    });
+
+    Domma.icons.scan();
+}

package/plugins/form-builder/config.js

@@ -0,0 +1,9 @@
+/**
+ * Form Builder Plugin — Default Configuration
+ * Global SMTP settings shared across all forms.
+ */
+export default {
+    smtp: { host: '', port: 587, secure: false, user: '', pass: '' },
+    fromAddress: 'noreply@example.com',
+    fromName: 'Website Forms'
+};

package/plugins/form-builder/data/forms/contact-details.json

@@ -0,0 +1,63 @@
+{
+    "slug": "contact-details",
+    "title": "Contact Details",
+    "description": "",
+    "fields": [
+        {
+            "name": "are_you_going",
+            "type": "checkbox-group",
+            "label": "Are you going?",
+            "required": false,
+            "placeholder": "",
+            "helper": "",
+            "options": [
+                {
+                    "value": "yes",
+                    "label": "Yes"
+                },
+                {
+                    "value": "no",
+                    "label": "No"
+                },
+                {
+                    "value": "maybe",
+                    "label": "Maybe"
+                }
+            ]
+        },
+        {
+            "type": "page-break",
+            "label": "Email",
+            "description": "Personal Details"
+        },
+        {
+            "name": "name",
+            "type": "string",
+            "label": "Name",
+            "required": false,
+            "placeholder": "Name",
+            "helper": "Enter your email address"
+        }
+    ],
+    "settings": {
+        "submitText": "Submit",
+        "successMessage": "Thank you for your submission.",
+        "layout": "stacked",
+        "honeypot": true,
+        "rateLimitPerMinute": 3
+    },
+    "actions": {
+        "email": {
+            "enabled": false,
+            "recipients": "",
+            "subjectPrefix": "[contact-details]"
+        },
+        "webhook": {
+            "enabled": false,
+            "url": "",
+            "method": "POST"
+        }
+    },
+    "createdAt": "2026-03-03T11:05:45.630Z",
+    "updatedAt": "2026-03-03T12:31:49.644Z"
+}

package/plugins/form-builder/data/forms/contact.json

@@ -0,0 +1,52 @@
+{
+    "slug": "contact",
+    "title": "Contact",
+    "description": "Get in touch with us.",
+    "fields": [
+        {
+            "id": "field-name",
+            "name": "name",
+            "label": "Full Name",
+            "type": "text",
+            "required": true,
+            "placeholder": "Your full name"
+        },
+        {
+            "id": "field-email",
+            "name": "email",
+            "label": "Email Address",
+            "type": "email",
+            "required": true,
+            "placeholder": "you@example.com"
+        },
+        {
+            "id": "field-subject",
+            "name": "subject",
+            "label": "Subject",
+            "type": "text",
+            "required": false,
+            "placeholder": "What's this about?"
+        },
+        {
+            "id": "field-message",
+            "name": "message",
+            "label": "Message",
+            "type": "textarea",
+            "required": true,
+            "placeholder": "Your message…"
+        }
+    ],
+    "settings": {
+        "submitText": "Send Message",
+        "successMessage": "Thank you for your message. We'll be in touch shortly.",
+        "layout": "stacked",
+        "honeypot": true,
+        "rateLimitPerMinute": 3
+    },
+    "actions": {
+        "email": { "enabled": false, "recipients": "", "subjectPrefix": "[Contact]" },
+        "webhook": { "enabled": false, "url": "", "method": "POST" }
+    },
+    "createdAt": "2026-03-03T00:00:00.000Z",
+    "updatedAt": "2026-03-03T00:00:00.000Z"
+}

package/plugins/form-builder/data/submissions/contact-details.json

@@ -0,0 +1 @@
+[]

package/plugins/form-builder/data/submissions/contact.json

@@ -0,0 +1,14 @@
+[
+  {
+    "id": "f2feb7a7-5fdd-4c1c-9421-fdb17fc92ad5",
+    "data": {
+      "name": "Darryl Waterhouse",
+      "email": "darryl@dcbw-it.co.uk",
+      "message": "This is another test!"
+    },
+    "meta": {
+      "ip": "127.0.0.1",
+      "createdAt": "2026-03-03T12:35:16.274Z"
+    }
+  }
+]