try-react-password-input

A password input component which accepts certain qualifications for password to valid as props and then returns whether password is valid or in the callback

For validations we have used password-validator module

Installation

npm install try-react-password-input

How to use it ?

import Password from 'try-react-password-input';

handleChange(passwordValid, password) {
  console.log(passwordValid, password);
}

<Password
  uppercase
  lowercase
  digits
  onChange={this.handleChange}
  className="password-input"
/>

Password Validations available pas props

| Validation | type | Description | | :--- | :---: | :--- | | uppercase | Boolean | specifies whether password should contain uppercase characters | | lowercase | Boolean |specifies whether password should contain lowercase characters | | digits | Boolean | specifies that password should contain digits | | noSpaces | Boolean |specifies that password should not contain any spaces | | max | Number | specifies the maximum number characters in password no max chars in password, unless specified | | min | Number | specifies the minimum number characters in password no min chars in password, unless specified | | symbols | Boolean | specifies whether or not password should contain symbols |

Note: All the above props/validation if Boolean has default value as false, and others are undefined.

Other Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | value | String | empty string |value of password text | | onChange | Function | empty funtion | method called everytime value is changed in password input field, has passwordValidity and password value in arguments (if list is true, receives array of keys as list invalidities which are spelled same as props) | | list | Boolean | True | specifies whether validation api should return list of failed validations or not | | showValidity | Boolean | True | specifies if the validity indicator needs to be shown to indicate password is valid or not (list showing all the validities if list is true else and small indicator showing password valid or not) | | showPassword | Boolean | False | specifies whether show password button needs to be shown or not | | className | String | empty string | adds class to the root element | | inputClass | String | empty string | adds class to the input element |

Note : All the other default props such as id, etc. are accpted by default if they are not one of the props listed above such as onChange.