Install MariaDB Latest Version 11.4 in Red Hat Version 9

     Show Eye icon on password input field

Link

The following shows the HTML code of the page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toggle Password Visibility</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Sign In</h1>
      <form method="post">
        <p>
          <label for="username">Username:</label>
          <input type="text" name="username" id="username">
        </p>
        <p>
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" />
          <i class="bi bi-eye-slash" id="togglePassword"></i>
        </p>
        <button type="submit" id="submit" class="submit">Log In</button>
      </form>
    </div>
    <script src="js/app.js"></script>
  </body>
</html>
Code language: HTML, XML (xml)

The HTML page contains an input element with the type password and an <i> element with the CSS classes provided by Bootstrap.

The Bootstrap allows you to use the class bi-eye of the <i> element to show the eye icon. To change the icon from eye to eye slash, you just need to change the class of the <i> element to bi-eye-slash

To place the icon inside the password input, you can use the negative margin for the <i> element as follows:

form i {
    margin-left: -30px;
    cursor: pointer;
}
Code language: CSS (css)

The rest of the CSS is straightforward.

In the app.js file:

First, select the toggle password icon and the password input field using the querySelector() method:

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
Code language: JavaScript (javascript)

Then, attach an event listener to the togglePassword icon and toggle the type attribute of the password field as well as the class of the icon:

togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye / eye slash icon
    this.classList.toggle('bi-eye');
});
Code language: JavaScript (javascript)