PasswordStrengthBar.tsx49 lines · main

1	import { InlineLinkClassName } from './InlineLink'
2	import { PASSWORD_STRENGTH_COLOR, PASSWORD_STRENGTH_PERCENTAGE } from '@/lib/constants'
3	import { PasswordStrengthScore } from '@/lib/password-strength'
4
5	interface Props {
6	passwordStrengthScore: PasswordStrengthScore
7	passwordStrengthMessage: string
8	password: string
9	generateStrongPassword: () => void
10	}
11
12	export const PasswordStrengthBar = ({
13	passwordStrengthScore = 0,
14	passwordStrengthMessage = '',
15	password = '',
16	generateStrongPassword,
17	}: Props) => {
18	return (
19	<>
20	{password && (
21	<div
22	aria-valuemax={100}
23	aria-valuemin={0}
24	aria-valuenow={PASSWORD_STRENGTH_PERCENTAGE[passwordStrengthScore]}
25	aria-valuetext={`${PASSWORD_STRENGTH_PERCENTAGE[passwordStrengthScore]}%`}
26	role="progressbar"
27	className="mb-2 overflow-hidden transition-all border rounded-sm bg-200 w-full"
28	>
29	<div
30	style={{
31	width: `${PASSWORD_STRENGTH_PERCENTAGE[passwordStrengthScore]}%`,
32	}}
33	className={`relative h-1 w-full ${PASSWORD_STRENGTH_COLOR[passwordStrengthScore]} transition-all duration-500 ease-out shadow-inner`}
34	/>
35	</div>
36	)}
37	<p>
38	{(passwordStrengthMessage
39	? passwordStrengthMessage
40	: 'This is the password to your Postgres database, so it must be strong and hard to guess.') +
41	' '}
42	<button type="button" className={InlineLinkClassName} onClick={generateStrongPassword}>
43	Generate a password
44	</button>
45	.
46	</p>
47	</>
48	)
49	}