domma-cms 0.1.0

package/admin/js/views/login.js

@@ -0,0 +1,254 @@
+/**
+ * Login / First-time Setup View
+ *
+ * Flow:
+ *  - Already logged in  → redirect to dashboard
+ *  - needsSetup = true  → show setup form → onboarding wizard (site → theme → done)
+ *  - needsSetup = false → show login form → redirect to dashboard
+ */
+import { api, setAuthData, isAuthenticated } from '../api.js';
+
+// ---------------------------------------------------------------------------
+// Blueprints
+// ---------------------------------------------------------------------------
+
+const setupBlueprint = {
+    name: {
+        type: 'string',
+        required: true,
+        minLength: 2,
+        label: 'Full Name',
+        formConfig: { placeholder: 'Your name', autocomplete: 'name' }
+    },
+    email: {
+        type: 'email',
+        required: true,
+        label: 'Email Address',
+        formConfig: { placeholder: 'admin@example.com', autocomplete: 'email' }
+    },
+    password: {
+        type: 'password',
+        required: true,
+        minLength: 8,
+        label: 'Password',
+        formConfig: { placeholder: '••••••••', autocomplete: 'new-password', tooltip: 'Minimum 8 characters' }
+    }
+};
+
+const loginBlueprint = {
+    email: {
+        type: 'email',
+        required: true,
+        label: 'Email Address',
+        formConfig: { placeholder: 'you@example.com', autocomplete: 'email' }
+    },
+    password: {
+        type: 'password',
+        required: true,
+        label: 'Password',
+        formConfig: { placeholder: '••••••••', autocomplete: 'current-password' }
+    }
+};
+
+const THEMES = [
+    { id: 'charcoal-dark',  label: 'Charcoal',  dark: true,  primary: '#5b8cff', bg: '#1a1d23' },
+    { id: 'charcoal-light', label: 'Charcoal',  dark: false, primary: '#4a7aff', bg: '#f4f5f7' },
+    { id: 'ocean-dark',     label: 'Ocean',      dark: true,  primary: '#00b4d8', bg: '#0d1b2a' },
+    { id: 'ocean-light',    label: 'Ocean',      dark: false, primary: '#0096c7', bg: '#e8f4f8' },
+    { id: 'forest-dark',    label: 'Forest',     dark: true,  primary: '#52b788', bg: '#1a231e' },
+    { id: 'forest-light',   label: 'Forest',     dark: false, primary: '#40916c', bg: '#f0f7f4' },
+    { id: 'sunset-dark',    label: 'Sunset',     dark: true,  primary: '#ff6b6b', bg: '#1f1a1a' },
+    { id: 'sunset-light',   label: 'Sunset',     dark: false, primary: '#e05555', bg: '#fff0f0' },
+    { id: 'royal-dark',     label: 'Royal',      dark: true,  primary: '#9b59b6', bg: '#1a1525' },
+    { id: 'royal-light',    label: 'Royal',      dark: false, primary: '#8e44ad', bg: '#f5f0fa' },
+    { id: 'lemon-dark',     label: 'Lemon',      dark: true,  primary: '#f1c40f', bg: '#1a1a10' },
+    { id: 'lemon-light',    label: 'Lemon',      dark: false, primary: '#d4ac0d', bg: '#fffef0' },
+    { id: 'silver-dark',    label: 'Silver',     dark: true,  primary: '#95a5a6', bg: '#1c1e20' },
+    { id: 'silver-light',   label: 'Silver',     dark: false, primary: '#7f8c8d', bg: '#f2f3f4' },
+    { id: 'grayve',         label: 'Grayve',     dark: true,  primary: '#aaaaaa', bg: '#111111' },
+];
+
+export const loginView = {
+    templateUrl: '/admin/js/templates/login.html',
+
+    async onMount($container) {
+        if (isAuthenticated()) {
+            R.navigate('/');
+            return;
+        }
+
+        let needsSetup = false;
+        try {
+            const status = await api.auth.setupStatus();
+            needsSetup = status.needsSetup;
+        } catch {
+            E.toast('Could not reach the server.', { type: 'error' });
+        }
+
+        if (needsSetup) {
+            showStep($container, 'setup');
+            bindSetup($container);
+        } else {
+            showStep($container, 'login');
+            bindLogin($container);
+        }
+
+        Domma.icons.scan();
+    }
+};
+
+// ---------------------------------------------------------------------------
+// Panel switching
+// ---------------------------------------------------------------------------
+
+const PANELS = ['setup', 'onboarding-site', 'onboarding-theme', 'onboarding-done', 'login'];
+
+function showStep($container, name) {
+    PANELS.forEach(p => $container.find(`#${p}-panel`).hide());
+    $container.find(`#${name}-panel`).show();
+    Domma.icons.scan();
+}
+
+// ---------------------------------------------------------------------------
+// Setup step
+// ---------------------------------------------------------------------------
+
+function bindSetup($container) {
+    F.render('#setup-form-container', setupBlueprint, {}, {
+        layout: 'stacked',
+        submitText: 'Create admin account',
+        onSubmit: async (data) => {
+            try {
+                const result = await api.auth.setup(data);
+                setAuthData(result);
+                showStep($container, 'onboarding-site');
+                bindOnboardingSite($container);
+            } catch (err) {
+                E.toast(err.message || 'Setup failed. Please try again.', { type: 'error' });
+                return false;
+            }
+        }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Onboarding Step 2 — Site Identity
+// ---------------------------------------------------------------------------
+
+function bindOnboardingSite($container) {
+    $container.find('#ob-site-skip').on('click', (e) => {
+        e.preventDefault();
+        showStep($container, 'onboarding-theme');
+        buildThemeGrid($container);
+        bindOnboardingTheme($container);
+    });
+
+    $container.find('#ob-site-btn').on('click', async () => {
+        $container.find('#ob-site-error').hide();
+        const title   = $container.find('#ob-title').val().trim();
+        const tagline = $container.find('#ob-tagline').val().trim();
+
+        const $btn = $container.find('#ob-site-btn').prop('disabled', true).text('Saving…');
+        try {
+            // Fetch current settings then merge title + tagline
+            const current = await api.settings.get();
+            await api.settings.save({
+                ...current,
+                title:   title   || current.title,
+                tagline: tagline || current.tagline,
+                seo: {
+                    ...(current.seo || {}),
+                    defaultTitle: title || (current.seo && current.seo.defaultTitle)
+                }
+            });
+
+            // Also update nav brand text
+            const nav = await api.navigation.get();
+            await api.navigation.save({
+                ...nav,
+                brand: { ...(nav.brand || {}), text: title || nav.brand.text }
+            });
+
+            showStep($container, 'onboarding-theme');
+            buildThemeGrid($container);
+            bindOnboardingTheme($container);
+        } catch (err) {
+            showError($container, 'ob-site-error', err.message || 'Could not save site details.');
+        } finally {
+            $btn.prop('disabled', false).text('Continue');
+        }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Onboarding Step 3 — Theme Picker
+// ---------------------------------------------------------------------------
+
+function buildThemeGrid($container) {
+    const $grid = $container.find('#theme-grid').empty();
+    THEMES.forEach(t => {
+        const $card = $(`
+            <div class="theme-swatch" data-theme="${t.id}" title="${t.id}">
+                <div class="theme-swatch-preview" style="background:${t.bg}">
+                    <div class="theme-swatch-accent" style="background:${t.primary}"></div>
+                </div>
+                <div class="theme-swatch-label">
+                    <span>${t.label}</span>
+                    <span class="theme-swatch-mode">${t.dark ? 'Dark' : 'Light'}</span>
+                </div>
+            </div>
+        `);
+        $card.on('click', () => {
+            $container.find('.theme-swatch').removeClass('selected');
+            $card.addClass('selected');
+        });
+        $grid.append($card);
+    });
+
+    // Default selection
+    $container.find('[data-theme="charcoal-dark"]').addClass('selected');
+}
+
+function bindOnboardingTheme($container) {
+    $container.find('#ob-theme-skip').on('click', (e) => {
+        e.preventDefault();
+        showStep($container, 'onboarding-done');
+    });
+
+    $container.find('#ob-theme-btn').on('click', async () => {
+        $container.find('#ob-theme-error').hide();
+        const selected = $container.find('.theme-swatch.selected').attr('data-theme') || 'charcoal-dark';
+
+        const $btn = $container.find('#ob-theme-btn').prop('disabled', true).text('Applying…');
+        try {
+            const current = await api.settings.get();
+            await api.settings.save({ ...current, theme: selected });
+            showStep($container, 'onboarding-done');
+        } catch (err) {
+            showError($container, 'ob-theme-error', err.message || 'Could not save theme.');
+        } finally {
+            $btn.prop('disabled', false).text('Apply theme');
+        }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Login step
+// ---------------------------------------------------------------------------
+
+function bindLogin($container) {
+    F.render('#login-form-container', loginBlueprint, {}, {
+        layout: 'stacked',
+        submitText: 'Sign in',
+        onSubmit: async (data) => {
+            try {
+                const result = await api.auth.login(data);
+                setAuthData(result);
+                R.navigate('/');
+            } catch (err) {
+                E.toast(err.message || 'Invalid credentials. Please try again.', { type: 'error' });
+                return false;
+            }
+        }
+    });
+}

package/admin/js/views/media.js

@@ -0,0 +1,240 @@
+/**
+ * Media View
+ */
+import {api} from '../api.js';
+import {openImageEditor} from '../lib/image-editor.js';
+
+export const mediaView = {
+    templateUrl: '/admin/js/templates/media.html',
+
+    async onMount($container) {
+        const renderGrid = (files) => {
+          const grid = $container.find('#media-grid').empty().get(0);
+            if (!files.length) {
+              const empty = document.createElement('p');
+              empty.className = 'text-muted';
+              empty.textContent = 'No media files yet. Upload one above.';
+              grid.appendChild(empty);
+                return;
+            }
+            files.forEach(file => {
+                const isImage = /\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);
+              const isEditable = /\.(png|jpe?g|gif|webp|tiff?)$/i.test(file.name);
+
+              const card = document.createElement('div');
+              card.className = 'media-card';
+
+              // Preview
+              const preview = document.createElement('div');
+              preview.className = 'media-preview';
+              if (isImage) {
+                const img = document.createElement('img');
+                img.src = file.url + '?t=' + Date.now();
+                img.alt = file.name;
+                img.className = 'media-thumb';
+                preview.appendChild(img);
+              } else {
+                const thumb = document.createElement('div');
+                thumb.className = 'media-thumb media-thumb--file';
+                const icon = document.createElement('span');
+                icon.setAttribute('data-icon', 'file');
+                thumb.appendChild(icon);
+                preview.appendChild(thumb);
+              }
+              card.appendChild(preview);
+
+              // Info
+              const info = document.createElement('div');
+              info.className = 'media-info';
+
+              const nameSpan = document.createElement('span');
+              nameSpan.className = 'media-name';
+              nameSpan.title = 'Double-click to rename';
+              nameSpan.textContent = file.name;
+
+              const sizeSpan = document.createElement('span');
+              sizeSpan.className = 'media-size';
+              sizeSpan.textContent = formatBytes(file.size);
+              info.appendChild(nameSpan);
+              info.appendChild(sizeSpan);
+              card.appendChild(info);
+
+              // Inline rename: double-click the filename to edit
+              nameSpan.addEventListener('dblclick', () => startRename(nameSpan, file, renderGrid));
+
+              // Actions
+              const actions = document.createElement('div');
+              actions.className = 'media-actions';
+
+              const copyBtn = document.createElement('button');
+              copyBtn.className = 'btn btn-sm btn-ghost';
+              const copyIcon = document.createElement('span');
+              copyIcon.setAttribute('data-icon', 'copy');
+              copyBtn.appendChild(copyIcon);
+              copyBtn.addEventListener('click', () => {
+                navigator.clipboard.writeText(window.location.origin + file.url)
+                  .then(() => E.toast('URL copied.', {type: 'success'}))
+                  .catch(() => E.toast('Copy failed.', {type: 'error'}));
+              });
+
+              const renameBtn = document.createElement('button');
+              renameBtn.className = 'btn btn-sm btn-ghost';
+              const renameIcon = document.createElement('span');
+              renameIcon.setAttribute('data-icon', 'type');
+              renameBtn.appendChild(renameIcon);
+              renameBtn.addEventListener('click', () => startRename(nameSpan, file, renderGrid));
+
+              let editBtn = null;
+              if (isEditable) {
+                editBtn = document.createElement('button');
+                editBtn.className = 'btn btn-sm btn-ghost';
+                const editIcon = document.createElement('span');
+                editIcon.setAttribute('data-icon', 'edit');
+                editBtn.appendChild(editIcon);
+                editBtn.addEventListener('click', async () => {
+                  const saved = await openImageEditor(file);
+                  if (saved) renderGrid(await api.media.list().catch(() => []));
+                });
+              }
+
+              const deleteBtn = document.createElement('button');
+              deleteBtn.className = 'btn btn-sm btn-danger';
+              const deleteIcon = document.createElement('span');
+              deleteIcon.setAttribute('data-icon', 'trash');
+              deleteBtn.appendChild(deleteIcon);
+              deleteBtn.addEventListener('click', async () => {
+                if (!await E.confirm(`Delete "${file.name}"?`)) return;
+                try {
+                  await api.media.delete(file.name);
+                  E.toast('File deleted.', {type: 'success'});
+                  renderGrid(await api.media.list().catch(() => []));
+                } catch {
+                  E.toast('Delete failed.', {type: 'error'});
+                }
+              });
+
+              actions.appendChild(copyBtn);
+              actions.appendChild(renameBtn);
+              if (editBtn) actions.appendChild(editBtn);
+              actions.appendChild(deleteBtn);
+              card.appendChild(actions);
+              grid.appendChild(card);
+
+              // Tooltips must be registered after the element is in the DOM
+              E.tooltip(copyBtn, {content: 'Copy URL', position: 'top'});
+              E.tooltip(renameBtn, {content: 'Rename', position: 'top'});
+              if (editBtn) E.tooltip(editBtn, {content: 'Edit image', position: 'top'});
+              E.tooltip(deleteBtn, {content: 'Delete file', position: 'top'});
+            });
+
+            Domma.icons.scan();
+            Domma.effects.reveal('.media-card', { animation: 'fade', stagger: 40, duration: 350 });
+        };
+
+        const initialFiles = await api.media.list().catch(() => []);
+        renderGrid(initialFiles);
+
+        Domma.effects.ripple('#upload-btn');
+      $container.find('#upload-btn').on('click', () => $container.find('#file-input').get(0).click());
+
+        $container.find('#file-input').on('change', async function () {
+            if (!this.files.length) return;
+            const formData = new FormData();
+            for (const file of this.files) formData.append('file', file);
+
+          const btn = $container.find('#upload-btn').get(0);
+          const textNode = btn.lastChild;
+          btn.disabled = true;
+          textNode.textContent = ' Uploading…';
+
+            try {
+              const resp = await fetch('/api/media', {
+                method: 'POST',
+                body: formData,
+                headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}
+              });
+                if (!resp.ok) throw new Error('Upload failed');
+                E.toast('File uploaded.', { type: 'success' });
+              renderGrid(await api.media.list().catch(() => []));
+            } catch {
+                E.toast('Upload failed.', { type: 'error' });
+            } finally {
+              btn.disabled = false;
+              textNode.textContent = ' Upload';
+                this.value = '';
+            }
+        });
+    }
+};
+
+/**
+ * Replace a filename span with an inline input for renaming.
+ * Confirms with Enter, cancels with Escape or blur.
+ *
+ * @param {HTMLElement} nameSpan
+ * @param {{ name: string, url: string }} file
+ * @param {Function} renderGrid
+ */
+function startRename(nameSpan, file, renderGrid) {
+  if (nameSpan.querySelector('input')) return; // already editing
+
+  const original = file.name;
+  const dotIndex = original.lastIndexOf('.');
+  const baseName = dotIndex > 0 ? original.slice(0, dotIndex) : original;
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'media-rename-input';
+  input.value = original;
+  input.title = '';
+
+  nameSpan.textContent = '';
+  nameSpan.appendChild(input);
+
+  input.focus();
+  input.setSelectionRange(0, baseName.length);
+
+  async function confirm() {
+    const newName = input.value.trim();
+    if (!newName || newName === original) return cancel();
+    input.disabled = true;
+    try {
+      await api.media.rename(original, newName);
+      E.toast('File renamed.', {type: 'success'});
+      renderGrid(await api.media.list().catch(() => []));
+    } catch (err) {
+      E.toast(err.message || 'Rename failed.', {type: 'error'});
+      cancel();
+    }
+  }
+
+  function cancel() {
+    nameSpan.textContent = original;
+    nameSpan.title = 'Double-click to rename';
+  }
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      confirm();
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      cancel();
+    }
+  });
+
+  input.addEventListener('blur', () => {
+    // Short delay so Enter keydown fires before blur
+    setTimeout(() => {
+      if (nameSpan.contains(input)) cancel();
+    }, 150);
+  });
+}
+
+function formatBytes(bytes) {
+    if (!bytes) return '0 B';
+    const k = 1024, sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}

package/admin/js/views/navigation.js

@@ -0,0 +1,152 @@
+/**
+ * Navigation View
+ */
+import { api } from '../api.js';
+
+let _nextId = 1;
+
+const esc = s => String(s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+
+function flattenItems(items) {
+    const flat = [];
+    (items || []).forEach(item => {
+        const id = _nextId++;
+        flat.push({ _id: id, text: item.text || '', url: item.url || '', icon: item.icon || '', parentId: null });
+        (item.items || item.children || []).forEach(child => {
+            flat.push({ _id: _nextId++, text: child.text || '', url: child.url || '', icon: child.icon || '', parentId: id });
+        });
+    });
+    return flat;
+}
+
+function nestItems(flat) {
+    return flat
+        .filter(i => i.parentId === null)
+        .map(parent => {
+            const children = flat
+                .filter(i => i.parentId === parent._id)
+                .map(c => ({ text: c.text, url: c.url, ...(c.icon && { icon: c.icon }) }));
+            const obj = { text: parent.text, url: parent.url, ...(parent.icon && { icon: parent.icon }) };
+            if (children.length) obj.items = children;
+            return obj;
+        });
+}
+
+// Returns items sorted so children appear immediately after their parent
+function getOrderedItems(flat) {
+    const result = [];
+    flat.filter(i => i.parentId === null).forEach(parent => {
+        result.push(parent);
+        flat.filter(i => i.parentId === parent._id).forEach(child => result.push(child));
+    });
+    return result;
+}
+
+export const navigationView = {
+    templateUrl: '/admin/js/templates/navigation.html',
+
+    async onMount($container) {
+        let nav = await api.navigation.get().catch(() => ({ brand: {}, items: [] }));
+        let flatItems = flattenItems(nav.items);
+
+        const syncFromDom = () => {
+            $container.find('.nav-item-row').each(function () {
+                const id = parseInt($(this).data('id'), 10);
+                const item = flatItems.find(i => i._id === id);
+                if (!item) return;
+                item.text = $(this).find('.item-text').val();
+                item.url  = $(this).find('.item-url').val();
+                item.icon = $(this).find('.item-icon').val();
+                const parentVal = $(this).find('.item-parent').val();
+                item.parentId = parentVal ? parseInt(parentVal, 10) : null;
+            });
+            // Promote children whose parent is now itself a child
+            const childIds = new Set(flatItems.filter(i => i.parentId !== null).map(i => i._id));
+            flatItems.forEach(i => {
+                if (i.parentId !== null && childIds.has(i.parentId)) i.parentId = null;
+            });
+        };
+
+        const renderItems = () => {
+            const $list = $container.find('#nav-items-list').empty();
+            const topLevel = flatItems.filter(i => i.parentId === null);
+
+            getOrderedItems(flatItems).forEach(item => {
+                const isChild = item.parentId !== null;
+                const parentOptions = `<option value="">— top-level —</option>` +
+                    topLevel
+                        .filter(t => t._id !== item._id)
+                        .map(t => `<option value="${t._id}"${t._id === item.parentId ? ' selected' : ''}>${esc(t.text) || '(untitled)'}</option>`)
+                        .join('');
+
+                $list.append(`
+                    <div class="nav-item-row${isChild ? ' nav-item-row--child' : ''}" data-id="${item._id}">
+                        <span class="nav-col-indent">${isChild ? '↳' : ''}</span>
+                        <input type="text" class="form-input item-text nav-col-main" value="${esc(item.text)}" placeholder="Label">
+                        <input type="text" class="form-input item-url nav-col-main" value="${esc(item.url)}" placeholder="/url">
+                        <input type="text" class="form-input item-icon nav-col-icon" value="${esc(item.icon)}" placeholder="icon">
+                        <select class="form-select item-parent nav-col-parent">${parentOptions}</select>
+                        <span class="nav-col-action">
+                            <button class="btn btn-sm btn-danger btn-remove-item" data-id="${item._id}" data-tooltip="Remove"><span data-icon="trash"></span></button>
+                        </span>
+                    </div>
+                `);
+            });
+            Domma.icons.scan('#nav-items-list');
+          document.querySelectorAll('#nav-items-list [data-tooltip]').forEach(el => {
+            E.tooltip(el, {content: el.getAttribute('data-tooltip'), position: 'top'});
+          });
+        };
+
+        $container.find('#field-brand-text').val(nav.brand?.text || '');
+        $container.find('#field-brand-url').val(nav.brand?.url || '/');
+        $container.find('#field-nav-variant').val(nav.variant || 'dark');
+        renderItems();
+
+        $container.find('#add-nav-item').on('click', () => {
+            syncFromDom();
+            flatItems.push({ _id: _nextId++, text: '', url: '', icon: '', parentId: null });
+            renderItems();
+        });
+
+        $container.off('click', '.btn-remove-item').on('click', '.btn-remove-item', function () {
+            syncFromDom();
+            const id = parseInt($(this).data('id'), 10);
+            flatItems = flatItems.filter(i => i._id !== id && i.parentId !== id);
+            renderItems();
+        });
+
+        // Re-render when a parent changes so other dropdowns update
+        $container.off('change', '.item-parent').on('change', '.item-parent', function () {
+            syncFromDom();
+            renderItems();
+        });
+
+        $container.find('#save-nav-btn').on('click', async () => {
+            syncFromDom();
+            const nested = nestItems(
+                flatItems.map(i => ({ ...i, text: i.text.trim(), url: i.url.trim(), icon: i.icon.trim() }))
+            ).filter(i => i.text || i.url);
+
+            const data = {
+                brand: {
+                    text: $container.find('#field-brand-text').val().trim(),
+                    url:  $container.find('#field-brand-url').val().trim() || '/'
+                },
+                items: nested,
+                variant:  $container.find('#field-nav-variant').val(),
+                position: nav.position || 'sticky'
+            };
+
+            try {
+                await api.navigation.save(data);
+                nav = data;
+                flatItems = flattenItems(nav.items);
+                renderItems();
+                E.toast('Navigation saved.', { type: 'success' });
+            } catch {
+                E.toast('Failed to save navigation.', { type: 'error' });
+            }
+        });
+    }
+};