@structured-id/ui-core 4.0.0 → 4.2.0

package/src/quasar/SidPrincipalInput.test.ts

@@ -2,15 +2,22 @@ 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({
     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 />" },
+  "q-icon": { props: ["name"], template: "<span :data-icon='name' />" },
   "q-chip": { template: "<span><slot /></span>" },
 };
 
@@ -31,19 +38,233 @@ 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(
+  // 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[];
+    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);
+  });
+
+  // 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[];
-    expect(custom("")).toBe("Enter it");
+    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({ types: ["email"] }).props("label")).toBe("Email");
+    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
+  // 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",
+        label: "Sign in with",
+        texts: { typeChip: (t: string) => `chip:${t}` },
+      },
+      global: { stubs },
+    });
+    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);
   });
 
-  it("does not require an optional field", () => {
-    const [required] = input({ required: false }).props("rules") as Rule[];
-    expect(required("")).toBe(true);
+  // 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"
-    :rules="[requiredRule, typeRule]"
+    :label="fieldLabel"
+    :rules="[typeRule]"
+    :error="!!fieldError"
+    :error-message="fieldError ?? undefined"
     outlined
     type="text"
     :inputmode="inputMode"
@@ -16,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"
@@ -33,17 +35,34 @@
 <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";
 
-export type PrincipalType = "email" | "phone" | "username" | "unknown";
+import {
+  ALL_PRINCIPAL_TYPES,
+  DEFAULT_PRINCIPAL_INPUT_TEXTS,
+  principalRecognizable,
+  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;
-  /** What an empty required field says. */
-  requiredText?: 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>;
   /**
    * Validate once the field is left, then on every change (true), or on
    * every change from the first keystroke (false). Default true: a field
@@ -54,17 +73,45 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: "",
-  // Username rule: ^[a-z0-9_]{3,32}$ (display form ^[a-zA-Z0-9_]{3,32}$).
+  types: () => [...ALL_PRINCIPAL_TYPES],
+  // Code points of the NFC display form; the server's minimum decides.
   minUsernameLength: 3,
-  required: true,
-  label: "Email, phone, or username",
-  requiredText: REQUIRED_FIELD_TEXT,
+  label: undefined,
+  fieldError: null,
+  texts: () => ({}),
   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)),
+);
+
+/**
+ * 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);
@@ -76,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";
@@ -87,17 +137,9 @@ 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";
-  }
-
-  // Still typing — not enough chars to determine
-  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));
@@ -113,39 +155,81 @@ 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") return true;
+  if (!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;
+      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 (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";
   }
 };
 
+/**
+ * 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":
@@ -158,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.
@@ -177,21 +261,12 @@ 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(() =>
+  shownType.value === "unknown" ? "" : text.value.typeChip(shownType.value),
+);
 
 const chipColor = computed(() => {
-  switch (detectedType.value) {
+  switch (shownType.value) {
     case "email":
       return "deep-orange";
     case "phone":
@@ -209,5 +284,5 @@ function focus() {
   inputRef.value?.focus();
 }
 
-defineExpose({ focus, detectedType });
+defineExpose({ focus, detectedType, valid });
 </script>

package/src/quasar/index.ts

@@ -5,6 +5,16 @@
  * 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,
+  MIN_PRINCIPAL_LENGTH,
+  principalRecognizable,
+} from "./principalInputTexts";
 export { default as SidPasswordCeremony } from "./SidPasswordCeremony.vue";
 export type { CeremonyOutcome } from "./SidPasswordCeremony.vue";

package/src/quasar/principalInputTexts.ts

@@ -0,0 +1,93 @@
+/** 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",
+];
+
+/**
+ * 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 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. */
+  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 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`. */
+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);
+  },
+  login: "Login",
+  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",
+  usernameSpaces: "A username cannot contain spaces",
+  usernameCharacters:
+    "A username can contain only letters, digits and underscores",
+};