Password field

Fields for entering passwords in the browser are found in different cases:

• when registering;
• on the login form;
• password for something abstract.

Each time the same problems pop up and the need arises for the same template features. To facilitate this routine, 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 does not suit us ?

Your •••••• is always hidden. This is annoying . The more annoying is that you can’t just take and change the type of the field from password to text, so you have to invent something . Time for such a trifle as a password is rarely allocated a lot, so most often a bicycle is invented.

In the case of the login form, the password may not make sense. Registration is getting harder. Not everyone uses password storage, many enter the password “by hand”. It can be entered incorrectly, for this 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 entered twice already somewhere, he cannot do this. Some even after checking the password clear it (assuming that the user enters it again and this time will surely come up with the right one):

when you do this, somewhere they kill the kitten again

Many sites, portals, ... validate passwords according to their own rules (for example, that it must contain numbers and letters at the same time and at least 10 characters in length). Thus, the developer will be sure that the user does not enter something like “123”. The idea is sound. What does it look like in practice? Like this:

be a man, show your big password

What is this? Keyboard skills rating? Why is there any color at all, why do I need to know some percentage? There is even such a plugin (poke carefully, it seems the site is down):

nakedpassword.com

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

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

registration on one very famous site

Okay, suppose that the user did live up to a hundred. To make him happier, usually no one hides the result: 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 it to himself somewhere). Oh: how?

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

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

Obviously, you need to be able to somehow copy the generated password, for this the password field in the simplest case is made into a regular text field. I went to edit another setting on the same page - I saw the password. He showed the setting on the projector - everyone saw the password. Not very convenient (but no time, so for nowand it will remain, anyway, this is the internal admin panel):

password with the generator

We solve problems

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

Password display button

It allows you to show the password when it is needed, copy, change, verify it and hide it again. The password at the request of the developer can be hidden or shown, both when creating the field, and at any time:

hide-show the password

I note that in IE10 they did something similar as well (though the password cannot be copied and you need to keep the mouse button pressed to see or edit plaintext password):

button added by IE10

Generation

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

the generator button The

password will be suitable for exactly the rules that the developer intended. If the user generated a password, it is automatically displayed with text.

Password Verification

The "strength" of the password is evaluated by several parameters:

• length (the smaller the weaker):
  
• character entry: are there numbers, letters, other. What exactly is set 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 difficult passwords to the algorithm, this is actually not so). We check the top 10 most-most, plus what the developer wants:
  

As a result, we get some kind of total score. Compare it with the “threshold” and show the tip: add numbers (or letters, or symbols) to your password. Thus, a fuzzy verification algorithm is obtained: both a short password “p @ S5” and a long one are suitable, 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

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

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

Compatibility

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

plugin's opinion on the qwerty password in Spanish

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

The demo is here , there is also an API description.
Perhaps the plugin will be useful to someone else, so the source is uploaded to github, if necessary, use it anywhere.