کامپوننت‌ها
قدرت رمز عبور
نوار قدرت رمز و فهرست شرط‌ها زیر فیلد رمز، با هشدار صفحه‌کلید فارسی.
import { PasswordStrength } from "@kashi-ui/react";نمونه
اگر کاربر با صفحه‌کلید فارسی تایپ کند (مثلاً «سلام» به‌جای «sghl»)، هشدار داده می‌شود؛ اشتباه رایجی که کاربر فارسی‌زبان را پشت در ورود نگه می‌دارد.
- حداقل ۸ نویسه، رعایت نشده
- حروف بزرگ و کوچک انگلیسی، رعایت نشده
- دست‌کم یک عدد، رعایت نشده
- دست‌کم یک نماد، مثل ! یا @، رعایت نشده
<Input label="رمز عبور" type="password" value={p} onChange={…} aria-describedby="pw-strength" />
<PasswordStrength id="pw-strength" password={p} />| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
password | string | — | رمز فعلی |
rules | { label, test }[] | defaultPasswordRules | شرط‌ها؛ امتیاز به نسبت شرط‌های برآورده‌شده |
showRules | boolean | true | نمایش فهرست شرط‌ها |
warnPersian | boolean | true | هشدار حروف فارسی در رمز |
id | string | — | برای aria-describedby فیلد رمز |
labels | { title?, levels?, persian? } | «ضعیف، متوسط، خوب، قوی» |
این کامپوننت فقط راهنمای کاربر است و جایگزین بررسی رمز در سرور نیست.
دسترس‌پذیری
سطح قدرت با aria-live اعلام می‌شود و هر شرط برای صفحه‌خوان «رعایت شده» یا «رعایت نشده» دارد. با id و aria-describedby، صفحه‌خوان این راهنما را همراه فیلد رمز می‌خواند. نوار رنگی تزئینی است و متن سطح همیشه نمایش داده می‌شود.