@ghub/identity-chrome 0.0.0-stage → 0.2.0

package/dist/core.js

@@ -0,0 +1,248 @@
+"use strict";
+/**
+ * The browser half: what the header controls know, and what they keep.
+ *
+ * It owns no markup. The apps picker and the account popup draw from `state()`
+ * and ask it to `load()`, which is what keeps one fetch, one cache and one
+ * failure story behind both controls.
+ *
+ * **Off unless enabled, and off means silent.** Nothing is fetched, nothing is
+ * read from storage and nothing is written, so a self-hosted installation that
+ * never sets `enabled` makes no call to anybody.
+ *
+ * **A cached list paints at once.** The last answer is drawn while a fresh one is
+ * fetched, and kept if the fetch fails, marked `stale`. It is thirty days old at
+ * most and is checked as hard as a fresh answer, because storage is something
+ * anybody on the device can write.
+ *
+ * **The product's own route is the personal half.** The product's server holds the
+ * secret token and says who is signed in; this only ever calls that route, same
+ * origin, with the page's own cookie. The public key, if one is given, fetches
+ * the lower group straight from Identity so it can paint before the product has
+ * answered, and nothing more.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TIMEOUT_MS = exports.CACHE_MAX_AGE_MS = exports.CACHE_KEY = void 0;
+exports.createChromeCore = createChromeCore;
+const validate_js_1 = require("./validate.js");
+exports.CACHE_KEY = "gpid.chrome.v1";
+/** A list older than this is not drawn, however the fetch fares. */
+exports.CACHE_MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000;
+exports.DEFAULT_TIMEOUT_MS = 5000;
+const NO_PERSON = { hasIdentity: false, avatarUrl: null, tint: null };
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function createChromeCore(options = {}) {
+    const enabled = options.enabled === true;
+    const now = options.now ?? Date.now;
+    const timeoutMs = options.timeoutMs ?? exports.DEFAULT_TIMEOUT_MS;
+    const storage = options.storage ?? null;
+    const cacheKey = options.cacheKey ?? exports.CACHE_KEY;
+    let state = {
+        status: enabled ? "idle" : "off",
+        view: null,
+        updatedAt: null,
+        error: null,
+    };
+    const listeners = new Set();
+    let inFlight = null;
+    let controller = null;
+    let disposed = false;
+    function set(next) {
+        if (disposed)
+            return;
+        state = { ...state, ...next };
+        for (const listener of [...listeners]) {
+            try {
+                listener(state);
+            }
+            catch {
+                // One listener's fault is not another's.
+            }
+        }
+    }
+    function readCache() {
+        if (storage === null)
+            return null;
+        try {
+            const raw = storage.getItem(cacheKey);
+            if (raw === null)
+                return null;
+            const parsed = JSON.parse(raw);
+            if (!isRecord(parsed) || typeof parsed["savedAt"] !== "number")
+                return null;
+            const savedAt = parsed["savedAt"];
+            // Too old, or dated in the future, which only somebody editing it would do.
+            if (now() - savedAt > exports.CACHE_MAX_AGE_MS || savedAt > now() + 60_000)
+                return null;
+            const view = (0, validate_js_1.parseView)(parsed["view"]);
+            return view === null ? null : { view, savedAt };
+        }
+        catch {
+            return null;
+        }
+    }
+    function writeCache(view, savedAt) {
+        if (storage === null)
+            return;
+        try {
+            storage.setItem(cacheKey, JSON.stringify({ v: 1, savedAt, view }));
+        }
+        catch {
+            // Full, blocked or private: the controls work without it.
+        }
+    }
+    async function getJson(url, init, signal) {
+        const send = options.fetch ?? globalThis.fetch.bind(globalThis);
+        const response = await send(url, { ...init, signal });
+        if (!response.ok)
+            throw new Error(`status ${String(response.status)}`);
+        try {
+            return await response.json();
+        }
+        catch {
+            throw new Error("invalid answer");
+        }
+    }
+    async function fetchPersonal(endpoint, signal) {
+        const body = await getJson(endpoint, { method: "GET", headers: { accept: "application/json" }, credentials: "same-origin" }, signal);
+        const view = (0, validate_js_1.parseView)(body);
+        if (view === null)
+            throw new Error("invalid answer");
+        return view;
+    }
+    async function fetchPublic(baseUrl, key, signal) {
+        const url = `${baseUrl.replace(/\/+$/u, "")}/api/v1/chrome/public`;
+        const body = await getJson(url, {
+            method: "GET",
+            headers: { accept: "application/json", "x-gpid-key": key },
+            credentials: "omit",
+        }, signal);
+        const view = (0, validate_js_1.parsePublicView)(body);
+        if (view === null)
+            throw new Error("invalid answer");
+        return view;
+    }
+    function reasonOf(error, timedOut) {
+        if (timedOut)
+            return "timeout";
+        if (error instanceof Error && /^(status \d+|invalid answer)$/u.test(error.message))
+            return error.message;
+        return "network";
+    }
+    async function run() {
+        const cached = readCache();
+        set({
+            status: "loading",
+            view: cached?.view ?? state.view,
+            updatedAt: cached?.savedAt ?? state.updatedAt,
+            error: null,
+        });
+        const own = new AbortController();
+        controller = own;
+        let timedOut = false;
+        const timer = setTimeout(() => {
+            timedOut = true;
+            own.abort();
+        }, timeoutMs);
+        try {
+            const personalCall = options.endpoint === undefined
+                ? Promise.resolve(null)
+                : fetchPersonal(options.endpoint, own.signal);
+            const publicCall = options.baseUrl === undefined || options.publicKey === undefined
+                ? Promise.resolve(null)
+                : fetchPublic(options.baseUrl, options.publicKey, own.signal);
+            // The lower group paints as soon as it is back, when nothing else is on screen yet.
+            void publicCall
+                .then((pub) => {
+                if (pub !== null && state.status === "loading" && state.view === null) {
+                    set({
+                        view: {
+                            person: NO_PERSON,
+                            yours: [],
+                            identity: null,
+                            more: pub.more,
+                            legal: pub.legal,
+                        },
+                    });
+                }
+            })
+                .catch(() => undefined);
+            const [personal, pub] = await Promise.allSettled([personalCall, publicCall]);
+            const publicHalf = pub.status === "fulfilled" ? pub.value : null;
+            if (personal.status === "fulfilled" && personal.value !== null) {
+                const at = now();
+                writeCache(personal.value, at);
+                set({ status: "ready", view: personal.value, updatedAt: at, error: null });
+                return state;
+            }
+            if (personal.status === "fulfilled" && publicHalf !== null) {
+                // No personal route configured: the public group is the whole answer.
+                set({
+                    status: "ready",
+                    view: { person: NO_PERSON, yours: [], identity: null, ...publicHalf },
+                    updatedAt: now(),
+                    error: null,
+                });
+                return state;
+            }
+            const error = personal.status === "rejected" ? reasonOf(personal.reason, timedOut) : "not configured";
+            if (cached !== null) {
+                set({ status: "stale", view: cached.view, updatedAt: cached.savedAt, error });
+            }
+            else if (publicHalf !== null) {
+                set({
+                    status: "error",
+                    view: { person: NO_PERSON, yours: [], identity: null, ...publicHalf },
+                    updatedAt: null,
+                    error,
+                });
+            }
+            else {
+                set({ status: "error", view: null, updatedAt: null, error });
+            }
+            return state;
+        }
+        finally {
+            clearTimeout(timer);
+            if (controller === own)
+                controller = null;
+        }
+    }
+    return {
+        state: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        load() {
+            if (!enabled || disposed)
+                return Promise.resolve(state);
+            inFlight ??= run().finally(() => {
+                inFlight = null;
+            });
+            return inFlight;
+        },
+        clear() {
+            if (storage !== null) {
+                try {
+                    storage.removeItem(cacheKey);
+                }
+                catch {
+                    // Nothing to forget that could be read.
+                }
+            }
+            if (enabled)
+                set({ status: "idle", view: null, updatedAt: null, error: null });
+        },
+        dispose() {
+            disposed = true;
+            controller?.abort();
+            listeners.clear();
+        },
+    };
+}
+//# sourceMappingURL=core.js.map

