Show/Hide password on change password view

Tips and tricks
1

Is it possible through theme editing to add a show/hide button in the reset password form?

I have been looking for that view through theme editing but I don’t find anything specific

image
image565×549 15.8 KB

2

I think this is the template you’re looking for: keycloak/login-update-password.ftl at master · keycloak/keycloak · GitHub

1 Like
3

You can do this with js and css without modifying the keycloak templates…

// Rudimentary method for adding a password reveal button.
window.onload = function() {
  var fToggle = function($password, e) {
    e.preventDefault();
    const type = $password.getAttribute('type') === 'password' ? 'text' : 'password';
    $password.setAttribute('type', type);
    this.classList.toggle('bi-eye');
  };

  var createReveal = function(passwordId, toggleId) {
    var password = document.getElementById(passwordId);
    if ((password) && (password.style) && (password.style.display !== 'none')){
      var icon = document.createElement("i");
      icon.id = toggleId;
      icon.classList.add('password-reveal', 'bi', 'bi-eye-slash');
      icon.addEventListener('click', fToggle.bind(icon, password)); 
      password.parentNode.insertBefore(icon, password.nextSibling);
    }
  };

  createReveal('password', 'togglePassword');
  createReveal('password-new', 'togglePasswordNew');
  createReveal('password-confirm', 'togglePasswordConfirm');
};

css

.password-reveal {
  color: #5500B3;
  margin-left: -40px;
  font-size: 20px;
  cursor: pointer;
}
2 Likes
4

Yep, I confirmed it recently, thanks!

5

I was actually trying to edit the ftl template, your solution seems cleaner.

I’m gonna try it, thanks!

1 Like
6

Hello @Jonskadev @zepp0 I’m new in keycloak and I need to apply this feature (show/hide password). I was trying to modify the ftl files without any success.

Where/how should the js and css of your answer be implemented?

7

Hi there. You’re going to need to create a Custom Theme. You can find articles on this online. This one is a pretty good overview:

8

Here’s a starter maven project for creating your own custom theme:

9

Hey! I can not understand how we can run this JS script in keycloak?

11

This can be done like this:
Show/Hide password toggle in password field in Keycloak - Stack Overflow