fma-ds

Password Rules

The rules a new password must follow, each marked pending, met or unmet as the user types — by icon and a screen-reader state label (stateLabels), not color alone.

FormsoriginalMITChangelogRegistry JSON

Overview

  • `rules`: takes PasswordRule objects (id, label, test(value, confirmation)).
  • `passwordRules`: builds the usual ones — minLength(n), maxLength(n), uppercase(), lowercase(), number(), special(), match() against confirmation — each taking a label to translate it. Defaults to 8+ characters, upper, lower and a number.
  • Neutral start: rules stay neutral until there's something to judge.
  • Validation: the pure helpers evaluatePasswordRules and isPasswordValid share the same rules for form validation.

Give it an id and point the input's aria-describedby at it.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/password-rules

    Files land in components/fma-ds/password-rules.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0
Registry
None