package/dist/elements/account.d.ts

@@ -0,0 +1,96 @@
+/**
+ * `<gp-account>`, the account popup (GPlatform Identity, sheet 32, option A).
+ *
+ * An avatar at the right end of a product's top bar and, under it, a card on a
+ * tinted ground: who is signed in, where their Identity account is, which
+ * organisation they are acting in, and how to sign out of this product and
+ * only this product (D21).
+ *
+ * **Most of what it shows is the product's.** The name, the address, the
+ * organisations and both actions are properties the product sets from its own
+ * session. Identity adds the picture, the tint, its own two links and the
+ * footer, through the same core as `<gp-apps>`, so the popup still signs
+ * somebody out while Identity cannot be reached.
+ *
+ * **What it is to assistive technology:**
+ *
+ * - The trigger is a `button` with `aria-haspopup="dialog"`, named "Account:
+ *   Mira Kessler", with the same words as a tooltip on hover and on focus after
+ *   half a second, which Escape dismisses without closing anything else (1.4.13).
+ * - The popup is a `dialog` labelled by the person's name and described by their
+ *   address, not modal. Below 600 wide it is a modal sheet with a scrim and a
+ *   contained focus loop, as the picker is.
+ * - Focus opens on the pill (Manage your Identity account, or Set up your
+ *   Identity), else the active organisation, else Sign out. The close button is
+ *   a stop and never the first one.
+ * - The organisations are a `radiogroup`, one tab stop, Up and Down moving
+ *   between them. Choosing is Space or Enter and never an arrow, because
+ *   choosing switches the product: it closes the popup and announces
+ *   "Switched to ...". Five show; "Show all" opens the rest in place, scrolling
+ *   inside, and focus lands on the row that took its place.
+ * - Signing out goes busy in place. A failure keeps the popup open, says in one
+ *   sentence that the person is still signed in, and turns the row into Try
+ *   again. It never claims to have signed out.
+ *
+ * **Hidden for now (D20):** the other accounts and "Add another account" are
+ * not drawn until Identity holds several sessions in one browser and products
+ * sign in through it, and no product can switch them on.
+ *
+ * The words are English by default and every one can be replaced (`labels`).
+ */
+export type OrganisationRole = "owner" | "admin" | "member";
+/** Who is signed in, from the product's own session. */
+export interface AccountPerson {
+    name: string;
+    email: string;
+    /** The product's own stable id for this person: it picks the tint where they have no Identity. Never shown. */
+    id?: string;
+    /** The product's own picture, drawn where Identity has none. */
+    avatarUrl?: string | null;
+}
+/** An organisation the person can act in, as the product or Identity passes it (D24, D33). */
+export interface AccountOrganisation {
+    id: string;
+    name: string;
+    role: OrganisationRole;
+    active: boolean;
+}
+/** Signs the person out of this product. Rejecting means they are still signed in. */
+export type SignOutHandler = () => unknown;
+/** Switches the product to this organisation. Rejecting means it did not. */
+export type SwitchHandler = (organisationId: string) => unknown;
+export interface AccountLabels {
+    /** The trigger's name and its tooltip. */
+    trigger: (name: string) => string;
+    signedInTo: (product: string) => string;
+    close: string;
+    changePicture: string;
+    manage: string;
+    setUp: string;
+    organisations: string;
+    roles: Record<OrganisationRole, string>;
+    active: string;
+    showAll: (count: number) => string;
+    switched: (organisation: string) => string;
+    switchFailed: (organisation: string) => string;
+    signOut: (product: string) => string;
+    /** In a product that signs in through Identity, where signing out ends both. */
+    signOutBoth: (product: string) => string;
+    signingOut: (product: string) => string;
+    signOutFailed: (product: string) => string;
+    retry: string;
+    /** Stands in for the product's name where it was not given. */
+    thisProduct: string;
+    terms: string;
+    privacy: string;
+}
+export declare const ACCOUNT_LABELS: AccountLabels;
+export declare const ACCOUNT_CSS: string;
+/**
+ * Defines `<gp-account>` once, where custom elements exist. Safe to import on a
+ * server: nothing touches the DOM until this is called in a browser.
+ */
+export declare function defineAccountElement(name?: string): void;
+/** The class itself, for a caller that registers it under its own name or in a scoped registry. */
+export declare function createAccountElementClass(): CustomElementConstructor;
+//# sourceMappingURL=account.d.ts.map