@harshankur/viewcounter 3.0.1 → 3.1.0

package/admin/js/listbox.js

@@ -0,0 +1,144 @@
+/**
+ * A select replacement (FRONTEND.md §0, §7): a button that opens a listbox the
+ * page renders itself, so it can be styled and behaves identically on every
+ * machine.
+ *
+ * ARIA listbox pattern: the button has aria-haspopup/aria-expanded; the
+ * options carry role=option and aria-selected; the active option is announced
+ * through aria-activedescendant. Keyboard: ArrowUp/ArrowDown move, Home/End
+ * jump, Enter/Space commit, Escape and Tab close.
+ */
+
+import { el, clear, uniqueId } from './dom.js';
+import { KEY } from './constants.js';
+
+/**
+ * @param {{ label: string, options: Array<{value: string, label: string}>, value?: string,
+ *   onChange?: (value: string) => void, className?: string }} config
+ * @returns {{ element: HTMLElement, getValue: () => string, setValue: (value: string) => void,
+ *   setOptions: (options: Array<{value: string, label: string}>, value?: string) => void }}
+ */
+export function createListbox({ label, options, value, onChange = () => {}, className = '' }) {
+    const listId = uniqueId('listbox');
+    let items = options;
+    let selected = value ?? options[0]?.value;
+    let activeIndex = -1;
+
+    const valueText = el('span', { className: 'listbox-value' });
+    const button = el('button', {
+        className: 'listbox-button',
+        attrs: { type: 'button', 'aria-haspopup': 'listbox', 'aria-expanded': 'false', 'aria-label': label },
+    }, [valueText, el('span', { className: 'listbox-caret', text: '▾', attrs: { 'aria-hidden': 'true' } })]);
+
+    const list = el('ul', {
+        className: 'listbox-popup',
+        attrs: { role: 'listbox', id: listId, tabindex: '-1', 'aria-label': label },
+    });
+    list.hidden = true;
+    button.setAttribute('aria-controls', listId);
+
+    const wrapper = el('div', { className: `listbox ${className}`.trim() }, [button, list]);
+
+    const labelOf = (v) => items.find((item) => item.value === v)?.label ?? '';
+
+    function render() {
+        valueText.textContent = labelOf(selected);
+        clear(list);
+        items.forEach((item, index) => {
+            const isSelected = item.value === selected;
+            list.append(el('li', {
+                className: `listbox-option${index === activeIndex ? ' active' : ''}`,
+                text: item.label,
+                attrs: { role: 'option', id: `${listId}-${index}`, 'aria-selected': String(isSelected) },
+                on: {
+                    mousedown: (event) => event.preventDefault(),
+                    click: () => commit(index),
+                },
+            }));
+        });
+        if (activeIndex >= 0) list.setAttribute('aria-activedescendant', `${listId}-${activeIndex}`);
+        else list.removeAttribute('aria-activedescendant');
+    }
+
+    function isOpen() {
+        return !list.hidden;
+    }
+
+    function open() {
+        if (isOpen()) return;
+        activeIndex = Math.max(0, items.findIndex((item) => item.value === selected));
+        list.hidden = false;
+        button.setAttribute('aria-expanded', 'true');
+        render();
+        list.focus();
+        list.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
+        document.addEventListener('mousedown', onOutside, true);
+    }
+
+    function close({ refocus = true } = {}) {
+        if (!isOpen()) return;
+        list.hidden = true;
+        button.setAttribute('aria-expanded', 'false');
+        activeIndex = -1;
+        document.removeEventListener('mousedown', onOutside, true);
+        if (refocus) button.focus();
+    }
+
+    function commit(index) {
+        const item = items[index];
+        if (!item) return;
+        const changed = item.value !== selected;
+        selected = item.value;
+        close();
+        render();
+        if (changed) onChange(selected);
+    }
+
+    function move(index) {
+        activeIndex = Math.min(Math.max(index, 0), items.length - 1);
+        render();
+        list.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
+    }
+
+    function onOutside(event) {
+        if (!wrapper.contains(event.target)) close({ refocus: false });
+    }
+
+    button.addEventListener('click', () => (isOpen() ? close() : open()));
+    button.addEventListener('keydown', (event) => {
+        if (event.key === KEY.ARROW_DOWN || event.key === KEY.ARROW_UP) {
+            event.preventDefault();
+            open();
+        }
+    });
+
+    list.addEventListener('keydown', (event) => {
+        switch (event.key) {
+            case KEY.ARROW_DOWN: event.preventDefault(); move(activeIndex + 1); break;
+            case KEY.ARROW_UP: event.preventDefault(); move(activeIndex - 1); break;
+            case KEY.HOME: event.preventDefault(); move(0); break;
+            case KEY.END: event.preventDefault(); move(items.length - 1); break;
+            case KEY.ENTER:
+            case KEY.SPACE: event.preventDefault(); commit(activeIndex); break;
+            case KEY.ESCAPE: event.preventDefault(); event.stopPropagation(); close(); break;
+            case KEY.TAB: close({ refocus: false }); break;
+            default: break;
+        }
+    });
+
+    render();
+
+    return {
+        element: wrapper,
+        getValue: () => selected,
+        setValue(next) {
+            selected = next;
+            render();
+        },
+        setOptions(nextOptions, nextValue) {
+            items = nextOptions;
+            selected = nextValue ?? (items.some((item) => item.value === selected) ? selected : items[0]?.value);
+            render();
+        },
+    };
+}

