The problem with masked passwords ¶
There are numerous usability problems:
- Not being able to see what characters have been typed,
- Not being able to check the input,
- Not being able to correct an error.
For all this user inconvenience there are practically no security benefits at all:
- How often is someone looking over your shoulder when you type a password?
- The input isn't secured in any way, it's just a visual representation.
- Password masking doesn't help prevent attacks from key loggers or malware.
This problem is well presented at http://passwordmasking.com.
Revealing the password ¶
For better user experience we can add option to reveal typed password.
- Password is masked at the beginning so no trust issues with the website security,
- Revealing the password is optional so it depends on voluntary user action,
- Password can be masked again.
The code ¶
You can find example of form with password field in Basic Project Template available at https://github.com/yiisoft/yii2-app-basic/blob/master/views/site/login.php
Let's add additional checkbox under the password field.
'password')->passwordInput() = Html::checkbox('reveal-password', false, ['id' => 'reveal-password']) = Html::label('Show password', 'reveal-password')= $form->field($model,
Add this in the view file:
Now, every time "Show password" is checked text inside the password field is unmasked. Unchecking the box makes the text masked again.