PasswordStrengthIndicator

Password strength meter (AUTH §4) — guidance only, never enforcement (the backend owns the weak-password rule). Prop-driven: pass the current password; renders nothing when empty.

import { PasswordStrengthIndicator } from "@evolve-storefront/feature-auth/password-strength-indicator";

Renders inside AuthProvider.

Preview

VariantsOpen in Storybook ↗

Usage

Every strength the meter shows, weakest first. A password scores a point each for 8 and 12 characters, mixed case, a digit and a symbol; an empty one renders nothing.

const [password, setPassword] = useState("");

<>
  <PasswordField name="password" label={t("password-label")} newPassword onValueChange={setPassword} />
  <PasswordStrengthIndicator password={password} />
</>;

Props

Prop	Type	Description
password	string

Any other props go to the root element, like on a plain HTML element.