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.