@structured-id/ui-core 4.1.0 → 4.2.0

package/package.json

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

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>" },
 };
 
@@ -94,11 +92,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

@@ -31,7 +31,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 +42,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 +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" });

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.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import { defineComponent } from "vue";
 import SidPrincipalInput from "./SidPrincipalInput.vue";
-import { REQUIRED_FIELD_TEXT } from "../utils/validators";
+import { principalRecognizable } from "./principalInputTexts";
 
 const stubs = {
   "q-input": defineComponent({
@@ -17,7 +17,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 +38,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 +67,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 +225,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 +233,29 @@ 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.
+  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({

package/src/quasar/SidPrincipalInput.vue

@@ -3,7 +3,7 @@
     ref="inputRef"
     v-model="model"
     :label="fieldLabel"
-    :rules="[requiredRule, typeRule]"
+    :rules="[typeRule]"
     :error="!!fieldError"
     :error-message="fieldError ?? undefined"
     outlined
@@ -18,7 +18,7 @@
     <template #prepend>
       <q-icon :name="iconName" :color="iconColor" size="24px" />
     </template>
-    <template v-if="model && detectedType !== 'unknown'" #append>
+    <template v-if="showChip" #append>
       <q-chip
         dense
         :color="chipColor"
@@ -35,11 +35,12 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { REQUIRED_FIELD_TEXT, isValidEmail } from "../utils/validators";
+import { isValidEmail } from "../utils/validators";
 
 import {
   ALL_PRINCIPAL_TYPES,
   DEFAULT_PRINCIPAL_INPUT_TEXTS,
+  principalRecognizable,
   type AcceptedPrincipalType,
   type PrincipalInputTexts,
   type PrincipalType,
@@ -56,15 +57,12 @@ interface Props {
    */
   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;
   /**
    * Validate once the field is left, then on every change (true), or on
    * every change from the first keystroke (false). Default true: a field
@@ -76,13 +74,11 @@ 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}$).
+  // Code points of the NFC display form; the server's minimum decides.
   minUsernameLength: 3,
-  required: true,
   label: undefined,
   fieldError: null,
   texts: () => ({}),
-  requiredText: REQUIRED_FIELD_TEXT,
   lazyRules: true,
 });
 
@@ -96,13 +92,26 @@ const accepted = computed(() =>
   ALL_PRINCIPAL_TYPES.filter((t) => props.types.includes(t)),
 );
 
-const fieldLabel = computed(
-  () => props.label ?? text.value.label(accepted.value),
-);
+/**
+ * A field of one type is named by it; a field of several is a login field
+ * until its input is recognized as one of the accepted types.
+ */
+const fieldLabel = computed(() => {
+  // An empty label is the form's own choice; only an absent one is derived.
+  if (props.label != null) return props.label;
+  const [only, ...others] = accepted.value;
+  if (only && others.length === 0) return text.value.label([only]);
+  const type = detectedType.value;
+  return type !== "unknown" && accepted.value.includes(type)
+    ? text.value.label([type])
+    : text.value.login;
+});
 
 const emit = defineEmits<{
   "update:modelValue": [value: string];
   "update:principalType": [type: PrincipalType];
+  /** Whether the value can be submitted: a recognized, accepted, well-formed principal. */
+  "update:valid": [valid: boolean];
 }>();
 
 const inputRef = ref<{ focus: () => void } | null>(null);
@@ -114,10 +123,13 @@ const model = computed({
 
 const USERNAME_MAX_LENGTH = 32;
 
+/** What a username may hold: letters of any script, marks, digits, `_`. */
+const USERNAME_SHAPE = /^[\p{L}\p{M}\p{N}_]+$/u;
+
 function detectType(value: string): PrincipalType {
-  if (!value) return "unknown";
+  // One or two characters are nobody yet: no type is read from them.
+  if (!principalRecognizable(value)) return "unknown";
   const trimmed = value.trim();
-  if (!trimmed) return "unknown";
 
   // Phone: starts with +
   if (trimmed.startsWith("+")) return "phone";
@@ -125,12 +137,9 @@ function detectType(value: string): PrincipalType {
   // Email: contains @ (checked after phone to exclude edge cases)
   if (trimmed.includes("@")) return "email";
 
-  // 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";
-
-  return "unknown";
+  // Anything else is a username attempt, whatever it holds, so that what is
+  // wrong with it (spaces, a dot, a symbol, its length) can be said.
+  return "username";
 }
 
 const detectedType = computed(() => detectType(model.value));
@@ -146,13 +155,14 @@ function onInput(value: string | number | null) {
 
 // --- Validation rules ---
 
-const requiredRule = (val: string) =>
-  !props.required || !!val || props.requiredText;
-
+/**
+ * Until a type is recognized nothing is wrong yet, an empty field included:
+ * the form keeps its button disabled instead (see principalRecognizable).
+ */
 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)) {
+  if (type === "unknown") return true;
+  if (!accepted.value.includes(type)) {
     return text.value.enterAccepted(accepted.value);
   }
 
@@ -162,10 +172,15 @@ const typeRule = (val: string): string | true => {
     case "phone":
       return isValidPhoneNumber(val) || text.value.invalidPhone;
     case "username": {
-      const name = val.trim();
-      if (name.length < props.minUsernameLength)
+      const name = val;
+      if (/\s/u.test(name)) return text.value.usernameSpaces;
+      if (!USERNAME_SHAPE.test(name)) return text.value.usernameCharacters;
+      // Counted in code points of the NFC form, as the server counts the
+      // display; the value itself is sent unchanged.
+      const length = [...name.normalize("NFC")].length;
+      if (length < props.minUsernameLength)
         return text.value.usernameTooShort(props.minUsernameLength);
-      if (name.length > USERNAME_MAX_LENGTH)
+      if (length > USERNAME_MAX_LENGTH)
         return text.value.usernameTooLong(USERNAME_MAX_LENGTH);
       if (name.startsWith("_") || name.endsWith("_"))
         return text.value.usernameUnderscoreEdge;
@@ -175,10 +190,46 @@ const typeRule = (val: string): string | true => {
   }
 };
 
+/**
+ * A form keeps its submit disabled until this holds, silently: the error a
+ * rule names appears only once the field is left, the button never waits for
+ * it. A refusal the server bound to the field holds until the value changes.
+ */
+const valid = computed(
+  () =>
+    detectedType.value !== "unknown" &&
+    typeRule(model.value) === true &&
+    !props.fieldError,
+);
+
+watch(valid, (v) => emit("update:valid", v), { immediate: true });
+
 // --- Dynamic icon & type ---
 
+/** The recognized type when the field accepts it; refused types look neutral. */
+const shownType = computed<PrincipalType>(() => {
+  const type = detectedType.value;
+  return type !== "unknown" && accepted.value.includes(type) ? type : "unknown";
+});
+
+/**
+ * The chip names the type only when the label does not: a derived label
+ * already says "Email" or "Username".
+ */
+const showChip = computed(
+  () => props.label != null && shownType.value !== "unknown",
+);
+
+/** A field of one type shows that type's icon from the start, greyed until recognized. */
+const iconType = computed<PrincipalType>(() => {
+  const [only, ...others] = accepted.value;
+  return shownType.value === "unknown" && only && others.length === 0
+    ? only
+    : shownType.value;
+});
+
 const iconName = computed(() => {
-  switch (detectedType.value) {
+  switch (iconType.value) {
     case "email":
       return "sym_o_mail";
     case "phone":
@@ -191,7 +242,7 @@ const iconName = computed(() => {
 });
 
 const iconColor = computed(() =>
-  detectedType.value === "unknown" ? "grey-6" : "primary",
+  shownType.value === "unknown" ? "grey-6" : "primary",
 );
 
 // inputmode controls mobile keyboard WITHOUT triggering browser autofill.
@@ -211,13 +262,11 @@ const inputMode = computed(() => {
 });
 
 const chipLabel = computed(() =>
-  detectedType.value === "unknown"
-    ? ""
-    : text.value.typeChip(detectedType.value),
+  shownType.value === "unknown" ? "" : text.value.typeChip(shownType.value),
 );
 
 const chipColor = computed(() => {
-  switch (detectedType.value) {
+  switch (shownType.value) {
     case "email":
       return "deep-orange";
     case "phone":
@@ -235,5 +284,5 @@ function focus() {
   inputRef.value?.focus();
 }
 
-defineExpose({ focus, detectedType });
+defineExpose({ focus, detectedType, valid });
 </script>

package/src/quasar/index.ts

@@ -13,6 +13,8 @@ export type {
 export {
   ALL_PRINCIPAL_TYPES,
   DEFAULT_PRINCIPAL_INPUT_TEXTS,
+  MIN_PRINCIPAL_LENGTH,
+  principalRecognizable,
 } from "./principalInputTexts";
 export { default as SidPasswordCeremony } from "./SidPasswordCeremony.vue";
 export type { CeremonyOutcome } from "./SidPasswordCeremony.vue";

package/src/quasar/principalInputTexts.ts

@@ -12,10 +12,27 @@ export const ALL_PRINCIPAL_TYPES: readonly AcceptedPrincipalType[] = [
   "username",
 ];
 
+/**
+ * Fewer characters than this are nobody yet: no type is recognized from them
+ * and no form can submit them. Counted in code points of the NFC form,
+ * surrounding whitespace aside.
+ */
+export const MIN_PRINCIPAL_LENGTH = 3;
+
+/** Whether `value` is long enough to be anybody. */
+export function principalRecognizable(value: string): boolean {
+  return [...value.trim().normalize("NFC")].length >= MIN_PRINCIPAL_LENGTH;
+}
+
 /** 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. */
+  /**
+   * The label naming one type: the field's only accepted type, or the type
+   * the input of a several-type field was recognized as.
+   */
   label: (types: AcceptedPrincipalType[]) => string;
+  /** The label of a field of several types before its input shows which. */
+  login: 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. */
@@ -28,6 +45,10 @@ export interface PrincipalInputTexts {
   usernameTooLong: (max: number) => string;
   usernameUnderscoreEdge: string;
   usernameDoubleUnderscore: string;
+  /** A username with whitespace in or around it. */
+  usernameSpaces: string;
+  /** A username with a character other than a letter, digit or `_`. */
+  usernameCharacters: string;
 }
 
 /** `a`, `a or b`, `a, b, or c`. */
@@ -54,6 +75,7 @@ export const DEFAULT_PRINCIPAL_INPUT_TEXTS: PrincipalInputTexts = {
     const text = list(types.map((t) => LABEL_WORDS[t]));
     return text.charAt(0).toUpperCase() + text.slice(1);
   },
+  login: "Login",
   enterAccepted: (types) => `Enter ${list(types.map((t) => ENTER_WORDS[t]))}`,
   typeChip: (type) => LABEL_WORDS[type],
   loginSubtitle: (types) =>
@@ -65,4 +87,7 @@ export const DEFAULT_PRINCIPAL_INPUT_TEXTS: PrincipalInputTexts = {
   usernameUnderscoreEdge: "A username cannot start or end with an underscore",
   usernameDoubleUnderscore:
     "A username cannot contain two underscores in a row",
+  usernameSpaces: "A username cannot contain spaces",
+  usernameCharacters:
+    "A username can contain only letters, digits and underscores",
 };

package/src/utils/normalizePrincipal.test.ts

@@ -17,10 +17,18 @@ describe("detectLoginInputType", () => {
     expect(detectLoginInputType("alice")).toBe("username");
     expect(detectLoginInputType("bob_smith")).toBe("username");
     expect(detectLoginInputType("dev42")).toBe("username");
-    // Uppercase accepted in detection (will be lowercased on normalize)
+    // Uppercase accepted; the server derives the key.
     expect(detectLoginInputType("Admin123")).toBe("username");
   });
 
+  it("detects a username in any script, counted in code points", () => {
+    expect(detectLoginInputType("Иван")).toBe("username");
+    expect(detectLoginInputType("Иван_Петров", 6)).toBe("username");
+    expect(detectLoginInputType("Щукин", 6)).toBe("unknown"); // 5 < 6
+    expect(detectLoginInputType("ЩЩ")).toBe("unknown"); // 2 < 3
+    expect(detectLoginInputType("Иван Петров")).toBe("unknown"); // a space
+  });
+
   it("detects username with minLength=6 (registration)", () => {
     expect(detectLoginInputType("alice", 6)).toBe("unknown"); // too short
     expect(detectLoginInputType("alicew", 6)).toBe("username"); // exactly 6
@@ -126,13 +134,42 @@ describe("normalizePrincipal", () => {
     expect(result.display).toBe("+380501234567");
   });
 
-  it("normalizes username: value=lowercase, display=original casing", () => {
+  // Regression: the client lowercased a username before sending it, so the
+  // server never saw the spelling the user typed and could not keep it as
+  // the display form. The server derives the key, as it does for email.
+  it("sends a username as typed, case kept", () => {
     const result = normalizePrincipal("Alice_Bob");
     expect(result.type).toBe("username");
-    expect(result.value).toBe("alice_bob");
+    expect(result.value).toBe("Alice_Bob");
     expect(result.display).toBe("Alice_Bob");
   });
 
+  // Whitespace is never part of a name and is not repaired: a username with
+  // surrounding spaces is refused, not trimmed into another name.
+  it("refuses a username with surrounding whitespace", () => {
+    for (const input of ["  Alice_Bob ", "Alice_Bob ", "\tAlice_Bob"]) {
+      expect(() => normalizePrincipal(input)).toThrow("Cannot determine");
+    }
+  });
+
+  // Regression: a letter outside a-z made the name no type at all, so the
+  // field refused it before the server could apply its repertoire.
+  it("sends a username in any script as typed", () => {
+    for (const name of ["Иван_Петров", "Ωmega42", "Jürgen"]) {
+      const result = normalizePrincipal(name);
+      expect(result.type).toBe("username");
+      expect(result.value).toBe(name);
+    }
+  });
+
+  it("sends a username unnormalized and counts it after NFC", () => {
+    // "Jürgen" with ü as u + combining diaeresis: 7 code points, 6 in NFC.
+    const decomposed = "Jürgen";
+    const result = normalizePrincipal(decomposed, 6);
+    expect(result.value).toBe(decomposed);
+    expect(() => normalizePrincipal("Щукин", 6)).toThrow("Cannot determine");
+  });
+
   it("rejects username with leading/trailing underscore (detected as unknown)", () => {
     // Leading/trailing _ blocked at detection level → "Cannot determine"
     expect(() => normalizePrincipal("_alice_bob")).toThrow("Cannot determine");

package/src/utils/normalizePrincipal.ts

@@ -14,17 +14,18 @@ export interface NormalizedPrincipal {
 }
 
 /**
- * Global username rules:
- *   Display:    ^[a-zA-Z0-9_]{3,32}$ — user's original input, mixed case preserved
- *   Normalized: ^[a-z0-9_]{3,32}$    — lowercase, for storage + uniqueness + login
- *   - cannot start or end with underscore
- *   - no consecutive underscores (__)
- *
- * For detection (prematch) we use a relaxed version:
- *   - accepts minLength (3 for login, 6 for registration)
- *   - case-insensitive (will be lowercased on normalization)
+ * A global username as the user types it: letters of any script, combining
+ * marks, digits and `_`, at most 32 code points in NFC, no `_` at either
+ * end. It is sent exactly as typed (nothing trimmed or normalized); the
+ * server applies its repertoire and minimum and derives the lookup key.
  */
 const USERNAME_MAX_LENGTH = 32;
+const USERNAME_SHAPE = /^[\p{L}\p{M}\p{N}_]+$/u;
+
+/** The length of `name` in code points of its NFC form. */
+function codePoints(name: string): number {
+  return [...name.normalize("NFC")].length;
+}
 
 /**
  * Detect principal type from user input.
@@ -63,11 +64,16 @@ export function detectLoginInputType(
     return "unknown";
   }
 
-  // Global username: no #, no @, no +
-  const re = new RegExp(
-    `^[a-zA-Z0-9_]{${minUsernameLength},${USERNAME_MAX_LENGTH}}$`,
-  );
-  if (re.test(trimmed) && !trimmed.startsWith("_") && !trimmed.endsWith("_")) {
+  // Global username: no #, no @, no +. Judged on the input itself, not the
+  // trimmed form: whitespace is never part of a name and is never repaired.
+  const length = codePoints(input);
+  if (
+    USERNAME_SHAPE.test(input) &&
+    length >= minUsernameLength &&
+    length <= USERNAME_MAX_LENGTH &&
+    !input.startsWith("_") &&
+    !input.endsWith("_")
+  ) {
     return "username";
   }
 
@@ -79,7 +85,7 @@ export function detectLoginInputType(
  *
  * - Email: as typed (trimmed); the server applies the email policy
  * - Phone: E.164 format via libphonenumber-js
- * - Username: lowercase, validate per arch rules
+ * - Username: exactly as typed; a federated one trimmed and lowercased
  *
  * @param minUsernameLength - minimum chars for username (3 for login, 6 for register)
  * Throws if value doesn't pass validation for detected type.
@@ -89,7 +95,7 @@ export function normalizePrincipal(
   minUsernameLength = 3,
 ): NormalizedPrincipal {
   const trimmed = input.trim();
-  const type = detectLoginInputType(trimmed, minUsernameLength);
+  const type = detectLoginInputType(input, minUsernameLength);
 
   switch (type) {
     case "email": {
@@ -135,20 +141,13 @@ export function normalizePrincipal(
         return { value: normalized, display: trimmed, type: "username" };
       }
 
-      // Global username
-      const normalized = trimmed.toLowerCase();
-      const re = new RegExp(
-        `^[a-z0-9_]{${minUsernameLength},${USERNAME_MAX_LENGTH}}$`,
-      );
-      if (
-        !re.test(normalized) ||
-        normalized.startsWith("_") ||
-        normalized.endsWith("_") ||
-        normalized.includes("__")
-      ) {
+      // Global username: detection checked its shape and length on the
+      // input itself; sent exactly as typed, the server normalizes it and
+      // derives the key.
+      if (input.includes("__")) {
         throw new Error("Invalid username");
       }
-      return { value: normalized, display: trimmed, type: "username" };
+      return { value: input, display: input, type: "username" };
     }
 
     default: