Hint the code field's digits-only rule, so the browser's refusal isn't bare

This commit is contained in:
2026-08-18 22:07:12 +02:00
parent 552cc6bd97
commit 8f3fc7414a
4 changed files with 5 additions and 1 deletions
+1
View File
@@ -113,6 +113,7 @@ test("the code field guards a pasted space: one-time-code autofill + numeric inp
);
assert.deepEqual(view.fields.find((f) => f.name === "code"), {
autocomplete: "one-time-code", // Kratos sends none for the OTP node — enable OS/email autofill
hint: "Digits only — no spaces.", // the pattern refusal alone reads as a bare "match the requested format"
icon: "i-shield",
id: "field-code",
inputmode: "numeric",
+2 -1
View File
@@ -11,6 +11,7 @@ import type { Flow, FlowType, UiNode } from "./kratos-public.ts";
export interface FlowField {
autocomplete?: string;
error?: { text: string };
hint?: string; // muted helper text under the input
icon?: string; // Lucide sprite id for the input
id: string;
inputmode?: string; // virtual-keyboard hint (e.g. "numeric" for the OTP code)
@@ -139,7 +140,7 @@ function toField(node: UiNode, name: string, type: string, t: Translate): FlowFi
...(autocomplete ? { autocomplete } : {}),
...(errorMsg ? { error: { text: kratosText(t, errorMsg.text, idKey(errorMsg.id)) } } : {}),
...(icon ? { icon } : {}),
...(isCode ? { inputmode: "numeric", pattern: "[0-9]*" } : {}),
...(isCode ? { hint: t("auth.field.code.hint"), inputmode: "numeric", pattern: "[0-9]*" } : {}),
...(node.attributes["required"] === true ? { required: true } : {}),
...(value ? { value } : {}),
};
+1
View File
@@ -9,6 +9,7 @@ const messages = {
"auth.continue": "Continue",
// Kratos labels its own form fields; these translate the ones the built-in identity schema uses,
// keyed on the input name. A deployment's extra traits keep Kratos' label until a plugin covers them.
"auth.field.code.hint": "Digits only — no spaces.",
"auth.field.email": "Email",
"auth.field.identifier": "Email",
"auth.field.password": "Password",
+1
View File
@@ -2,6 +2,7 @@ import type { CoreMessages } from "./en-US.ts";
const messages: CoreMessages = {
"auth.continue": "Fortsätt",
"auth.field.code.hint": "Endast siffror — inga mellanslag.",
"auth.field.email": "E-postadress",
"auth.field.identifier": "E-postadress",
"auth.field.password": "Lösenord",