@harshankur/viewcounter 3.1.0 → 3.2.0

package/admin/index.html

@@ -34,19 +34,23 @@
             </svg>
             <span class="logo-text" data-i18n="app.name"></span>
             <span class="logo-badge" data-i18n="app.badge"></span>
+            <span class="version-badge" id="app-version" hidden></span>
         </div>
 
         <div class="topbar-actions">
+            <a class="header-link" id="website-link" href="https://viewcounter.harshankur.com" target="_blank"
+                rel="noopener noreferrer" data-icon="globe" data-i18n-attr="title:nav.websiteTitle"><span
+                    data-i18n="nav.website"></span></a>
             <div class="theme-switcher" role="group" data-i18n-attr="aria-label:theme.label">
-                <button class="theme-btn" id="theme-light" type="button" aria-pressed="false"
-                    data-i18n-attr="aria-label:theme.light;title:theme.light">☀️</button>
-                <button class="theme-btn" id="theme-dark" type="button" aria-pressed="false"
-                    data-i18n-attr="aria-label:theme.dark;title:theme.dark">🌙</button>
-                <button class="theme-btn" id="theme-auto" type="button" aria-pressed="false"
-                    data-i18n-attr="aria-label:theme.auto;title:theme.auto">🌓</button>
+                <button class="theme-btn" id="theme-light" type="button" aria-pressed="false" data-icon="sun"
+                    data-i18n-attr="aria-label:theme.light;title:theme.light"></button>
+                <button class="theme-btn" id="theme-dark" type="button" aria-pressed="false" data-icon="moon"
+                    data-i18n-attr="aria-label:theme.dark;title:theme.dark"></button>
+                <button class="theme-btn" id="theme-auto" type="button" aria-pressed="false" data-icon="auto"
+                    data-i18n-attr="aria-label:theme.auto;title:theme.auto"></button>
             </div>
             <button class="btn btn-secondary btn-small" id="logout-btn" type="button" hidden
-                data-i18n="nav.logout"></button>
+                data-icon="signOut"><span data-i18n="nav.logout"></span></button>
         </div>
     </nav>
 
@@ -82,6 +86,8 @@
         </section>
     </main>
 
+    <footer class="app-footer" id="app-footer" hidden></footer>
+
     <div id="modal-root" hidden></div>
     <div id="toast-root" class="toast-root"></div>
 </body>

package/admin/js/api.js

@@ -11,10 +11,31 @@ import { API_BASE, CSRF_HEADER, ERROR_CODE } from './constants.js';
 const SAFE_METHODS = new Set(['GET', 'HEAD']);
 const HTTP_NO_CONTENT = 204;
 const HTTP_UNAUTHORIZED = 401;
+const HTTP_FORBIDDEN = 403;
+/** These establish a session; failing them is an answer, not something to recover from. */
+const SESSION_PATHS = new Set(['session', 'login']);
 
 let csrfToken = null;
 const unauthenticatedListeners = new Set();
 
