在 Keycloak 的密码字段中显示/隐藏密码切换

Question

我已经编辑了 script.js 的代码，用于在 Keycloak 的密码字段中显示/隐藏密码切换，但它不起作用。请查看它并告诉我，我怎样才能使它工作？谢谢

在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

我认为问题是缺少图标库的导入。它对我来说如下：

在 script.js 文件中：

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);

在 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;
}

要编辑文件，请进入keycloak项目，进入keycloak 文件夹内的主题文件夹，然后将出现包含styles.css文件的css 文件夹和包含script.js的 js 文件夹。您可以在那里编辑代码。

如果这些文件夹或文件不存在，则创建它们并添加此代码。然后更新theme.properties文件。

例如在theme.properties文件中添加：

styles=css/styles.css
scripts=js/script.js