使用 fontawesome 的密码可见性图标

Question

I have this login form:

<form class="form-signin" action="${postUrl ?: '/login/authenticate'}" method="POST" id="loginForm" autocomplete="off">
   <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" name="${usernameParameter ?: 'username'}" id="username" autocapitalize="none"/>
   </div>
   <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" name="${passwordParameter ?: 'password'}" id="password"/>
      <i id="passwordToggler" title="toggle password display" onclick="passwordDisplayToggle()"> &#128065</i>
   </div>
   <div class="form-group form-check">
      <label class="form-check-label">
         <input type="checkbox" class="form-check-input" name="${rememberMeParameter ?: 'remember-me'}" id="remember_me" 
         <g:if test='${hasCookie}'>checked="checked"</g:if>
         /> Remember me
      </label>
   </div>
   <button id="submit" class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
</form>

Currently it using an eye emoji like this:

But I want to change it to font awesome fa-eye also currently when I click on reveal password it showing cross sign and I also want to change that to eye lash icon as well. Right now the eye and the cross sign icon I use unicode to display it. Here is my javascript code:

 document.addEventListener("DOMContentLoaded", function(event) {
        document.forms['loginForm'].elements['username'].focus();
    });
    function passwordDisplayToggle() {
        var toggleEl = document.getElementById("passwordToggler");
        var eyeIcon = '\u{1F33D}';
        var xIcon = '\u{2715}';
        var passEl = document.getElementById("password");
        if (passEl.type === "password") {
            toggleEl.innerHTML = xIcon;
            passEl.type = "text";
        } else {
            toggleEl.innerHTML = eyeIcon;
            passEl.type = "password";
        }
    }

Any idea how I can switch it to font-awesome fa-eye? Many thanks

Answer 1

I have to replace it with this jquery code to make it work:

    function passwordDisplayToggle() {

        var passEl = document.getElementById("password");
        var passToggler=$('#passwordToggler');

        if (passEl.type === "password") {
            passEl.type = "text";
            passToggler.removeClass('fa-eye');
            passToggler.addClass('fa-eye-slash');
        } else {
            passToggler.removeClass('fa-eye-slash');
            passToggler.addClass('fa-eye');
            // passToggler.addClass('d-none');
            passEl.type = "password";
        }
    }