bootstrap password input eye and show or not

by tellys

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- Wrapper container -->
<div class="container py-4">
<form>
<div class="mb-4">
        <!-- <label for="formLoginLabelSenha" class="d-none">Senha</label>
        <input placeholder="Senha" type="password" id="formLoginLabelSenha" class="form-control"
          v-model="register.password" required /> -->
        <div class="input-group mb-3">
          <!-- <span class="input-group-text"><i class="fa fa-lock"></i></span> -->
          <label for="formLoginLabelSenha" class="d-none">Senha</label>
          <input class="form-control border-end-0 border rounded" type="password" id="formLoginLabelSenha" name="password" placeholder="Senha" required>
          <span class="input-group-text" id="togglePassword" style="cursor: pointer">
            <i class="fa fa-eye" id="togglePasswordIcon"></i>
          </span>
        </div>
      </div>
</form>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
      const togglePassword = document.querySelector("#togglePassword");
      const password = document.querySelector("#formLoginLabelSenha");
      const togglePasswordIcon = document.querySelector("#togglePasswordIcon");

      togglePassword.addEventListener("click", function () {

        // toggle the type attribute
        const type = password.getAttribute("type") === "password" ? "text" : "password";
        password.setAttribute("type", type);
        // toggle the eye icon
        togglePasswordIcon.classList.toggle('fa-eye');
        togglePasswordIcon.classList.toggle('fa-eye-slash');
      });
    });