How to Implement Password Hide/Show in Login Page

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>