All files / src/components PasswordStrengthMeter.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
 
 
 
 
 
1679x
1679x
 
744x
 
 
 
2976x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { getPasswordStrength } from "../password-strength";
 
interface PasswordStrengthMeterProps {
	password: string;
}
 
export function PasswordStrengthMeter({ password }: PasswordStrengthMeterProps) {
	const strength = getPasswordStrength(password);
	if (password.length === 0) return null;
 
	return (
		<div className="mt-1.5 space-y-1">
			<div className="flex gap-1">
				{[1, 2, 3, 4].map((level) => (
					<div
						key={level}
						className={`h-1 flex-1 rounded-full transition-colors ${
							level <= strength.score ? strength.color : "bg-gray-200 dark:bg-gray-700"
						}`}
					/>
				))}
			</div>
			<p className={`text-xs ${strength.textColor}`} data-testid="password-strength">
				{strength.label}
			</p>
		</div>
	);
}