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

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

or

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. |

Default:

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

License

MIT