@clicktap/ui 2.3.3 → 2.3.4

package/components/PasswordCheck/PasswordCheck.js

@@ -1 +1 @@
-"use client";import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as a}from"../../utils/cn.js";import{checkStrength as d,getProgressText as c}from"./PasswordCheck.utils.js";const g=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(s)}];function h({value:s,variant:i="default",requirements:o=g}){const e=d(s);return i==="requirements"?s?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:o.map(r=>{const l=r.test(s);return n("li",{className:"flex items-center gap-1.5",children:[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:a("shrink-0 transition-colors",l?"text-success":"text-fg-subtle"),children:l?t("path",{d:"M20 6 9 17l-5-5"}):t("circle",{cx:"12",cy:"12",r:"4"})}),t("span",{className:a("transition-colors",l?"text-success":"text-fg-muted"),children:r.label})]},r.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r))}),n("div",{className:a("inline-flex gap-x-1 text-xs text-fg-strong transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:c(e)})]})]})]}):null:t("div",{children:n("div",{className:a("relative w-full flex gap-x-2",i==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r)),i==="default"&&n("div",{className:a("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-fg-strong",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:c(e)})]})]})})}export{h as PasswordCheck,h as default};
+"use client";import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as r}from"../../utils/cn.js";import{trimEdgeWhitespace as g,checkStrength as x,getProgressText as o}from"./PasswordCheck.utils.js";const f=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one lowercase letter",test:s=>/[a-z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[^A-Za-z0-9]/.test(s)}];function p({value:s,variant:i="default",requirements:d=f}){const c=g(s),e=x(c);return i==="requirements"?s?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:d.map(a=>{const l=a.test(c);return n("li",{className:"flex items-center gap-1.5",children:[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:r("shrink-0 transition-colors",l?"text-success":"text-fg-subtle"),children:l?t("path",{d:"M20 6 9 17l-5-5"}):t("circle",{cx:"12",cy:"12",r:"4"})}),t("span",{className:r("transition-colors",l?"text-success":"text-fg-muted"),children:a.label})]},a.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(a,l)=>l).map((a,l)=>t("div",{className:r("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},a))}),n("div",{className:r("inline-flex gap-x-1 text-xs text-fg-strong transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:r((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:o(e)})]})]})]}):null:t("div",{children:n("div",{className:r("relative w-full flex gap-x-2",i==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(a,l)=>l).map((a,l)=>t("div",{className:r("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},a)),i==="default"&&n("div",{className:r("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-fg-strong",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:r((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:o(e)})]})]})})}export{p as PasswordCheck,p as default};

package/components/PasswordCheck/PasswordCheck.utils.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Strip edge whitespace the way the backend does before it validates a password.
+ *
+ * The policy lives in PHP — `PasswordService::getPasswordSchema()` in
+ * `libs/mezzio-modules/user/src/Service/PasswordService.php` — and the schema opens with
+ * `->trim()`, which is `Rmg\Validator\EdgeWhitespace`, not PHP's `trim()`. Every rule after it,
+ * `min(8)` included, sees the trimmed value. Measuring the raw one here told a visitor that
+ * `"  abcdef1A!  "` was 13 characters long while the server counted 9.
+ *
+ * The character class mirrors that PHP constant: JavaScript's `\s` already covers NBSP, the whole
+ * `Zs` category and U+FEFF, so only NUL and U+200B ZERO WIDTH SPACE have to be named (U+FEFF is
+ * listed anyway, to keep the two classes readable side by side). Interior whitespace is part of
+ * the value and is left alone, on both sides.
+ */
+export declare const trimEdgeWhitespace: (value: string) => string;
 /** @todo these functions should probably be passed as props to be able to extend */
 export declare const checkStrength: (value: string) => number;
 export declare const getProgressText: (strength: number) => "" | "Very Strong" | "Strong" | "Good" | "Weak" | "Very Weak";

package/components/PasswordCheck/PasswordCheck.utils.js

