@structured-id/ui-core 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structured-id/ui-core",
-  "version": "4.0.0",
+  "version": "4.2.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

@@ -23,13 +23,11 @@ const quasarStubs = {
     template:
       '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
   }),
-  "q-btn": { template: '<button type="submit"><slot /></button>' },
-  "sid-principal-input": defineComponent({
-    props: ["modelValue", "disable"],
-    emits: ["update:modelValue", "update:principal-type"],
-    template:
-      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-  }),
+  "q-btn": {
+    props: ["disable"],
+    template: '<button type="submit" :disabled="disable"><slot /></button>',
+  },
+  "q-chip": { template: "<span><slot /></span>" },
   "router-link": { template: "<a><slot /></a>" },
 };
 
@@ -80,11 +78,66 @@ 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");
+  });
+
+  // Fewer than three characters are nobody yet: the form cannot sign in
+  // with them, so its button stays disabled until a third is typed.
+  it("cannot sign in with fewer than three characters", async () => {
+    const w = mountLogin();
+    const [principal, password] = w.findAll("input");
+    await password.setValue("secret");
+    for (const [value, disabled] of [
+      ["al", true],
+      [" al ", true],
+      ["ali", false],
+    ] as const) {
+      await principal.setValue(value);
+      expect(w.find("button").attributes("disabled") !== undefined, value).toBe(
+        disabled,
+      );
+    }
+  });
+
+  // Regression: with "ali.ce" shown as not a username the button was still
+  // enabled, since the form only counted characters. It stays disabled until
+  // the identifier is a well-formed principal of an accepted type, without
+  // waiting for the field's error to appear.
+  it("cannot sign in until the identifier is well-formed", async () => {
+    const w = mountLogin({ principalTypes: ["email", "username"] });
+    const [principal, password] = w.findAll("input");
+    await password.setValue("secret");
+    for (const [value, disabled] of [
+      ["ali", false],
+      ["ali.ce", true],
+      ["ali ce", true],
+      ["+380501234567", true],
+      ["alice@", true],
+      ["alice@sid.example.com", false],
+    ] as const) {
+      await principal.setValue(value);
+      expect(w.find("button").attributes("disabled") !== undefined, value).toBe(
+        disabled,
+      );
+    }
+  });
+
   // 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 password = w.findAllComponents({ name: "QInputStub" })[1];
     const lazy = password.props("lazyRules");
     expect(lazy === "" || lazy === true).toBe(true);
     const [required] = password.props("rules") as ((v: string) => unknown)[];

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,8 +38,11 @@
           v-model="identifier"
           :disable="loading"
           :label="identifierLabel"
+          :types="principalTypes"
+          :texts="principalTexts"
           data-test="principal"
           @update:principal-type="principalType = $event"
+          @update:valid="principalValid = $event"
         />
 
         <q-input
@@ -72,7 +75,7 @@
           color="primary"
           class="full-width"
           :loading="loading"
-          :disable="!identifier || !password"
+          :disable="!principalValid || !password"
           data-test="submit"
         />
       </q-form>
@@ -116,9 +119,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 +165,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 +182,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,8 +214,17 @@ 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 principalValid = ref(false);
 const password = ref("");
 const showPassword = ref(false);
 const loading = ref(false);

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,12 +24,17 @@ 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": {
+    props: ["disable"],
+    template: '<button type="submit" :disabled="disable"><slot /></button>',
   },
-  "q-btn": { template: '<button type="submit"><slot /></button>' },
   "sid-password-ceremony": {
     name: "SidPasswordCeremony",
     props: ["outcome", "refusedText", "length", "fields"],
@@ -29,14 +42,36 @@ const quasarStubs = {
     template:
       '<div class="ceremony" :data-outcome="outcome" :data-refused="refusedText" :data-length="length" :data-fields="fields" />',
   },
-  "sid-principal-input": {
-    props: ["modelValue", "disable", "label"],
-    emits: ["update:modelValue", "update:principal-type"],
-    template:
-      '<input :value="modelValue" @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 = {}) {
@@ -132,6 +167,30 @@ describe("SidRegistrationForm", () => {
     );
   });
 
+  // The registration cannot start until the identifier is a well-formed
+  // principal this scenario admits: fewer than three characters are nobody
+  // yet, and a username shorter than this registration's minimum, or with a
+  // character a username cannot hold, keeps the button disabled too.
+  it("cannot register until the identifier is well-formed", async () => {
+    const w = mountForm({ claimRequired: false });
+    const [principal, password, confirm] = w.findAll("input");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    for (const [value, disabled] of [
+      ["ow", true],
+      [" ow ", true],
+      ["owner", true],
+      ["owner.one", true],
+      ["owner_one", false],
+      ["owner@example.com", false],
+    ] as const) {
+      await principal.setValue(value);
+      expect(w.find("button").attributes("disabled") !== undefined, value).toBe(
+        disabled,
+      );
+    }
+  });
+
   it("submits the invite code when the installation is claimed", async () => {
     registerFn.mockClear();
     const w = mountForm({ initialInviteCode: "ABCD1234" });
@@ -383,6 +442,126 @@ describe("SidRegistrationForm", () => {
     });
   });
 
+  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,10 +135,15 @@
           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"
+          @update:valid="principalValid = $event"
         />
 
         <slot name="extra-fields" />
@@ -146,6 +157,8 @@
           :disable="loading"
           :lazy-rules="false"
           :rules="passwordRules"
+          :error="!!fieldErrors.password"
+          :error-message="fieldErrors.password"
           data-test="password"
           @update:model-value="onPasswordInput"
         >
@@ -188,7 +201,7 @@
           class="full-width"
           :loading="loading"
           :disable="
-            !identifier ||
+            !principalValid ||
             !password ||
             (showConfirmPassword && !confirmPassword) ||
             (claimRequired && !claimToken.trim()) ||
@@ -231,8 +244,12 @@ import {
 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. */
@@ -315,15 +332,31 @@ const props = withDefaults(
     acceptedText?: string;
     /** 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,
@@ -350,10 +383,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];
@@ -373,6 +434,7 @@ const PAINT_FALLBACK_MS = 250;
 
 const identifier = ref("");
 const principalType = ref<PrincipalType>("unknown");
+const principalValid = ref(false);
 const password = ref("");
 const confirmPassword = ref("");
 const showPassword = ref(false);
@@ -404,6 +466,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();
 }
@@ -426,6 +490,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.
@@ -434,7 +499,7 @@ async function onSubmit() {
   try {
     const normalized = normalizePrincipal(
       identifier.value,
-      props.usernameMinLength,
+      effectiveUsernameMinLength.value,
     );
     const extras: RegistrationExtras = props.claimRequired
       ? { claimToken: claimToken.value.trim() }
@@ -453,7 +518,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 {