@structured-id/ui-core 3.2.0 → 4.1.0

package/package.json

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

package/src/index.ts

@@ -62,6 +62,7 @@ export {
   refusalMessage,
   REFUSAL_TEXTS,
   SID_ERROR_DOMAIN,
+  type FieldViolation,
   type RpcRefusal,
 } from "./utils/rpcRefusal";
 

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

@@ -80,6 +80,20 @@ describe("SidLoginForm", () => {
     expect(w.text()).toContain("Your password never leaves this device");
   });
 
+  // The default subtitle names only the types the field accepts: a form
+  // restricted to email must not invite a phone or a username.
+  it("names the accepted types in the default subtitle", () => {
+    expect(mountLogin().text()).toContain(
+      "Enter your email, phone, or username to continue",
+    );
+    expect(mountLogin({ principalTypes: ["email"] }).text()).toContain(
+      "Enter your email to continue",
+    );
+    expect(
+      mountLogin({ principalTypes: ["email"], subtitle: "Hello" }).text(),
+    ).toContain("Hello");
+  });
+
   // 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", () => {

package/src/profile/components/SidLoginForm.vue

@@ -3,7 +3,7 @@
     <q-card-section>
       <slot name="header">
         <div class="text-h6">{{ title }}</div>
-        <div class="text-caption text-grey">{{ subtitle }}</div>
+        <div class="text-caption text-grey">{{ shownSubtitle }}</div>
       </slot>
     </q-card-section>
 
@@ -38,6 +38,8 @@
           v-model="identifier"
           :disable="loading"
           :label="identifierLabel"
+          :types="principalTypes"
+          :texts="principalTexts"
           data-test="principal"
           @update:principal-type="principalType = $event"
         />
@@ -116,9 +118,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { SidPrincipalInput } from "../../quasar";
-import type { PrincipalType } from "../../quasar";
+import { computed, ref } from "vue";
+import {
+  ALL_PRINCIPAL_TYPES,
+  DEFAULT_PRINCIPAL_INPUT_TEXTS,
+  SidPrincipalInput,
+} from "../../quasar";
+import type {
+  AcceptedPrincipalType,
+  PrincipalInputTexts,
+  PrincipalType,
+} from "../../quasar";
 import { normalizePrincipal, refusalMessage } from "../../index";
 import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