@@ -1 +1 @@
-const s=t=>{const r=t.length>=8;let e=0;return/^(?=.*[a-z])(?=.*[A-Z])/.test(t)&&r&&(e+=1),/\d/.test(t)&&r&&(e+=1),t.length>=8&&(e+=1),t.length>=11&&(e+=1),/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(t)&&r&&(e+=1),e},n=t=>{switch(t){case 5:return"Very Strong";case 4:return"Strong";case 3:return"Good";case 2:return"Weak";case 1:return"Very Weak";default:return""}},c=(t="")=>({eightСharacters:t.length>=8,upLowCaseLetters:/^(?=.*[a-z])(?=.*[A-Z])/.test(t),oneNumber:/\d/.test(t)});export{s as checkStrength,c as getPasswordRequirements,n as getProgressText};
+const s=t=>t.replace(/^[\s\u0000\u200B\uFEFF]+|[\s\u0000\u200B\uFEFF]+$/g,""),n=t=>{const r=t.length>=8;let e=0;return/^(?=.*[a-z])(?=.*[A-Z])/.test(t)&&r&&(e+=1),/\d/.test(t)&&r&&(e+=1),t.length>=8&&(e+=1),t.length>=11&&(e+=1),/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(t)&&r&&(e+=1),e},c=t=>{switch(t){case 5:return"Very Strong";case 4:return"Strong";case 3:return"Good";case 2:return"Weak";case 1:return"Very Weak";default:return""}},g=(t="")=>({eightСharacters:t.length>=8,upLowCaseLetters:/^(?=.*[a-z])(?=.*[A-Z])/.test(t),oneNumber:/\d/.test(t)});export{n as checkStrength,g as getPasswordRequirements,c as getProgressText,s as trimEdgeWhitespace};

package/docs/migrations/2026/09/ui-2026-09-24-password-check-lowercase-and-trim.md

