@harshankur/viewcounter 3.0.1 → 3.2.0

package/admin/js/passwordPrompt.js

@@ -0,0 +1,75 @@
+/**
+ * A password dialog over the current page, for the two times the admin UI
+ * needs the password without leaving what the admin was doing: signing in
+ * again after a session ends, and confirming an action that cannot be undone.
+ */
+
+import { ApiError } from './api.js';
+import { el, uniqueId } from './dom.js';
+import { t } from './i18n.js';
+import { openModal, VARIANT } from './modal.js';
+import { ERROR_CODE } from './constants.js';
+
+/**
+ * @param {{ title: string, message: string, submitLabel: string,
+ *   submit: (password: string) => Promise<void> }} options
+ * @returns {Promise<boolean>} whether `submit` succeeded; false if cancelled
+ */
+export function promptPassword({ title, message, submitLabel, submit }) {
+    return new Promise((resolve) => {
+        const inputId = uniqueId('password');
+        const input = el('input', {
+            className: 'input',
+            attrs: { id: inputId, type: 'password', autocomplete: 'current-password', required: 'true' },
+        });
+        const error = el('p', { className: 'field-error', attrs: { role: 'alert' } });
+        error.hidden = true;
+        let settled = false;
+
+        const attempt = async () => {
+            if (!input.value) {
+                input.focus();
+                return false;
+            }
+            try {
+                await submit(input.value);
+                settled = true;
+                resolve(true);
+                return true;
+            } catch (failure) {
+                const code = failure instanceof ApiError ? failure.code : ERROR_CODE.SERVER_ERROR;
+                error.textContent = t(`errors.${code}`);
+                error.hidden = false;
+                input.select();
+                return false;
+            }
+        };
+
+        const dialog = openModal({
+            title,
+            body: [
+                el('p', { text: message }),
+                el('label', { className: 'field-label', text: t('login.password'), attrs: { for: inputId } }),
+                input,
+                error,
+            ],
+            actions: [
+                { label: t('common.cancel'), variant: VARIANT.SECONDARY },
+                { label: submitLabel, variant: VARIANT.PRIMARY, onClick: attempt },
+            ],
+            onCancel: () => { if (!settled) resolve(false); },
+            initialFocus: input,
+        });
+
+        // Enter submits, as on the sign-in screen.
+        input.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter') return;
+            event.preventDefault();
+            dialog.querySelector('.modal-actions .btn-primary')?.click();
+        });
+        // A cancel button that closes the dialog is a cancel, too.
+        dialog.querySelector('.modal-actions .btn-secondary')?.addEventListener('click', () => {
+            if (!settled) resolve(false);
+        });
+    });
+}

package/admin/js/table.js

@@ -0,0 +1,94 @@
+/**
+ * Controls shared by the tables: the pager and the segmented control. The
+ * table itself is dataTable.js.
+ */
+
+import { el, replaceChildren } from './dom.js';
+import { formatNumber } from './format.js';
+import { t } from './i18n.js';
+
+/**
+ * Previous / next pagination with a live summary.
+ * @param {(page: number) => void} onChange
+ */
+export function createPager(onChange) {
+    let page = 1;
+    let pages = 1;
+
+    const summary = el('span', { className: 'pager-summary', attrs: { 'aria-live': 'polite' } });
+    const prev = el('button', {
+        className: 'btn btn-secondary btn-small',
+        text: t('pager.previous'),
+        attrs: { type: 'button' },
+        on: { click: () => page > 1 && onChange(page - 1) },
+    });
+    const next = el('button', {
+        className: 'btn btn-secondary btn-small',
+        text: t('pager.next'),
+        attrs: { type: 'button' },
+        on: { click: () => page < pages && onChange(page + 1) },
+    });
+
+    const element = el('div', { className: 'pager' }, [prev, summary, next]);
+
+    return {
+        element,
+        /** @param {number} currentPage @param {number} pageSize @param {number} total */
+        update(currentPage, pageSize, total) {
+            page = currentPage;
+            pages = Math.max(1, Math.ceil(total / pageSize));
+            prev.disabled = page <= 1;
+            next.disabled = page >= pages;
+            replaceChildren(summary, [t('pager.summary', {
+                page: formatNumber(page),
+                pages: formatNumber(pages),
+                total: formatNumber(total),
+                count: total,
+            })]);
+        },
+    };
+}
+
+/** A segmented control: one pressed button among several (a single choice). */
+export function createSegmented({ label, options, value, onChange }) {
+    let current = value;
+    const buttons = new Map();
+    const group = el('div', { className: 'segmented', attrs: { role: 'group', 'aria-label': label } });
+
+    const render = () => {
+        for (const [key, button] of buttons) {
+            const active = key === current;
+            button.classList.toggle('active', active);
+            button.setAttribute('aria-pressed', String(active));
+        }
+    };
+
+    for (const option of options) {
+        const button = el('button', {
+            className: 'segmented-btn',
+            text: option.label,
+            attrs: { type: 'button' },
+            on: {
+                click: () => {
+                    if (current === option.value) return;
+                    current = option.value;
+                    render();
+                    onChange(current);
+                },
+            },
+        });
+        buttons.set(option.value, button);
+        group.append(button);
+    }
+    render();
+
+    return {
+        element: group,
+        getValue: () => current,
+        /** Show a value chosen elsewhere, without reporting it as a change. */
+        setValue(value) {
+            current = value;
+            render();
+        },
+    };
+}

