Swap icons used in password toggle

Icons in buttons in WoltLab Suite usually indicate what happens when the button
is clicked and do not represent the current state.

diff --git a/ts/WoltLabSuite/Core/Ui/Password.ts b/ts/WoltLabSuite/Core/Ui/Password.ts
index 5c73e44415d9ba8802bd2c2157d96053316c7ed2..b9ef3e4882a35147cbc5fa3d44fc02b96d4b5b09 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Password.ts
+++ b/ts/WoltLabSuite/Core/Ui/Password.ts
@@ -42,7 +42,7 @@ function initElement(input: HTMLInputElement): void {
   inputAddon.appendChild(button);
 
   const icon = document.createElement("span");
-  icon.classList.add("icon", "icon16", "fa-eye-slash");
+  icon.classList.add("icon", "icon16", "fa-eye");
   button.appendChild(icon);
 
   button.addEventListener("click", () => {
@@ -58,13 +58,13 @@ function initElement(input: HTMLInputElement): void {
 
 function toggle(input: HTMLInputElement, button: HTMLElement, icon: HTMLElement): void {
   if (input.type === "password") {
-    icon.classList.add("fa-eye");
-    icon.classList.remove("fa-eye-slash");
+    icon.classList.remove("fa-eye");
+    icon.classList.add("fa-eye-slash");
     button.dataset.tooltip = Language.get("wcf.global.form.password.button.hide");
     input.type = "text";
   } else {
-    icon.classList.remove("fa-eye");
-    icon.classList.add("fa-eye-slash");
+    icon.classList.add("fa-eye");
+    icon.classList.remove("fa-eye-slash");
     button.dataset.tooltip = Language.get("wcf.global.form.password.button.show");
     input.type = "password";
   }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
index 816e2fe41987f193afefb2ccfe3abdbe43320df5..f1f503a9da1479487ea0b8a327f4f28428588373 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
@@ -39,7 +39,7 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
         button.setAttribute("aria-hidden", "true");
         inputAddon.appendChild(button);
         const icon = document.createElement("span");
-        icon.classList.add("icon", "icon16", "fa-eye-slash");
+        icon.classList.add("icon", "icon16", "fa-eye");
         button.appendChild(icon);
         button.addEventListener("click", () => {
             toggle(input, button, icon);
@@ -53,14 +53,14 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
     }
     function toggle(input, button, icon) {
         if (input.type === "password") {
-            icon.classList.add("fa-eye");
-            icon.classList.remove("fa-eye-slash");
+            icon.classList.remove("fa-eye");
+            icon.classList.add("fa-eye-slash");
             button.dataset.tooltip = Language.get("wcf.global.form.password.button.hide");
             input.type = "text";
         }
         else {
-            icon.classList.remove("fa-eye");
-            icon.classList.add("fa-eye-slash");
+            icon.classList.add("fa-eye");
+            icon.classList.remove("fa-eye-slash");
             button.dataset.tooltip = Language.get("wcf.global.form.password.button.show");
             input.type = "password";
         }