@structured-id/ui-core 4.1.0 → 4.3.0

package/README.md

@@ -6,7 +6,7 @@ Shared UI package for StructuredID applications: Vue 3 composables, Pinia stores
 
 - **Composables** -- `createAuth` (password ceremonies over an injected ZKPP client), `useAuthApi`, `useAccountApi`, `useIdentityApi`, `useSecurityLevel`, transport setup (`initGrpc`, `initAccountApi`)
 - **Components** -- `SidLoginForm`, `SidRegistrationForm`, `SidMfaChallenge`, `SidPrincipalInput`, profile management pages
-- **Utilities** -- `normalizePrincipal`, `detectLoginInputType`, `rpcRefusal`, validators, formatters
+- **Utilities** -- `normalizePrincipal`, `detectLoginInputType`, `rpcRefusal`, email checks (`initEmail`, `checkEmail`, `isValidEmail`), validators, formatters
 
 The generated messages and clients, the `google.rpc` error model and the gRPC-web / WebTransport transport live in `@structured-id/proto`; import them from there (`@structured-id/proto/sid/v1/identity/identity.client`, `@structured-id/proto/transport`).
 
@@ -34,6 +34,34 @@ const identity = new IdentityServiceClient(getTransport());
 const { login } = createAuth(() => loadZkppClient());
 ```
 
+### Email addresses
+
+Email fields are checked with [`@structured-world/structured-email-address-ts`](https://www.npmjs.com/package/@structured-world/structured-email-address-ts),
+the TypeScript port of the parser the server uses, checked byte-identical
+against it. Its Public Suffix List trie is the application's own asset (the
+bundler emits `psl.bin` from `@structured-world/structured-public-domains`),
+served by the application's host and cached in IndexedDB; where it is served
+from is a setting (`psl.url`), never a third-party CDN. Each namespace's admission mirrors the
+server's email policy: `LOCAL` (an installation's own accounts: internal and
+internationalized domains), `CORPORATE_BASELINE`, `GLOBAL_PERSONAL` (ASCII, no
+IDN, a public mail domain). The server still decides; the field refuses only
+what that namespace never admits.
+
+Load the parser once at start and name the application's namespace (`LOCAL`
+when omitted). The parser is loaded lazily as its own chunk; until it is,
+`checkEmail` answers `pending` and `SidPrincipalInput` keeps the form's submit
+disabled. A field accepting email starts the load itself if the application
+did not.
+
+```ts
+import { GLOBAL_PERSONAL, initEmail } from "@structured-id/ui-core";
+
+// The trie from the application's own copy...
+await initEmail({ policy: GLOBAL_PERSONAL });
+// ...or from where the deployment's configuration says it is served.
+await initEmail({ policy: GLOBAL_PERSONAL, psl: { url: config.pslUrl } });
+```
+
 ## Development
 
 The package ships its TypeScript and Vue sources; the consuming application's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structured-id/ui-core",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -43,9 +43,12 @@
     "@protobuf-ts/runtime": "^2.11.1",
     "@protobuf-ts/runtime-rpc": "^2.11.1",
     "@structured-id/proto": "^0.3.0",
+    "@structured-world/structured-email-address-ts": "^0.0.22",
+    "@structured-world/structured-public-domains": "0.0.x",
     "libphonenumber-js": "^1.13.15"
   },
   "devDependencies": {
+    "@types/node": "^26",
     "@vitejs/plugin-vue": "^6.0.9",
     "@vue/compiler-dom": "^3.5.43",
     "@vue/devtools-api": "^8.2.1",

package/src/assets.d.ts

@@ -0,0 +1,5 @@
+// A Vite asset imported for its served URL (`import url from "./x?url"`).
+declare module "*?url" {
+  const url: string;
+  export default url;
+}

package/src/index.ts

@@ -36,7 +36,16 @@ export { useAuthStore } from "./stores/auth";
 
 // Utils
 export {
+  CORPORATE_BASELINE,
+  GLOBAL_PERSONAL,
+  LOCAL,
+  checkEmail,
+  emailPolicy,
+  emailReady,
+  initEmail,
   isValidEmail,
+  type EmailCheck,
+  type EmailPolicy,
   isValidPhone,
   isValidUuid,
   isValidUsername,

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

@@ -1,8 +1,13 @@
-import { describe, it, expect, vi } from "vitest";
+import { beforeAll, 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";
+import { initEmail } from "../../utils/email";
+import { TEST_PSL } from "../../utils/email.testing";
+
+// As an application does at start: the email parser loaded, LOCAL namespace.
+beforeAll(() => initEmail({ psl: TEST_PSL }));
 
 // Stub all Quasar components as divs
 const quasarStubs = {
@@ -23,13 +28,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>" },
 };
 
@@ -94,11 +97,52 @@ describe("SidLoginForm", () => {
     ).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

@@ -42,6 +42,7 @@
           :texts="principalTexts"
           data-test="principal"
           @update:principal-type="principalType = $event"
+          @update:valid="principalValid = $event"
         />
 
         <q-input
@@ -74,7 +75,7 @@
           color="primary"
           class="full-width"
           :loading="loading"
-          :disable="!identifier || !password"
+          :disable="!principalValid || !password"
           data-test="submit"
         />
       </q-form>
@@ -223,6 +224,7 @@ const shownSubtitle = computed(
 
 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,7 @@
-import { describe, it, expect, vi } from "vitest";
+import { beforeAll, describe, it, expect, vi } from "vitest";
 import { flushPromises, mount } from "@vue/test-utils";
+import { initEmail } from "../../utils/email";
+import { TEST_PSL } from "../../utils/email.testing";
 import { RpcError } from "@protobuf-ts/runtime-rpc";
 import { base64encode } from "@protobuf-ts/runtime";
 import { Any } from "@structured-id/proto/google/protobuf/any";
@@ -10,6 +12,9 @@ import {
 } from "@structured-id/proto/google/rpc/error_details";
 import SidRegistrationForm from "./SidRegistrationForm.vue";
 
+// As an application does at start: the email parser loaded, LOCAL namespace.
+beforeAll(() => initEmail({ psl: TEST_PSL }));
+
 const quasarStubs = {
   "q-card": { template: "<div><slot /></div>" },
   "q-card-section": { template: "<div><slot /></div>" },
@@ -31,7 +36,10 @@ const quasarStubs = {
     template:
       '<input :value="modelValue" :data-error="error ? errorMessage : undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
   },
-  "q-btn": { template: '<button type="submit"><slot /></button>' },
+  "q-btn": {
+    props: ["disable"],
+    template: '<button type="submit" :disabled="disable"><slot /></button>',
+  },
   "sid-password-ceremony": {
     name: "SidPasswordCeremony",
     props: ["outcome", "refusedText", "length", "fields"],
@@ -39,20 +47,6 @@ const quasarStubs = {
     template:
       '<div class="ceremony" :data-outcome="outcome" :data-refused="refusedText" :data-length="length" :data-fields="fields" />',
   },
-  "sid-principal-input": {
-    name: "SidPrincipalInput",
-    props: [
-      "modelValue",
-      "disable",
-      "label",
-      "types",
-      "minUsernameLength",
-      "fieldError",
-    ],
-    emits: ["update:modelValue", "update:principal-type"],
-    template:
-      '<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. */
@@ -178,6 +172,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" });

package/src/profile/components/SidRegistrationForm.vue

@@ -143,6 +143,7 @@
           data-test="principal"
           @update:model-value="fieldErrors.principal = undefined"
           @update:principal-type="principalType = $event"
+          @update:valid="principalValid = $event"
         />
 
         <slot name="extra-fields" />
@@ -200,7 +201,7 @@
           class="full-width"
           :loading="loading"
           :disable="
-            !identifier ||
+            !principalValid ||
             !password ||
             (showConfirmPassword && !confirmPassword) ||
             (claimRequired && !claimToken.trim()) ||
@@ -433,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);

package/src/quasar/SidPrincipalInput.autoload.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+
+// A module graph of its own: here no application started the email parser,
+// so the field is what starts it.
+vi.mock("../utils/email", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../utils/email")>();
+  const { TEST_PSL } = await import("../utils/email.testing");
+  return {
+    ...actual,
+    // The field calls it without options; the test serves the trie itself.
+    initEmail: vi.fn(() => actual.initEmail({ psl: TEST_PSL })),
+  };
+});
+
+const stubs = {
+  "q-input": { template: "<div />" },
+  "q-icon": { template: "<span />" },
+  "q-chip": { template: "<span />" },
+};
+
+describe("SidPrincipalInput starting the parser", () => {
+  // Regression: the parser was started only on mount, so a field whose
+  // accepted types came to include email later kept every email pending
+  // and its form's submit disabled for good.
+  it("starts it when the accepted types come to include email", async () => {
+    const email = await import("../utils/email");
+    const { default: SidPrincipalInput } =
+      await import("./SidPrincipalInput.vue");
+    const w = mount(SidPrincipalInput, {
+      props: { modelValue: "alice@example.com", types: ["username"] },
+      global: { stubs },
+    });
+    expect(email.initEmail).not.toHaveBeenCalled();
+    await w.setProps({ types: ["email", "username"] });
+    await vi.waitFor(() => expect(email.emailReady.value).toBe(true));
+    await flushPromises();
+    expect(email.initEmail).toHaveBeenCalled();
+    expect(w.emitted("update:valid")?.at(-1)?.[0]).toBe(true);
+  });
+});

package/src/quasar/SidPrincipalInput.test.ts

@@ -1,8 +1,13 @@
-import { describe, it, expect } from "vitest";
+import { beforeAll, describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
-import { defineComponent } from "vue";
+import { defineComponent, nextTick } from "vue";
 import SidPrincipalInput from "./SidPrincipalInput.vue";
-import { REQUIRED_FIELD_TEXT } from "../utils/validators";
+import { principalRecognizable } from "./principalInputTexts";
+import { GLOBAL_PERSONAL, LOCAL, initEmail } from "../utils/email";
+import { TEST_PSL } from "../utils/email.testing";
+
+// As an application does at start: the email parser loaded, LOCAL namespace.
+beforeAll(() => initEmail({ psl: TEST_PSL }));
 
 const stubs = {
   "q-input": defineComponent({
@@ -17,7 +22,7 @@ const stubs = {
     ],
     template: "<div><slot name='prepend' /><slot name='append' /></div>",
   }),
-  "q-icon": { template: "<span />" },
+  "q-icon": { props: ["name"], template: "<span :data-icon='name' />" },
   "q-chip": { template: "<span><slot /></span>" },
 };
 
@@ -38,31 +43,25 @@ describe("SidPrincipalInput", () => {
     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);
+  // Until the input is long enough to be a principal of some type nothing
+  // is shown as wrong, an empty field included: the form keeps its button
+  // disabled instead.
+  it("shows nothing wrong before a type is recognized", () => {
+    const [type] = input().props("rules") as Rule[];
+    for (const value of ["", "a", "al"]) {
+      expect(type(value), JSON.stringify(value)).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[];
+    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(
+    const [two] = input({ types: ["email", "username"] }).props(
       "rules",
     ) as Rule[];
     expect(two("+380501234567")).toBe("Enter an email address or a username");
@@ -73,24 +72,156 @@ describe("SidPrincipalInput", () => {
   // 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[];
+    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[];
+    const [login] = input().props("rules") as Rule[];
     expect(login("sid")).toBe(true);
-    expect(login("si")).toBe("A username has at least 3 characters");
+  });
+
+  // One or two characters are nobody yet: no type is recognized from them,
+  // the field stays a login field with the neutral icon, and nothing is
+  // shown as wrong (the form only keeps its button disabled).
+  it("recognizes no type from fewer than three characters", () => {
+    for (const short of ["a", "al", "+3", "a@", "ЩЩ", " a "]) {
+      const field = mount(SidPrincipalInput, {
+        props: { modelValue: short, types: ["email", "username"] },
+        global: { stubs },
+      });
+      const stub = field.findComponent({ name: "QInputStub" });
+      expect(stub.props("label"), short).toBe("Login");
+      expect(field.html(), short).toContain('data-icon="sym_o_login"');
+      const [type] = stub.props("rules") as Rule[];
+      expect(type(short), short).toBe(true);
+    }
+    expect(principalRecognizable("al")).toBe(false);
+    expect(principalRecognizable(" al ")).toBe(false);
+    expect(principalRecognizable("ali")).toBe(true);
+    expect(principalRecognizable("Щук")).toBe(true);
+  });
+
+  // Regression: a username with a letter outside a-z was taken for no type
+  // and refused before the server could apply its repertoire; its length is
+  // counted in code points of its NFC form, as the server counts it.
+  it("takes a username in any script and counts its code points", () => {
+    const [type] = input({
+      types: ["email", "username"],
+      minUsernameLength: 6,
+    }).props("rules") as Rule[];
+    expect(type("Иван_Петров")).toBe(true);
+    expect(type("Щукин")).toBe("A username has at least 6 characters");
+    expect(type("Jürgen")).toBe(true); // 7 code points, 6 in NFC
+    // Whitespace, inside or around, is refused, not trimmed into a name, and
+    // the refusal says what is wrong.
+    for (const spaced of ["Иван Петров", " Иван_Петров", "Иван_Петров "]) {
+      expect(type(spaced)).toBe("A username cannot contain spaces");
+    }
+  });
+
+  // Regression: a username with a character it cannot hold (a dot, a dash,
+  // a symbol) was taken for no type at all and told to "enter an email
+  // address or a username", which names no problem. Input without `@` and
+  // `+` is a username attempt, and the refusal names the characters allowed.
+  it("tells a username which characters it can hold", () => {
+    const [two] = input({ types: ["email", "username"] }).props(
+      "rules",
+    ) as Rule[];
+    for (const odd of ["ali.ce", "ali-ce", "😀😀😀", "alice#acme.corp"]) {
+      expect(two(odd)).toBe(
+        "A username can contain only letters, digits and underscores",
+      );
+    }
+    // A field that takes no username still asks for what it takes.
+    const [email] = input({ types: ["email"] }).props("rules") as Rule[];
+    expect(email("ali.ce")).toBe("Enter an email address");
+    expect(
+      input({ types: ["email", "username"], modelValue: "ali.ce" }).props(
+        "label",
+      ),
+    ).toBe("Username");
+  });
+
+  // Regression: the label already names the recognized type, and a chip
+  // repeated it beside the icon. The chip is shown only when the form's own
+  // label does not name the type.
+  it("names the type once", () => {
+    const named = mount(SidPrincipalInput, {
+      props: { modelValue: "alice@sid.example.com" },
+      global: { stubs },
+    });
+    expect(named.findComponent({ name: "QInputStub" }).props("label")).toBe(
+      "Email",
+    );
+    expect(named.text()).not.toContain("email");
+    const own = mount(SidPrincipalInput, {
+      props: { modelValue: "alice@sid.example.com", label: "Sign in with" },
+      global: { stubs },
+    });
+    expect(own.text()).toContain("email");
+  });
+
+  // Regression: a phone number on a field that takes no phone got the phone
+  // icon and chip, as if it were accepted. A type the field refuses shows
+  // the neutral login icon and no chip.
+  it("does not dress a refused type as accepted", () => {
+    const w = mount(SidPrincipalInput, {
+      props: {
+        modelValue: "+380501234567",
+        types: ["email", "username"],
+        label: "Sign in with",
+      },
+      global: { stubs },
+    });
+    expect(w.html()).toContain('data-icon="sym_o_login"');
+    expect(w.text()).not.toContain("phone");
+  });
+
+  // Regression: an email-only field showed the generic login icon until an
+  // address was typed, beside its "Email" label. A field of one type shows
+  // that type's icon from the start, greyed until the input is recognized.
+  it("shows a single-type field's icon from the start", () => {
+    const empty = mount(SidPrincipalInput, {
+      props: { modelValue: "", types: ["email"] },
+      global: { stubs },
+    });
+    expect(empty.html()).toContain('data-icon="sym_o_mail"');
+    expect(
+      mount(SidPrincipalInput, {
+        props: { modelValue: "", types: ["email", "username"] },
+        global: { stubs },
+      }).html(),
+    ).toContain('data-icon="sym_o_login"');
   });
 
   // The label names the accepted types unless the form gives its own.
+  // A field of one type is named by it. A field of several is a login
+  // field until the input shows which type it is, then it names that type;
+  // a recognized type the field does not accept leaves it a login field.
   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: ["username"] }).props("label")).toBe("Username");
+    expect(input().props("label")).toBe("Login");
+    const two = { types: ["email", "username"] };
+    expect(input(two).props("label")).toBe("Login");
+    expect(
+      input({ ...two, modelValue: "alice@sid.example.com" }).props("label"),
+    ).toBe("Email");
+    expect(input({ ...two, modelValue: "alice_wonder" }).props("label")).toBe(
+      "Username",
+    );
+    expect(input({ ...two, modelValue: "+380501234567" }).props("label")).toBe(
+      "Login",
+    );
+    expect(input({ ...two, texts: { login: "Логин" } }).props("label")).toBe(
+      "Логин",
     );
     expect(
       input({ types: ["email"], label: "Your email" }).props("label"),
     ).toBe("Your email");
+    // An explicitly empty label is the form's choice of no label.
+    expect(
+      input({ types: ["email", "username"], label: "" }).props("label"),
+    ).toBe("");
   });
 
   // The chip naming the detected type is a text like the others: a
@@ -99,6 +230,7 @@ describe("SidPrincipalInput", () => {
     const w = mount(SidPrincipalInput, {
       props: {
         modelValue: "alice@sid.example.com",
+        label: "Sign in with",
         texts: { typeChip: (t: string) => `chip:${t}` },
       },
       global: { stubs },
@@ -106,6 +238,43 @@ describe("SidPrincipalInput", () => {
     expect(w.text()).toContain("chip:email");
   });
 
+  // The form disables its submit on this, before any error is shown: only a
+  // recognized, accepted, well-formed value, not refused by the server, is
+  // valid.
+  // Regression: the application's namespace was not reactive, so a field
+  // mounted under one kept the verdict of it after initEmail named another.
+  it("re-judges an email when the application's namespace changes", async () => {
+    await initEmail({ policy: GLOBAL_PERSONAL, psl: TEST_PSL });
+    const w = mount(SidPrincipalInput, {
+      props: { modelValue: "admin@printer", types: ["email"] },
+      global: { stubs },
+    });
+    expect(w.emitted("update:valid")?.at(-1)?.[0]).toBe(false);
+    await initEmail({ policy: LOCAL });
+    await nextTick();
+    expect(w.emitted("update:valid")?.at(-1)?.[0]).toBe(true);
+  });
+
+  it("tells the form whether the value can be submitted", () => {
+    const valid = (props: { modelValue: string; fieldError?: string }) => {
+      const w = mount(SidPrincipalInput, {
+        props: { types: ["email", "username"], ...props },
+        global: { stubs },
+      });
+      return w.emitted("update:valid")?.at(-1)?.[0];
+    };
+    expect(valid({ modelValue: "" })).toBe(false);
+    expect(valid({ modelValue: "al" })).toBe(false);
+    expect(valid({ modelValue: "ali" })).toBe(true);
+    expect(valid({ modelValue: "ali.ce" })).toBe(false);
+    expect(valid({ modelValue: "+380501234567" })).toBe(false);
+    expect(valid({ modelValue: "alice@" })).toBe(false);
+    expect(valid({ modelValue: "alice@sid.example.com" })).toBe(true);
+    expect(
+      valid({ modelValue: "alice@sid.example.com", fieldError: "Taken" }),
+    ).toBe(false);
+  });
+
   // A refusal the server bound to this field is shown on it.
   it("shows an error given from outside", () => {
     const shown = input({