Show/Hide password toggle in password field in Keycloak - keycloak

Question

I have edited code of script.js for show/Hide password toggle in password field in Keycloak but It is not working. Please see it and let me know, How can I make it work? Thank you
Addition in script.js:
// 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;
}

Answer 1

I think the problem is import of library of icon is missing. It is working for me as follow:
In script.js file:
setTimeout(() => {
var fToggle = function($password, e) {
e.preventDefault();
const type = $password.getAttribute('type') === 'password' ? 'text' : 'password';
$password.setAttribute('type', type);
this.classList.toggle('fa-eye-slash');
};
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', 'fa','fa-eye', 'fa-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');
}, 5);
In styles.css
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.password-reveal {
color: #0052f0;
background-color: white;
margin-left: -40px;
font-size: 24px !important;
}
For edting the files, go inside your keycloak project, go to your theme folder inside keycloak folder and then there will be the css folder with file styles.css and js folder with script.js. You can edit the code there.
If these folders or files do not exist then create them and add this code. And then update theme.properties file.
For example in the theme.properties file, add:
styles=css/styles.css
scripts=js/script.js