Password field

Password fields in the browser are found in different cases:

• During registration;
• on the login form;
• password for something abstract.

Each time the same problems come up and there is a need for the same template features. To facilitate this routine task, I made a js-library that can be configured for different cases - this post will be about it.

What is wrong with what exists?

What we do not like <input type="password" /> ?

Your •••••• is always hidden. It is annoying . The more annoying it is because you can’t just change the type of the field from password to text so you have to invent something. There is rarely a lot of time spent on such a trifle as a password, so a bicycle is most often invented.

In the case of a login form, the password may not be worth showing. With registration, everything is more complicated. Not all use password stores, many enter the password "hands". It can be entered incorrectly, for this purpose they usually add a second field with a password. However, this mockery of the user does not save from the case when the wrong layout is selected. In addition, if the user wants to save the password already entered twice already, he cannot do it. Some even clear the password after checking the password (assuming that the user enters it again and this time will definitely come up with the correct one):

when you do, they kill the kitten somewhere again
')
Many sites, portals, ... validate passwords by their own rules (for example, that it must have numbers and letters at the same time and a length of at least 10 characters). Thus, the developer will be sure that the user will not enter something like “123”. The idea is sound. How does it look in practice? Like this:

be a man show your big password

What is it? Top keystroke skills? Why is there any color at all? Why do I need to know a certain percentage? There is even such a plugin (carefully poke, it seems, the site has gone down):

nakedpassword.com

If the system for some reason considers the password weak, all I want to see is what else can I enter, so that it finally comes to you. I do not want to see any ratings. There are no numbers, and you need to enter them - just write to me: enter a number. I have already entered a number and now there is not enough length? Hide the message that there should be numbers, I already realized.

Perhaps the worst option (I was afraid to click on the more link):

registration on one very famous site

Okay, suppose the user is still up to a hundred. To make him more happy, the result is usually no one hiding: let him be proud of his achievement throughout the process of filling out the registration form! He filled out the entire form and ... forgot the password. Now he wants to copy it (for example, to save somewhere to himself). Oops: how?

By the way, I thought for a long time what was wrong with my password, why the message does not disappear

Passwords are not only entered during registration. Passwords are also entered for other people (for example, in the admin panel you need to edit the password for some script from a partner or something like that). In such cases, they usually add a password generation button, which will relieve the operator of the need to invent something (at the same time, you will be able to enter your own).

Obviously, it is necessary to be able to somehow copy the generated password; for this, the field with the password in the simplest case is done with a regular text field. I went to edit another setting on the same page - I saw the password. Showed the setting on the projector - everyone saw the password. Not very convenient (but there is no time, so for the time being it will remain, anyway, this is an internal admin panel):

generator password

Solve problems

Since different features must be added frequently and their implementation is not always an easy task, I wrote a plugin for jQuery (in general, it is a js library that does not require jQuery, but for brevity I will call it a plugin), which allows you to make the password field more friendly . What is in it and what is it for?

Password Button

It allows you to show the password when you need it, copy it, change it, check it and hide it again. Password at the request of the developer may be hidden or shown, both when creating a field, and at any time:

hide-show password

I note that IE10 also did something similar (although the password cannot be copied and you must keep the mouse button pressed to see or edit the password in plain text):

button that IE10 adds

Generation

To add the ability to generate a password, you can show a button (there is also a hint when the user takes a long time to think about the password):

button generator

The password will work out exactly under the rules that the developer intended. If the user has generated a password, it is automatically displayed as text.

Password check

The “strength” of a password is evaluated by several parameters:

• length (the smaller, the weaker):
  
• Character input: are there numbers, letters, other. What exactly is given by the developer in the form of a pattern (for example, abCD23):
  
• checking for a stop list (for example, even if “qwerty” or “p @ ssw0rd” may seem like complex passwords to the algorithm, in fact it is not). Checking the top 10 most-most, plus what the developer wants:
  

As a result, we obtain some kind of total estimate. Let's compare it with the “passage threshold” and show the advice: add numbers (or letters, or symbols) to your password. Thus, a fuzzy check algorithm is obtained: both a short password “p @ S5” and a long one will fit, but where there are no (for example) digits. You can not force the user to enter @ # $ if he wants a large password of letters and numbers, and vice versa.
In the message, the user will see exactly what is missing in the password.

If the field is out of focus

it means the user wants to do other tasks for the time being. There is no need to show him errors in the password, the strength of the password or something else: we will simply show that it is either incorrect or not strong enough (and if everything is fine, there will be enough fields with asterisks). He sees the rest when he tries to correct:

the field is out of focus: with error and without error

Compatibility

It so happened that the features were sometimes needed where there was no jQuery. Therefore, it is written in "pure" js: because of this, a bit more code was produced than it could be. The plugin is friends with jQuery and Bootstrap, it works on most modern and not very browser (even in IE6). There is no need for changes in the layout, so if js is disabled, it will not break anything: the user will see the usual type = password field.
Able to show messages in 8 different languages, depending on the browser locale:

Opinion of the plugin on the password "qwerty" in Spanish

Each button, feature or error message can be selectively disabled or redefined.

Demo here , there is also a description of the API.
Perhaps the plugin will be useful to someone else, so the source is laid out on github, if necessary - use anywhere.