@structured-id/ui-core 3.1.0 → 3.1.1

package/package.json

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

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

@@ -2,6 +2,7 @@ import { 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";
 
 // Stub all Quasar components as divs
 const quasarStubs = {
@@ -16,7 +17,8 @@ const quasarStubs = {
     emits: ["submit"],
   },
   "q-input": defineComponent({
-    props: ["modelValue", "type", "label", "disable", "rules"],
+    name: "QInputStub",
+    props: ["modelValue", "type", "label", "disable", "rules", "lazyRules"],
     emits: ["update:modelValue"],
     template:
       '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
@@ -77,4 +79,16 @@ describe("SidLoginForm", () => {
     const w = mountLogin();
     expect(w.text()).toContain("Your password never leaves this device");
   });
+
+  // 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 lazy = password.props("lazyRules");
+    expect(lazy === "" || lazy === true).toBe(true);
+    const [required] = password.props("rules") as ((v: string) => unknown)[];
+    expect(required("")).toBe(REQUIRED_FIELD_TEXT);
+    expect(required("secret")).toBe(true);
+  });
 });

package/src/profile/components/SidLoginForm.vue

@@ -48,6 +48,7 @@
           :label="passwordLabel"
           outlined
           :disable="loading"
+          lazy-rules
           :rules="[(v: string) => !!v || passwordRequiredText]"
           data-test="password"
         >
@@ -119,6 +120,7 @@ import { ref } from "vue";
 import { SidPrincipalInput } from "../../quasar";
 import type { PrincipalType } from "../../quasar";
 import { normalizePrincipal, refusalMessage } from "../../index";
+import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
 void SidPrincipalInput;
 
@@ -169,7 +171,7 @@ const props = withDefaults(
     submitLabel: "Sign in",
     identifierLabel: "Email, phone, or username",
     passwordLabel: "Password",
-    passwordRequiredText: "Required",
+    passwordRequiredText: REQUIRED_FIELD_TEXT,
     showForgotPassword: true,
     forgotPasswordText: "Forgot password?",
     forgotPasswordUrl: undefined,

package/src/profile/components/SidRegistrationForm.vue

@@ -225,6 +225,7 @@ interface ValidatableInput {
 }
 import type { PrincipalType } from "../../quasar";
 import { normalizePrincipal, refusalMessage } from "../../index";
+import { REQUIRED_FIELD_TEXT } from "../../utils/validators";
 
 /** What the form collected besides the identifier and password. */
 export interface RegistrationExtras {
@@ -317,7 +318,7 @@ const props = withDefaults(
     identifierLabel: "Email, phone, or username",
     passwordLabel: "Password",
     confirmPasswordLabel: "Confirm password",
-    passwordRequiredText: "Required",
+    passwordRequiredText: REQUIRED_FIELD_TEXT,
     passwordMinLengthText: "At least 12 characters with mixed case + digit",
     passwordMinLength: 12,
     passwordsMismatchText: "Passwords do not match",

package/src/quasar/SidPrincipalInput.test.ts

@@ -0,0 +1,49 @@
+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";
+
+const stubs = {
+  "q-input": defineComponent({
+    name: "QInputStub",
+    props: ["modelValue", "rules", "lazyRules"],
+    template: "<div><slot name='prepend' /><slot name='append' /></div>",
+  }),
+  "q-icon": { template: "<span />" },
+  "q-chip": { template: "<span><slot /></span>" },
+};
+
+function input(props: Record<string, unknown> = {}) {
+  return mount(SidPrincipalInput, {
+    props: { modelValue: "", ...props },
+    global: { stubs },
+  }).findComponent({ name: "QInputStub" });
+}
+
+type Rule = (v: string) => unknown;
+
+describe("SidPrincipalInput", () => {
+  // Regression: the identifier turned red while still being typed; it is
+  // checked once left, unless a form asks for checking from the start.
+  it("validates once left by default", () => {
+    expect(input().props("lazyRules")).toBe(true);
+    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);
+  });
+});

package/src/quasar/SidPrincipalInput.vue

@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { isValidEmail } from "../utils/validators";
+import { REQUIRED_FIELD_TEXT, isValidEmail } from "../utils/validators";
 
 export type PrincipalType = "email" | "phone" | "username" | "unknown";
 
@@ -42,7 +42,13 @@ interface Props {
   minUsernameLength?: number;
   required?: boolean;
   label?: string;
-  /** Validate on each input change (false) vs only on blur (true). Default false — eager. */
+  /** 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
+   * being typed into is not yet wrong.
+   */
   lazyRules?: boolean;
 }
 
@@ -52,7 +58,8 @@ const props = withDefaults(defineProps<Props>(), {
   minUsernameLength: 3,
   required: true,
   label: "Email, phone, or username",
-  lazyRules: false,
+  requiredText: REQUIRED_FIELD_TEXT,
+  lazyRules: true,
 });
 
 const emit = defineEmits<{
@@ -107,7 +114,7 @@ function onInput(value: string | number | null) {
 // --- Validation rules ---
 
 const requiredRule = (val: string) =>
-  !props.required || !!val || "This field is required";
+  !props.required || !!val || props.requiredText;
 
 const typeRule = (val: string): string | true => {
   if (!val) return true; // required rule handles empty

package/src/utils/validators.ts

@@ -42,6 +42,9 @@ export function maxLength(value: string, max: number): boolean {
   return value.length <= max;
 }
 
+/** What every form says of an empty required field, so one error reads alike. */
+export const REQUIRED_FIELD_TEXT = "This field is required";
+
 /** Check value is not empty/whitespace-only. */
 export function isRequired(value: string): boolean {
   return value.trim().length > 0;