@@ -0,0 +1,81 @@
+# BUGFIX: `PasswordCheck` states the password policy the backend actually enforces
+
+**Date:** 2026-09-24
+**Package:** `@clicktap/ui`
+**Affects:** `src/components/PasswordCheck/PasswordCheck.tsx`, `PasswordCheck.utils.ts` — every `<PasswordCheck variant="requirements">` that relies on the default `requirements`.
+**Classification:** BUGFIX
+**Breaking:** No. No API change: `requirements`, `value` and `variant` are untouched, and a consumer passing its own `requirements` is unaffected. **Displayed:** the default list grows from four rules to five, and all five are now evaluated against the edge-trimmed value.
+**Ticket:** CTAP-1906
+
+## Problem
+
+`PasswordCheck` restated the password policy in its own words, and the words were wrong.
+
+The policy lives in PHP — `PasswordService::getPasswordSchema()`,
+`libs/mezzio-modules/user/src/Service/PasswordService.php`:
+
+```php
+$sb->string()->trim()->min(8)
+   ->withValidator(new AtLeastOneUppercaseValidator())          // /[A-Z]/
+   ->withValidator(new AtLeastOneLowercaseValidator())          // /[a-z]/
+   ->withValidator(new AtLeastOneNumberValidator())             // /\d/
+   ->withValidator(new AtLeastOneSpecialCharacterValidator());  // /[\W_]/
+```
+
+Five rules. The component displayed four — the lowercase rule was missing. So `PASSWORD1!` turned
+**every displayed tick green** and the server refused the save, and because the rule that rejected
+the visitor was never on screen, the form could not tell them what to change.
+
+Two narrower mismatches came with it:
+
+- **Length was measured on the raw value** while the schema measures the trimmed one. `"  abcdef1A!  "`
+  showed as 13 characters and was validated as 9. The schema's `->trim()` is
+  `Rmg\Validator\EdgeWhitespace`, which is wider than PHP's `trim()`: NUL, U+200B and U+FEFF too.
+- **The special-character rule was narrower than the validator.** The component tested a fixed
+  punctuation list; `AtLeastOneSpecialCharacterValidator` is `/[\W_]/` — anything outside
+  `[A-Za-z0-9]`. A password whose only special character was `£`, a non-ASCII letter or an interior
+  space was refused a tick the server would have granted.
+
+## What changed
+
+`defaultRequirements` is now the five rules above, in schema order, each one carrying a comment
+naming the validator it mirrors:
+
+| # | Displayed rule | Backend rule | Before |
+| --- | --- | --- | --- |
+| 1 | At least 8 characters | `->min(8)` (post-trim) | measured untrimmed |
+| 2 | At least one uppercase letter | `AtLeastOneUppercaseValidator` | unchanged |
+| 3 | At least one lowercase letter | `AtLeastOneLowercaseValidator` | **missing** |
+| 4 | At least one digit | `AtLeastOneNumberValidator` | unchanged |
+| 5 | At least one special character | `AtLeastOneSpecialCharacterValidator` (`/[\W_]/`) | fixed punctuation list |
+
+The component trims once and hands the trimmed value to every rule and to `checkStrength`, because
+the schema's `->trim()` runs before `->min(8)` and before every validator. The new
+`trimEdgeWhitespace` export in `PasswordCheck.utils.ts` mirrors `Rmg\Validator\EdgeWhitespace`:
+JavaScript's `\s` (which already covers NBSP, the `Zs` category and U+FEFF) plus NUL and U+200B.
+Interior whitespace is untouched, on both sides.
+
+`PasswordCheck.requirements.test.tsx` pins the rendered rule set and names
+`PasswordService::getPasswordSchema()` as the source of truth, so the next change to the policy on
+either side lands as a failing test pointing at the other half.
+
+This is the hand-mirroring fix. Generating the list from the serialized schema, so the two cannot
+drift again, is **CTAP-1908**.
+
+## Consumer Impact
+
+**No action needed.** No prop, export or type changed, and the extra rule appears on its own.
+
+**A consumer that passes its own `requirements` keeps exactly what it passes** — the prop still
+overrides the default outright. But that list has the same hole this fix closed, so check it against
+the table above. One such copy existed in the storefront and was fixed in the same change:
+`apps/frontend/components/Account/Auth/Authenticate/constanst.ts` (`passwordValidation`, the zod gate
+behind signup, reset-password and update-password) was missing the lowercase rule and carried the
+same narrow special-character list.
+
+**Rules now receive the trimmed value.** If you pass custom `requirements`, your `test` callbacks
+are called with the edge-trimmed string, not the raw one. A rule that deliberately inspected
+leading/trailing whitespace would stop seeing it — nothing in this repo did.
+
+**Visually, the block is one line taller** in the `requirements` variant. Nothing else about its
+layout, the strength meter or the hide-until-typed behavior moved.

package/docs/migrations/index.json

@@ -9,6 +9,16 @@
     "breaking": "No API change, and no prop, export or class-name contract moves. **Visual:** 76 of the 118 swaps resolve to the exact same light-theme value and render identically. The other 42 do not — they are listed component by component under \"Rendering changes\" and are all one step along a neutral ramp, except `UploadImage`, whose hover background **appears for the first time** because the class it had was a typo.",
     "affects": "54 files under `src/components/**` — every component listed in \"What changed\" below — plus the new root-level `eslint.rules.no-literal-palette-color.mjs` and the two eslint configs that reference it."
   },
+  {
+    "path": "2026/09/ui-2026-09-24-password-check-lowercase-and-trim.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-24",
+    "title": "BUGFIX: `PasswordCheck` states the password policy the backend actually enforces",
+    "classification": "BUGFIX",
+    "breaking": "No. No API change: `requirements`, `value` and `variant` are untouched, and a consumer passing its own `requirements` is unaffected. **Displayed:** the default list grows from four rules to five, and all five are now evaluated against the edge-trimmed value.",
+    "affects": "`src/components/PasswordCheck/PasswordCheck.tsx`, `PasswordCheck.utils.ts` — every `<PasswordCheck variant=\"requirements\">` that relies on the default `requirements`."
+  },
   {
     "path": "2026/09/ui-2026-09-24-dialog-semantic-surface-tokens.md",
     "module": "libs/frontend-modules/ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",