package/admin/js/theme.js

@@ -0,0 +1,72 @@
+/**
+ * Light / dark / system theme (FRONTEND.md §6).
+ *
+ * All colours are tokens on :root; the theme is a class on <html>, so
+ * switching it re-themes everything without per-component branching. The
+ * choice is a per-viewer convenience kept in localStorage, which may be
+ * unavailable (private mode, blocked storage); the UI works without it.
+ */
+
+import { STORAGE_KEY, THEME } from './constants.js';
+
+const CLASS = {
+    [THEME.LIGHT]: 'theme-light',
+    [THEME.DARK]: 'theme-dark',
+};
+
+const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+let current = THEME.AUTO;
+const buttons = new Map();
+
+function readStored() {
+    try {
+        const value = localStorage.getItem(STORAGE_KEY.THEME);
+        return Object.values(THEME).includes(value) ? value : THEME.AUTO;
+    } catch {
+        return THEME.AUTO;
+    }
+}
+
+function store(value) {
+    try {
+        localStorage.setItem(STORAGE_KEY.THEME, value);
+    } catch {
+        // Storage blocked: the theme still applies for this page view.
+    }
+}
+
+function resolved() {
+    if (current !== THEME.AUTO) return current;
+    return darkQuery.matches ? THEME.DARK : THEME.LIGHT;
+}
+
+function apply() {
+    const root = document.documentElement;
+    root.classList.remove(...Object.values(CLASS));
+    root.classList.add(CLASS[resolved()]);
+    for (const [value, button] of buttons) {
+        const active = value === current;
+        button.classList.toggle('active', active);
+        button.setAttribute('aria-pressed', String(active));
+    }
+}
+
+export function setTheme(value) {
+    current = Object.values(THEME).includes(value) ? value : THEME.AUTO;
+    store(current);
+    apply();
+}
+
+/**
+ * Wire the switcher buttons and apply the stored theme.
+ * @param {Record<string, HTMLButtonElement>} themeButtons keyed by THEME value
+ */
+export function initTheme(themeButtons) {
+    for (const [value, button] of Object.entries(themeButtons)) {
+        buttons.set(value, button);
+        button.addEventListener('click', () => setTheme(value));
+    }
+    current = readStored();
+    darkQuery.addEventListener('change', apply);
+    apply();
+}

package/admin/js/toast.js

@@ -0,0 +1,47 @@
+/**
+ * Non-blocking notices (FRONTEND.md §2): the same shape as the modal, one
+ * helper and one root. Errors interrupt (role=alert); everything else is
+ * polite (role=status).
+ */
+
+import { byId, el } from './dom.js';
+import { TOAST_DURATION_MS } from './constants.js';
+import { t } from './i18n.js';
+
+export const TOAST_TYPE = Object.freeze({
+    SUCCESS: 'success',
+    ERROR: 'error',
+    INFO: 'info',
+});
+
+/**
+ * @param {string} message
+ * @param {string} [type]
+ */
+export function showToast(message, type = TOAST_TYPE.INFO) {
+    const toast = el('div', {
+        className: `toast toast-${type}`,
+        attrs: { role: type === TOAST_TYPE.ERROR ? 'alert' : 'status' },
+    }, [
+        el('span', { className: 'toast-prompt', text: '❯', attrs: { 'aria-hidden': 'true' } }),
+        el('span', { className: 'toast-message', text: message }),
+    ]);
+
+    const dismiss = () => {
+        toast.classList.add('toast-leaving');
+        toast.addEventListener('animationend', () => toast.remove(), { once: true });
+        // Reduced-motion users get no animation, so no animationend either.
+        setTimeout(() => toast.remove(), TOAST_DURATION_MS);
+    };
+
+    toast.append(el('button', {
+        className: 'icon-btn toast-close',
+        text: '×',
+        attrs: { type: 'button', 'aria-label': t('common.dismiss') },
+        on: { click: dismiss },
+    }));
+
+    byId('toast-root').append(toast);
+    setTimeout(dismiss, TOAST_DURATION_MS);
+    return toast;
+}

