antd-password-input-strength

Antd Input Component with password-strength indicator.

Features

• Drop-in replacement for antd's Input component
• Customizable
• Uses tai-password-strength for password strength estimation

Note: tai-password-strength is a rather large library. Use code splitting to only load the library when necessary.

Install

1npm install --save antd-password-input-strength

or

1yarn add --save antd-password-input-strength

Note: antd and react/react-dom are peer dependencies. You should only use this library in a React/AntD project.

Usage

Use as a drop-in replacement for antd's Input:

1<Form>
2    <Form.Item label="Password">
3        <PasswordInput />
4    </Form.Item>
5</Form>

With Form.create():

1<Form>
2    <Form.Item label="Password">
3    {this.props.form.getFieldDecorator("password", {
4        rules: [{
5            required: true,
6            message: "Please enter your password"
7        }]
8    })(<PasswordInput />)}
9    </Form.Item>
10</Form>

With custom settings:

1<Form>
2    <Form.Item label="Password">
3        <PasswordInput 
4            settings={{
5                ...defaultSettings,
6                height: 5
7            }}
8            
9            onChange={() => console.log("Changed")}
10            size="large"
11        />
12    </Form.Item>
13</Form>

With validation:

1function ValidationExample() {
2  const [level, setLevel] = useState(0)
3
4  const minLevel = 1;
5  const errorMessage = 'Password is too weak';
6
7  return (
8    <Form>
9      <Form.Item
10        name="test"
11        rules={[{
12          validator: async () => {
13            return level >= minLevel ? Promise.resolve() : Promise.reject(errorMessage);
14          },
15          message: errorMessage
16        }]}
17      >
18        <PasswordInput onLevelChange={setLevel} />
19      </Form.Item>
20    </Form>
21  );
22}

API

PasswordInput

props	type	description
settings	PasswordInputSettings	Strength indicator display settings
onLevelChange	(newLevel: 0	1
...props	InputProps	Pass additional properties to the underlying Input component

PasswordInputSettings

props	type	description
colorScheme	ColorScheme	Modify the indicator's color scheme
height	number	Change indicator bar height (in px)
alwaysVisible	boolean	If false, the bar only appears if the input field isn't empty

Default:

1{
2    colorScheme: [...],
3    height: 3,
4    alwaysVisible: false
5}

ColorScheme

props	type	description
levels	string[]	Array of CSS color codes for the different strength levels: levels[0] = weakest, levels[4] = strongest
noLevel	string	CSS color code for non-colored strength indicator bars.

Default:

1{
2    levels: ["#ff4033", "#fe940d", "#ffd908", "#cbe11d", "#6ecc3a"],
3    noLevel: "lightgrey"
4}

License

MIT