+/**
+ * How a failed request recovers instead of failing, set by main.js:
+ *   reauthenticate()  a sign-in dialog over the page; true once signed in again
+ *   confirmPassword() the password for an action that cannot be undone; true once confirmed
+ */
+const recovery = { reauthenticate: null, confirmPassword: null };
+/** Several requests can find the session gone at once; they share one dialog. */
+let pendingSignIn = null;
+
+export function setRecovery(handlers) {
+    Object.assign(recovery, handlers);
+}
+
+function signInAgain() {
+    pendingSignIn ??= recovery.reauthenticate().finally(() => { pendingSignIn = null; });
+    return pendingSignIn;
+}
+
 export class ApiError {
     /** @param {number} status @param {string} code @param {object} [body] */
     constructor(status, code, body = {}) {
@@ -38,7 +59,7 @@ export function setCsrfToken(token) {
  * @param {string} path relative to the API base, no leading slash
  * @param {{ body?: object, query?: Record<string, string|number|undefined> }} [options]
  */
-export async function request(method, path, { body, query } = {}) {
+export async function request(method, path, { body, query } = {}, { retried = false } = {}) {
     const params = new URLSearchParams();
     for (const [key, value] of Object.entries(query || {})) {
         if (value !== undefined && value !== null && value !== '') params.set(key, String(value));
@@ -55,11 +76,15 @@ export async function request(method, path, { body, query } = {}) {
             method,
             headers,
             credentials: 'same-origin',
+            // The API never redirects. A gateway in front of it (Cloudflare
+            // Access, say) does, to its own sign-in page, when its session ends.
+            redirect: 'manual',
             body: body === undefined ? undefined : JSON.stringify(body),
         });
     } catch {
         throw new ApiError(0, ERROR_CODE.NETWORK);
     }
+    if (response.type === 'opaqueredirect') throw new ApiError(0, ERROR_CODE.ACCESS_EXPIRED);
 
     if (response.status === HTTP_NO_CONTENT) return null;
 
@@ -72,29 +97,50 @@ export async function request(method, path, { body, query } = {}) {
 
     if (!response.ok) {
         const code = payload.code || ERROR_CODE.SERVER_ERROR;
+        const retry = () => request(method, path, { body, query }, { retried: true });
+
         if (response.status === HTTP_UNAUTHORIZED && code === ERROR_CODE.UNAUTHENTICATED) {
+            // Sign in again over the page, then carry on with this request.
+            if (!retried && !SESSION_PATHS.has(path) && recovery.reauthenticate && await signInAgain()) return retry();
             for (const listener of unauthenticatedListeners) listener();
         }
+        if (response.status === HTTP_FORBIDDEN && code === ERROR_CODE.REAUTH_REQUIRED
+            && !retried && recovery.confirmPassword && await recovery.confirmPassword()) {
+            return retry();
+        }
         throw new ApiError(response.status, code, payload);
     }
     return payload;
 }
 
+/** A listing or analysis query for the wire: breakdown filters travel as JSON. */
+function filterQuery({ where, ...query } = {}) {
+    return where && Object.keys(where).length ? { ...query, where: JSON.stringify(where) } : query;
+}
+
+const appPath = (appId, rest) => `apps/${encodeURIComponent(appId)}/${rest}`;
+
 export const api = {
     session: () => request('GET', 'session'),
     login: (password) => request('POST', 'login', { body: { password } }),
+    reauth: (password) => request('POST', 'reauth', { body: { password } }),
     logout: () => request('POST', 'logout'),
     meta: () => request('GET', 'meta'),
     apps: () => request('GET', 'apps'),
-    views: (appId, query) => request('GET', `apps/${encodeURIComponent(appId)}/views`, { query }),
-    allViews: (query) => request('GET', 'views', { query }),
-    analytics: (appId, query) => request('GET', `apps/${encodeURIComponent(appId)}/analytics`, { query }),
-    analyticsAll: (query) => request('GET', 'analytics', { query }),
+    views: (appId, query) => request('GET', appPath(appId, 'views'), { query: filterQuery(query) }),
+    allViews: (query) => request('GET', 'views', { query: filterQuery(query) }),
+    analytics: (appId, query) => request('GET', appPath(appId, 'analytics'), { query: filterQuery(query) }),
+    analyticsAll: (query) => request('GET', 'analytics', { query: filterQuery(query) }),
+    eventTypes: (appId, query) => request('GET', appPath(appId, 'event-types'), { query }),
+    eventTypesAll: (query) => request('GET', 'event-types', { query }),
+    realtime: (appId) => request('GET', appPath(appId, 'realtime')),
+    realtimeAll: () => request('GET', 'realtime'),
     edit: (appId, ids, changes) => request('PATCH', `apps/${encodeURIComponent(appId)}/views`, { body: { ids, changes } }),
     note: (appId, ids, note) => request('PUT', `apps/${encodeURIComponent(appId)}/views/note`, { body: { ids, note } }),
     remove: (appId, ids) => request('POST', `apps/${encodeURIComponent(appId)}/views/delete`, { body: { ids } }),
     restore: (appId, ids) => request('POST', `apps/${encodeURIComponent(appId)}/views/restore`, { body: { ids } }),
     purge: (appId, ids) => request('POST', `apps/${encodeURIComponent(appId)}/views/purge`, { body: { ids } }),
     adminLog: (query) => request('GET', 'logs/admin', { query }),
-    viewLog: (query) => request('GET', 'logs/views', { query }),
+    trackingLog: (query) => request('GET', 'logs/tracking', { query }),
+    trackingSummary: (query) => request('GET', 'logs/tracking/summary', { query }),
 };

package/admin/js/appTabs.js

@@ -0,0 +1,100 @@
+/**
+ * The app tabs: one per app, led by one for every app together. Overview,
+ * Views, and Trash each show a strip, and all three follow the same choice:
+ * switching in one switches the others.
+ *
+ * ARIA tabs pattern with automatic activation: arrow keys, Home and End move
+ * and select.
+ */
+
+import { el, replaceChildren } from './dom.js';
+import { formatNumber } from './format.js';
+import { t } from './i18n.js';
+import { ALL_APPS, KEY } from './constants.js';
+
+/**
+ * Every app, led by one entry for all of them together.
+ * @param {object[]} apps as GET api/apps lists them
+ */
+export function appEntries(apps) {
+    const sum = (key) => apps.reduce((total, app) => total + app[key], 0);
+    return [
+        {
+            appId: ALL_APPS,
+            label: t('appTabs.all'),
+            active: sum('active'),
+            deleted: sum('deleted'),
+            modified: sum('modified'),
+            available: true,
+        },
+        ...apps.map((app) => ({ ...app, label: app.appId })),
+    ];
+}
+
+/**
+ * @param {{ context: { apps: () => object[], appId: () => string, setAppId: (id: string) => void },
+ *   controls: string, trash?: boolean }} options controls is the id of the region the tabs switch
+ * @returns {{ element: HTMLElement, render: () => void }}
+ */
+export function createAppTabs({ context, controls, trash = false }) {
+    const element = el('div', {
+        className: 'app-tabs',
+        attrs: { role: 'tablist', 'aria-label': t('appTabs.label') },
+    });
+    let focusOnRender = false;
+
+    function select(appId, { focus = false } = {}) {
+        focusOnRender = focus;
+        if (appId === context.appId()) {
+            render();
+            return;
+        }
+        context.setAppId(appId);
+    }
+
+    function render() {
+        const current = context.appId();
+        replaceChildren(element, appEntries(context.apps()).map((app) => {
+            const selected = app.appId === current;
+            const count = trash ? app.deleted : app.active;
+            const countText = t(trash ? 'appTabs.deletedCount' : 'appTabs.activeCount', { count });
+            return el('button', {
+                className: `app-tab${selected ? ' active' : ''}${app.available ? '' : ' unavailable'}`,
+                attrs: {
+                    type: 'button',
+                    role: 'tab',
+                    'aria-selected': String(selected),
+                    'aria-controls': controls,
+                    'aria-label': t('appTabs.tabName', { app: app.label, count: countText }),
+                    tabindex: selected ? '0' : '-1',
+                    title: app.available ? null : t('appTabs.unavailable', { app: app.appId }),
+                },
+                dataset: { appId: app.appId },
+                on: { click: () => select(app.appId) },
+            }, [
+                el('span', { className: 'app-tab-name', text: app.label }),
+                el('span', { className: 'app-tab-count', text: formatNumber(count), attrs: { 'aria-hidden': 'true' } }),
+            ]);
+        }));
+        if (focusOnRender) {
+            element.querySelector('[aria-selected="true"]')?.focus();
+            focusOnRender = false;
+        }
+    }
+
+    element.addEventListener('keydown', (event) => {
+        const ids = appEntries(context.apps()).map((app) => app.appId);
+        const index = Math.max(0, ids.indexOf(context.appId()));
+        const moves = {
+            [KEY.ARROW_RIGHT]: (index + 1) % ids.length,
+            [KEY.ARROW_LEFT]: (index - 1 + ids.length) % ids.length,
+            [KEY.HOME]: 0,
+            [KEY.END]: ids.length - 1,
+        };
+        if (!(event.key in moves)) return;
+        event.preventDefault();
+        select(ids[moves[event.key]], { focus: true });
+    });
+
+    return { element, render };
+}