@structured-id/ui-core 3.1.0 → 3.2.0

package/package.json

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

package/src/composables/useBffAuth.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  bffCsrfToken,
+  bffLogout,
+  checkBffSession,
+  initBff,
+} from "./useBffAuth";
+
+/** A BFF that answers every request with this response. */
+function bffAnswers(response: unknown) {
+  const fetchMock = vi.fn().mockResolvedValue(response);
+  vi.stubGlobal("fetch", fetchMock);
+  return fetchMock;
+}
+
+/** The BFF's sign-out answer: the session ended, with this grant outcome. */
+function ended(grant: string) {
+  return { ok: true, status: 200, json: async () => ({ grant }) };
+}
+
+describe("bffLogout", () => {
+  beforeEach(async () => {
+    initBff("");
+    bffAnswers({
+      ok: true,
+      status: 200,
+      json: async () => ({ sub: "s", csrf_token: "token-1" }),
+    });
+    await checkBffSession();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  // The page tells a local end of its session from one where the issuer also
+  // revoked the grant, so it can say which happened.
+  it.each(["revoked", "not_revoked", "none"] as const)(
+    "reports the ended session with grant %s",
+    async (grant) => {
+      const fetchMock = bffAnswers(ended(grant));
+      await expect(bffLogout()).resolves.toEqual({ ended: true, grant });
+      expect(fetchMock).toHaveBeenCalledWith("/auth/logout", {
+        method: "POST",
+        credentials: "include",
+        headers: { "X-CSRF-Token": "token-1" },
+      });
+    },
+  );
+
+  // A refused or failed sign-out leaves the BFF session alive: the page must
+  // not report it as ended.
+  it.each([
+    ["refused", { ok: false, status: 403 }],
+    ["unavailable", { ok: false, status: 503 }],
+  ])("reports a %s sign-out as not ended", async (_name, response) => {
+    bffAnswers(response);
+    await expect(bffLogout()).resolves.toEqual({ ended: false });
+  });
+
+  it("reports an unreachable BFF as not ended", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new TypeError("offline")));
+    await expect(bffLogout()).resolves.toEqual({ ended: false });
+  });
+
+  // An answer the page cannot read still came after the BFF ended the
+  // session; only the grant's fate is unknown.
+  it("reports an unreadable answer as ended with an unknown grant", async () => {
+    bffAnswers({
+      ok: true,
+      status: 200,
+      json: async () => {
+        throw new SyntaxError("not json");
+      },
+    });
+    await expect(bffLogout()).resolves.toEqual({
+      ended: true,
+      grant: "unknown",
+    });
+  });
+
+  it("reports nothing ended before the BFF is set up", async () => {
+    vi.resetModules();
+    const fresh = await import("./useBffAuth");
+    const fetchMock = bffAnswers(ended("revoked"));
+    await expect(fresh.bffLogout()).resolves.toEqual({ ended: false });
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  // Whatever the BFF answers, the page forgets the session's token.
+  it("forgets the CSRF token even when the sign-out failed", async () => {
+    bffAnswers({ ok: false, status: 503 });
+    await bffLogout();
+    expect(bffCsrfToken()).toBeNull();
+  });
+});

package/src/composables/useBffAuth.ts

@@ -118,28 +118,55 @@ export function startBffLogin(
   window.location.href = url;
 }
 
+/**
+ * What became of the grant behind an ended BFF session: revoked by the
+ * issuer, left to expire because the issuer did not revoke it, none held,
+ * or unknown when the BFF's answer could not be read.
+ */
+export type BffGrantOutcome = "revoked" | "not_revoked" | "none" | "unknown";
+
+/** The outcome of a sign-out: whether the BFF ended the session, and its grant. */
+export type BffLogoutResult =
+  { ended: true; grant: BffGrantOutcome } | { ended: false };
+
+const GRANT_OUTCOMES: readonly BffGrantOutcome[] = [
+  "revoked",
+  "not_revoked",
+  "none",
+];
+
 /**
  * Log out by calling POST /auth/logout with X-CSRF-Token header.
  *
- * The BFF validates the CSRF header, clears server-side session,
- * and sends a Set-Cookie header to clear the session cookie. The token
- * dies with the session either way.
+ * The BFF validates the CSRF header, ends the session, clears its cookie and
+ * says whether the issuer revoked the grant. `ended: false` means the
+ * session may still be alive (refused, unavailable, unreachable). The page
+ * forgets the CSRF token either way.
  *
  * @param bffBaseUrl  Override BFF base URL
  */
-export async function bffLogout(bffBaseUrl?: string): Promise<void> {
+export async function bffLogout(bffBaseUrl?: string): Promise<BffLogoutResult> {
   const base = bffBaseUrl ?? _bffBaseUrl;
-  if (base === null) return;
+  if (base === null) return { ended: false };
   const csrf = _csrfToken;
   _csrfToken = null;
+  let resp: Response;
   try {
-    await fetch(`${base}/auth/logout`, {
+    resp = await fetch(`${base}/auth/logout`, {
       method: "POST",
       credentials: "include",
       headers: csrf ? { "X-CSRF-Token": csrf } : {},
     });
   } catch {
-    // Best-effort — local state is cleared by caller regardless
+    return { ended: false };
+  }
+  if (!resp.ok) return { ended: false };
+  try {
+    const { grant } = (await resp.json()) as { grant?: unknown };
+    const known = GRANT_OUTCOMES.find((outcome) => outcome === grant);
+    return { ended: true, grant: known ?? "unknown" };
+  } catch {
+    return { ended: true, grant: "unknown" };
   }
 }
 

package/src/index.ts

@@ -17,6 +17,8 @@ export {
   bffLogout,
   bffCsrfToken,
   type BffUserInfo,
+  type BffGrantOutcome,
+  type BffLogoutResult,
 } from "./composables/useBffAuth";
 export {
   initAccountApi,

package/src/profile/components/SidLoginForm.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import { mount } from "@vue/test-utils";
 import { defineComponent } from "vue";
 import SidLoginForm from "./SidLoginForm.vue";
+import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
 // Stub all Quasar components as divs
 const quasarStubs = {
@@ -16,7 +17,8 @@ const quasarStubs = {
     emits: ["submit"],
   },
   "q-input": defineComponent({
-    props: ["modelValue", "type", "label", "disable", "rules"],
+    name: "QInputStub",
+    props: ["modelValue", "type", "label", "disable", "rules", "lazyRules"],
     emits: ["update:modelValue"],
     template:
       '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
@@ -77,4 +79,16 @@ describe("SidLoginForm", () => {
     const w = mountLogin();
     expect(w.text()).toContain("Your password never leaves this device");
   });
+
+  // Regression: the password turned red on the first keystroke and its empty
+  // error read "Required" beside the identifier's "This field is required".
+  it("validates the password once left, with the shared required text", () => {
+    const w = mountLogin();
+    const password = w.findComponent({ name: "QInputStub" });
+    const lazy = password.props("lazyRules");
+    expect(lazy === "" || lazy === true).toBe(true);
+    const [required] = password.props("rules") as ((v: string) => unknown)[];
+    expect(required("")).toBe(REQUIRED_FIELD_TEXT);
+    expect(required("secret")).toBe(true);
+  });
 });

package/src/profile/components/SidLoginForm.vue

@@ -48,6 +48,7 @@
           :label="passwordLabel"
           outlined
           :disable="loading"
+          lazy-rules
           :rules="[(v: string) => !!v || passwordRequiredText]"
           data-test="password"
         >
@@ -119,6 +120,7 @@ import { ref } from "vue";
 import { SidPrincipalInput } from "../../quasar";
 import type { PrincipalType } from "../../quasar";
 import { normalizePrincipal, refusalMessage } from "../../index";
+import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
 void SidPrincipalInput;
 
@@ -169,7 +171,7 @@ const props = withDefaults(
     submitLabel: "Sign in",
     identifierLabel: "Email, phone, or username",
     passwordLabel: "Password",
-    passwordRequiredText: "Required",
+    passwordRequiredText: REQUIRED_FIELD_TEXT,
     showForgotPassword: true,
     forgotPasswordText: "Forgot password?",
     forgotPasswordUrl: undefined,

package/src/profile/components/SidRegistrationForm.vue

@@ -225,6 +225,7 @@ interface ValidatableInput {
 }
 import type { PrincipalType } from "../../quasar";
 import { normalizePrincipal, refusalMessage } from "../../index";
+import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
 /** What the form collected besides the identifier and password. */
 export interface RegistrationExtras {
@@ -317,7 +318,7 @@ const props = withDefaults(
     identifierLabel: "Email, phone, or username",
     passwordLabel: "Password",
     confirmPasswordLabel: "Confirm password",
-    passwordRequiredText: "Required",
+    passwordRequiredText: REQUIRED_FIELD_TEXT,
     passwordMinLengthText: "At least 12 characters with mixed case + digit",
     passwordMinLength: 12,
     passwordsMismatchText: "Passwords do not match",

package/src/quasar/SidPrincipalInput.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import { defineComponent } from "vue";
+import SidPrincipalInput from "./SidPrincipalInput.vue";
+import { REQUIRED_FIELD_TEXT } from "../utils/validators";
+
+const stubs = {
+  "q-input": defineComponent({
+    name: "QInputStub",
+    props: ["modelValue", "rules", "lazyRules"],
+    template: "<div><slot name='prepend' /><slot name='append' /></div>",
+  }),
+  "q-icon": { template: "<span />" },
+  "q-chip": { template: "<span><slot /></span>" },
+};
+
+function input(props: Record<string, unknown> = {}) {
+  return mount(SidPrincipalInput, {
+    props: { modelValue: "", ...props },
+    global: { stubs },
+  }).findComponent({ name: "QInputStub" });
+}
+
+type Rule = (v: string) => unknown;
+
+describe("SidPrincipalInput", () => {
+  // Regression: the identifier turned red while still being typed; it is
+  // checked once left, unless a form asks for checking from the start.
+  it("validates once left by default", () => {
+    expect(input().props("lazyRules")).toBe(true);
+    expect(input({ lazyRules: false }).props("lazyRules")).toBe(false);
+  });
+
+  // One text for an empty required field, the same the password field uses.
+  it("says the shared text of an empty required field", () => {
+    const [required] = input().props("rules") as Rule[];
+    expect(required("")).toBe(REQUIRED_FIELD_TEXT);
+    expect(required("alice")).toBe(true);
+    const [custom] = input({ requiredText: "Enter it" }).props(
+      "rules",
+    ) as Rule[];
+    expect(custom("")).toBe("Enter it");
+  });
+
+  it("does not require an optional field", () => {
+    const [required] = input({ required: false }).props("rules") as Rule[];
+    expect(required("")).toBe(true);
+  });
+});

package/src/quasar/SidPrincipalInput.vue

@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { isValidEmail } from "../utils/validators";
+import { REQUIRED_FIELD_TEXT, isValidEmail } from "../utils/validators";
 
 export type PrincipalType = "email" | "phone" | "username" | "unknown";
 
@@ -42,7 +42,13 @@ interface Props {
   minUsernameLength?: number;
   required?: boolean;
   label?: string;
-  /** Validate on each input change (false) vs only on blur (true). Default false — eager. */
+  /** What an empty required field says. */
+  requiredText?: string;
+  /**
+   * Validate once the field is left, then on every change (true), or on
+   * every change from the first keystroke (false). Default true: a field
+   * being typed into is not yet wrong.
+   */
   lazyRules?: boolean;
 }
 
@@ -52,7 +58,8 @@ const props = withDefaults(defineProps<Props>(), {
   minUsernameLength: 3,
   required: true,
   label: "Email, phone, or username",
-  lazyRules: false,
+  requiredText: REQUIRED_FIELD_TEXT,
+  lazyRules: true,
 });
 
 const emit = defineEmits<{
@@ -107,7 +114,7 @@ function onInput(value: string | number | null) {
 // --- Validation rules ---
 
 const requiredRule = (val: string) =>
-  !props.required || !!val || "This field is required";
+  !props.required || !!val || props.requiredText;
 
 const typeRule = (val: string): string | true => {
   if (!val) return true; // required rule handles empty

package/src/utils/validators.ts

@@ -42,6 +42,9 @@ export function maxLength(value: string, max: number): boolean {
   return value.length <= max;
 }
 
+/** What every form says of an empty required field, so one error reads alike. */
+export const REQUIRED_FIELD_TEXT = "This field is required";
+
 /** Check value is not empty/whitespace-only. */
 export function isRequired(value: string): boolean {
   return value.trim().length > 0;