Let's Dive In
Creating the Template Ref
The starting point is to establish a template reference, referred to as 'showPassword,' which will hold the state of the 'type' attribute. This reference will determine whether the password is displayed or hidden. By default, the 'showPassword' state is set to false. This default setting ensures that the password input field conceals the content when the page is loaded.
Toggling Password Visibility
The 'showPassword' state is pivotal in controlling the visibility of the password input. When users wish to view the password, the 'showPassword' state is changed to true. Consequently, the 'type' attribute of the input field is modified dynamically based on this state. To achieve this, a ternary expression is employed in conjunction with array bindings.
Next we have to add a button we can use to toggle password visibility. We have to attach the
@click Vue directive, to alternate the value of showPassword whenever it is clicked.
Read also : Password Strength Indicator using REGEX.
We also need a visible way of knowing the state of showPassword variable. For this, I have decided to use SVG icons to implement this. Our icons will be placed in an if or else statement block inside the button element. When showPassword is true, one icon is shown, and when false, you get the gist.........
Our final outcome should look like this:
Read also : Cyber security 101 : Basics.