@ghub/identity-chrome 0.4.0 → 0.5.0

package/README.md

@@ -76,7 +76,9 @@ const account = document.querySelector("gp-account")!;
 account.core = chrome;
 account.product = "GAdvisory"; // your own name, from your catalogue entry
 account.person = { name: user.name, email: user.email, id: user.id, avatarUrl: user.picture };
-account.organisations = [{ id: "org_1", name: "Hafen Labs", role: "Admin", active: true }];
+account.organisations = [
+  { id: "org_1", name: "Hafen Labs", role: "Admin", iconUrl: "/orgs/org_1/avatar", active: true },
+];
 account.onSwitch = async (id) => switchOrganisation(id); // reject when it did not switch
 account.onSignOut = async () => {
   await signOut(); // reject when it failed: the popup says they are still signed in
@@ -90,7 +92,8 @@ and the account popup renders nothing without a person.
 
 **The account popup shows mostly what the product passes**: the name and address from your
 session, your organisations with the role your product gives them there (its own label, already in the
-person's language and shown as given; none, and the row has no second line) and your two actions.
+person's language and shown as given; none, and the row has no second line) and their own picture
+where they have one (`iconUrl`; the initial otherwise, and if it does not load), and your two actions.
 Identity adds the picture, the colour of the initial, the links to its own account and set up
 screens and the footer, so the popup still signs somebody out while Identity is down. The
 picture is Identity's if the person has one, else yours, else a coloured initial whose tint

package/dist/elements/account.d.ts

@@ -69,6 +69,12 @@ export interface AccountOrganisation {
      * so the element has no list of its own. None, and the row has no second line.
      */
     role?: string | null;
+    /**
+     * The organisation's own picture, absolute or relative to the page, http or
+     * https only. Drawn in place of the initial, which comes back if it does not
+     * load.
+     */
+    iconUrl?: string | null;
     active: boolean;
 }
 /** One of the product's own items in the popup, such as its profile or its settings. */

package/dist/elements/account.js

@@ -229,8 +229,9 @@ exports.ACCOUNT_CSS = `${contract_js_1.CONTRACT_CSS}
   .wrap > .radios:last-child > .org:last-child { border-radius: 4px 4px 18px 18px; }
   .org-mark {
     display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
-    color: ${tint_js_1.AVATAR_INK}; font-size: 14px; font-weight: 600;
+    overflow: hidden; color: ${tint_js_1.AVATAR_INK}; font-size: 14px; font-weight: 600;
   }
+  .org-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
   .org-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
   .org-name { font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .org-role { font-size: 12.5px; line-height: 17px; color: var(--_ink-2); }
@@ -352,6 +353,30 @@ function emailLine(email) {
     }
     return line;
 }
+/** An organisation's picture where it has one that loads, else its initial on its tint. */
+function orgMark(one) {
+    const initial = initialOf(one.name);
+    const mark = (0, dom_js_1.element)("span", {
+        class: `org-mark t${String((0, tint_js_1.avatarTint)(one.id))}`,
+        "aria-hidden": "true",
+    });
+    const picture = productAddress(one.iconUrl);
+    if (picture === null) {
+        mark.textContent = initial;
+        return mark;
+    }
+    const image = (0, dom_js_1.element)("img", {
+        src: picture,
+        alt: "",
+        decoding: "async",
+        referrerpolicy: "no-referrer",
+    });
+    image.addEventListener("error", () => {
+        mark.textContent = initial;
+    }, { once: true });
+    mark.append(image);
+    return mark;
+}
 /** An address the product gave, absolute or relative to the page, and only ever http or https. */
 function productAddress(value) {
     if (typeof value !== "string" || value === "")
@@ -486,11 +511,17 @@ function organisationsOf(value) {
     for (const one of value) {
         if (typeof one !== "object" || one === null)
             continue;
-        const { id, name, role, active } = one;
+        const { id, name, role, iconUrl, active } = one;
         if (typeof id !== "string" || id === "" || typeof name !== "string" || name.trim() === "")
             continue;
         const label = typeof role === "string" && role.trim() !== "" ? role.trim() : null;
-        out.push({ id, name: name.trim(), role: label, active: active === true });
+        out.push({
+            id,
+            name: name.trim(),
+            role: label,
+            iconUrl: typeof iconUrl === "string" && iconUrl !== "" ? iconUrl : null,
+            active: active === true,
+        });
     }
     // The active one first: the row says which one you are acting in.
     const active = out.findIndex((one) => one.active);
@@ -1167,7 +1198,7 @@ function createAccountElementClass() {
                 text.append((0, dom_js_1.element)("span", { class: "org-name", title: one.name }, one.name));
                 if (one.role)
                     text.append((0, dom_js_1.element)("span", { class: "org-role" }, one.role));
-                row.append((0, dom_js_1.element)("span", { class: `org-mark t${String((0, tint_js_1.avatarTint)(one.id))}`, "aria-hidden": "true" }, initialOf(one.name)), text);
+                row.append(orgMark(one), text);
                 if (one.active) {
                     const tag = (0, dom_js_1.element)("span", { class: "active", "aria-hidden": "true" });
                     tag.append((0, dom_js_1.element)("span", { class: "check" }), labels.active);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghub/identity-chrome",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The shared header controls of the Gelhaus Solutions products: the apps picker and the account popup, as custom elements with shadow DOM and as React wrappers. The browser half (state, cache, the last list held for an outage) and the server half (the token calls and a route handler). No dependencies.",
   "author": "Gelhaus Solutions (Enno Gelhaus) <egelhaus@ennogelhaus.de> (https://ennogelhaus.de)",
   "homepage": "https://ennogelhaus.de",