antd-password-input-strength

Antd Input Component with password-strength indicator.

Preview GIF

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

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

yarn 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:

<Form>
    <Form.Item label="Password">
        <PasswordInput />
    </Form.Item>
</Form>

With Form.create():

<Form>
    <Form.Item label="Password">
    {this.props.form.getFieldDecorator("password", {
        rules: [{
            required: true,
            message: "Please enter your password"
        }]
    })(<PasswordInput />)}
    </Form.Item>
</Form>

With custom settings:

<Form>
    <Form.Item label="Password">
        <PasswordInput 
            settings={{
                ...defaultSettings,
                height: 5
            }}

            onChange={() => console.log("Changed")}
            size="large"
        />
    </Form.Item>
</Form>

With validation:

function ValidationExample() {
  const [level, setLevel] = useState(0)

  const minLevel = 1;
  const errorMessage = 'Password is too weak';

  return (
    <Form>
      <Form.Item
        name="test"
        rules={[{
          validator: async () => {
            return level >= minLevel ? Promise.resolve() : Promise.reject(errorMessage);
          },
          message: errorMessage
        }]}
      >
        <PasswordInput onLevelChange={setLevel} />
      </Form.Item>
    </Form>
  );
}

API

PasswordInput

props	type	description
settings	PasswordInputSettings	Strength indicator display settings
onLevelChange	(newLevel: 0	1	2	3	4) => void	Called when the input level changes
...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:

{
    colorScheme: [...],
    height: 3,
    alwaysVisible: false
}

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.