Toggling Password Visibility using VueJS

Toggling password visibility gives the user an option to click on the button to change the hidden password into text format so that he can make sure he has typed in the correct characters at the time of sign-in or sign-up.

Using VueJS, it's very easy to implement password visibility. For this example demonstration, I have included Bootstrap and Font-Awesome libraries in the project.

Consider the following HTML snippet, for the single password field.

<div class="input-group mb-3">
    <input class="form-control" placeholder="Password">
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-eye-slash" aria-hidden="true"></i></span>
    </div>
</div>

This contains an input of type password and along with that eye-slash icon by default (which denotes that the password is not visible by default)

Toggle Password Visibility 

Now, let's tweak the code to include VueJS so that when the user clicks on the icon the password is visible and it also changes the icon.

<div class="input-group mb-3">
    <input v-bind:type="[showPassword ? 'text' : 'password']" class="form-control" placeholder="Password">
    <div class="input-group-append">
      <span class="input-group-text" @click="showPassword = !showPassword">
            <i class="fa" :class="[showPassword ? 'fa-eye' : 'fa-eye-slash']" aria-hidden="true"></i>
      </span>
    </div>
</div>
...
...
var app = new Vue({
    el: '#app',
    data: {
        showPassword: false,
    },
});

We have defined a data property named showPassword which is false by default.

How it Works? 

• • When the user clicks on the icon, we toggle the boolean value showPassword @click="showPassword = !showPassword"
  • We change the type of input field to text if showPassword is set to true.
  • We also change the class binding of icon to fa-eye if showPassword is set to true.

[WP-Coder id="5"]

That's about it.