@@ -154,6 +164,10 @@ const props = withDefaults(
     registerUrl?: string;
     /** OPAQUE step labels (step 1-3) */
     opaqueStepLabels?: Record<number, string>;
+    /** The principal types this instance signs in with. Default: every type. */
+    principalTypes?: AcceptedPrincipalType[];
+    /** Replacements for the identifier field's texts. */
+    principalTexts?: Partial<PrincipalInputTexts>;
     /** External login function — receives (identifier, password, stepCallback) */
     loginFn: (
       identifier: string,
@@ -167,9 +181,13 @@ const props = withDefaults(
   }>(),
   {
     title: "Sign in",
-    subtitle: "Enter your email, phone, or username to continue",
+    // Without one the subtitle names the accepted types.
+    subtitle: undefined,
     submitLabel: "Sign in",
-    identifierLabel: "Email, phone, or username",
+    // Without one the field names the accepted types.
+    identifierLabel: undefined,
+    principalTypes: () => ["email", "phone", "username"],
+    principalTexts: () => ({}),
     passwordLabel: "Password",
     passwordRequiredText: REQUIRED_FIELD_TEXT,
     showForgotPassword: true,
@@ -195,6 +213,14 @@ const emit = defineEmits<{
   "forgot-password": [];
 }>();
 
+const shownSubtitle = computed(
+  () =>
+    props.subtitle ??
+    { ...DEFAULT_PRINCIPAL_INPUT_TEXTS, ...props.principalTexts }.loginSubtitle(
+      ALL_PRINCIPAL_TYPES.filter((t) => props.principalTypes.includes(t)),
+    ),
+);
+
 const identifier = ref("");
 const principalType = ref<PrincipalType>("unknown");
 const password = ref("");

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

@@ -1,5 +1,13 @@
 import { describe, it, expect, vi } from "vitest";
 import { flushPromises, mount } from "@vue/test-utils";
+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 {
+  BadRequest,
+  ErrorInfo,
+} from "@structured-id/proto/google/rpc/error_details";
 import SidRegistrationForm from "./SidRegistrationForm.vue";
 
 const quasarStubs = {
@@ -16,10 +24,12 @@ const quasarStubs = {
     emits: ["submit"],
   },
   "q-input": {
-    props: ["modelValue"],
+    props: ["modelValue", "error", "errorMessage"],
     emits: ["update:modelValue"],
+    // The form re-validates the confirmation through the QInput API.
+    methods: { validate: () => true },
     template:
-      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+      '<input :value="modelValue" :data-error="error ? errorMessage : undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
   },
   "q-btn": { template: '<button type="submit"><slot /></button>' },
   "sid-password-ceremony": {
@@ -30,13 +40,49 @@ const quasarStubs = {
       '<div class="ceremony" :data-outcome="outcome" :data-refused="refusedText" :data-length="length" :data-fields="fields" />',
   },
   "sid-principal-input": {
-    props: ["modelValue", "disable", "label"],
+    name: "SidPrincipalInput",
+    props: [
+      "modelValue",
+      "disable",
+      "label",
+      "types",
+      "minUsernameLength",
+      "fieldError",
+    ],
     emits: ["update:modelValue", "update:principal-type"],
     template:
-      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+      '<input :value="modelValue" :data-error="fieldError || undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
   },
 };
 
+/** A refusal as the gRPC-Web transport raises it, with field violations. */
+function refusedFields(
+  violations: { field: string; description: string }[],
+): RpcError {
+  const bad = Any.pack(
+    BadRequest.create({
+      fieldViolations: violations.map((v) => ({ ...v, reason: "" })),
+    }),
+    BadRequest,
+  );
+  const info = Any.pack(
+    ErrorInfo.create({
+      reason: "INVALID_FIELD_VALUE",
+      domain: "structured.id",
+      metadata: {},
+    }),
+    ErrorInfo,
+  );
+  const status = Status.create({
+    code: 3,
+    message: "invalid",
+    details: [info, bad],
+  });
+  return new RpcError("invalid", "INVALID_ARGUMENT", {
+    "grpc-status-details-bin": base64encode(Status.toBinary(status)),
+  });
+}
+
 const registerFn = vi.fn().mockResolvedValue(undefined);
 
 function mountForm(props = {}) {
@@ -297,6 +343,212 @@ 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");
+    });
+  });
+
+  describe("principal", () => {
+    function principalInput(props = {}) {
+      return mountForm(props).findComponent({ name: "SidPrincipalInput" });
+    }
+
+    // The field takes only the types the instance or the scenario admits.
+    it("passes the admitted principal types to the field", () => {
+      expect(
+        principalInput({ principalTypes: ["email"] }).props("types"),
+      ).toEqual(["email"]);
+      expect(principalInput().props("types")).toEqual([
+        "email",
+        "phone",
+        "username",
+      ]);
+    });
+
+    // A short username is admitted only in the registration that presents
+    // the installation's claim token (its first administrator); an ordinary
+    // registration keeps the registration minimum.
+    it("admits a short username only with the claim token", () => {
+      expect(principalInput().props("minUsernameLength")).toBe(6);
+      expect(
+        principalInput({ claimRequired: true }).props("minUsernameLength"),
+      ).toBe(3);
+    });
+
+    // Regression: a refusal that named the identifier field reached the
+    // user only as an undecoded banner. It is shown under the field it
+    // concerns, and the claim token's under the token.
+    it("shows each field violation under its field", async () => {
+      registerFn.mockRejectedValueOnce(
+        refusedFields([
+          { field: "principal", description: "Registration here takes email" },
+          {
+            field: "claim_token",
+            description: "Not this installation's token",
+          },
+        ]),
+      );
+      const w = mountForm({ claimRequired: true });
+      const [claim, principal, password, confirm] = w.findAll("input");
+      await claim.setValue("sidclaim_x");
+      await principal.setValue("sid");
+      await password.setValue("Secret-Pass-123");
+      await confirm.setValue("Secret-Pass-123");
+      await w.find("form").trigger("submit");
+      await flushPromises();
+      w.findComponent({ name: "SidPasswordCeremony" }).vm.$emit(
+        "settled",
+        "refused",
+      );
+      await flushPromises();
+
+      const [claimAfter, principalAfter] = w.findAll("input");
+      expect(principalAfter.attributes("data-error")).toBe(
+        "Registration here takes email",
+      );
+      expect(claimAfter.attributes("data-error")).toBe(
+        "Not this installation's token",
+      );
+      expect(w.text()).not.toContain("invalid");
+
+      // Editing the field clears what the server said about it.
+      await principalAfter.setValue("owner@sid.example.com");
+      expect(w.findAll("input")[1].attributes("data-error")).toBeUndefined();
+    });
+
+    async function refuse(
+      violations: { field: string; description: string }[],
+      props = {},
+    ) {
+      registerFn.mockRejectedValueOnce(refusedFields(violations));
+      const w = mountForm(props);
+      const [principal, password, confirm] = w.findAll("input");
+      await principal.setValue("user@sid.example.com");
+      await password.setValue("Secret-Pass-123");
+      await confirm.setValue("Secret-Pass-123");
+      await w.find("form").trigger("submit");
+      await flushPromises();
+      w.findComponent({ name: "SidPasswordCeremony" }).vm.$emit(
+        "settled",
+        "refused",
+      );
+      await flushPromises();
+      return w;
+    }
+
+    // Several requirements of one field are all shown at once, not only the
+    // last one the server listed.
+    it("keeps every violation of one field", async () => {
+      const w = await refuse([
+        { field: "password", description: "At least 1 digit" },
+        { field: "password", description: "At least 1 symbol" },
+      ]);
+      expect(w.findAll("input")[1].attributes("data-error")).toBe(
+        "At least 1 digit; At least 1 symbol",
+      );
+    });
+
+    // Regression: a refusal bound to the password stayed under it after the
+    // password was edited.
+    it("clears the password's refusal when the password changes", async () => {
+      const w = await refuse([
+        { field: "password", description: "Not accepted" },
+      ]);
+      await w.findAll("input")[1].setValue("Another-Pass-456");
+      expect(w.findAll("input")[1].attributes("data-error")).toBeUndefined();
+    });
+
+    // A violation of a field the form does not show (the invite code while
+    // no invite is asked for) stays in the banner instead of disappearing.
+    it("keeps a hidden field's violation in the banner", async () => {
+      const w = await refuse([
+        { field: "invite_code", description: "This invite has expired" },
+      ]);
+      expect(w.text()).toContain("This invite has expired");
+    });
+  });
+
   it("renders footer slot", () => {
     const w = mount(SidRegistrationForm, {
       props: { registerFn },

package/src/profile/components/SidRegistrationForm.vue

@@ -80,7 +80,10 @@
           spellcheck="false"
           :disable="loading"
           :rules="[(v: string) => !!v.trim() || claimTokenRequiredText]"
+          :error="!!fieldErrors.claimToken"
+          :error-message="fieldErrors.claimToken"
           data-test="claim-token"
+          @update:model-value="fieldErrors.claimToken = undefined"
         >
           <template v-slot:prepend>
             <q-icon name="sym_o_key" />
@@ -108,6 +111,9 @@
             inviteRequired ? [(v: string) => !!v || inviteCodeRequiredText] : []
           "
           :hint="inviteCodeHint"
+          :error="!!fieldErrors.inviteCode"
+          :error-message="fieldErrors.inviteCode"
+          @update:model-value="fieldErrors.inviteCode = undefined"
         >
           <template v-slot:prepend>
             <q-icon name="sym_o_vpn_key" />
@@ -129,9 +135,13 @@
           v-model="identifier"
           :disable="loading"
           :label="identifierLabel"
+          :types="principalTypes"
+          :texts="principalTexts"
           :lazy-rules="false"
-          :min-username-length="usernameMinLength"
+          :min-username-length="effectiveUsernameMinLength"
+          :field-error="fieldErrors.principal"
           data-test="principal"
+          @update:model-value="fieldErrors.principal = undefined"
           @update:principal-type="principalType = $event"
         />
 
@@ -146,6 +156,8 @@
           :disable="loading"
           :lazy-rules="false"
           :rules="passwordRules"
+          :error="!!fieldErrors.password"
+          :error-message="fieldErrors.password"
           data-test="password"
           @update:model-value="onPasswordInput"
         >
@@ -217,14 +229,26 @@ 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).
 interface ValidatableInput {
   validate: () => boolean | Promise<boolean>;
 }
-import type { PrincipalType } from "../../quasar";
-import { normalizePrincipal, refusalMessage } from "../../index";
+import type {
+  AcceptedPrincipalType,
+  PrincipalInputTexts,
+  PrincipalType,
+} from "../../quasar";
+import { normalizePrincipal, refusalMessage, rpcRefusal } from "../../index";
 import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
 /** What the form collected besides the identifier and password. */
@@ -254,8 +278,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,24 +329,38 @@ 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);
-     *  login flow can pass 3 since short usernames are valid post-registration. */
+    /**
+     * The shortest username an ordinary registration admits; the instance's
+     * registration settings give it (6 on the global namespace).
+     */
     usernameMinLength?: number;
+    /**
+     * The shortest username the claim registration admits: the
+     * installation's first administrator may take a short name, nobody else.
+     */
+    claimUsernameMinLength?: number;
+    /**
+     * The principal types this registration admits, from the instance's
+     * registration settings or the scenario (the platform claim at SaaS
+     * central takes email only). Default: every type.
+     */
+    principalTypes?: AcceptedPrincipalType[];
+    /** Replacements for the identifier field's texts. */
+    principalTexts?: Partial<PrincipalInputTexts>;
   }>(),
   {
     title: "Create account",
     subtitle: "Set up your StructuredID account",
     submitLabel: "Create account",
-    identifierLabel: "Email, phone, or username",
+    // Without one the field names the admitted types.
+    identifierLabel: undefined,
     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",
@@ -342,10 +382,38 @@ 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,
+    claimUsernameMinLength: 3,
+    principalTypes: () => ["email", "phone", "username"],
+    principalTexts: () => ({}),
     acceptedText: "Account created",
   },
 );
 
+// The claim registration is a scenario of its own: its admission rules are
+// fixed here until the instance's flow configuration can set them.
+const effectiveUsernameMinLength = computed(() =>
+  props.claimRequired ? props.claimUsernameMinLength : props.usernameMinLength,
+);
+
+/**
+ * What the server said about each field of the request, shown under it until
+ * the field is edited. The request fields are the registration Start's.
+ */
+const fieldErrors = ref<{
+  principal?: string;
+  claimToken?: string;
+  inviteCode?: string;
+  password?: string;
+}>({});
+
+/** Request field → form field. */
+const FIELD_OF: Record<string, keyof typeof fieldErrors.value> = {
+  principal: "principal",
+  claim_token: "claimToken",
+  invite_code: "inviteCode",
+  password: "password",
+};
+
 const emit = defineEmits<{
   success: [data: { identifier: string; principalType: string }];
   error: [error: Error];
@@ -380,16 +448,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).
@@ -398,6 +464,8 @@ watch(password, () => {
 });
 
 function onPasswordInput() {
+  // What the server said about the password was about its earlier value.
+  fieldErrors.value.password = undefined;
   // Trigger downstream confirm re-validation immediately (don't wait for blur).
   if (confirmPassword.value) confirmRef.value?.validate();
 }
@@ -420,6 +488,7 @@ async function onSubmit() {
 
   loading.value = true;
   error.value = null;
+  fieldErrors.value = {};
   progress.value = null;
   ceremony.value = "running";
   // A phone's keyboard would cover the ceremony.
@@ -428,7 +497,7 @@ async function onSubmit() {
   try {
     const normalized = normalizePrincipal(
       identifier.value,
-      props.usernameMinLength,
+      effectiveUsernameMinLength.value,
     );
     const extras: RegistrationExtras = props.claimRequired
       ? { claimToken: claimToken.value.trim() }
@@ -447,7 +516,31 @@ async function onSubmit() {
   } catch (e) {
     success.value = false;
     const err = e instanceof Error ? e : new Error("Registration failed");
-    error.value = refusalMessage(e, "Registration failed");
+    // A violation of a field the form shows goes under that field, all of a
+    // field's together; the banner keeps the rest (a field not shown now
+    // included), or the general reason when nothing is left.
+    const shown: Record<keyof typeof fieldErrors.value, boolean> = {
+      principal: true,
+      password: true,
+      claimToken: props.claimRequired,
+      inviteCode: showInviteField.value,
+    };
+    const rest: string[] = [];
+    for (const v of rpcRefusal(e)?.fieldViolations ?? []) {
+      const field = FIELD_OF[v.field];
+      if (field && shown[field]) {
+        const before = fieldErrors.value[field];
+        fieldErrors.value[field] = before ? `${before}; ${v.text}` : v.text;
+      } else {
+        rest.push(v.text);
+      }
+    }
+    const bound = Object.keys(fieldErrors.value).length > 0;
+    error.value = rest.length
+      ? rest.join("; ")
+      : bound
+        ? null
+        : refusalMessage(e, "Registration failed");
     announce = () => emit("error", err);
     ceremony.value = "refused";
   } finally {

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) };
+}

package/src/quasar/SidPrincipalInput.test.ts

@@ -7,7 +7,14 @@ import { REQUIRED_FIELD_TEXT } from "../utils/validators";
 const stubs = {
   "q-input": defineComponent({
     name: "QInputStub",
-    props: ["modelValue", "rules", "lazyRules"],
+    props: [
+      "modelValue",
+      "rules",
+      "lazyRules",
+      "label",
+      "error",
+      "errorMessage",
+    ],
     template: "<div><slot name='prepend' /><slot name='append' /></div>",
   }),
   "q-icon": { template: "<span />" },
@@ -46,4 +53,68 @@ describe("SidPrincipalInput", () => {
     const [required] = input({ required: false }).props("rules") as Rule[];
     expect(required("")).toBe(true);
   });
+
+  // A field that accepts only some principal types refuses the others before
+  // any call, naming what it accepts: a registration that takes email only
+  // must not let a username reach the server.
+  it("refuses a principal type it does not accept", () => {
+    const [, type] = input({ types: ["email"] }).props("rules") as Rule[];
+    expect(type("alice_wonder")).toBe("Enter an email address");
+    expect(type("+380501234567")).toBe("Enter an email address");
+    expect(type("alice@sid.example.com")).toBe(true);
+    const [, two] = input({ types: ["email", "username"] }).props(
+      "rules",
+    ) as Rule[];
+    expect(two("+380501234567")).toBe("Enter an email address or a username");
+    expect(two("alice_wonder")).toBe(true);
+  });
+
+  // Regression: a username shorter than the minimum was not recognized as a
+  // username and the field asked for "email, phone, or username" instead of
+  // saying the minimum.
+  it("tells a too-short username the minimum length", () => {
+    const [, type] = input({ minUsernameLength: 6 }).props("rules") as Rule[];
+    expect(type("sid")).toBe("A username has at least 6 characters");
+    expect(type("sidsid")).toBe(true);
+    const [, login] = input().props("rules") as Rule[];
+    expect(login("sid")).toBe(true);
+    expect(login("si")).toBe("A username has at least 3 characters");
+  });
+
+  // The label names the accepted types unless the form gives its own.
+  it("labels the field by the types it accepts", () => {
+    expect(input().props("label")).toBe("Email, phone, or username");
+    expect(input({ types: ["email"] }).props("label")).toBe("Email");
+    expect(input({ types: ["email", "username"] }).props("label")).toBe(
+      "Email or username",
+    );
+    expect(
+      input({ types: ["email"], label: "Your email" }).props("label"),
+    ).toBe("Your email");
+  });
+
+  // The chip naming the detected type is a text like the others: a
+  // translated form does not switch back to English when a type is found.
+  it("takes the type chip's text from the texts", () => {
+    const w = mount(SidPrincipalInput, {
+      props: {
+        modelValue: "alice@sid.example.com",
+        texts: { typeChip: (t: string) => `chip:${t}` },
+      },
+      global: { stubs },
+    });
+    expect(w.text()).toContain("chip:email");
+  });
+
+  // A refusal the server bound to this field is shown on it.
+  it("shows an error given from outside", () => {
+    const shown = input({
+      fieldError: "Registration here takes an email address",
+    });
+    expect(shown.props("error")).toBe(true);
+    expect(shown.props("errorMessage")).toBe(
+      "Registration here takes an email address",
+    );
+    expect(input().props("error")).toBe(false);
+  });
 });

package/src/quasar/SidPrincipalInput.vue

@@ -2,8 +2,10 @@
   <q-input
     ref="inputRef"
     v-model="model"
-    :label="label"
+    :label="fieldLabel"
     :rules="[requiredRule, typeRule]"
+    :error="!!fieldError"
+    :error-message="fieldError ?? undefined"
     outlined
     type="text"
     :inputmode="inputMode"
@@ -35,13 +37,32 @@ import { ref, computed, watch } from "vue";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { REQUIRED_FIELD_TEXT, isValidEmail } from "../utils/validators";
 
-export type PrincipalType = "email" | "phone" | "username" | "unknown";
+import {
+  ALL_PRINCIPAL_TYPES,
+  DEFAULT_PRINCIPAL_INPUT_TEXTS,
+  type AcceptedPrincipalType,
+  type PrincipalInputTexts,
+  type PrincipalType,
+} from "./principalInputTexts";
+
+export type { PrincipalType };
 
 interface Props {
   modelValue: string;
+  /**
+   * The principal types this field accepts; the others are refused before
+   * any call, with a text naming the accepted ones. The instance's settings
+   * or the scenario decide it (a registration may take email only).
+   */
+  types?: AcceptedPrincipalType[];
   minUsernameLength?: number;
   required?: boolean;
+  /** The label; without one the field names the accepted types. */
   label?: string;
+  /** A refusal the server bound to this field, shown on it until edited. */
+  fieldError?: string | null;
+  /** Replacements for the field's texts. */
+  texts?: Partial<PrincipalInputTexts>;
   /** What an empty required field says. */
   requiredText?: string;
   /**
@@ -54,14 +75,31 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: "",
+  types: () => [...ALL_PRINCIPAL_TYPES],
   // Username rule: ^[a-z0-9_]{3,32}$ (display form ^[a-zA-Z0-9_]{3,32}$).
   minUsernameLength: 3,
   required: true,
-  label: "Email, phone, or username",
+  label: undefined,
+  fieldError: null,
+  texts: () => ({}),
   requiredText: REQUIRED_FIELD_TEXT,
   lazyRules: true,
 });
 
+const text = computed<PrincipalInputTexts>(() => ({
+  ...DEFAULT_PRINCIPAL_INPUT_TEXTS,
+  ...props.texts,
+}));
+
+/** The accepted types in their fixed order. */
+const accepted = computed(() =>
+  ALL_PRINCIPAL_TYPES.filter((t) => props.types.includes(t)),
+);
+
+const fieldLabel = computed(
+  () => props.label ?? text.value.label(accepted.value),
+);
+
 const emit = defineEmits<{
   "update:modelValue": [value: string];
   "update:principalType": [type: PrincipalType];
@@ -87,16 +125,11 @@ function detectType(value: string): PrincipalType {
   // Email: contains @ (checked after phone to exclude edge cases)
   if (trimmed.includes("@")) return "email";
 
-  // Username: ^[a-z0-9_]{3,32}$, no leading/trailing _, no __
-  // Detection is relaxed: accepts uppercase (will normalize), checks min length
-  const re = new RegExp(
-    `^[a-zA-Z0-9_]{${props.minUsernameLength},${USERNAME_MAX_LENGTH}}$`,
-  );
-  if (re.test(trimmed) && !trimmed.startsWith("_") && !trimmed.endsWith("_")) {
-    return "username";
-  }
+  // Username by its shape at any length, so that a short one is told the
+  // minimum instead of being taken for no type at all. Uppercase is accepted
+  // (the server derives the key); length and underscores are the rule's.
+  if (/^[a-zA-Z0-9_]+$/.test(trimmed)) return "username";
 
-  // Still typing — not enough chars to determine
   return "unknown";
 }
 
@@ -119,26 +152,26 @@ const requiredRule = (val: string) =>
 const typeRule = (val: string): string | true => {
   if (!val) return true; // required rule handles empty
   const type = detectType(val);
+  if (type === "unknown" || !accepted.value.includes(type)) {
+    return text.value.enterAccepted(accepted.value);
+  }
 
   switch (type) {
     case "email":
-      return isValidEmail(val.trim()) || "Invalid email address";
+      return isValidEmail(val.trim()) || text.value.invalidEmail;
     case "phone":
-      return isValidPhoneNumber(val) || "Invalid phone number";
+      return isValidPhoneNumber(val) || text.value.invalidPhone;
     case "username": {
-      const lower = val.toLowerCase();
-      const re = new RegExp(
-        `^[a-z0-9_]{${props.minUsernameLength},${USERNAME_MAX_LENGTH}}$`,
-      );
-      if (!re.test(lower)) return "Invalid username";
-      if (lower.startsWith("_") || lower.endsWith("_"))
-        return "Username cannot start or end with underscore";
-      if (lower.includes("__"))
-        return "Username cannot contain consecutive underscores";
+      const name = val.trim();
+      if (name.length < props.minUsernameLength)
+        return text.value.usernameTooShort(props.minUsernameLength);
+      if (name.length > USERNAME_MAX_LENGTH)
+        return text.value.usernameTooLong(USERNAME_MAX_LENGTH);
+      if (name.startsWith("_") || name.endsWith("_"))
+        return text.value.usernameUnderscoreEdge;
+      if (name.includes("__")) return text.value.usernameDoubleUnderscore;
       return true;
     }
-    default:
-      return "Enter email, phone (+...), or username";
   }
 };
 
@@ -177,18 +210,11 @@ const inputMode = computed(() => {
   }
 });
 
-const chipLabel = computed(() => {
-  switch (detectedType.value) {
-    case "email":
-      return "email";
-    case "phone":
-      return "phone";
-    case "username":
-      return "username";
-    default:
-      return "";
-  }
-});
+const chipLabel = computed(() =>
+  detectedType.value === "unknown"
+    ? ""
+    : text.value.typeChip(detectedType.value),
+);
 
 const chipColor = computed(() => {
   switch (detectedType.value) {

package/src/quasar/index.ts

@@ -5,6 +5,14 @@
  * Import as: import { SidPrincipalInput } from '@structured-id/ui-core/quasar'
  */
 export { default as SidPrincipalInput } from "./SidPrincipalInput.vue";
-export type { PrincipalType } from "./SidPrincipalInput.vue";
+export type {
+  AcceptedPrincipalType,
+  PrincipalInputTexts,
+  PrincipalType,
+} from "./principalInputTexts";
+export {
+  ALL_PRINCIPAL_TYPES,
+  DEFAULT_PRINCIPAL_INPUT_TEXTS,
+} from "./principalInputTexts";
 export { default as SidPasswordCeremony } from "./SidPasswordCeremony.vue";
 export type { CeremonyOutcome } from "./SidPasswordCeremony.vue";

package/src/quasar/principalInputTexts.ts

@@ -0,0 +1,68 @@
+/** The principal types and texts of `SidPrincipalInput`. */
+
+export type PrincipalType = "email" | "phone" | "username" | "unknown";
+
+/** A principal type a field can accept. */
+export type AcceptedPrincipalType = Exclude<PrincipalType, "unknown">;
+
+/** Every type, in the order the label and the texts name them. */
+export const ALL_PRINCIPAL_TYPES: readonly AcceptedPrincipalType[] = [
+  "email",
+  "phone",
+  "username",
+];
+
+/** What the field says; each text can be replaced (translated) by the form. */
+export interface PrincipalInputTexts {
+  /** The label for the accepted types, when the form gives none. */
+  label: (types: AcceptedPrincipalType[]) => string;
+  /** A value of a type the field does not accept, or of no type at all. */
+  enterAccepted: (types: AcceptedPrincipalType[]) => string;
+  /** The chip naming the type the value was recognized as. */
+  typeChip: (type: AcceptedPrincipalType) => string;
+  /** The login form's default subtitle for the accepted types. */
+  loginSubtitle: (types: AcceptedPrincipalType[]) => string;
+  invalidEmail: string;
+  invalidPhone: string;
+  usernameTooShort: (min: number) => string;
+  usernameTooLong: (max: number) => string;
+  usernameUnderscoreEdge: string;
+  usernameDoubleUnderscore: string;
+}
+
+/** `a`, `a or b`, `a, b, or c`. */
+function list(words: string[]): string {
+  if (words.length <= 1) return words.join("");
+  if (words.length === 2) return `${words[0]} or ${words[1]}`;
+  return `${words.slice(0, -1).join(", ")}, or ${words[words.length - 1]}`;
+}
+
+const LABEL_WORDS: Record<AcceptedPrincipalType, string> = {
+  email: "email",
+  phone: "phone",
+  username: "username",
+};
+
+const ENTER_WORDS: Record<AcceptedPrincipalType, string> = {
+  email: "an email address",
+  phone: "a phone number (+...)",
+  username: "a username",
+};
+
+export const DEFAULT_PRINCIPAL_INPUT_TEXTS: PrincipalInputTexts = {
+  label: (types) => {
+    const text = list(types.map((t) => LABEL_WORDS[t]));
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  },
+  enterAccepted: (types) => `Enter ${list(types.map((t) => ENTER_WORDS[t]))}`,
+  typeChip: (type) => LABEL_WORDS[type],
+  loginSubtitle: (types) =>
+    `Enter your ${list(types.map((t) => LABEL_WORDS[t]))} to continue`,
+  invalidEmail: "Invalid email address",
+  invalidPhone: "Invalid phone number",
+  usernameTooShort: (min) => `A username has at least ${min} characters`,
+  usernameTooLong: (max) => `A username has at most ${max} characters`,
+  usernameUnderscoreEdge: "A username cannot start or end with an underscore",
+  usernameDoubleUnderscore:
+    "A username cannot contain two underscores in a row",
+};

package/src/utils/rpcRefusal.test.ts

@@ -4,6 +4,7 @@ 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 {
+  BadRequest,
   ErrorInfo,
   LocalizedMessage,
 } from "@structured-id/proto/google/rpc/error_details";
@@ -142,6 +143,47 @@ describe("rpcRefusal", () => {
     );
   });
 
+  // A refusal that names the fields it concerns lets the form show each
+  // text under its field: the server's text for people when it sent one,
+  // else its description.
+  it("reads the field violations", () => {
+    const bad = Any.pack(
+      BadRequest.create({
+        fieldViolations: [
+          {
+            field: "principal",
+            description: "registration here accepts: email",
+            reason: "PRINCIPAL_TYPE_NOT_ACCEPTED",
+          },
+          {
+            field: "claim_token",
+            description: "not the installation's token",
+            reason: "",
+            localizedMessage: LocalizedMessage.create({
+              locale: "en",
+              message: "This claim token is not valid.",
+            }),
+          },
+        ],
+      }),
+      BadRequest,
+    );
+    const refusal = rpcRefusal(refused([info, bad]));
+    expect(refusal?.fieldViolations).toEqual([
+      {
+        field: "principal",
+        reason: "PRINCIPAL_TYPE_NOT_ACCEPTED",
+        text: "registration here accepts: email",
+      },
+      {
+        field: "claim_token",
+        reason: null,
+        text: "This claim token is not valid.",
+      },
+    ]);
+    expect(rpcRefusal(refused([info]))?.fieldViolations).toEqual([]);
+  });
+
   it("survives an unreadable trailer", () => {
     const err = new RpcError("m", "INTERNAL", {
       "grpc-status-details-bin": "!!!",

package/src/utils/rpcRefusal.ts

@@ -8,6 +8,7 @@ import { base64decode } from "@protobuf-ts/runtime";
 import { Any } from "@structured-id/proto/google/protobuf/any";
 import { Status } from "@structured-id/proto/google/rpc/status";
 import {
+  BadRequest,
   ErrorInfo,
   LocalizedMessage,
 } from "@structured-id/proto/google/rpc/error_details";
@@ -28,6 +29,18 @@ export interface RpcRefusal {
   message: string;
   /** The server's text for people (`LocalizedMessage`), when it sent one. */
   localized: string | null;
+  /** The request fields the refusal names (`BadRequest`), in the server's order. */
+  fieldViolations: FieldViolation[];
+}
+
+/** One request field a refusal names. */
+export interface FieldViolation {
+  /** The field's path in the request, as the proto names it (`principal`). */
+  field: string;
+  /** The field-level reason, when the server gave one. */
+  reason: string | null;
+  /** What to show under the field: the server's text for people, else its description. */
+  text: string;
 }
 
 /**
@@ -50,6 +63,7 @@ export function rpcRefusal(err: unknown): RpcRefusal | null {
     metadata: {},
     message: decodeStatusMessage(err.message),
     localized: null,
+    fieldViolations: [],
   };
   for (const detail of statusDetails(err.meta[DETAILS_KEY])) {
     if (Any.contains(detail, ErrorInfo)) {
@@ -61,6 +75,14 @@ export function rpcRefusal(err: unknown): RpcRefusal | null {
         info.domain === SID_ERROR_DOMAIN ? sidReason(info.reason) : null;
     } else if (Any.contains(detail, LocalizedMessage)) {
       refusal.localized = Any.unpack(detail, LocalizedMessage).message;
+    } else if (Any.contains(detail, BadRequest)) {
+      for (const v of Any.unpack(detail, BadRequest).fieldViolations) {
+        refusal.fieldViolations.push({
+          field: v.field,
+          reason: v.reason || null,
+          text: v.localizedMessage?.message || v.description,
+        });
+      }
     }
   }
   return refusal;