@structured-id/ui-core 1.3.0 → 3.0.0

package/src/profile/components/SidRegistrationForm.vue

@@ -31,7 +31,7 @@
       </q-banner>
 
       <q-banner
-        v-if="error"
+        v-if="error && !ceremony"
         class="bg-negative text-white q-mb-md"
         rounded
         dense
@@ -40,7 +40,7 @@
       </q-banner>
 
       <q-banner
-        v-if="success"
+        v-if="success && !ceremony"
         class="bg-positive text-white q-mb-md"
         rounded
         dense
@@ -48,21 +48,27 @@
         {{ successText }}
       </q-banner>
 
-      <slot name="progress" :progress="progress">
-        <div v-if="progress" class="q-mb-md">
-          <q-linear-progress
-            :value="progress.fraction"
-            color="primary"
-            class="q-mb-sm"
+      <!-- While the operation runs the ceremony takes the fields' place;
+           an application's own `progress` slot replaces the ceremony. -->
+      <template v-if="ceremony">
+        <slot name="progress" :progress="progress">
+          <sid-password-ceremony
+            :progress="progress"
+            :outcome="ceremony"
+            :fields="showConfirmPassword ? 2 : 1"
+            :length="password.length"
+            :accepted-text="acceptedText"
+            :refused-text="error ?? undefined"
+            @settled="onSettled"
           />
-          <div class="text-caption text-center text-grey-7">
-            <q-icon name="sym_o_lock" size="xs" class="q-mr-xs" />
-            {{ progress.label }}
-          </div>
-        </div>
-      </slot>
+        </slot>
+      </template>
 
-      <q-form @submit.prevent="onSubmit" class="q-gutter-y-md">
+      <q-form
+        v-show="!ceremony && !success"
+        @submit.prevent="onSubmit"
+        class="q-gutter-y-md"
+      >
         <q-input
           v-if="claimRequired"
           v-model="claimToken"
@@ -207,8 +213,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { SidPrincipalInput } from "../../quasar";
+import { ref, computed, watch, useSlots } from "vue";
+import { SidPasswordCeremony, SidPrincipalInput } from "../../quasar";
+import type { CeremonyOutcome } from "../../quasar";
+import type { PasswordOperationProgress } from "../composables/useAuth";
 
 // Minimal QInput shape — we only use validate(). Avoids importing 'quasar' at
 // type level (it's a peer dep, not present during ui-core typecheck).
@@ -226,13 +234,8 @@ export interface RegistrationExtras {
   claimToken?: string;
 }
 
-/** Progress of the registration (the password proof takes seconds): 0..1 and a label. */
-export interface RegistrationProgress {
-  fraction: number;
-  label: string;
-}
-
 void SidPrincipalInput;