package/admin/js/logs.js

@@ -0,0 +1,167 @@
+/**
+ * The admin operation log and the view register log. Both are read-only here:
+ * the UI has no way to alter a log entry, and neither does the API.
+ */
+
+import { api } from './api.js';
+import { clampText } from './clamp.js';
+import { el, replaceChildren } from './dom.js';
+import { formatNumber, orNone } from './format.js';
+import { t, tOr } from './i18n.js';
+import { createListbox } from './listbox.js';
+import { createPager, headerCell, messageRow, timeCell } from './table.js';
+
+/** Sentinel for "no filter" in a filter listbox. */
+const ALL = '';
+
+function filterListbox(label, allLabel, values, labelFor, onChange) {
+    return createListbox({
+        label,
+        options: [{ value: ALL, label: allLabel }, ...values.map((value) => ({ value, label: labelFor(value) }))],
+        value: ALL,
+        onChange,
+    });
+}
+
+/**
+ * A paged, filterable, read-only log table, optionally with a notice above it.
+ * @param {{ title: string, columns: string[], filters: object[], fetchPage: (query: object) => Promise<object>,
+ *   renderRow: (entry: object) => HTMLElement, meta: object, reportError: (error: unknown) => void,
+ *   emptyKey: string, notice?: string }} options
+ */
+function createLogPanel({ title, columns, filters, fetchPage, renderRow, meta, reportError, emptyKey, notice }) {
+    const state = { page: 1, pageSize: meta.pageSizeDefault, total: 0, entries: [], query: {}, seq: 0 };
+
+    const tbody = el('tbody');
+    const table = el('table', { className: 'data-table log-table' }, [
+        el('thead', {}, [el('tr', {}, columns.map((key) => headerCell({ label: t(`logColumns.${key}`), className: `col-${key}` })))]),
+        tbody,
+    ]);
+    const pager = createPager((page) => {
+        state.page = page;
+        load();
+    });
+
+    const toolbar = el('div', { className: 'toolbar' }, [
+        el('div', { className: 'toolbar-group' }, filters.map((filter) => filter.listbox.element)),
+    ]);
+
+    const element = el('section', { className: 'panel', attrs: { 'aria-label': title } }, [
+        toolbar,
+        notice ? el('p', { className: 'notice', text: notice }) : null,
+        el('div', { className: 'table-wrap' }, [table]),
+        pager.element,
+    ]);
+
+    async function load() {
+        const seq = ++state.seq;
+        table.setAttribute('aria-busy', 'true');
+        try {
+            const result = await fetchPage({ ...state.query, page: state.page, pageSize: state.pageSize });
+            if (seq !== state.seq) return;
+            state.entries = result.entries;
+            state.total = result.total;
+            replaceChildren(tbody, state.entries.length
+                ? state.entries.map(renderRow)
+                : [messageRow(columns.length, t(emptyKey))]);
+            pager.update(state.page, state.pageSize, state.total);
+        } catch (error) {
+            if (seq === state.seq) reportError(error);
+        } finally {
+            if (seq === state.seq) table.removeAttribute('aria-busy');
+        }
+    }
+
+    for (const filter of filters) {
+        filter.onValue = (value) => {
+            state.query[filter.param] = value || undefined;
+            state.page = 1;
+            load();
+        };
+    }
+
+    return { element, load };
+}
+
+/**
+ * @param {{ meta: object, appIds: () => string[], reportError: (error: unknown) => void }} deps
+ */
+export function createAdminLogPanel({ meta, appIds, reportError }) {
+    const filters = [];
+    const actionFilter = { param: 'action' };
+    actionFilter.listbox = filterListbox(t('logs.filterAction'), t('logs.allActions'), meta.actions,
+        (action) => tOr(`actions.${action}`, action), (value) => actionFilter.onValue(value));
+    const appFilter = { param: 'appId' };
+    appFilter.listbox = filterListbox(t('logs.filterApp'), t('logs.allApps'), appIds(), (id) => id,
+        (value) => appFilter.onValue(value));
+    filters.push(actionFilter, appFilter);
+
+    const renderRow = (entry) => el('tr', {}, [
+        timeCell(entry.createdAt, { seconds: true }),
+        el('td', { className: 'col-action' }, [clampText(tOr(`actions.${entry.action}`, entry.action))]),
+        el('td', { className: 'col-app' }, [clampText(orNone(entry.appId))]),
+        el('td', { className: 'col-rows' }, [clampText(formatNumber(entry.targetCount))]),
+        el('td', { className: 'col-fields' }, [clampText(
+            entry.fields.length ? entry.fields.map((field) => tOr(`fields.${field}`, field)).join(', ') : t('common.none'),
+        )]),
+        el('td', { className: 'col-session' }, [clampText(entry.sessionId ? entry.sessionId.slice(0, 8) : t('logs.system'), {
+            className: 'mono',
+        })]),
+        el('td', { className: 'col-ip' }, [clampText(orNone(entry.maskedIp), { className: 'mono' })]),
+    ]);
+
+    const panel = createLogPanel({
+        title: t('tabs.adminLog'),
+        columns: ['time', 'action', 'app', 'rows', 'fields', 'session', 'ip'],
+        filters,
+        fetchPage: api.adminLog,
+        renderRow,
+        meta,
+        reportError,
+        emptyKey: 'logs.emptyAdmin',
+    });
+    return panel;
+}
+
+/**
+ * Why old entries leave the view log. Empty when the host did not say (an
+ * embedding app that configures no retention), so the UI never guesses.
+ * @param {number|undefined} days
+ */
+function viewLogNotice(days) {
+    if (typeof days !== 'number') return '';
+    return days > 0 ? t('logs.viewLogRetention', { count: days }) : t('logs.viewLogRetentionOff');
+}
+
+/**
+ * @param {{ meta: object, appIds: () => string[], reportError: (error: unknown) => void }} deps
+ */
+export function createViewLogPanel({ meta, appIds, reportError }) {
+    const sourceFilter = { param: 'source' };
+    sourceFilter.listbox = filterListbox(t('logs.filterSource'), t('logs.allSources'), meta.sources,
+        (source) => tOr(`logSources.${source}`, source), (value) => sourceFilter.onValue(value));
+    const appFilter = { param: 'appId' };
+    appFilter.listbox = filterListbox(t('logs.filterApp'), t('logs.allApps'), appIds(), (id) => id,
+        (value) => appFilter.onValue(value));
+
+    const renderRow = (entry) => el('tr', {}, [
+        timeCell(entry.createdAt, { seconds: true }),
+        el('td', { className: 'col-app' }, [clampText(entry.appId)]),
+        el('td', { className: 'col-source' }, [clampText(tOr(`logSources.${entry.source}`, entry.source))]),
+        el('td', { className: 'col-event' }, [clampText(orNone(entry.eventType))]),
+        el('td', { className: 'col-unique' }, [clampText(entry.isUnique ? t('common.yes') : t('common.no'))]),
+        el('td', { className: 'col-view' }, [clampText(entry.viewId, { className: 'mono' })]),
+    ]);
+
+    return createLogPanel({
+        title: t('tabs.viewLog'),
+        columns: ['time', 'app', 'source', 'event', 'unique', 'view'],
+        filters: [sourceFilter, appFilter],
+        fetchPage: api.viewLog,
+        renderRow,
+        meta,
+        reportError,
+        emptyKey: 'logs.emptyViews',
+        notice: viewLogNotice(meta.viewLogRetentionDays),
+    });
+}

