cauthy-auth 0.27.1 → 0.28.1

package/dist/next.d.mts

@@ -1,5 +1,5 @@
-import { C as Cauthy } from './cauthy-XkIbG5gE.mjs';
-import { S as Session } from './system-BxMsSIu1.mjs';
+import { C as Cauthy } from './cauthy-CTVg4kvo.mjs';
+import { S as Session } from './system-CVBW_AV8.mjs';
 import 'jose';
 import './theme.mjs';
 

package/dist/next.d.ts

@@ -1,5 +1,5 @@
-import { C as Cauthy } from './cauthy-DGAy45G2.js';
-import { S as Session } from './system-DTIeDXDP.js';
+import { C as Cauthy } from './cauthy-BAwAJChs.js';
+import { S as Session } from './system-Bn8uckvQ.js';
 import 'jose';
 import './theme.js';
 

package/dist/react.d.mts

@@ -211,6 +211,23 @@ interface PublicSession {
 }
 
 type AuthField = 'email' | 'password' | 'newPassword' | 'name' | 'code' | 'organization';
+/** A kind of character a workspace's password policy can ask for. */
+type PasswordClass = 'lowercase' | 'uppercase' | 'digit' | 'symbol';
+/**
+ * What a new password must be in the workspace, as `methods().password` says
+ * it. Length is counted in bytes of UTF-8, as Cauthy counts it. A symbol is
+ * any character that is neither a letter nor a digit, a space included.
+ */
+interface PasswordPolicy {
+    min: number;
+    max: number;
+    /** The kinds the password must each carry at least once. */
+    requires: PasswordClass[];
+    /** At least this many of the four kinds; 0 asks none. */
+    min_classes: number;
+    /** Cauthy refuses a password found in a published breach (checked by Cauthy alone). */
+    reject_breached: boolean;
+}
 
 /** Whether this browser can use a passkey at all. */
 declare function canUsePasskeys(): boolean;