+void SidPasswordCeremony;
 
 const props = withDefaults(
   defineProps<{
@@ -295,8 +298,10 @@ const props = withDefaults(
       identifier: string,
       password: string,
       extras: RegistrationExtras,
-      onProgress?: (p: RegistrationProgress) => void,
+      onProgress?: (p: PasswordOperationProgress) => void,
     ) => Promise<void>;
+    /** What the ceremony says once the account is created. */
+    acceptedText?: string;
     /** Min password length (default 12 — NIST SP 800-63B 4th draft baseline). */
     passwordMinLength?: number;
     /** Show confirm-password field with match validation. Default true. */
@@ -336,6 +341,7 @@ const props = withDefaults(
       "This installation has no administrator yet. Enter the claim token from the service log; the account you create becomes its administrator.",
     showConfirmPassword: true,
     usernameMinLength: 6,
+    acceptedText: "Account created",
   },
 );
 
@@ -344,6 +350,18 @@ const emit = defineEmits<{
   error: [error: Error];
 }>();
 
+defineSlots<{
+  header?: () => unknown;
+  /** Replaces the ceremony while the operation runs; the form closes when it ends. */
+  progress?: (props: { progress: PasswordOperationProgress | null }) => unknown;
+  "extra-fields"?: () => unknown;
+  links?: () => unknown;
+  footer?: () => unknown;
+}>();
+const slots = useSlots();
+/** Longest a `progress` slot holds the final report when no frame paints. */
+const PAINT_FALLBACK_MS = 250;
+
 const identifier = ref("");
 const principalType = ref<PrincipalType>("unknown");
 const password = ref("");
@@ -352,7 +370,11 @@ const showPassword = ref(false);
 const loading = ref(false);
 const error = ref<string | null>(null);
 const success = ref(false);
-const progress = ref<RegistrationProgress | null>(null);
+const progress = ref<PasswordOperationProgress | null>(null);
+/** The running or closing ceremony; null while the fields are shown. */
+const ceremony = ref<CeremonyOutcome | null>(null);
+/** What the form announces once the ceremony has closed. */
+let announce: (() => void) | undefined;
 
 const passwordRef = ref<ValidatableInput | null>(null);
 const confirmRef = ref<ValidatableInput | null>(null);
@@ -397,6 +419,10 @@ async function onSubmit() {
 
   loading.value = true;
   error.value = null;
+  progress.value = null;
+  ceremony.value = "running";
+  // A phone's keyboard would cover the ceremony.
+  (document.activeElement as HTMLElement | null)?.blur?.();
 
   try {
     const normalized = normalizePrincipal(
@@ -409,19 +435,49 @@ async function onSubmit() {
     await props.registerFn(normalized.value, password.value, extras, (p) => {
       progress.value = p;
     });
-    success.value = true;
-    emit("success", {
-      identifier: normalized.value,
-      principalType: normalized.type,
-    });
+    announce = () => {
+      success.value = true;
+      emit("success", {
+        identifier: normalized.value,
+        principalType: normalized.type,
+      });
+    };
+    ceremony.value = "accepted";
   } catch (e) {
     success.value = false;
     const err = e instanceof Error ? e : new Error("Registration failed");
     error.value = refusalMessage(e, "Registration failed");
-    emit("error", err);
+    announce = () => emit("error", err);
+    ceremony.value = "refused";
   } finally {
     loading.value = false;
-    progress.value = null;
   }
+  // A `progress` slot has no closing animation to wait for, but the final
+  // report came in this same turn: the slot keeps it for one painted frame
+  // (the second animation frame runs after the first has been painted). A
+  // background tab may run no frames at all, so a timer settles it then;
+  // whichever comes first settles, once.
+  if (slots.progress) {
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(fallback);
+      onSettled();
+    };
+    const fallback = setTimeout(settle, PAINT_FALLBACK_MS);
+    requestAnimationFrame(() => requestAnimationFrame(settle));
+  }
+}
+
+/**
+ * The ceremony closed and gives way: a refusal to the fields with its
+ * reason, an acceptance to the success text. Then the result is told.
+ */
+function onSettled() {
+  ceremony.value = null;
+  progress.value = null;
+  announce?.();
+  announce = undefined;
 }
 </script>

package/src/profile/components/index.ts

@@ -1,10 +1,7 @@
 // Slot-based auth forms
 export { default as SidLoginForm } from "./SidLoginForm.vue";
 export { default as SidRegistrationForm } from "./SidRegistrationForm.vue";
-export type {
-  RegistrationExtras,
-  RegistrationProgress,
-} from "./SidRegistrationForm.vue";
+export type { RegistrationExtras } from "./SidRegistrationForm.vue";
 export { default as SidMfaChallenge } from "./SidMfaChallenge.vue";
 export type { MfaMethod } from "./SidMfaChallenge.vue";
 

package/src/profile/composables/index.ts

@@ -5,3 +5,4 @@ export * from "./useAccountApi";
 export * from "./useEnrollmentApi";
 export * from "./useIdentityApi";
 export * from "./useSecurityLevel";
+export * from "./useCurrentPasswordRequirement";

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

@@ -0,0 +1,155 @@
+import { describe, expect, it } from "vitest";
+import {
+  CONFIRMED_CHANGE_STEPS,
+  DEFAULT_STEP_MS,
+  INSTALL_STEPS,
+  OperationPlan,
+  type PasswordOperationProgress,
+  type PasswordOperationStep,
+  type PlanEnvironment,
+} from "./operationPlan";
+
+/** A clock moved by hand and a store kept in a variable. */
+function environment(stored: string | null = null) {
+  const env = {
+    t: 0,
+    stored,
+    now: () => env.t,
+    load: () => env.stored,
+    save: (value: string) => {
+      env.stored = value;
+    },
+  };
+  return env satisfies PlanEnvironment;
+}
+
+function planWith(
+  stored: string | null = null,
+  steps: readonly PasswordOperationStep[] = INSTALL_STEPS,
+) {
+  const env = environment(stored);
+  const seen: PasswordOperationProgress[] = [];
+  const plan = new OperationPlan((p) => seen.push(p), steps, env);
+  return { env, seen, plan };
+}
+
+const total = INSTALL_STEPS.reduce((a, s) => a + DEFAULT_STEP_MS[s], 0);
+
+describe("OperationPlan", () => {
+  // Each step takes the gauge share its expected time takes of the whole,
+  // and a report says where the step ends and how long it should take.
+  it("gives each step its share of the expected time", () => {
+    const { seen, plan } = planWith();
+    plan.enter("protect");
+    plan.enter("compare");
+    const protect = DEFAULT_STEP_MS.protect / total;
+    expect(seen[0]).toMatchObject({
+      step: "protect",
+      fraction: 0,
+      remainingMs: DEFAULT_STEP_MS.protect,
+    });
+    expect(seen[0].until).toBeCloseTo(protect, 10);
+    expect(seen[1].fraction).toBeCloseTo(protect, 10);
+  });
+
+  // The prover's progress fills the proof's share, and what is left of the
+  // step's time shrinks with it.
+  it("fills a step with its own progress", () => {
+    const { seen, plan } = planWith();
+    plan.enter("prove");
+    plan.within(0.5);
+    const start = (DEFAULT_STEP_MS.protect + DEFAULT_STEP_MS.compare) / total;
+    const width = DEFAULT_STEP_MS.prove / total;
+    expect(seen[1].fraction).toBeCloseTo(start + width / 2, 10);
+    expect(seen[1].remainingMs).toBe(DEFAULT_STEP_MS.prove / 2);
+  });
+
+  it("never moves backwards", () => {
+    const { seen, plan } = planWith();
+    plan.enter("prove");
+    plan.within(0.6);
+    plan.within(0.2);
+    expect(seen[2].fraction).toBe(seen[1].fraction);
+  });
+
+  // A finished operation keeps what its steps took, as a moving average, and
+  // the next plan on this device starts from it.
+  it("learns the device's step times", () => {
+    const { env, plan } = planWith();
+    plan.enter("protect");
+    env.t = 600;
+    plan.enter("compare");
+    env.t = 1100;
+    plan.enter("prove");
+    env.t = 12_100; // a slow phone: 11 s of proving
+    plan.enter("verify");
+    env.t = 14_100;
+    plan.finish();
+    const learned = JSON.parse(env.stored ?? "{}");
+    expect(learned.prove).toBeCloseTo(
+      DEFAULT_STEP_MS.prove * 0.6 + 11_000 * 0.4,
+      6,
+    );
+    expect(learned.verify).toBeCloseTo(
+      DEFAULT_STEP_MS.verify * 0.6 + 2000 * 0.4,
+      6,
+    );
+
+    const next = planWith(env.stored);
+    next.plan.enter("prove");
+    expect(next.seen[0].remainingMs).toBeCloseTo(learned.prove, 6);
+  });
+
+  // A finished operation reports itself complete, so every progress
+  // consumer ends at the full gauge rather than where verification began.
+  it("reports completion when it finishes", () => {
+    const { seen, plan } = planWith();
+    plan.enter("verify");
+    plan.finish();
+    expect(seen.at(-1)).toMatchObject({
+      step: "verify",
+      fraction: 1,
+      until: 1,
+      remainingMs: 0,
+    });
+  });
+
+  // A change that confirms the current password gives that step its share
+  // after the new password's protection (whose request the confirmation is
+  // bound to); an operation without it never reports it and keeps its gauge.
+  it("adds the confirmation only to the plan that has it", () => {
+    const withConfirm = planWith(null, CONFIRMED_CHANGE_STEPS);
+    withConfirm.plan.enter("protect");
+    withConfirm.plan.enter("confirm");
+    const all = total + DEFAULT_STEP_MS.confirm;
+    expect(withConfirm.seen[0]).toMatchObject({ step: "protect", fraction: 0 });
+    expect(withConfirm.seen[1]).toMatchObject({ step: "confirm" });
+    expect(withConfirm.seen[1].fraction).toBeCloseTo(
+      DEFAULT_STEP_MS.protect / all,
+      10,
+    );
+    expect(withConfirm.seen[1].until).toBeCloseTo(
+      (DEFAULT_STEP_MS.protect + DEFAULT_STEP_MS.confirm) / all,
+      10,
+    );
+
+    const without = planWith();
+    without.plan.enter("confirm");
+    without.plan.enter("protect");
+    expect(without.seen).toHaveLength(1);
+    expect(without.seen[0]).toMatchObject({ step: "protect", fraction: 0 });
+  });
+
+  // A refused operation teaches nothing; an unreadable record is ignored.
+  it("ignores a malformed record and learns only from a finished operation", () => {
+    const { env, seen, plan } = planWith("{not json");
+    plan.enter("protect");
+    expect(seen[0].remainingMs).toBe(DEFAULT_STEP_MS.protect);
+    env.t = 5000;
+    plan.enter("compare");
+    expect(env.stored).toBe("{not json");
+    const bad = planWith(JSON.stringify({ prove: -1, verify: "x" }));
+    bad.plan.enter("prove");
+    expect(bad.seen[0].remainingMs).toBe(DEFAULT_STEP_MS.prove);
+  });
+});

package/src/profile/composables/operationPlan.ts

@@ -0,0 +1,218 @@
+/**
+ * The time plan of a password operation, so a display shows how much is
+ * left: each step takes the share of the gauge its expected duration takes
+ * of the whole, the expected durations are what the steps took before on
+ * this device (a moving average kept in the browser), and each report says
+ * where the current step ends and how long it is expected to last from now.
+ * A display then moves at the expected pace between reports instead of
+ * jumping at each one.
+ */
+
+/**
+ * What a password operation is doing, as the user can follow it: confirming
+ * the current password (a change that proves it), deriving its request on
+ * this device, comparing with previous passwords, proving, and finishing
+ * (the client's record and the server's check).
+ */
+export type PasswordOperationStep =
+  "confirm" | "protect" | "compare" | "prove" | "verify";
+
+/** Progress of a password operation, for a gauge that tracks time left. */
+export interface PasswordOperationProgress {
+  /** The step the operation is in. */
+  step?: PasswordOperationStep;
+  /** Where the operation is now, 0..1, never moving backwards. */
+  fraction: number;
+  label: string;
+  /** Where the current step ends on the gauge, 0..1. */
+  until?: number;
+  /** How long the rest of the current step is expected to take, ms. */
+  remainingMs?: number;
+}
+
+export const STEP_LABEL: Record<PasswordOperationStep, string> = {
+  confirm: "Confirming your current password",
+  protect: "Protecting your password on this device",
+  compare: "Checking it against your previous passwords",
+  prove: "Building the proof",
+  verify: "Sealing it and checking with the server",
+};
+
+/** The steps of installing a password: registration, reset, a change. */
+export const INSTALL_STEPS: readonly PasswordOperationStep[] = [
+  "protect",
+  "compare",
+  "prove",
+  "verify",
+];
+
+/**
+ * A change that proves the current password: the new password's start
+ * comes first, since the confirmation is bound to its request.
+ */
+export const CONFIRMED_CHANGE_STEPS: readonly PasswordOperationStep[] = [
+  "protect",
+  "confirm",
+  "compare",
+  "prove",
+  "verify",
+];
+
+const ALL_STEPS = CONFIRMED_CHANGE_STEPS;
+
+/**
+ * Step times (ms) before anything was measured here: a mid-range phone
+ * (measured on a 2025 one) with the prover's key already prepared.
+ */
+export const DEFAULT_STEP_MS: Record<PasswordOperationStep, number> = {
+  confirm: 400,
+  protect: 150,
+  compare: 150,
+  prove: 4000,
+  verify: 2400,
+};
+
+/** Where the measured times live in the browser. */
+const STORE_KEY = "sid:password-operation-ms";
+/** Weight of the newest measurement in the moving average. */
+const ALPHA = 0.4;
+
+/** Clock and storage, replaceable in tests. */
+export interface PlanEnvironment {
+  now: () => number;
+  load: () => string | null;
+  save: (value: string) => void;
+}
+
+const browser: PlanEnvironment = {
+  now: () => performance.now(),
+  // Storage can be missing or refuse (private mode): the defaults then apply
+  // and nothing is kept, which only costs accuracy.
+  load: () => {
+    try {
+      return globalThis.localStorage?.getItem(STORE_KEY) ?? null;
+    } catch {
+      return null;
+    }
+  },
+  save: (value) => {
+    try {
+      globalThis.localStorage?.setItem(STORE_KEY, value);
+    } catch {
+      // Not kept; the next operation starts from the defaults again.
+    }
+  },
+};
+
+/** The expected step times: measured ones where valid, the defaults otherwise. */
+function expected(env: PlanEnvironment): Record<PasswordOperationStep, number> {
+  const out = { ...DEFAULT_STEP_MS };
+  try {
+    const stored = JSON.parse(env.load() ?? "{}") as Record<string, unknown>;
+    for (const step of ALL_STEPS) {
+      const ms = stored[step];
+      if (typeof ms === "number" && Number.isFinite(ms) && ms > 0)
+        out[step] = ms;
+    }
+  } catch {
+    // A malformed record is ignored: defaults apply.
+  }
+  return out;
+}
+
+/**
+ * One operation's plan over its `steps`: its reports, and what it measured
+ * when it ends.
+ */
+export class OperationPlan {
+  private readonly ms: Record<PasswordOperationStep, number>;
+  private readonly start: Partial<Record<PasswordOperationStep, number>> = {};
+  private readonly width: Partial<Record<PasswordOperationStep, number>> = {};
+  private readonly measured: Partial<Record<PasswordOperationStep, number>> =
+    {};
+  private current: PasswordOperationStep | undefined;
+  private enteredAt = 0;
+  private last = 0;
+
+  constructor(
+    private readonly report?: (p: PasswordOperationProgress) => void,
+    steps: readonly PasswordOperationStep[] = INSTALL_STEPS,
+    private readonly env: PlanEnvironment = browser,
+  ) {
+    this.ms = expected(env);
+    const total = steps.reduce((sum, s) => sum + this.ms[s], 0);
+    let at = 0;
+    for (const step of steps) {
+      this.start[step] = at;
+      this.width[step] = this.ms[step] / total;
+      at += this.width[step];
+    }
+  }
+
+  /** The operation entered `step`; entering the step it is in changes nothing. */
+  enter(step: PasswordOperationStep): void {
+    if (this.current === step) return;
+    const now = this.env.now();
+    this.close(now);
+    this.current = step;
+    this.enteredAt = now;
+    this.emit(step, 0);
+  }
+
+  /** The current step reached `within` (0..1) of its own work. */
+  within(within: number): void {
+    if (this.current) this.emit(this.current, within);
+  }
+
+  /**
+   * The operation succeeded: keep what its steps took for the next plan, and
+   * report it complete. The server has already committed it, so an observer
+   * that throws on this report is logged and cannot fail the operation.
+   */
+  finish(): void {
+    this.close(this.env.now());
+    const next = { ...this.ms };
+    for (const step of ALL_STEPS) {
+      const took = this.measured[step];
+      if (took !== undefined)
+        next[step] = next[step] * (1 - ALPHA) + took * ALPHA;
+    }
+    this.env.save(JSON.stringify(next));
+    if (!this.current) return;
+    // Exactly 1: the summed step shares can fall short of it by rounding.
+    this.last = 1;
+    try {
+      this.report?.({
+        step: this.current,
+        fraction: 1,
+        label: STEP_LABEL[this.current],
+        until: 1,
+        remainingMs: 0,
+      });
+    } catch (e) {
+      console.error("A progress observer failed on a committed operation", e);
+    }
+  }
+
+  private close(now: number): void {
+    if (this.current) this.measured[this.current] = now - this.enteredAt;
+  }
+
+  private emit(step: PasswordOperationStep, within: number): void {
+    const start = this.start[step];
+    const width = this.width[step];
+    // A step outside this plan is a caller's mistake: it reports nothing
+    // rather than a position the gauge does not have.
+    if (start === undefined || width === undefined) return;
+    const done = Math.min(1, Math.max(0, within));
+    const fraction = Math.max(this.last, start + width * done);
+    this.last = fraction;
+    this.report?.({
+      step,
+      fraction,
+      label: STEP_LABEL[step],
+      until: start + width,
+      remainingMs: this.ms[step] * (1 - done),
+    });
+  }
+}

package/src/profile/composables/useAccountApi.ts

@@ -5,9 +5,9 @@
  * session's Bearer token.
  * Covers: consents, activity, linked accounts, app launcher, passwordless.
  */
+import { getAccountTransport } from "../../index";
+import { AccountServiceClient } from "@structured-id/proto/sid/v1/account/account.client";
 import {
-  getAccountTransport,
-  AccountServiceClient,
   type ConsentInfo,
   type ClaimConsent,
   type GetConsentDetailResponse,
@@ -27,8 +27,8 @@ import {
   ActivityEventStatus,
   LinkedAccountTrustCategory,
   LinkedAccountStatus,
-  Timestamp,
-} from "../../index";
+} from "@structured-id/proto/sid/v1/account/account";
+import { Timestamp } from "@structured-id/proto/google/protobuf/timestamp";
 import { authMeta } from "../auth";
 
 function client(): AccountServiceClient {