package/admin/js/main.js

@@ -0,0 +1,235 @@
+/**
+ * Admin UI entry point: session check, login, tabs, and wiring.
+ */
+
+import { api, ApiError, onUnauthenticated, setCsrfToken } from './api.js';
+import { byId, el, replaceChildren } from './dom.js';
+import { applyTranslations, loadLocale, t } from './i18n.js';
+import { createAdminLogPanel, createViewLogPanel } from './logs.js';
+import { closeModal } from './modal.js';
+import { initTheme } from './theme.js';
+import { showToast, TOAST_TYPE } from './toast.js';
+import { createViewsPanel, PANEL_MODE } from './views.js';
+import { ALL_APPS, ERROR_CODE, KEY, STORAGE_KEY, TAB, THEME } from './constants.js';
+
+const TAB_ORDER = [TAB.VIEWS, TAB.TRASH, TAB.ADMIN_LOG, TAB.VIEW_LOG];
+
+const shell = {
+    meta: null,
+    apps: [],
+    appId: null,
+    panels: new Map(),
+    activeTab: TAB.VIEWS,
+    tabButtons: new Map(),
+};
+
+/** Translate any failure into a message and show it. */
+function reportError(error) {
+    const code = error instanceof ApiError ? error.code : ERROR_CODE.SERVER_ERROR;
+    if (code === ERROR_CODE.UNAUTHENTICATED) return;
+    showToast(t(`errors.${code}`), TOAST_TYPE.ERROR);
+}
+
+function readLastApp() {
+    try {
+        return localStorage.getItem(STORAGE_KEY.LAST_APP);
+    } catch {
+        return null;
+    }
+}
+
+function rememberApp(appId) {
+    try {
+        localStorage.setItem(STORAGE_KEY.LAST_APP, appId);
+    } catch {
+        // Storage blocked: the choice simply is not remembered.
+    }
+}
+
+// ---- Login ------------------------------------------------------------------
+
+function showLogin(messageKey) {
+    closeModal();
+    byId('app-screen').hidden = true;
+    byId('logout-btn').hidden = true;
+    byId('login-screen').hidden = false;
+    const error = byId('login-error');
+    error.hidden = !messageKey;
+    error.textContent = messageKey ? t(messageKey) : '';
+    const input = byId('login-password');
+    input.value = '';
+    input.focus();
+}
+
+function wireLogin() {
+    const form = byId('login-form');
+    const submit = byId('login-submit');
+    form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const password = byId('login-password').value;
+        if (!password) return;
+        submit.disabled = true;
+        try {
+            const session = await api.login(password);
+            setCsrfToken(session.csrfToken);
+            await enterApp();
+        } catch (error) {
+            const code = error instanceof ApiError ? error.code : ERROR_CODE.SERVER_ERROR;
+            showLogin(`errors.${code}`);
+        } finally {
+            submit.disabled = false;
+        }
+    });
+}
+
+// ---- App shell --------------------------------------------------------------
+
+async function refreshApps() {
+    const { apps } = await api.apps();
+    shell.apps = apps;
+    for (const panel of shell.panels.values()) panel.syncApps?.();
+}
+
+function setAppId(appId) {
+    shell.appId = appId;
+    rememberApp(appId);
+    for (const tab of [TAB.VIEWS, TAB.TRASH]) {
+        const panel = shell.panels.get(tab);
+        panel.syncApps();
+        panel.reload();
+    }
+}
+
+function selectTab(tab, { focus = false } = {}) {
+    shell.activeTab = TAB_ORDER.includes(tab) ? tab : TAB.VIEWS;
+    for (const [key, button] of shell.tabButtons) {
+        const active = key === shell.activeTab;
+        button.setAttribute('aria-selected', String(active));
+        button.tabIndex = active ? 0 : -1;
+        button.classList.toggle('active', active);
+        if (active && focus) button.focus();
+    }
+    for (const [key, panel] of shell.panels) panel.element.hidden = key !== shell.activeTab;
+
+    const panel = shell.panels.get(shell.activeTab);
+    if (shell.activeTab === TAB.ADMIN_LOG || shell.activeTab === TAB.VIEW_LOG) panel.load();
+    else panel.refresh();
+
+    if (window.location.hash !== `#${shell.activeTab}`) {
+        history.replaceState(null, '', `#${shell.activeTab}`);
+    }
+}
+
+function buildTabs() {
+    const tablist = byId('tabs');
+    const buttons = TAB_ORDER.map((tab) => {
+        const button = el('button', {
+            className: 'tab',
+            attrs: { type: 'button', role: 'tab', id: `tab-${tab}`, 'aria-controls': `panel-${tab}` },
+            on: { click: () => selectTab(tab) },
+        }, [
+            el('span', { className: 'prompt-char', text: '❯', attrs: { 'aria-hidden': 'true' } }),
+            el('span', { text: t(`tabs.${tab}`) }),
+        ]);
+        shell.tabButtons.set(tab, button);
+        return button;
+    });
+
+    // Arrow keys move between tabs (ARIA tabs pattern).
+    tablist.addEventListener('keydown', (event) => {
+        const index = TAB_ORDER.indexOf(shell.activeTab);
+        if (event.key === KEY.ARROW_RIGHT) selectTab(TAB_ORDER[(index + 1) % TAB_ORDER.length], { focus: true });
+        if (event.key === KEY.ARROW_LEFT) selectTab(TAB_ORDER[(index - 1 + TAB_ORDER.length) % TAB_ORDER.length], { focus: true });
+    });
+    replaceChildren(tablist, buttons);
+}
+
+function buildPanels() {
+    const context = {
+        apps: () => shell.apps,
+        appId: () => shell.appId,
+        setAppId,
+        refreshApps,
+        reportError,
+    };
+    const appIds = () => shell.apps.map((app) => app.appId);
+
+    shell.panels.set(TAB.VIEWS, createViewsPanel({ mode: PANEL_MODE.VIEWS, meta: shell.meta, context }));
+    shell.panels.set(TAB.TRASH, createViewsPanel({ mode: PANEL_MODE.TRASH, meta: shell.meta, context }));
+    shell.panels.set(TAB.ADMIN_LOG, createAdminLogPanel({ meta: shell.meta, appIds, reportError }));
+    shell.panels.set(TAB.VIEW_LOG, createViewLogPanel({ meta: shell.meta, appIds, reportError }));
+
+    const container = byId('panels');
+    replaceChildren(container, TAB_ORDER.map((tab) => {
+        const panel = shell.panels.get(tab);
+        panel.element.id = `panel-${tab}`;
+        panel.element.setAttribute('role', 'tabpanel');
+        panel.element.setAttribute('aria-labelledby', `tab-${tab}`);
+        return panel.element;
+    }));
+}
+
+async function enterApp() {
+    shell.meta = await api.meta();
+    const { apps } = await api.apps();
+    shell.apps = apps;
+    // Every app together by default; a remembered app wins while it still exists.
+    const remembered = readLastApp();
+    shell.appId = apps.some((app) => app.appId === remembered) ? remembered : ALL_APPS;
+
+    buildTabs();
+    buildPanels();
+    for (const tab of [TAB.VIEWS, TAB.TRASH]) shell.panels.get(tab).syncApps();
+
+    byId('login-screen').hidden = true;
+    byId('app-screen').hidden = false;
+    byId('logout-btn').hidden = false;
+
+    selectTab(window.location.hash.slice(1));
+}
+
+async function logout() {
+    try {
+        await api.logout();
+    } catch (error) {
+        reportError(error);
+    }
+    setCsrfToken(null);
+    showLogin('login.signedOut');
+}
+
+// ---- Boot -------------------------------------------------------------------
+
+async function boot() {
+    await loadLocale();
+    applyTranslations();
+    document.title = t('app.documentTitle');
+
+    initTheme({
+        [THEME.LIGHT]: byId('theme-light'),
+        [THEME.DARK]: byId('theme-dark'),
+        [THEME.AUTO]: byId('theme-auto'),
+    });
+    wireLogin();
+    byId('logout-btn').addEventListener('click', logout);
+    onUnauthenticated(() => {
+        setCsrfToken(null);
+        showLogin('errors.UNAUTHENTICATED');
+    });
+
+    try {
+        const session = await api.session();
+        if (session.authenticated) {
+            setCsrfToken(session.csrfToken);
+            await enterApp();
+        } else {
+            showLogin();
+        }
+    } catch (error) {
+        showLogin(`errors.${error instanceof ApiError ? error.code : ERROR_CODE.SERVER_ERROR}`);
+    } finally {
+        document.body.classList.remove('booting');
+    }
+}
+
+boot();