Password input for Polymer
Many applications require users to enter passwords. Hence, it came as a surprise that we couldn’t find any existing Polymer element for password input that supports things like:
- Hide/show password
- Require minimal password length (when setting a password)
- Require matching password/confirm (when setting a password)
After spending some time developing such an element, we’re happy to finally open source the <paper-password-input> element!
Show/hide password
Ever tried on a phone to figure out what exactly you misspelled in your 20 character password? Yep, that’s why mobile users appreciate seeing what they typed in the password box.
With <paper-password-input>, users can simply click the visibility icon to toggle if the password is visible or invisible:
Implementing this feature turned out to be trivial: we simply set the type of the <paper-input> to “password” (invisible) or empty (visible).
Restrict which passwords can be set
An application might want to enforce a couple of rules when setting the password. For that, we added two optional validators that can be easily combined with the password input:
- min-length-validator ensures that the password has a certain minimal length
- match-passwords-validator ensures that the password matches the input of the confirm password
The following example ensure that the password is at least 6 characters long:
<min-length-validator id="min-length-validator" min-length="6"></min-length-validator>
<paper-password-input auto-validate validator="min-length-validator" error-message="Enter at least 6 characters">
</paper-password-input>
This example ensure that the password and the confirm match:
<match-passwords-validator id="match-passwords-validator" password="[[password]]"></match-passwords-validator>
<paper-password-input label="Password" value="{{password}}">
</paper-password-input>
<paper-password-input label="Confirm" auto-validate validator="match-passwords-validator" error-message="Passwords need to match">
</paper-password-input>
You can find the element on Github: https://github.com/Collaborne/paper-password-input
Happy coding!
Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.