@adonis-agora/authkit-react/build/src/components/password_strength_meter.js

Frontend ergonomics over AuthKit for AdonisJS + Inertia + React apps: a typed useAuth() hook, role-gating hooks and gating components.

import { createElement } from 'react';
import { usePasswordStrength, } from '../hooks/use_password_strength.js';
const DEFAULT_LABELS = [
    'Very weak',
    'Weak',
    'Fair',
    'Good',
    'Strong',
];
export function PasswordStrengthMeter({ password, scorer, showFeedback = true, labels = DEFAULT_LABELS, className, }) {
    const { score, feedback } = usePasswordStrength(password, { scorer });
    const cls = ['authkit-strength', className].filter(Boolean).join(' ');
    const segments = [0, 1, 2, 3].map((i) => createElement('span', {
        key: i,
        className: ['authkit-strength__segment', i < score ? 'authkit-strength__segment--filled' : '']
            .filter(Boolean)
            .join(' '),
    }));
    const children = [
        createElement('div', {
            key: 'bar',
            className: 'authkit-strength__bar',
            role: 'meter',
            'aria-valuemin': 0,
            'aria-valuemax': 4,
            'aria-valuenow': score,
            'aria-label': labels[score],
            'data-score': score,
        }, segments),
        createElement('span', { key: 'label', className: 'authkit-strength__label' }, labels[score]),
    ];
    if (showFeedback && feedback && feedback.length > 0) {
        children.push(createElement('ul', { key: 'feedback', className: 'authkit-strength__feedback' }, feedback.map((tip, i) => createElement('li', { key: i }, tip))));
    }
    return createElement('div', { className: cls }, children);
}