Fork me on GitHub

React UX Password Field


This react component aims to improve common issues in password field UX.

  1. Password Strength Detection - Show the password complexity using Dropbox's zxcvbn library, loaded async and updated onChange.
  2. Timed Password Masking - Users make errors when they can't see the password field. React UX Password temporarily shows the password, then hides after a configurable 1200ms. Best explained in the nngroup article: Stop Password Masking
  3. Stateful Class - Know the HTML5 validity of your field by class.

Inspect element to see all your password info with debug mode on!


Install

      npm install react-ux-password-field
    

View it on Github


Use

      // use it like any other react component.
// just require and place it inside your render function.

var InputPassword = require('react-ux-password-field');

...

render: function() {
  return (
    <InputPassword />
  )
}
      
    

* React UX Password Field is UMD compatible, meaning it will load with commonJS, AMD/RequireJS, or standalone.


Options (props)

Add your attributes normally like you would any password field. (id, placeholder, required, pattern etc...) But now you get the following extras:


Info Bar

infoBar (bool) default: true

infoBar={false}
will disable the visible meter below the field.

You can still rely on the attributes in the container class to do any other logic including.


Password Strength

zxcvbn (bool|string) default: true

zxcvbn={false}
If false is passed. zxcvbn will be disabled. You can also pass an alternate source in a string to modify the async loaded source. default is: https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/1.0/zxcvbn.min.js

You can also pass "debug" as your string and it will console.log the zxcvbn object returned on each password change.

Note: zxcvbn is loaded async as it is a pretty big file. The async load time usually isn't an issue for a password usecase, if it is. Consider disabling and moving to a server-side load.


minScore (number) default: 0

minScore={2}
provides a password strength score based on 0-4. You can set the minimum accepted score for the field to be considered valid. Note: Dropbox who created and uses the library, does not set a minimum score, but does provide the info for the user.


statusColor (string)#5CE592

statusColor="#5CE592"
will change the default valid color in the bar.


statusInactiveColor (string)#FC6F6F

statusInactiveColor="#FC6F6F"
will change the default invalid color in the bar.


strengthLang (array)['Weak', 'Okay', 'Good', 'Strong', 'Great']

strengthLang={['Bad', 'Not good', 'Decent', 'Strong', 'Great']}
will modify the text shown next to the bar. You can pass an empty array to remove the text.


changeCb (function(oldValue, newValue))

changeCb={funcName}
will call your callback on zxcvbn level change. It will pass in the old and new value. You can use this to hook other state related to the quality of the password if needed.


Masking

toggleMask (bool) default: true

toggleMask={false}
will disable the temporarily unmasking password, and it will revert to acting like a normal password field which masks the entire time.

unMaskTime (number in ms.) default: 1400

unMaskTime={1400}
will change the default length a password field is unmasked for. *This is debounced, so the count will only start when typing is paused.


HTML5 Attributes

minLength (number)

minLength={7}
currently, the html5 spec only provides maxLength property. But react makes it easy to add a minLength as well. This can also easily be implemented with the pattern field.

You can also use all the default HTML5 input validation attributes, like maxLength, pattern, required etc...


Contributing

Pull requests are welcomed, please file an issue explaining the problem you're solving first, and pull-request to an upstream branch instead of master.