Follow these steps to enable users to toggle between hiding and showing their password on the login page.
Step 1: Add the Function and Global Variable
First, you need to add the following JavaScript function and global variable to your login page.
function viewPW() {
var Vpw = document.getElementById('P9999_PASSWORD');
// The password input field
var VsetIcon = document.getElementById('pwItem');
// The icon for toggling visibility
if (Vpw.type !== 'password') {
// Hide password: change type to 'password' and show the eye icon
Vpw.type = 'password';
VsetIcon.className = 'fa fa-eye pw-item-icon';
// 'eye' icon
} else {
// Show password: change type to 'text' and show the 'eye-slash' icon
Vpw.type = 'text';
VsetIcon.className = 'fa fa-eye-slash pw-item-icon'; // 'eye-slash' icon
}
}
Step 2: Add the Inline CSS
Next, insert this inline CSS to style the visibility toggle icon and place it to the right of the password input.
.pw-item-icon {
float: right;
margin-left: -30px;
margin-top: 11px;
position: relative;
z-index: 1;
}
Step 3: Add the Toggle Icon to Your Password Input Field
Finally, insert the following HTML code right after your password input field. This code will create the eye icon that the user can click to toggle password visibility.
<span id="pwItem" class="fa fa-eye pw-item-icon" onClick="viewPW()"
aria-hidden="true"></span>