@structured-id/ui-core 4.7.0 → 4.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structured-id/ui-core",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "type": "module",
   "publishConfig": {
     "access": "public",

package/src/composables/useBffAuth.test.ts

@@ -6,6 +6,16 @@ import { GrantOutcome } from "@structured-id/proto/sid/v1/authn/application_sess
 const host = vi.hoisted(() => ({
   getApplicationSession: vi.fn(),
   endApplicationSession: vi.fn(),
+  /** The base URL of the transport last made. */
+  transportBase: undefined as string | undefined,
+}));
+
+vi.mock("@protobuf-ts/grpcweb-transport", () => ({
+  GrpcWebFetchTransport: class {
+    constructor(options: { baseUrl: string }) {
+      host.transportBase = options.baseUrl;
+    }
+  },
 }));
 
 vi.mock("@structured-id/proto/sid/v1/authn/application_session.client", () => ({
@@ -40,6 +50,27 @@ const LIVE = {
   csrfToken: "token-1",
 };
 
+describe("the session service's address", () => {
+  // The host serves a page's calls only under its API mount: a call at the
+  // root is refused, and the page cannot read a session it has.
+  it("is the API mount of the page's own origin", () => {
+    initBff("");
+    expect(host.transportBase).toBe("/api");
+  });
+
+  it("is the API mount of a configured host", () => {
+    initBff("https://host.sid.example.com");
+    expect(host.transportBase).toBe("https://host.sid.example.com/api");
+  });
+
+  it("is the API mount of a host named for one call", async () => {
+    initBff("");
+    host.getApplicationSession.mockReturnValue(answers(LIVE));
+    await checkBffSession("https://other.sid.example.com");
+    expect(host.transportBase).toBe("https://other.sid.example.com/api");
+  });
+});
+
 describe("checkBffSession", () => {
   beforeEach(() => {
     vi.clearAllMocks();

package/src/composables/useBffAuth.ts

@@ -43,10 +43,13 @@ let _session: ApplicationSessionServiceClient | null = null;
  */
 let _csrfToken: string | null = null;
 
-/** The session service at `baseUrl`; the cookie never travels to another origin. */
+/**
+ * The session service of the host at `baseUrl`, under the `/api` mount that
+ * serves a page's calls; the cookie never travels to another origin.
+ */
 function sessionClient(baseUrl: string): ApplicationSessionServiceClient {
   const transport: RpcTransport = new GrpcWebFetchTransport({
-    baseUrl,
+    baseUrl: `${baseUrl}/api`,
     fetchInit: { credentials: "same-origin" },
   });
   return new ApplicationSessionServiceClient(transport);

package/src/quasar/SidPasswordCeremony.test.ts

@@ -234,6 +234,29 @@ describe("SidPasswordCeremony", () => {
     expect(w.emitted("settled")).toEqual([["refused"]]);
   });
 
+  // With reduced motion the line still shows how far the operation went and
+  // that it is running: settled positions are solid, open ones are marked
+  // (they dissolve slowly instead of churning), so a running operation is
+  // never a frozen row of dots.
+  it("shows progress and activity under reduced motion", async () => {
+    vi.stubGlobal(
+      "matchMedia",
+      (query: string) =>
+        ({ matches: query.includes("reduce") }) as MediaQueryList,
+    );
+    const w = mountCeremony({ length: 10 });
+    await merged();
+    const settled = () =>
+      rows(w)[0].findAll(".sid-ceremony__glyph--set").length;
+    const open = () => rows(w)[0].findAll(".sid-ceremony__glyph--open").length;
+    expect(settled()).toBe(0);
+    expect(open()).toBe(10);
+    await w.setProps({ progress: at("prove", 0.5, "Building the proof") });
+    await vi.advanceTimersByTimeAsync(80);
+    expect(settled()).toBe(5);
+    expect(open()).toBe(5);
+  });
+
   // With reduced motion nothing churns and every step lands at once.
   it("does not animate under reduced motion", async () => {
     // jsdom has no matchMedia: the browser's answer is given here.

package/src/quasar/SidPasswordCeremony.vue

@@ -41,7 +41,11 @@
           v-for="(glyph, i) in glyphs"
           :key="i"
           class="sid-ceremony__glyph"
-          :class="{ 'sid-ceremony__glyph--set': glyph === DOT }"
+          :class="
+            i < settledUpTo
+              ? 'sid-ceremony__glyph--set'
+              : 'sid-ceremony__glyph--open'
+          "
           >{{ glyph }}</span
         >
       </div>
@@ -150,6 +154,12 @@ const stageHeight = computed(
 );
 const count = computed(() => Math.max(1, Math.min(props.length, MAX_GLYPHS)));
 const glyphs = ref<string[]>(Array.from({ length: count.value }, () => DOT));
+/**
+ * How many positions, from the left, the operation has settled. Kept apart
+ * from what the glyphs show: under reduced motion every position is a dot,
+ * and only this tells a settled one from an open one.
+ */
+const settledUpTo = ref(0);
 
 const phase = ref<Phase>("split");
 const checked = ref(false);
@@ -249,12 +259,12 @@ const label = computed(() => {
 let ticks = 0;
 function tick() {
   pace();
-  const settledUpTo = Math.floor(fraction.value * count.value);
+  settledUpTo.value = Math.floor(fraction.value * count.value);
   // The open digits change every fourth frame (about six times a second);
   // the line itself follows the pace every frame.
   const churning = !still && ticks++ % 4 === 0;
   glyphs.value = glyphs.value.map((glyph, i) => {
-    if (i < settledUpTo) return DOT;
+    if (i < settledUpTo.value) return DOT;
     if (!churning) return still ? DOT : glyph;
     // A calm churn: about a third of the open digits change at a time.
     if (glyph !== DOT && Math.random() > 0.35) return glyph;
@@ -277,6 +287,7 @@ function stopChurn() {
 function close() {
   stopChurn();
   fraction.value = 1;
+  settledUpTo.value = count.value;
   glyphs.value = glyphs.value.map(() => DOT);
   phase.value = "orb";
   after(TIMING.orb, () => {
@@ -378,6 +389,20 @@ onBeforeUnmount(() => {
   opacity: 1;
   transform: scale(0.6);
 }
+/* Under reduced motion the open positions dissolve slowly in place instead
+   of churning: no movement, but a running operation never looks frozen. */
+.sid-ceremony--still .sid-ceremony__glyph--open {
+  transform: scale(0.6);
+  animation: sid-ceremony-dissolve 1.6s ease-in-out infinite alternate;
+}
+@keyframes sid-ceremony-dissolve {
+  from {
+    opacity: 0.15;
+  }
+  to {
+    opacity: 0.55;
+  }
+}
 .sid-ceremony__orb {
   position: absolute;
   top: 50%;