package/admin/js/viewDialogs.js

@@ -0,0 +1,224 @@
+/**
+ * Dialogs for one or many views: details, edit, and note.
+ */
+
+import { el, uniqueId } from './dom.js';
+import { openModal, VARIANT } from './modal.js';
+import { createListbox } from './listbox.js';
+import { formatDateTime, formatDuration, orNone } from './format.js';
+import { regionName } from './charts.js';
+import { valueLabel } from './overview.js';
+import { t, tOr } from './i18n.js';
+import {
+    DEVICE_SIZE_FIELD,
+    EVENT_DATA_FIELD,
+    EVENT_DATA_ROWS,
+    JSON_INDENT,
+    NOTE_ROWS,
+    TEXT_FIELDS,
+    VIEW_DETAIL_GROUPS,
+} from './constants.js';
+
+const DATE_FIELDS = new Set(['timestamp', 'adminModifiedAt', 'deletedAt']);
+
+/** Render one field of a view for reading. */
+function displayValue(field, value) {
+    if (DATE_FIELDS.has(field)) return formatDateTime(value);
+    if (field === 'isUnique') return value ? t('common.yes') : t('common.no');
+    if (value === null || value === undefined || value === '') return t('common.none');
+    if (field === 'sourceType') return tOr(`sources.${value}`, value);
+    if (field === 'deviceSize') return tOr(`deviceSizes.${value}`, value);
+    if (field === 'deviceType') return valueLabel('deviceType', value);
+    if (field === 'language') return valueLabel('language', value);
+    if (field === 'eventType') return valueLabel('eventType', value);
+    if (field === 'country') return `${regionName(value)} (${value})`;
+    if (field === 'engagedMs') return formatDuration(value);
+    if (field === 'scrollDepth') return t('details.scrolled', { percent: value });
+    if (field === EVENT_DATA_FIELD) return JSON.stringify(value, null, JSON_INDENT);
+    return orNone(value);
+}
+
+/** Read-only view of every field, grouped: the view, its page, source, visitor, engagement, and admin changes. */
+export function openDetails(view) {
+    const body = el('div', { className: 'detail-groups' }, VIEW_DETAIL_GROUPS.map((group) => {
+        const list = el('dl', { className: 'detail-list' });
+        for (const field of group.fields) {
+            const value = displayValue(field, view[field]);
+            const valueNode = field === EVENT_DATA_FIELD && view[field] !== null && view[field] !== undefined
+                ? el('pre', { className: 'detail-json', text: value })
+                : el('span', { className: 'detail-value', text: value });
+            list.append(el('dt', { text: t(`fields.${field}`) }), el('dd', {}, [valueNode]));
+        }
+        return el('section', { className: 'detail-group' }, [
+            el('h3', { className: 'detail-group-title', text: t(`details.groups.${group.key}`) }),
+            list,
+        ]);
+    }));
+    openModal({
+        title: t('details.title'),
+        body,
+        actions: [{ label: t('common.close'), variant: VARIANT.SECONDARY }],
+        wide: true,
+    });
+}
+
+/**
+ * Edit content fields of one or many views.
+ *
+ * With one view the fields start from its values and a field is included as
+ * soon as it is changed. With several, fields start empty and the admin ticks
+ * the ones to overwrite, so a batch never touches a field by accident.
+ *
+ * @param {{ views: object[], meta: object, onSubmit: (changes: object) => Promise<boolean> }} options
+ */
+export function openEditor({ views, meta, onSubmit }) {
+    const single = views.length === 1 ? views[0] : null;
+    const rows = [];
+    const controls = new Map();
+
+    for (const field of meta.editableFields) {
+        const inputId = uniqueId(`edit-${field}`);
+        const include = el('input', {
+            className: 'field-include',
+            attrs: { type: 'checkbox', 'aria-label': t('edit.include', { field: t(`fields.${field}`) }) },
+        });
+        const markIncluded = () => { include.checked = true; };
+
+        let control;
+        let read;
+        if (field === DEVICE_SIZE_FIELD) {
+            const listbox = createListbox({
+                label: t(`fields.${field}`),
+                options: meta.deviceSizes.map((size) => ({ value: size, label: tOr(`deviceSizes.${size}`, size) })),
+                value: single?.deviceSize ?? meta.deviceSizes[0],
+                onChange: markIncluded,
+            });
+            control = listbox.element;
+            read = () => ({ ok: true, value: listbox.getValue() });
+        } else if (field === EVENT_DATA_FIELD) {
+            const initial = single?.eventData === null || single?.eventData === undefined
+                ? '' : JSON.stringify(single.eventData, null, JSON_INDENT);
+            const textarea = el('textarea', {
+                className: 'input mono',
+                text: initial,
+                attrs: { id: inputId, rows: EVENT_DATA_ROWS, spellcheck: 'false' },
+                on: { input: markIncluded },
+            });
+            control = textarea;
+            read = () => {
+                const text = textarea.value.trim();
+                if (text === '') return { ok: true, value: null };
+                try {
+                    return { ok: true, value: JSON.parse(text) };
+                } catch {
+                    return { ok: false, error: t('edit.invalidJson') };
+                }
+            };
+        } else if (TEXT_FIELDS.includes(field)) {
+            const input = el('input', {
+                className: 'input',
+                attrs: {
+                    id: inputId,
+                    type: 'text',
+                    maxlength: meta.maxLength[field],
+                    value: single ? (single[field] ?? '') : '',
+                    spellcheck: 'false',
+                },
+                on: { input: markIncluded },
+            });
+            control = input;
+            read = () => ({ ok: true, value: input.value === '' ? null : input.value });
+        } else {
+            continue;
+        }
+
+        const error = el('p', { className: 'field-error', attrs: { role: 'alert' } });
+        error.hidden = true;
+        controls.set(field, { include, read, error });
+        rows.push(el('div', { className: 'edit-row' }, [
+            include,
+            el('label', { className: 'edit-label', text: t(`fields.${field}`), attrs: { for: inputId } }),
+            el('div', { className: 'edit-control' }, [control, error]),
+        ]));
+    }
+
+    const formError = el('p', { className: 'field-error', attrs: { role: 'alert' } });
+    formError.hidden = true;
+
+    const body = [
+        el('p', { className: 'modal-message', text: single ? t('edit.introSingle') : t('edit.introBatch', { count: views.length }) }),
+        el('p', { className: 'notice', text: t('edit.lockedNotice') }),
+        el('div', { className: 'edit-grid' }, rows),
+        formError,
+    ];
+
+    openModal({
+        title: single ? t('edit.titleSingle') : t('edit.titleBatch', { count: views.length }),
+        body,
+        wide: true,
+        actions: [
+            { label: t('common.cancel'), variant: VARIANT.SECONDARY },
+            {
+                label: t('edit.save'),
+                variant: VARIANT.PRIMARY,
+                onClick: async () => {
+                    const changes = {};
+                    let valid = true;
+                    for (const [field, { include, read, error }] of controls) {
+                        error.hidden = true;
+                        if (!include.checked) continue;
+                        const result = read();
+                        if (!result.ok) {
+                            error.textContent = result.error;
+                            error.hidden = false;
+                            valid = false;
+                        } else {
+                            changes[field] = result.value;
+                        }
+                    }
+                    formError.hidden = true;
+                    if (!valid) return false;
+                    if (Object.keys(changes).length === 0) {
+                        formError.textContent = t('edit.nothingSelected');
+                        formError.hidden = false;
+                        return false;
+                    }
+                    return onSubmit(changes);
+                },
+            },
+        ],
+    });
+}
+
+/**
+ * Set or clear the note on one or many views.
+ * @param {{ views: object[], meta: object, onSubmit: (note: string|null) => Promise<boolean> }} options
+ */
+export function openNoteEditor({ views, meta, onSubmit }) {
+    const single = views.length === 1 ? views[0] : null;
+    const inputId = uniqueId('note');
+    const textarea = el('textarea', {
+        className: 'input',
+        text: single?.note ?? '',
+        attrs: { id: inputId, rows: NOTE_ROWS, maxlength: meta.maxLength.note },
+    });
+
+    openModal({
+        title: single ? t('note.titleSingle') : t('note.titleBatch', { count: views.length }),
+        body: [
+            el('p', { className: 'modal-message', text: t('note.intro') }),
+            el('label', { className: 'sr-only', text: t('fields.note'), attrs: { for: inputId } }),
+            textarea,
+        ],
+        initialFocus: textarea,
+        actions: [
+            { label: t('common.cancel'), variant: VARIANT.SECONDARY },
+            { label: t('note.clear'), variant: VARIANT.SECONDARY, onClick: () => onSubmit(null) },
+            {
+                label: t('note.save'),
+                variant: VARIANT.PRIMARY,
+                onClick: () => onSubmit(textarea.value.trim() === '' ? null : textarea.value),
+            },
+        ],
+    });
+}