@structured-id/ui-core 2.0.0 → 3.0.0

package/src/profile/composables/useCurrentPasswordRequirement.test.ts

@@ -0,0 +1,196 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { effectScope } from "vue";
+import { RpcError } from "@protobuf-ts/runtime-rpc";
+import { base64encode } from "@protobuf-ts/runtime";
+import { Any } from "@structured-id/proto/google/protobuf/any";
+import { Status } from "@structured-id/proto/google/rpc/status";
+import { ErrorInfo } from "@structured-id/proto/google/rpc/error_details";
+import {
+  isCurrentPasswordRequired,
+  isWrongCurrentPassword,
+  useCurrentPasswordRequirement,
+} from "./useCurrentPasswordRequirement";
+
+/** A refusal with `reason` and `metadata` in its ErrorInfo. */
+function refused(reason: string, metadata: Record<string, string>): RpcError {
+  const info = Any.pack(
+    ErrorInfo.create({ reason, domain: "structured.id", metadata }),
+    ErrorInfo,
+  );
+  const status = Status.create({ code: 9, message: "", details: [info] });
+  return new RpcError("", "FAILED_PRECONDITION", {
+    "grpc-status-details-bin": base64encode(Status.toBinary(status)),
+  });
+}
+
+/** The composable inside a scope the test can end, with the server's answer given. */
+function requirement(ms: number) {
+  const scope = effectScope();
+  const r = scope.run(() => useCurrentPasswordRequirement(async () => ms))!;
+  return { ...r, scope };
+}
+
+describe("useCurrentPasswordRequirement", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  // Until the server answers, the current password is asked for: a change
+  // that proves it is never refused.
+  it("requires the current password until the server answers", () => {
+    const r = requirement(180_000);
+    expect(r.required.value).toBe(true);
+    expect(r.known.value).toBe(false);
+  });
+
+  // The field appears exactly when the server's countdown ends, with no
+  // further request.
+  it("turns on when the server's countdown ends", async () => {
+    const r = requirement(180_000);
+    await r.refresh();
+    expect(r.required.value).toBe(false);
+    expect(r.known.value).toBe(true);
+    vi.advanceTimersByTime(179_999);
+    expect(r.required.value).toBe(false);
+    vi.advanceTimersByTime(1);
+    expect(r.required.value).toBe(true);
+  });
+
+  // The server counted from when it answered; the answer took time to
+  // arrive, so the timer is shortened by the request's own time and never
+  // fires after the server already requires the password.
+  it("subtracts the request's time from the countdown", async () => {
+    const scope = effectScope();
+    const r = scope.run(() =>
+      useCurrentPasswordRequirement(
+        () =>
+          new Promise<number>((resolve) =>
+            setTimeout(() => resolve(10_000), 400),
+          ),
+      ),
+    )!;
+    const refreshed = r.refresh();
+    await vi.advanceTimersByTimeAsync(400);
+    await refreshed;
+    expect(r.required.value).toBe(false);
+    await vi.advanceTimersByTimeAsync(9_599);
+    expect(r.required.value).toBe(false);
+    await vi.advanceTimersByTimeAsync(1);
+    expect(r.required.value).toBe(true);
+    scope.stop();
+  });
+
+  // The request's time is measured on a monotonic clock: a wall clock set
+  // forward while the answer was on its way (NTP, a user) does not shorten
+  // the countdown.
+  it("ignores wall clock changes while the answer is on its way", async () => {
+    let answer!: (ms: number) => void;
+    const scope = effectScope();
+    const r = scope.run(() =>
+      useCurrentPasswordRequirement(
+        () => new Promise<number>((resolve) => (answer = resolve)),
+      ),
+    )!;
+    const refreshed = r.refresh();
+    vi.setSystemTime(Date.now() + 3_600_000);
+    answer(10_000);
+    await refreshed;
+    expect(r.required.value).toBe(false);
+    await vi.advanceTimersByTimeAsync(9_999);
+    expect(r.required.value).toBe(false);
+    scope.stop();
+  });
+
+  it("is required at once when the server says zero", async () => {
+    const r = requirement(0);
+    await r.refresh();
+    expect(r.required.value).toBe(true);
+  });
+
+  // A refusal for lack of it wins over a countdown that has not ended (the
+  // clocks disagreed): the timer is dropped and the field stays.
+  it("requires it after a refusal, dropping the countdown", async () => {
+    const r = requirement(180_000);
+    await r.refresh();
+    r.requireNow();
+    expect(r.required.value).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  // A refusal that arrives while an answer is still on its way wins: the
+  // late answer was counted before the refusal and is stale.
+  it("keeps a refusal over an answer still on its way", async () => {
+    let answer!: (ms: number) => void;
+    const scope = effectScope();
+    const r = scope.run(() =>
+      useCurrentPasswordRequirement(
+        () => new Promise<number>((resolve) => (answer = resolve)),
+      ),
+    )!;
+    const refreshed = r.refresh();
+    r.requireNow();
+    answer(180_000);
+    await refreshed;
+    expect(r.required.value).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+    scope.stop();
+  });
+
+  // An answer that arrives after the owner went away changes nothing and
+  // arms no timer that would outlive it.
+  it("drops an answer that arrives after its owner went away", async () => {
+    let answer!: (ms: number) => void;
+    const scope = effectScope();
+    const r = scope.run(() =>
+      useCurrentPasswordRequirement(
+        () => new Promise<number>((resolve) => (answer = resolve)),
+      ),
+    )!;
+    const refreshed = r.refresh();
+    scope.stop();
+    answer(180_000);
+    await refreshed;
+    expect(vi.getTimerCount()).toBe(0);
+    expect(r.known.value).toBe(false);
+  });
+
+  it("stops its timer when its owner goes away", async () => {
+    const r = requirement(180_000);
+    await r.refresh();
+    r.scope.stop();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});
+
+describe("isCurrentPasswordRequired", () => {
+  // Only the step-up whose continuation is the current password counts; a
+  // step-up for a second factor needs another prompt.
+  it("recognizes only the current-password continuation", () => {
+    expect(
+      isCurrentPasswordRequired(
+        refused("STEP_UP_REQUIRED", { continuation: "current_password" }),
+      ),
+    ).toBe(true);
+    expect(
+      isCurrentPasswordRequired(
+        refused("STEP_UP_REQUIRED", { continuation: "step_up" }),
+      ),
+    ).toBe(false);
+    expect(
+      isCurrentPasswordRequired(
+        refused("PASSWORD_REUSED", { continuation: "current_password" }),
+      ),
+    ).toBe(false);
+    expect(isCurrentPasswordRequired(new Error("offline"))).toBe(false);
+  });
+});
+
+describe("isWrongCurrentPassword", () => {
+  // A change that proved a wrong current password is refused as a wrong
+  // sign-in; any other refusal is not that.
+  it("recognizes the refused sign-in", () => {
+    expect(isWrongCurrentPassword(refused("AUTHENTICATION_FAILED", {}))).toBe(
+      true,
+    );
+    expect(isWrongCurrentPassword(refused("PASSWORD_REUSED", {}))).toBe(false);
+  });
+});

package/src/profile/composables/useCurrentPasswordRequirement.ts

@@ -0,0 +1,95 @@
+/**
+ * Whether a password change of this session must prove the current password,
+ * kept current without polling: the server says how long until it must, by
+ * its own clock, and a timer of exactly that length turns it on. Comparing
+ * wall clocks would be wrong whenever the device's clock is off.
+ */
+import { onScopeDispose, readonly, ref } from "vue";
+import { passwordChangeRequirementMs } from "./useAuthApi";
+import { ErrorReason } from "@structured-id/proto/sid/v1/common/errors";
+import { rpcRefusal } from "../../utils/rpcRefusal";
+import { WrongCurrentPasswordError } from "./useAuth";
+
+/** Whether `err` refused a change because it did not prove the current password. */
+export function isCurrentPasswordRequired(err: unknown): boolean {
+  const refusal = rpcRefusal(err);
+  return (
+    refusal?.reasonCode === ErrorReason.STEP_UP_REQUIRED &&
+    refusal.metadata.continuation === "current_password"
+  );
+}
+
+/**
+ * Whether `err` refused a change for a wrong current password: on this
+ * device, or by the server for a finalization that did not verify.
+ */
+export function isWrongCurrentPassword(err: unknown): boolean {
+  return (
+    err instanceof WrongCurrentPasswordError ||
+    rpcRefusal(err)?.reasonCode === ErrorReason.AUTHENTICATION_FAILED
+  );
+}
+
+/**
+ * The requirement of the signed-in session. `required` starts true: until
+ * the server answers, asking for the current password is the safe side,
+ * since a change that proves it is always accepted.
+ */
+export function useCurrentPasswordRequirement(
+  requiredInMs: () => Promise<number> = passwordChangeRequirementMs,
+) {
+  const required = ref(true);
+  const known = ref(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  /** Bumped by every question and refusal; an older answer is dropped. */
+  let generations = 0;
+
+  function stop(): void {
+    if (timer !== undefined) clearTimeout(timer);
+    timer = undefined;
+  }
+
+  /** Ask the server and arm the timer for the moment it becomes required. */
+  async function refresh(): Promise<void> {
+    // The server counted from its answer, which took part of the request's
+    // time to arrive: the whole request time is taken off, so the timer
+    // fires early rather than late. Measured on the monotonic clock, which a
+    // wall clock change does not move.
+    const asked = performance.now();
+    const generation = ++generations;
+    const ms = (await requiredInMs()) - (performance.now() - asked);
+    // A refusal, or a newer answer, came while this one was on its way.
+    if (generation !== generations) return;
+    stop();
+    known.value = true;
+    required.value = ms <= 0;
+    if (ms > 0) {
+      timer = setTimeout(() => {
+        timer = undefined;
+        required.value = true;
+      }, ms);
+    }
+  }
+
+  /** The server refused a change for lack of it: required from now on. */
+  function requireNow(): void {
+    generations++;
+    stop();
+    known.value = true;
+    required.value = true;
+  }
+
+  // An answer still on its way when the owner goes away is dropped like a
+  // stale one, so it arms no timer that would outlive the owner.
+  onScopeDispose(() => {
+    generations++;
+    stop();
+  });
+
+  return {
+    required: readonly(required),
+    known: readonly(known),
+    refresh,
+    requireNow,
+  };
+}

package/src/profile/composables/useEnrollmentApi.test.ts

@@ -5,9 +5,13 @@ const mockGetInstanceStatus = vi.fn();
 
 vi.mock("../../index", () => ({
   getTransport: vi.fn(),
-  EnrollmentServiceClient: vi.fn().mockImplementation(() => ({
-    getInstanceStatus: mockGetInstanceStatus,
-  })),
+}));
+
+vi.mock("@structured-id/proto/sid/v1/admin/enrollment.client", () => ({
+  // Called with `new`: a constructor mock must be a `function`, not an arrow.
+  EnrollmentServiceClient: vi.fn().mockImplementation(function () {
+    return { getInstanceStatus: mockGetInstanceStatus };
+  }),
 }));
 
 describe("getInstanceStatus", () => {

package/src/profile/composables/useEnrollmentApi.ts

@@ -4,11 +4,9 @@
  * Wraps the public EnrollmentServiceClient calls the registration page makes
  * before anyone signs in.
  */
-import {
-  getTransport,
-  EnrollmentServiceClient,
-  type InstanceStatus,
-} from "../../index";
+import { getTransport } from "../../index";
+import { EnrollmentServiceClient } from "@structured-id/proto/sid/v1/admin/enrollment.client";
+import type { InstanceStatus } from "@structured-id/proto/sid/v1/admin/enrollment";
 
 function client(): EnrollmentServiceClient {
   return new EnrollmentServiceClient(getTransport());

package/src/profile/composables/useIdentityApi.ts

@@ -6,9 +6,9 @@
  * frontend.
  */
 import type { RpcTransport } from "@protobuf-ts/runtime-rpc";
+import { getAccountTransport } from "../../index";
+import { IdentityServiceClient } from "@structured-id/proto/sid/v1/identity/identity.client";
 import {
-  getAccountTransport,
-  IdentityServiceClient,
   type Profile,
   type Session,
   type Credential,
@@ -17,8 +17,8 @@ import {
   PrincipalType,
   CredentialType,
   AuthenticatorAttachment,
-  Timestamp,
-} from "../../index";
+} from "@structured-id/proto/sid/v1/identity/identity";
+import { Timestamp } from "@structured-id/proto/google/protobuf/timestamp";
 import { authMeta } from "../auth";
 
 function client(transport?: RpcTransport): IdentityServiceClient {

package/src/profile/composables/useSecurityLevel.test.ts

@@ -11,7 +11,7 @@ import {
   PrincipalType,
   type Credential,
   type Principal,
-} from "../../index";
+} from "@structured-id/proto/sid/v1/identity/identity";
 
 // ── Helpers ──
 

package/src/profile/composables/useSecurityLevel.ts

@@ -11,7 +11,7 @@ import {
   CredentialType,
   AuthenticatorAttachment,
   PrincipalType,
-} from "../../index";
+} from "@structured-id/proto/sid/v1/identity/identity";
 
 // ── Security Level ──
 

package/src/quasar/SidPasswordCeremony.test.ts

@@ -0,0 +1,253 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import SidPasswordCeremony from "./SidPasswordCeremony.vue";
+import type { PasswordOperationProgress } from "../profile/composables/useAuth";
+
+const stubs = {
+  "q-icon": {
+    props: ["name"],
+    template: '<i class="icon" :data-name="name" />',
+  },
+  "q-banner": { template: '<div class="reason"><slot /></div>' },
+};
+
+const at = (
+  step: PasswordOperationProgress["step"],
+  fraction: number,
+  label: string,
+): PasswordOperationProgress => ({ step, fraction, label });
+
+function mountCeremony(props: Record<string, unknown> = {}) {
+  return mount(SidPasswordCeremony, {
+    props: { progress: null, outcome: "running", length: 12, ...props },
+    global: { stubs },
+  });
+}
+
+type Ceremony = ReturnType<typeof mountCeremony>;
+const rows = (w: Ceremony) => w.findAll(".sid-ceremony__row");
+const glyphs = (w: Ceremony) =>
+  rows(w)[0]
+    .findAll(".sid-ceremony__glyph")
+    .map((g) => g.text());
+const label = (w: Ceremony) => w.find(".sid-ceremony__label").text();
+const phase = (w: Ceremony) =>
+  w
+    .classes()
+    .find((c) => c.startsWith("sid-ceremony--") && c !== "sid-ceremony--still");
+
+/** Past the opening: the rows have turned into digits and merged. */
+async function merged() {
+  await vi.advanceTimersByTimeAsync(1300);
+}
+
+describe("SidPasswordCeremony", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  // One row per password field, each as long as the password (capped);
+  // the rows are digits, never the password's characters.
+  it("turns each field into a row of digits", async () => {
+    const w = mountCeremony({ fields: 2, length: 15 });
+    await vi.advanceTimersByTimeAsync(320);
+    expect(rows(w)).toHaveLength(2);
+    expect(glyphs(w)).toHaveLength(15);
+    expect(glyphs(w).some((g) => /^[0-9]$/.test(g))).toBe(true);
+    expect(glyphs(w).every((g) => /^[0-9●]$/.test(g))).toBe(true);
+    expect(glyphs(mountCeremony({ length: 80 }))).toHaveLength(20);
+  });
+
+  // The rows start in the fields' places and merge into one centre line.
+  it("merges the rows into one line", async () => {
+    const w = mountCeremony({ fields: 2 });
+    expect(phase(w)).toBe("sid-ceremony--split");
+    expect(rows(w)[1].attributes("style")).toContain("translateY(72px)");
+    await merged();
+    expect(phase(w)).toBe("sid-ceremony--line");
+    expect(rows(w)[0].attributes("style")).toContain("translateY(36px)");
+    expect(rows(w)[1].attributes("style")).toContain("translateY(36px)");
+  });
+
+  // The digits settle into dots from the left as far as the operation went.
+  it("settles digits into dots as the operation advances", async () => {
+    const w = mountCeremony({ length: 10 });
+    await merged();
+    await w.setProps({ progress: at("prove", 0.5, "Building the proof") });
+    await vi.advanceTimersByTimeAsync(200);
+    expect(glyphs(w).slice(0, 5)).toEqual(["●", "●", "●", "●", "●"]);
+    expect(w.find("[role=progressbar]").attributes("aria-valuenow")).toBe("50");
+  });
+
+  // Between reports the line moves at the pace the report expects for the
+  // rest of its step, so it shows the time left; it stops short of the
+  // step's end until the step reports done, and never moves back.
+  it("moves at the expected pace between reports", async () => {
+    const w = mountCeremony();
+    const now = () =>
+      Number(w.find("[role=progressbar]").attributes("aria-valuenow"));
+    await w.setProps({
+      progress: {
+        step: "prove",
+        fraction: 0.2,
+        label: "Building the proof",
+        until: 0.6,
+        remainingMs: 2000,
+      },
+    });
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(now()).toBeGreaterThanOrEqual(39);
+    expect(now()).toBeLessThanOrEqual(41);
+    await vi.advanceTimersByTimeAsync(10_000);
+    expect(now(), "short of the step's end").toBe(58);
+    await w.setProps({
+      progress: {
+        step: "prove",
+        fraction: 0.3,
+        label: "Building the proof",
+        until: 0.6,
+        remainingMs: 1500,
+      },
+    });
+    await vi.advanceTimersByTimeAsync(40);
+    expect(now(), "a late report never moves it back").toBe(58);
+  });
+
+  // The pace is measured on a monotonic clock: the device's wall clock moved
+  // forward by an hour mid-step does not jump the line to the step's end.
+  it("keeps its pace when the wall clock is changed", async () => {
+    const w = mountCeremony();
+    const now = () =>
+      Number(w.find("[role=progressbar]").attributes("aria-valuenow"));
+    await w.setProps({
+      progress: {
+        step: "prove",
+        fraction: 0.2,
+        label: "Building the proof",
+        until: 0.6,
+        remainingMs: 2000,
+      },
+    });
+    vi.setSystemTime(Date.now() + 3_600_000);
+    await vi.advanceTimersByTimeAsync(40);
+    expect(now()).toBeLessThanOrEqual(22);
+  });
+
+  // A report present when the ceremony mounts counts as much as a later one.
+  it("starts from the progress it is mounted with", async () => {
+    const w = mountCeremony({
+      progress: at("prove", 0.5, "Building the proof"),
+    });
+    await vi.advanceTimersByTimeAsync(40);
+    expect(w.find("[role=progressbar]").attributes("aria-valuenow")).toBe("50");
+  });
+
+  // A prover still at its first stage keeps reporting the step's start; the
+  // line goes on at the expected pace instead of restarting from it.
+  it("is not held back by reports that lag behind it", async () => {
+    const w = mountCeremony();
+    const now = () =>
+      Number(w.find("[role=progressbar]").attributes("aria-valuenow"));
+    const lagging = {
+      step: "prove" as const,
+      fraction: 0.2,
+      label: "Building the proof",
+      until: 0.6,
+      remainingMs: 4000,
+    };
+    await w.setProps({ progress: lagging });
+    for (let i = 0; i < 10; i++) {
+      await vi.advanceTimersByTimeAsync(200);
+      await w.setProps({ progress: { ...lagging } });
+    }
+    // 2 s of a 4 s step: about halfway from 0.2 to 0.6.
+    expect(now()).toBeGreaterThanOrEqual(36);
+  });
+
+  // A short step never replaces the label on screen; a lasting one does.
+  it("shows a step's label only once the step has lasted", async () => {
+    const w = mountCeremony();
+    expect(label(w)).toBe("Protecting your password on this device");
+    await w.setProps({ progress: at("protect", 0, "Protecting") });
+    expect(label(w)).toBe("Protecting");
+    await w.setProps({ progress: at("compare", 0.08, "Comparing") });
+    await vi.advanceTimersByTimeAsync(100);
+    await w.setProps({ progress: at("prove", 0.2, "Building the proof") });
+    await vi.advanceTimersByTimeAsync(100);
+    expect(label(w)).toBe("Protecting");
+    await vi.advanceTimersByTimeAsync(400);
+    expect(label(w)).toBe("Building the proof");
+  });
+
+  // Success: the line closes into the orb, the lock appears, then the
+  // check; only then is the form told.
+  it("closes into the orb, then the lock, then the check", async () => {
+    const w = mountCeremony({ acceptedText: "Password changed" });
+    await merged();
+    await w.setProps({ outcome: "accepted" });
+    expect(phase(w)).toBe("sid-ceremony--orb");
+    expect(
+      w.find("[role=progressbar]").attributes("aria-valuenow"),
+      "an accepted operation is complete",
+    ).toBe("100");
+    expect(w.find(".sid-ceremony__orb").exists()).toBe(true);
+    expect(w.find(".icon").exists()).toBe(false);
+    await vi.advanceTimersByTimeAsync(650);
+    expect(w.find(".icon").attributes("data-name")).toBe("sym_o_lock");
+    expect(label(w)).toBe("Password changed");
+    await vi.advanceTimersByTimeAsync(450);
+    expect(w.find(".icon").attributes("data-name")).toBe("sym_o_check");
+    expect(w.emitted("settled")).toBeUndefined();
+    await vi.advanceTimersByTimeAsync(700);
+    expect(w.emitted("settled")).toEqual([["accepted"]]);
+  });
+
+  // Refusal: no orb ever forms; the line unfolds back into the fields as
+  // dots, the reason shows above them, then the form takes over.
+  it("unfolds back into the fields after a refusal", async () => {
+    const w = mountCeremony({ fields: 2, refusedText: "Used before" });
+    await merged();
+    await w.setProps({ outcome: "refused" });
+    expect(w.find(".sid-ceremony__orb").exists()).toBe(false);
+    expect(phase(w)).toBe("sid-ceremony--unfolding");
+    expect(rows(w)[1].attributes("style")).toContain("translateY(72px)");
+    expect(glyphs(w).every((g) => g === "●")).toBe(true);
+    await vi.advanceTimersByTimeAsync(650);
+    expect(w.find(".reason").text()).toBe("Used before");
+    expect(w.emitted("settled")).toBeUndefined();
+    await vi.advanceTimersByTimeAsync(1600);
+    expect(w.emitted("settled")).toEqual([["refused"]]);
+    expect(w.find(".sid-ceremony__orb").exists()).toBe(false);
+  });
+
+  // An outcome that arrives while the rows are still merging waits for the
+  // line, so the choreography is never cut short, and runs once.
+  it("lets the rows merge before an early outcome", async () => {
+    const w = mountCeremony();
+    await w.setProps({ outcome: "refused" });
+    expect(phase(w)).toBe("sid-ceremony--split");
+    await merged();
+    expect(phase(w)).toBe("sid-ceremony--unfolding");
+    await vi.advanceTimersByTimeAsync(5000);
+    expect(w.emitted("settled")).toEqual([["refused"]]);
+  });
+
+  // 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.
+    vi.stubGlobal(
+      "matchMedia",
+      (query: string) =>
+        ({ matches: query.includes("reduce") }) as MediaQueryList,
+    );
+    const w = mountCeremony();
+    expect(w.classes()).toContain("sid-ceremony--still");
+    await vi.advanceTimersByTimeAsync(0);
+    expect(glyphs(w).every((g) => g === "●")).toBe(true);
+    await w.setProps({ outcome: "accepted" });
+    await vi.runAllTimersAsync();
+    expect(w.emitted("settled")).toEqual([["accepted"]]);
+  });
+});