@structured-id/ui-core 3.2.0 → 4.0.0

package/package.json

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

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

@@ -297,6 +297,92 @@ describe("SidRegistrationForm", () => {
     vi.useRealTimers();
   });
 
+  describe("password rules", () => {
+    // A q-input that shows the first rule its value fails, as QInput does.
+    const ruleStubs = {
+      ...quasarStubs,
+      "q-input": {
+        props: ["modelValue", "rules"],
+        emits: ["update:modelValue"],
+        computed: {
+          failed(): string {
+            const self = this as unknown as {
+              modelValue?: string;
+              rules?: ((v: string) => true | string)[];
+            };
+            for (const rule of self.rules ?? []) {
+              const result = rule(self.modelValue ?? "");
+              if (result !== true) return result;
+            }
+            return "";
+          },
+        },
+        template:
+          '<label><input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /><span class="failed">{{ failed }}</span></label>',
+      },
+    };
+    const ceDefault = {
+      minLength: 8,
+      minUppercase: 1,
+      minLowercase: 1,
+      minDigit: 1,
+      minSymbol: 0,
+    };
+
+    async function passwordError(
+      value: string,
+      passwordPolicyFn: () => Promise<typeof ceDefault>,
+    ): Promise<string> {
+      const w = mount(SidRegistrationForm, {
+        props: { registerFn, passwordPolicyFn, showConfirmPassword: false },
+        global: { stubs: ruleStubs },
+      });
+      await flushPromises();
+      const password = w.find('[data-test="password"]');
+      await password.find("input").setValue(value);
+      return password.find(".failed").text();
+    }
+
+    // The rules are the server's policy: an 8-character password with an
+    // uppercase letter, a lowercase letter and a digit meets the CE default.
+    it("accepts a password that meets the server policy", async () => {
+      expect(
+        await passwordError("HrenVam1", () => Promise.resolve(ceDefault)),
+      ).toBe("");
+    });
+
+    // Each minimum names itself: a missing uppercase letter is not reported
+    // as a short password.
+    it("names the rule a password fails", async () => {
+      const policy = () => Promise.resolve(ceDefault);
+      expect(await passwordError("hrenvam1", policy)).toBe(
+        "At least 1 uppercase letter",
+      );
+      expect(await passwordError("HrenVamX", policy)).toBe("At least 1 digit");
+      expect(await passwordError("HrenVa1", policy)).toBe(
+        "At least 8 characters",
+      );
+    });
+
+    // Symbols are the printable ASCII characters that are not letters or
+    // digits, as the proof counts them; a space is not one.
+    it("checks the symbol minimum", async () => {
+      const policy = () => Promise.resolve({ ...ceDefault, minSymbol: 1 });
+      expect(await passwordError("Hren Vam1", policy)).toBe(
+        "At least 1 symbol",
+      );
+      expect(await passwordError("Hren-Vam1", policy)).toBe("");
+    });
+
+    // Until the server answers only an empty password is refused: the
+    // proof, not the form, enforces the policy.
+    it("checks only presence until the policy is known", async () => {
+      const never = () => new Promise<typeof ceDefault>(() => {});
+      expect(await passwordError("a", never)).toBe("");
+      expect(await passwordError("", never)).toBe("This field is required");
+    });
+  });
+
   it("renders footer slot", () => {
     const w = mount(SidRegistrationForm, {
       props: { registerFn },

package/src/profile/components/SidRegistrationForm.vue

@@ -217,6 +217,14 @@ import { ref, computed, watch, useSlots } from "vue";
 import { SidPasswordCeremony, SidPrincipalInput } from "../../quasar";
 import type { CeremonyOutcome } from "../../quasar";
 import type { PasswordOperationProgress } from "../composables/useAuth";
+import { getPasswordPolicy } from "../composables/useAuthApi";
+import {
+  defaultPasswordRuleText,
+  failedPasswordRule,
+  usePasswordPolicy,
+  type PasswordPolicy,
+  type PasswordRuleText,
+} from "../composables/usePasswordPolicy";
 
 // Minimal QInput shape — we only use validate(). Avoids importing 'quasar' at
 // type level (it's a peer dep, not present during ui-core typecheck).
@@ -254,8 +262,10 @@ const props = withDefaults(
     confirmPasswordLabel?: string;
     /** Password required validation text */
     passwordRequiredText?: string;
-    /** Password min length validation text */
-    passwordMinLengthText?: string;
+    /** What a password that fails a policy minimum is told. */
+    passwordRuleText?: PasswordRuleText;
+    /** Loads the server's password policy. */
+    passwordPolicyFn?: () => Promise<PasswordPolicy>;
     /** Passwords mismatch validation text */
     passwordsMismatchText?: string;
     /** Invite code input label */
@@ -303,8 +313,6 @@ const props = withDefaults(
     ) => 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. */
     showConfirmPassword?: boolean;
     /** Min username length. Registration default 6 (premium feature gating);
@@ -319,8 +327,8 @@ const props = withDefaults(
     passwordLabel: "Password",
     confirmPasswordLabel: "Confirm password",
     passwordRequiredText: REQUIRED_FIELD_TEXT,
-    passwordMinLengthText: "At least 12 characters with mixed case + digit",
-    passwordMinLength: 12,
+    passwordRuleText: defaultPasswordRuleText,
+    passwordPolicyFn: getPasswordPolicy,
     passwordsMismatchText: "Passwords do not match",
     inviteCodeLabel: "Invite code",
     inviteCodeRequiredText: "Invite code required",
@@ -380,16 +388,14 @@ let announce: (() => void) | undefined;
 const passwordRef = ref<ValidatableInput | null>(null);
 const confirmRef = ref<ValidatableInput | null>(null);
 
-// Password complexity (matches sid-pake-core ZKPP gadget A defaults).
-// Server enforces via OPAQUE-ZKPP zero-knowledge proof; client also checks
-// to give immediate UX feedback.
+const { policy } = usePasswordPolicy(props.passwordPolicyFn);
+
 const passwordRules = computed(() => [
   (v: string) => !!v || props.passwordRequiredText,
-  (v: string) =>
-    v.length >= props.passwordMinLength || props.passwordMinLengthText,
-  (v: string) => /[a-z]/.test(v) || props.passwordMinLengthText,
-  (v: string) => /[A-Z]/.test(v) || props.passwordMinLengthText,
-  (v: string) => /[0-9]/.test(v) || props.passwordMinLengthText,
+  (v: string) => {
+    const failed = policy.value && failedPasswordRule(v, policy.value);
+    return !failed || props.passwordRuleText(failed.rule, failed.count);
+  },
 ]);
 
 // Re-validate confirm field whenever password changes (eager match feedback).

package/src/profile/composables/index.ts

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

package/src/profile/composables/useAuthApi.ts

@@ -57,6 +57,7 @@ import {
   type OpaqueZkppRegistrationFinishResponse,
   type PasswordChangeChallengeResponse,
   type PasswordChangeExecuteResponse,
+  type GetZkppPolicyResponse,
 } from "@structured-id/proto/sid/v1/authn/auth";
 import type {
   PasswordHistoryContext,
@@ -574,6 +575,12 @@ export async function completePasswordReset(
   return response;
 }
 
+/** The password policy the server's proof checks a new password against. */
+export async function getPasswordPolicy(): Promise<GetZkppPolicyResponse> {
+  const { response } = await client().getZkppPolicy({});
+  return response;
+}
+
 // Recovery shard RPCs (downloadRecoveryShard, uploadRecoveryShard, getRecoveryInfo)
 // are EE/SaaS-only — defined in proto-ee, not in CE proto.
 

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

@@ -0,0 +1,109 @@
+import { describe, it, expect } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import {
+  defaultPasswordRuleText,
+  failedPasswordRule,
+  usePasswordPolicy,
+} from "./usePasswordPolicy";
+
+const ceDefault = {
+  minLength: 8,
+  minUppercase: 1,
+  minLowercase: 1,
+  minDigit: 1,
+  minSymbol: 0,
+};
+
+describe("failedPasswordRule", () => {
+  it("passes a password that meets every minimum", () => {
+    expect(failedPasswordRule("HrenVam1", ceDefault)).toBeNull();
+  });
+
+  // The first failed minimum is reported, in a fixed order, with the
+  // policy's number for it.
+  it("reports the first failed minimum with its number", () => {
+    expect(failedPasswordRule("hV1", ceDefault)).toEqual({
+      rule: "length",
+      count: 8,
+    });
+    expect(failedPasswordRule("hrenvam1", ceDefault)).toEqual({
+      rule: "uppercase",
+      count: 1,
+    });
+    expect(failedPasswordRule("HRENVAM1", ceDefault)).toEqual({
+      rule: "lowercase",
+      count: 1,
+    });
+    expect(failedPasswordRule("HrenVamX", ceDefault)).toEqual({
+      rule: "digit",
+      count: 1,
+    });
+  });
+
+  // Counts, not presence: a minimum of 2 needs two of the class.
+  it("counts the characters of a class", () => {
+    const policy = { ...ceDefault, minDigit: 2 };
+    expect(failedPasswordRule("HrenVam1", policy)?.rule).toBe("digit");
+    expect(failedPasswordRule("HrenVam12", policy)).toBeNull();
+  });
+
+  // The proof's classes are ASCII: a non-ASCII letter is none of them, a
+  // space is not a symbol, and every other printable ASCII non-alphanumeric
+  // character is.
+  it("classifies characters as the proof does", () => {
+    const policy = {
+      minLength: 0,
+      minUppercase: 0,
+      minLowercase: 0,
+      minDigit: 0,
+      minSymbol: 1,
+    };
+    expect(failedPasswordRule(" ", policy)?.rule).toBe("symbol");
+    expect(failedPasswordRule("Ж", policy)?.rule).toBe("symbol");
+    for (const symbol of "!/:@[`{~") {
+      expect(failedPasswordRule(symbol, policy)).toBeNull();
+    }
+    expect(
+      failedPasswordRule("ЖЖЖЖЖЖЖЖ", { ...ceDefault, minLength: 8 })?.rule,
+    ).toBe("uppercase");
+  });
+
+  // Length counts characters, so a character outside the BMP is one.
+  it("counts length in characters", () => {
+    const policy = { ...ceDefault, minUppercase: 0, minDigit: 0, minLength: 3 };
+    expect(failedPasswordRule("a😀b", policy)).toBeNull();
+    expect(failedPasswordRule("a😀", policy)?.rule).toBe("length");
+  });
+});
+
+describe("defaultPasswordRuleText", () => {
+  it("names the rule and its number", () => {
+    expect(defaultPasswordRuleText("length", 8)).toBe("At least 8 characters");
+    expect(defaultPasswordRuleText("uppercase", 1)).toBe(
+      "At least 1 uppercase letter",
+    );
+    expect(defaultPasswordRuleText("lowercase", 2)).toBe(
+      "At least 2 lowercase letters",
+    );
+    expect(defaultPasswordRuleText("digit", 2)).toBe("At least 2 digits");
+    expect(defaultPasswordRuleText("symbol", 1)).toBe("At least 1 symbol");
+  });
+});
+
+describe("usePasswordPolicy", () => {
+  it("holds the policy once loaded", async () => {
+    const { policy } = usePasswordPolicy(() => Promise.resolve(ceDefault));
+    expect(policy.value).toBeNull();
+    await flushPromises();
+    expect(policy.value).toEqual(ceDefault);
+  });
+
+  // A policy that cannot be loaded leaves the checks to the server.
+  it("stays unknown when the policy cannot be loaded", async () => {
+    const { policy } = usePasswordPolicy(() =>
+      Promise.reject(new Error("unavailable")),
+    );
+    await flushPromises();
+    expect(policy.value).toBeNull();
+  });
+});

package/src/profile/composables/usePasswordPolicy.ts

@@ -0,0 +1,83 @@
+/**
+ * The server's password policy, as a form checks a new password against it.
+ * The proof enforces the policy; these checks only tell the user early.
+ */
+import { readonly, ref } from "vue";
+import type { GetZkppPolicyResponse } from "@structured-id/proto/sid/v1/authn/auth";
+import { getPasswordPolicy } from "./useAuthApi";
+
+/** The minimums of a password policy. */
+export type PasswordPolicy = Pick<
+  GetZkppPolicyResponse,
+  "minLength" | "minUppercase" | "minLowercase" | "minDigit" | "minSymbol"
+>;
+
+/** A minimum a password can fail. */
+export type PasswordRule =
+  "length" | "uppercase" | "lowercase" | "digit" | "symbol";
+
+/** What a failed rule says, given the policy's number for it. */
+export type PasswordRuleText = (rule: PasswordRule, count: number) => string;
+
+export const defaultPasswordRuleText: PasswordRuleText = (rule, count) => {
+  switch (rule) {
+    case "length":
+      return `At least ${count} characters`;
+    case "uppercase":
+      return `At least ${count} uppercase ${count === 1 ? "letter" : "letters"}`;
+    case "lowercase":
+      return `At least ${count} lowercase ${count === 1 ? "letter" : "letters"}`;
+    case "digit":
+      return `At least ${count} ${count === 1 ? "digit" : "digits"}`;
+    case "symbol":
+      return `At least ${count} ${count === 1 ? "symbol" : "symbols"}`;
+  }
+};
+
+// The character classes the proof counts: ASCII letters and digits, and the
+// printable ASCII characters that are neither (a space is not a symbol).
+const UPPERCASE = /[A-Z]/g;
+const LOWERCASE = /[a-z]/g;
+const DIGIT = /[0-9]/g;
+const SYMBOL = /[!-/:-@[-`{-~]/g;
+
+const count = (value: string, pattern: RegExp) =>
+  value.match(pattern)?.length ?? 0;
+
+/**
+ * The first minimum `password` fails, or null when it meets them all. Length
+ * is counted in characters: the proof counts UTF-8 bytes, never fewer, so a
+ * password that passes here is never refused there for its length.
+ */
+export function failedPasswordRule(
+  password: string,
+  policy: PasswordPolicy,
+): { rule: PasswordRule; count: number } | null {
+  const checks: [PasswordRule, number, number][] = [
+    ["length", [...password].length, policy.minLength],
+    ["uppercase", count(password, UPPERCASE), policy.minUppercase],
+    ["lowercase", count(password, LOWERCASE), policy.minLowercase],
+    ["digit", count(password, DIGIT), policy.minDigit],
+    ["symbol", count(password, SYMBOL), policy.minSymbol],
+  ];
+  for (const [rule, has, needs] of checks) {
+    if (has < needs) return { rule, count: needs };
+  }
+  return null;
+}
+
+/**
+ * Load the policy once. Until it is known (or when it cannot be loaded)
+ * `policy` stays null: the operation itself then meets the server, which
+ * refuses a password its policy does not admit.
+ */
+export function usePasswordPolicy(
+  load: () => Promise<PasswordPolicy> = getPasswordPolicy,
+) {
+  const policy = ref<PasswordPolicy | null>(null);
+  load().then(
+    (p) => (policy.value = p),
+    () => undefined,
+  );
+  return { policy: readonly(policy) };
+}