@@ -228,6 +245,8 @@ interface AuthError {
     message: string;
     /** The input it is about, when it is about one. */
     field?: AuthField;
+    /** `weak_password`: the rules of the workspace's password policy it failed (`too_short`, `needs_digit`, …). */
+    reasons?: string[];
 }
 type AuthResult<S extends string, More = unknown> = ({
     ok: true;
@@ -295,6 +314,13 @@ interface AuthMethods {
             required: boolean;
         }[];
     };
+    /**
+     * What a new password must be in the workspace. Once `methods()` has
+     * answered, this client checks new passwords against it before sending
+     * them; until then, against the defaults (12 to 128 characters). Absent
+     * from a server that does not say.
+     */
+    password?: PasswordPolicy;
 }
 /** A legal document the person owes: not yet accepted in its current version. */
 interface PendingLegal {
@@ -1006,7 +1032,7 @@ interface AuthTexts {
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
-type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'link' | 'error' | 'fieldError' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
+type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
 interface AuthFormProps {
     /** The language of the built-in sentences. Default: `en`. */
     locale?: 'en' | 'es';

package/dist/react.d.ts

@@ -211,6 +211,23 @@ interface PublicSession {
 }
 
 type AuthField = 'email' | 'password' | 'newPassword' | 'name' | 'code' | 'organization';
+/** A kind of character a workspace's password policy can ask for. */
+type PasswordClass = 'lowercase' | 'uppercase' | 'digit' | 'symbol';
+/**
+ * What a new password must be in the workspace, as `methods().password` says
+ * it. Length is counted in bytes of UTF-8, as Cauthy counts it. A symbol is
+ * any character that is neither a letter nor a digit, a space included.
+ */
+interface PasswordPolicy {
+    min: number;
+    max: number;
+    /** The kinds the password must each carry at least once. */
+    requires: PasswordClass[];
+    /** At least this many of the four kinds; 0 asks none. */
+    min_classes: number;
+    /** Cauthy refuses a password found in a published breach (checked by Cauthy alone). */
+    reject_breached: boolean;
+}
 
 /** Whether this browser can use a passkey at all. */
 declare function canUsePasskeys(): boolean;
@@ -228,6 +245,8 @@ interface AuthError {
     message: string;
     /** The input it is about, when it is about one. */
     field?: AuthField;
+    /** `weak_password`: the rules of the workspace's password policy it failed (`too_short`, `needs_digit`, …). */
+    reasons?: string[];
 }
 type AuthResult<S extends string, More = unknown> = ({
     ok: true;
@@ -295,6 +314,13 @@ interface AuthMethods {
             required: boolean;
         }[];
     };
+    /**
+     * What a new password must be in the workspace. Once `methods()` has
+     * answered, this client checks new passwords against it before sending
+     * them; until then, against the defaults (12 to 128 characters). Absent
+     * from a server that does not say.
+     */
+    password?: PasswordPolicy;
 }
 /** A legal document the person owes: not yet accepted in its current version. */
 interface PendingLegal {
@@ -1006,7 +1032,7 @@ interface AuthTexts {
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
-type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'link' | 'error' | 'fieldError' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
+type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
 interface AuthFormProps {
     /** The language of the built-in sentences. Default: `en`. */
     locale?: 'en' | 'es';

package/dist/react.js

@@ -185,7 +185,111 @@ function fromWire(wire) {
 // src/validate.ts
 var MIN_PASSWORD = 12;
 var MAX_PASSWORD = 128;
+var FLOOR_PASSWORD = 8;
 var MAX_NAME = 120;
+var CLASSES = ["lowercase", "uppercase", "digit", "symbol"];
+var DEFAULT_PASSWORD_POLICY = Object.freeze({ min: MIN_PASSWORD, max: MAX_PASSWORD, requires: [], min_classes: 0, reject_breached: false });
+var int = (v, fallback) => typeof v === "number" && Number.isFinite(v) ? Math.trunc(v) : fallback;
+function passwordPolicyOf(raw) {
+  const r = raw && typeof raw === "object" ? raw : {};
+  const min = Math.min(Math.max(int(r.min ?? r.min_length, MIN_PASSWORD) || MIN_PASSWORD, FLOOR_PASSWORD), MAX_PASSWORD);
+  const max = Math.max(Math.min(int(r.max ?? r.max_length, MAX_PASSWORD) || MAX_PASSWORD, MAX_PASSWORD), min);
+  const asked = Array.isArray(r.requires) ? r.requires : [];
+  return {
+    min,
+    max,
+    requires: CLASSES.filter((c) => asked.includes(c)),
+    min_classes: Math.min(Math.max(int(r.min_classes ?? r.minClasses, 0), 0), CLASSES.length),
+    reject_breached: (r.reject_breached ?? r.rejectBreached) === true
+  };
+}
+function utf8Length(v) {
+  let n = 0;
+  for (const ch of v) {
+    const c = ch.codePointAt(0);
+    n += c < 128 ? 1 : c < 2048 ? 2 : c < 65536 ? 3 : 4;
+  }
+  return n;
+}
+function classesOf(v) {
+  const has = /* @__PURE__ */ new Set();
+  for (const ch of v) {
+    if (/\p{Ll}/u.test(ch)) has.add("lowercase");
+    else if (/\p{Lu}/u.test(ch)) has.add("uppercase");
+    else if (/\p{Nd}/u.test(ch)) has.add("digit");
+    else if (!/\p{L}/u.test(ch)) has.add("symbol");
+  }
+  return has;
+}
+function passwordProblems(value, policy = DEFAULT_PASSWORD_POLICY) {
+  const p = passwordPolicyOf(policy);
+  const out = [];
+  const length = utf8Length(value);
+  if (length < p.min) out.push("too_short");
+  if (length > p.max) out.push("too_long");
+  const has = classesOf(value);
+  for (const c of p.requires) if (!has.has(c)) out.push(`needs_${c}`);
+  if (p.min_classes > 0 && CLASSES.filter((c) => has.has(c)).length < p.min_classes) out.push("needs_classes");
+  return out;
+}
+var RULES = {
+  en: {
+    between: "Between {min} and {max} characters.",
+    requires: "Include {kinds}.",
+    and: "and",
+    classes: "Use at least {n} of these: lowercase letters, uppercase letters, digits, symbols.",
+    breached: "Passwords found in known data breaches are not accepted.",
+    kinds: { lowercase: "a lowercase letter", uppercase: "an uppercase letter", digit: "a digit", symbol: "a symbol" },
+    reasons: {
+      too_short: "Use at least {min} characters.",
+      too_long: "Use at most {max} characters.",
+      needs_lowercase: "Include a lowercase letter.",
+      needs_uppercase: "Include an uppercase letter.",
+      needs_digit: "Include a digit.",
+      needs_symbol: "Include a symbol.",
+      needs_classes: "Use at least {n} of these: lowercase letters, uppercase letters, digits, symbols.",
+      breached: "This password appears in a known data breach. Choose a different one."
+    }
+  },
+  es: {
+    between: "Entre {min} y {max} caracteres.",
+    requires: "Incluye {kinds}.",
+    and: "y",
+    classes: "Usa al menos {n} de estos tipos: min\xFAsculas, may\xFAsculas, n\xFAmeros, s\xEDmbolos.",
+    breached: "No se aceptan contrase\xF1as que aparecen en filtraciones de datos conocidas.",
+    kinds: { lowercase: "una min\xFAscula", uppercase: "una may\xFAscula", digit: "un n\xFAmero", symbol: "un s\xEDmbolo" },
+    reasons: {
+      too_short: "Usa al menos {min} caracteres.",
+      too_long: "Usa como m\xE1ximo {max} caracteres.",
+      needs_lowercase: "Incluye una min\xFAscula.",
+      needs_uppercase: "Incluye una may\xFAscula.",
+      needs_digit: "Incluye un n\xFAmero.",
+      needs_symbol: "Incluye un s\xEDmbolo.",
+      needs_classes: "Usa al menos {n} de estos tipos: min\xFAsculas, may\xFAsculas, n\xFAmeros, s\xEDmbolos.",
+      breached: "Esta contrase\xF1a aparece en una filtraci\xF3n de datos conocida. Elige otra."
+    }
+  }
+};
+var fill = (s, p) => s.replace("{min}", String(p.min)).replace("{max}", String(p.max)).replace("{n}", String(p.min_classes));
+function describePasswordPolicy(policy = DEFAULT_PASSWORD_POLICY, locale = "en") {
+  const p = passwordPolicyOf(policy);
+  const t = RULES[locale] ?? RULES.en;
+  const parts = [fill(t.between, p)];
+  if (p.requires.length > 0) {
+    const kinds = p.requires.map((c) => t.kinds[c]);
+    const listed = kinds.length === 1 ? kinds[0] : `${kinds.slice(0, -1).join(", ")} ${t.and} ${kinds[kinds.length - 1]}`;
+    parts.push(t.requires.replace("{kinds}", listed));
+  }
+  if (p.min_classes > 0) parts.push(fill(t.classes, p));
+  if (p.reject_breached) parts.push(t.breached);
+  return parts.join(" ");
+}
+function explainPasswordProblems(reasons, policy = DEFAULT_PASSWORD_POLICY, locale = "en") {
+  const p = passwordPolicyOf(policy);
+  const t = RULES[locale] ?? RULES.en;
+  const said = reasons.filter((r) => r in t.reasons).map((r) => fill(t.reasons[r], p));
+  return said.length > 0 ? said.join(" ") : describePasswordPolicy(p, locale);
+}
 var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function checkEmail(value) {
   const v = typeof value === "string" ? value.trim() : "";
@@ -198,13 +302,12 @@ function checkPassword(value) {
   if (value.length > MAX_PASSWORD) return { field: "password", code: "too_long", message: "That password is too long." };
   return null;
 }
-function checkNewPassword(value) {
-  const basic = checkPassword(value);
-  if (basic) return basic;
-  if (value.length < MIN_PASSWORD) {
-    return { field: "password", code: "too_short", message: `Use at least ${MIN_PASSWORD} characters.` };
-  }
-  return null;
+function checkNewPassword(value, policy) {
+  if (typeof value !== "string" || value === "") return { field: "password", code: "required", message: "Enter your password." };
+  const p = policy ? passwordPolicyOf(policy) : DEFAULT_PASSWORD_POLICY;
+  const reasons = passwordProblems(value, p);
+  if (reasons.length === 0) return null;
+  return { field: "password", code: reasons[0], message: explainPasswordProblems(reasons, p) };
 }
 function checkName(value) {
   if (value === void 0 || value === null || value === "") return null;
@@ -267,7 +370,7 @@ function createAuthClient(options = {}) {
       const body = await res.json().catch(() => null);
       if (res.ok && body && typeof body.status === "string") return { ok: true, ...body };
       const e = body?.error;
-      return { ok: false, error: e && typeof e.code === "string" ? { code: e.code, message: String(e.message ?? ""), ...e.field ? { field: e.field } : {} } : UNAVAILABLE };
+      return { ok: false, error: e && typeof e.code === "string" ? { code: e.code, message: String(e.message ?? ""), ...e.field ? { field: e.field } : {}, ...Array.isArray(e.reasons) ? { reasons: e.reasons.map(String) } : {} } : UNAVAILABLE };
     } catch {
       return { ok: false, error: UNAVAILABLE };
     }
@@ -295,12 +398,14 @@ function createAuthClient(options = {}) {
     if (o.locale) q.set("locale", o.locale);
     return `${base}/login?${q}`;
   };
+  let policy;
   async function methods() {
     try {
       const res = await doFetch(`${base}/methods`, { credentials: "same-origin", headers: { accept: "application/json" } });
       if (res.ok) {
         const m = await res.json();
-        return { providers: [], signUp: true, magicLink: false, passkey: false, ...m, passkeyHere: m.passkeyHere === true, passkeyOnCauthy: m.passkeyOnCauthy ?? m.passkey === true, sso: m.sso === true };
+        if (m.password) policy = passwordPolicyOf(m.password);
+        return { providers: [], signUp: true, magicLink: false, passkey: false, ...m, ...policy ? { password: policy } : {}, passkeyHere: m.passkeyHere === true, passkeyOnCauthy: m.passkeyOnCauthy ?? m.passkey === true, sso: m.sso === true };
       }
     } catch {
     }
@@ -444,12 +549,12 @@ function createAuthClient(options = {}) {
       email: (f) => post(
         "/sign-up/email",
         { email: f.email, password: f.password, name: f.name, organization: f.organization, acceptLegal: f.acceptLegal, consents: f.consents },
-        firstProblem(checkName(f.name), checkEmail(f.email), checkNewPassword(f.password), checkOrganization(f.organization)),
+        firstProblem(checkName(f.name), checkEmail(f.email), checkNewPassword(f.password, policy), checkOrganization(f.organization)),
         f.captchaToken
       )
     },
     forgotPassword: (f) => post("/forgot-password", { email: f.email }, checkEmail(f.email), f.captchaToken),
-    resetPassword: (f) => post("/reset-password", { token: f.token, password: f.password }, checkNewPassword(f.password)),
+    resetPassword: (f) => post("/reset-password", { token: f.token, password: f.password }, checkNewPassword(f.password, policy)),
     verifyEmail: (f) => post("/verify-email", { token: f.token }, null),
     signOut: () => post("/sign-out", {}, null),
     organizations: {
@@ -483,7 +588,7 @@ function createAuthClient(options = {}) {
       },
       acceptLegal: (f = {}) => post("/me/legal/accept", { kinds: f.kinds ?? [] }, null),
       changePassword: (f) => {
-        const bad = checkNewPassword(f.newPassword);
+        const bad = checkNewPassword(f.newPassword, policy);
         return post("/me/password", { password: f.password, newPassword: f.newPassword }, bad ? { ...bad, field: "newPassword" } : null);
       },
       mfa: {
@@ -514,7 +619,7 @@ function createAuthClient(options = {}) {
         return body && Array.isArray(body.sessions) ? body.sessions : [];
       },
       signOutEverywhere: () => post("/me/sessions/end", {}, null),
-      upgrade: (f) => post("/me/upgrade", { email: f.email, password: f.password, name: f.name ?? "" }, firstProblem(checkName(f.name), checkEmail(f.email), checkNewPassword(f.password))),
+      upgrade: (f) => post("/me/upgrade", { email: f.email, password: f.password, name: f.name ?? "" }, firstProblem(checkName(f.name), checkEmail(f.email), checkNewPassword(f.password, policy))),
       upgradeUrl,
       upgradeWith(provider, o) {
         window.location.assign(upgradeUrl(provider, o));
@@ -1036,18 +1141,36 @@ function useForm(props) {
   const Input = props.components?.Input ?? PlainInput;
   const [error, setError] = (0, import_react.useState)(null);
   const [busy, setBusy] = (0, import_react.useState)(false);
-  const say = (e) => t.errors[e.code] ?? e.message;
+  const [policy, setPolicy] = (0, import_react.useState)(void 0);
+  const locale = props.locale ?? "en";
+  const say = (e) => {
+    if (props.texts?.errors?.[e.code] === void 0 && isPasswordRule(e)) return explainPasswordProblems(e.reasons ?? [e.code], policy, locale);
+    return t.errors[e.code] ?? e.message;
+  };
+  const passwordRule = describePasswordPolicy(policy, locale);
   const done = (to) => {
     if (props.onSuccess) props.onSuccess();
     else window.location.assign(sitePath(to) ?? sameOrigin(props.returnTo) ?? "/");
   };
   const root = useRoot(props);
-  return { t, cx, Button, Input, error, setError, busy, setBusy, say, done, root };
+  return { t, cx, Button, Input, error, setError, busy, setBusy, say, done, root, policy, setPolicy, passwordRule };
+}
+var PASSWORD_RULES = ["needs_lowercase", "needs_uppercase", "needs_digit", "needs_symbol", "needs_classes", "breached"];
+function isPasswordRule(e) {
+  if (e.code === "weak_password" || PASSWORD_RULES.includes(e.code)) return true;
+  return (e.code === "too_short" || e.code === "too_long") && (e.field === "password" || e.field === "newPassword");
+}
+function usePasswordPolicy(f, methods) {
+  const { setPolicy } = f;
+  (0, import_react.useEffect)(() => {
+    if (methods?.password) setPolicy(methods.password);
+  }, [methods, setPolicy]);
 }
 function Field(p) {
   const id = (0, import_react.useId)();
   const { f } = p;
   const bad = f.error?.field === p.name ? f.error : null;
+  const described = [bad ? `${id}-error` : "", p.hint ? `${id}-hint` : ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: f.cx("field"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("label"), htmlFor: id, children: [
       p.label,
@@ -1064,10 +1187,11 @@ function Field(p) {
         required: p.required,
         className: f.cx("input"),
         "aria-invalid": bad ? true : void 0,
-        "aria-describedby": bad ? `${id}-error` : void 0,
+        "aria-describedby": described || void 0,
         onChange: (e) => p.onChange(e.target.value)
       }
     ),
+    p.hint && !bad && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: `${id}-hint`, className: f.cx("hint"), children: p.hint }),
     bad && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: `${id}-error`, role: "alert", className: f.cx("fieldError"), children: f.say(bad) })
   ] });
 }
@@ -1328,6 +1452,7 @@ function SignUp(props) {
   const [password, setPassword] = (0, import_react.useState)("");
   const [sent, setSent] = (0, import_react.useState)(false);
   const methods = useMethods(auth);
+  usePasswordPolicy(f, methods);
   const challenge = useChallenge(methods?.captchaSiteKey, props.locale);
   const [acceptLegal, setAcceptLegal] = (0, import_react.useState)(false);
   const [consents, setConsents] = (0, import_react.useState)({});
@@ -1362,7 +1487,7 @@ function SignUp(props) {
     methods?.organization?.ask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "organization", type: "text", label: f.t.company, value: organization, autoComplete: "organization", required: methods.organization.required, onChange: setOrganization }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.password, value: password, autoComplete: "new-password", required: true, onChange: setPassword }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.password, value: password, autoComplete: "new-password", required: true, onChange: setPassword, hint: f.passwordRule }),
     legal && legal.documents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("check"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", name: "acceptLegal", checked: acceptLegal, required: true, onChange: (e) => setAcceptLegal(e.target.checked) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
@@ -1428,6 +1553,7 @@ function ResetPassword(props) {
   const [token, setToken] = (0, import_react.useState)(null);
   const [password, setPassword] = (0, import_react.useState)("");
   const [changed, setChanged] = (0, import_react.useState)(false);
+  usePasswordPolicy(f, useMethods(auth));
   useMailedToken("token", (t) => {
     setToken(t ?? "");
     if (!t) f.setError({ code: "invalid_token", message: "This link is not valid, or it has expired." });
@@ -1457,7 +1583,7 @@ function ResetPassword(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
     general && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.newPassword, value: password, autoComplete: "new-password", required: true, onChange: setPassword }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.newPassword, value: password, autoComplete: "new-password", required: true, onChange: setPassword, hint: f.passwordRule }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy || token === null, className: f.cx("button"), children: f.t.savePassword })
   ] });
 }
@@ -1798,6 +1924,7 @@ function PasswordPart({ props }) {
   const { f, done, setDone, run, general } = useSection(props);
   const [password, setPassword] = (0, import_react.useState)("");
   const [newPassword, setNewPassword] = (0, import_react.useState)("");
+  usePasswordPolicy(f, useMethods(auth));
   const submit = async (e) => {
     e.preventDefault();
     const r = await run(() => auth.account.changePassword({ password, newPassword }));
@@ -1810,7 +1937,7 @@ function PasswordPart({ props }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: f.cx("heading"), children: f.t.changePassword }),
     general && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "newPassword", type: "password", label: f.t.newPassword, value: newPassword, autoComplete: "new-password", required: true, onChange: setNewPassword }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "newPassword", type: "password", label: f.t.newPassword, value: newPassword, autoComplete: "new-password", required: true, onChange: setNewPassword, hint: f.passwordRule }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.changePassword }),
     done && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", className: f.cx("notice"), children: done })
   ] });