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

【问题标题】：Show/Hide password toggle in password field in Keycloak在 Keycloak 的密码字段中显示/隐藏密码切换
【发布时间】：2022-10-24 21:56:54
【问题描述】：

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

添加在脚本.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;
}

【问题讨论】：

标签： keycloak

【解决方案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 文件夹。您可以在那里编辑代码。

【讨论】：

如何在不修改模板的情况下添加脚本？
@KonradLinkowski 用于编辑文件，进入您的 keycloak 项目，进入 keycloak 文件夹中的主题文件夹，然后会有带有文件 styles.css 的 css 文件夹和带有 script.js 的 js 文件夹。您可以在那里编辑代码而无需修改模板