Skip to content

added focus() and blur(), improved readme #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
petrbela wants to merge 4 commits into
base: master
Choose a base branch
from
Open

added focus() and blur(), improved readme #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9f9ff4f
added focus() and blur(), improved readme
petrbela Aug 29, 2018
93f675a
not valid if too short
petrbela Aug 30, 2018
0082f12
Fix View.Proptypes deprecated
petrbela Aug 30, 2018
23d5e1a
remove proptypes
petrbela Aug 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
277 changes: 129 additions & 148 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
# react-native-password-strength-checker
A react-native password input with strength checker for both IOS and Android

A react-native password input with strength checker for both iOS and Android.

## Features
- Use zxcvbn to check password strength, combine with custom rules and password length
- Uses [zxcvbn](https://github.com/dropbox/zxcvbn) to check password strength, combined with custom rules and password length
- Support for both IOS and Android, use ES6 React native
- Animated strength bar
- Check password is too short
- Check password not match rules
- Custom strength level (corresponding to 5 levels)
- Custom style for password input and password strength

## Dependencies
This Component is built using [Dropbox zxcvbn password strength estimator library](https://github.com/dropbox/zxcvbn)

## Screenshots

![2017-08-22 12_19_00](https://thumbs.gfycat.com/BoldActiveAlaskajingle-size_restricted.gif)
Expand All @@ -24,179 +22,162 @@ npm install react-native-password-strength-checker --save
```

## Usage
### Basic
Import this module:

Import the module:

```javascript
import PasswordStrengthChecker from 'react-native-password-strength-checker';
```
Use as a component:

Use as a component:

```javascript
// Define streng level list
const strengLevels = [
{
label: 'Weak',
labelColor: '#fff',
widthPercent: '33',
innerBarColor: '#fe6c6c'
},
{
label: 'Weak',
labelColor: '#fff',
widthPercent: '33',
innerBarColor: '#fe6c6c'
},
{
label: 'Fair',
labelColor: '#fff',
widthPercent: '67',
innerBarColor: '#feb466'
},
{
label: 'Fair',
labelColor: '#fff',
widthPercent: '67',
innerBarColor: '#feb466'
},
{
label: 'Strong',
labelColor: '#fff',
widthPercent: '100',
innerBarColor: '#6cfeb5'
}
// Default rule names
const ruleNames = 'lowerCase|upperCase|digits|symbols'

// Default strength level list
const strengthLevels = [
{
label: 'Weak',
labelColor: '#fff',
widthPercent: 33,
innerBarColor: '#fe6c6c'
},
{
label: 'Weak',
labelColor: '#fff',
widthPercent: 33,
innerBarColor: '#fe6c6c'
},
{
label: 'Fair',
labelColor: '#fff',
widthPercent: 67,
innerBarColor: '#feb466'
},
{
label: 'Fair',
labelColor: '#fff',
widthPercent: 67,
innerBarColor: '#feb466'
},
{
label: 'Strong',
labelColor: '#fff',
widthPercent: 100,
innerBarColor: '#6cfeb5'
}
];

// Define too short object
// Default too short object
const tooShort = {
enabled: true,
label: 'Too short',
labelColor: 'red'
enabled: false,
labelColor: '#fff',
label: 'Too short',
widthPercent: 33,
innerBarColor: '#fe6c6c'
};

render() {
return (
...
<PasswordStrength
secureTextEntry
minLength={4}
ruleNames="symbols|words"
strengthLevels={strengthLevels}
tooShort={tooShort}
minLevel={0}
barWidthPercent={65}
showBarOnEmpty={true}
barColor="#ccc"
onChangeText={(text, isValid) => this.setState({ password: { value: text, isValid: isValid } })}
<PasswordStrengthChecker
secureTextEntry
minLength={0}
ruleNames={ruleNames}
strengthLevels={strengthLevels}
tooShort={tooShort}
minLevel={2}
barWidthPercent={70}
showBarOnEmpty={true}
barColor="#ffffff"
onChangeText={(text, isValid) => this.setState({ password: { value: text, isValid: isValid } })}
/>
)
}
```

### Customization
- Define min length for password.
**Default**: `0`
- Rules: _digits_, _letters_, _words_, _symbols_, _upperCase_, _lowerCase_.
Separate rules with **|**.
**Default**: `{ ruleNames: 'lowerCase|upperCase|digits|symbols' }`
- Define min level to pass validation (0,1,2,3,4)
**Default**: `{ minLevel: 2}`
- Define and enable too short case:
**Default**: `
{
tooShort: {
enabled: false,
labelColor: '#fff',
label: 'Too short',
widthPercent: '33',
innerBarColor: '#fe6c6c'
}
}
`
If you want to show 'too short', Enable it to show when password length is too short
- Define strength labels and label colors, strength bar colors, percentage of width for each level
**Default**: ` { strengthLevels: [
{
label: 'Weak',
labelColor: '#fff',
widthPercent: '33',
innerBarColor: '#fe6c6c'
},
{
label: 'Weak',
labelColor: '#fff',
widthPercent: '33',
innerBarColor: '#fe6c6c'
},
{
label: 'Fair',
labelColor: '#fff',
widthPercent: '67',
innerBarColor: '#feb466'
},
{
label: 'Fair',
labelColor: '#fff',
widthPercent: '67',
innerBarColor: '#feb466'
},
{
label: 'Strong',
labelColor: '#fff',
widthPercent: '100',
innerBarColor: '#6cfeb5'
}
] }`

### Properties
This component uses the same props as <TextInput>. Below are additional props for this component:

Prop | Type | Optional | Defaul | Description
----------- | ------- | -------- | ------- | -----------------------
`minLength` | number | Yes | 0 | Min length for password
`ruleNames` | string | Yes | _Above_ | List of rule name to check password
`strengLevels` | object array | Yes | _Above_ | List of password strength level with label, label color, percentage of width, bar color
`tooShort` | object | Yes | _Above_ | enabled, label, label color, percentage of width, bar color for too short
`minLevel` | number | Yes | 2 | Min level to pass password validation
`inputWraperStyle` | object | Yes | | Style for <View> wrapped password input
`inputStyle` | object/style | Yes | | Style for password input
`strengthWrapperStyle` | object/style | Yes | | Style for <View> wrapped password strength bar and description
`strengthBarStyle` | object/style | Yes | | Style for password strength bar
`innerStrengthBarStyle` | object/style | Yes | | Style for password strength bar based on strength level
`strengthDescriptionStyle` | object/style | Yes | | Style for password strength description
`barColor` | string | Yes | `'#ffffff'` | Color of filled password strength bar
`barWidthPercent` | number | Yes | 70 | Percentage of password strength bar width
`onChangeText` | function | No | | Trigger when user inputs and password input finishes validation. Returns value and validation result
`showBarOnEmpty` | boolean | Yes | `true` | Only show strength bar when input is empty or not

Strength level object:

Property | Type | Description

This component uses the same props as `<TextInput>`. Below are additional props for this component:

Prop | Type | Default | Description
----------- | ------- | ------- | -----------------------
`onChangeText` | function | | **Required**. Trigger when user inputs and password input finishes validation. Returns value and validation result
`secureTextEntry` | boolean | `false` | Same as [TextInput#secureTextEntry](https://facebook.github.io/react-native/docs/textinput#securetextentry)
`minLength` | number | 0 | Min length for password
`ruleNames` | string | _Above_ | List of rule names to check the password. Any combination of _digits_, _letters_, _words_, _symbols_, _upperCase_, _lowerCase_. Separate rules with **|**.
`strengthLevels` | [StrengthLevel[]](#strengthlevel-object) | _Above_ | List of password strength level with label, label color, percentage of width, bar color. The label is completely up to you. The only requirement is the list has **5 items** that correspond to [zxcvbn's score](https://github.com/dropbox/zxcvbn#usage).
`tooShort` | [TooShort](#tooshort-object) | _Above_ | Displayed when the password is shorter than `minLength`. Otherwise, the corresponding `strengthLevels`'s label is displayed.
`minLevel` | number | 2 | Min level to pass password validation (`isValid` flag returned in `onChangeText`). Possible values: _0_, _1_, _2_, _3_, _4_.
`inputWraperStyle` | object | | Style for <View> wrapped password input
`inputStyle` | object/style | | Style for password input
`strengthWrapperStyle` | object/style | | Style for `<View>` wrapped password strength bar and description
`strengthBarStyle` | object/style | | Style for password strength bar
`innerStrengthBarStyle` | object/style | | Style for password strength bar based on strength level
`strengthDescriptionStyle` | object/style | | Style for password strength description
`barColor` | string | `'#ffffff'` | Color of filled password strength bar
`barWidthPercent` | number | 70 | Percentage of password strength bar width
`showBarOnEmpty` | boolean | `true` | If `true`, show strength bar even if the empty or not

#### StrengthLevel object:

Property | Type | Description
---------------- | --------- | ------------------------------------
`label` | string | Label for strength level description
`labelColor` | string | Color for strength level description label
`widthPercent` | number | Percentage of width for inner strength level bar
`innerBarColor` | string | Color for inner strength level bar
Too short object:
`label` | string | Label for strength level description
`labelColor` | string | Color for strength level description label
`widthPercent` | number | Percentage of width for inner strength level bar
`innerBarColor` | string | Color for inner strength level bar


#### TooShort object:

Property | Type | Description
---------------- | ---------- | -----------------------------------
`enabled` | boolean | Enable too short description
`label` | string | Label for strength level description
`labelColor` | string | Color for strength level description label
`widthPercent` | number | Percentage of width for inner strength level bar
`innerBarColor` | string | Color for inner strength level bar

`label` | string | Label for strength level description
`labelColor` | string | Color for strength level description label
`widthPercent` | number | Percentage of width for inner strength level bar
`innerBarColor` | string | Color for inner strength level bar

### Methods

To call methods, you first need to get reference to the `<PasswordStrenghChecker>` instance:

```js
render() {
return (
...
<PasswordStrengthChecker
...
ref={ref => this.password = ref}
/>
)
}

someMethod() {
this.password.focus()
}
```

Method | Arguments | Description
-------- | --------- | -----------
`focus` | _None_ | See [#focus](https://facebook.github.io/react-native/docs/direct-manipulation#focus)
`blur` | _None_ | See [#blur](https://facebook.github.io/react-native/docs/direct-manipulation#blur)

## Example

See [EXAMPLE](example)

```sh
git clone https://github.com/ttdung11t2/react-native-password-strength-checker.git
cd react-native-password-strength-checker/example
npm install
react-native run-ios / react-native run-android
```

## License

react-native-password-strength-checker is released under the MIT license. See [LICENSE](LICENSE) for details.
Any question or support will welcome.
react-native-password-strength-checker is released under the MIT license. See [LICENSE](LICENSE) for details.

Any questions or support are welcome.
Loading