1. The problem with masked passwords
2. Revealing the password
3. The code
4. Read more:

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.

<?= $form->field($model, 'password')->passwordInput() ?>
<?= Html::checkbox('reveal-password', false, ['id' => 'reveal-password']) ?> <?= Html::label('Show password', 'reveal-password') ?>

Now for a bit of JavaScript. The id of password field in the example is loginform-password but you can change it by adding ['id' => 'my-password-field-id'] array in passwordInput() method.

Add this in the view file:

<?php
$this->registerJs("jQuery('#reveal-password').change(function(){jQuery('#loginform-password').attr('type',this.checked?'text':'password');})");
?>

Now, every time "Show password" is checked text inside the password field is unmasked. Unchecking the box makes the text masked again.

Read more: ¶

• passwordmasking.com
• Basic Project Template
• the original form used in this example
• Html::checkbox() reference
• Html::label() reference
• registerJs() reference
• Working with Client Scripts