How to Show/Hide Password Eye(input field) in the login form with Bootstrap and Javascript

In this tutorial, you will learn how to show/hide the password input field in the login form using javascript. We have our basic login form, but we are making it more user-friendly by allowing users to toggle the visibility of the password input field to see what they type in the password field. The two images below are the login form with password input showing and hiding the input field value.

Below is the login form with the email and password fields.

In the password field the asterisk (*) signs are displayed in the field.

******** in the password field

Now, in the password field, the asterisk (*) signs are displayed as plain text in the field.

Plain text in the password field

The short video below demonstrates the login form functionality.

When the eye icon is clicked, the password is displayed as plain text. When clicked again, it returns to the asterisk sign. This is a useful feature for when you want to check your password without having to type it out.

To create this login form functionality, we will use Bootstrap version 5 and Bootstrap Icons for our HTML/CSS form layout.

The following screenshots show the login form HTML section.

Login Form HTML Markup

You can also download the source code from this GitHub login-form-show-hide-password repository.

If you downloaded the GitHub start branch your website layout would look like in the image below.

To make the toggle functionality visibility of password input fields we will use these icons from Bootstrap Icons(see screenshots below).

We will use the bootstrap icons to make the toggle visibility work and change from asterisk signs to plain text passwords.

Login form without custom CSS styles.

In the code from the screenshot below, you need to add these lines of CSS styles to make the bootstrap icon look good. This code is in the GitHub source code, you can copy this custom.css file inside the “CSS” folder.

div.password-box {
    display: flex; 
    align-items: center; 
    border: solid 1px #9b9b9b; 
    background-color: #fff; 
    border-radius: 6px;
}
label .bi {
    font-size: 25px;
}
.password-box .bi {
    font-size: 25px;
    padding-left: 8px;
    padding-right: 8px;
}

.bi::before {
    color: #797979;
}

In the screenshot below you will see the correct login form layout after adding the custom CSS styles.

After added the custom CSS styles

Now in the JavaScript. In your HTML document file create a script link to the custom.js file. The script link to your cstuom.js file looks like this <script src="/js/custom.js"></script>.

In the code below you can copy or download from GitHub custom.js link.

const passwordIcon = document.querySelector('.eye-icon');
const lockIcon = document.querySelector('.lock-icon');
const input = document.querySelector('.password-box input');

var password = true;

passwordIcon.addEventListener('click', function(){
            if(password) {
                // change the input type attribute from "password" to "text"
                input.setAttribute('type','text'); 
                passwordIcon.classList.remove('bi-eye-fill');
                passwordIcon.classList.add('bi-eye-slash-fill');

                // change the lock icon beside password label
                lockIcon.classList.remove('bi-lock-fill');
                lockIcon.classList.add('bi-unlock-fill');
            } else {
                // change the input type attribute from "text" to "password"
                input.setAttribute('type','password');
                passwordIcon.classList.remove('bi-eye-slash-fill');
                passwordIcon.classList.add('bi-eye-fill');

                // change the lock icon beside password label
                lockIcon.classList.remove('bi-unlock-fill');
                lockIcon.classList.add('bi-lock-fill');
            }
        password = !password;
});

     

Here is the final source code that you can download at my GitHub repository aljunmajo/login-form-show-hide-password

YouTube Video Tutorial (Link to be updated)

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.