If your website enables users to have their own accounts, then passwords are an important part of both security and the UI. You’ll certainly want users to adopt strong passwords to make things more difficult on hackers. But there are also some little touches you can add to a password field that improve usability.
Plus, you wouldn’t want to treat your login area as an afterthought.
There are a number of password-related snippets worth checking out. Below, you’ll find a combination of aesthetically pleasing, unique, and functional snippets that range from simple password fields to utilities that will generate secure passwords for your users.
Checking Password Requirements
One of the most frustrating situations for a user is when a password isn’t strong enough, but it isn’t clear what they need to do in order to meet the requirement.
With this example, we have a field that uses JavaScript in conjunction with a listing of requirements to automatically “check off” each item as you type. This snippet is actually a few years old, but still a great example of providing users with the information they need.
See the Pen Better Password Form by Tony Montemorano
Hide & Show Me Password
When we’re creating complicated passwords, it can be quite useful to see what it is we’re typing. So often, fields that offer this feature do so with an eyeball icon or some other non-verbal method.
What’s nice about this particular login form is that it actually says “Show Password” on the password field toggle. It’s never a bad idea to make things as obvious as possible.
See the Pen Hide &Show password with AngularJS by Bryan Miner
The Password Genie
There are plenty of choices out there if you want to randomly generate a password. But what makes this Vue.js example so cool is that you have a user-friendly options panel for selecting the length, number of digits, and symbols.
There’s also a real-time strength meter, the ability to generate password after password, and click-to-copy functionality. What else could you possibly need?
See the Pen The Password Genie – Vue.js by Nour Saud
Wrong Password? Get Outta Here
Micro-interactions are sort of a big deal these days, and this password field uses them in a creative manner. Enter in the wrong password, and the lock icon swings, pendulum-like, and “kicks” the invalid entry away. It’s mainly for fun, but interesting nonetheless.
See the Pen Kick out the wrong Password by Amit Soni
Create Random Passwords
If you’re in a situation where you need to generate several passwords, you will love the functionality of this example.
Set the number of passwords you want to generate, how many characters they should be and even list the characters you want the generator to use. And, oh yeah, you can even save your password list as a text file or print it out. What a time saver!
See the Pen jQuery | Random Password Generator by Tobias Bogliolo
Confirm & Validate Password
In scenarios where a user is either registering or changing their password, adding a second confirmation field is pretty standard practice.
This form takes it a step further by adding several features, including the ability to show/hide the input text, a strength meter and a check to make sure the password in both fields match. The only suggestion here would be to also display the requirements for a “strong” password.
See the Pen Password Strength validator by Nodws
Super Secret Password Generator
When you combine interesting design and solid functionality, you’re on to something good. This password generator offers up a great mix.
It can be configured by clicking the various icons at the bottom of the form (the features do work in the example) – that’s the functionality portion. The UI is also very slick, using animation to make the whole experience feel more interactive.
See the Pen Super Secret Password Generator by JP Nothard
Just Like the Movies
This last selection is purely for entertainment purposes. This snippet is a tribute to all of those movies and television shows that have made password cracking look like a futuristic endeavor.
To use it, just click as the random characters pass by – once for each spot in the password. The result is a fully “cracked” password!
See the Pen Bruteforce Hacking Simulator by Marco Fugaro
Password:Protected
There you have it, a mix of password fields that can enhance usability and maybe even the security of your next project. Not to mention some interesting password generation tools that can help you create better passwords and do so in short order. Now, just don’t share them with anyone!