Integrated the password visibility into the strength checker

diff --git a/ts/WoltLabSuite/Core/Ui/User/PasswordStrength.ts b/ts/WoltLabSuite/Core/Ui/User/PasswordStrength.ts
index ac5323d14c5cbc7301b71afb3ef2ae6f4b01632f..42bcf605e0922d8d5f8c1233bb427dea5a601fa7 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/PasswordStrength.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/PasswordStrength.ts
@@ -54,7 +54,7 @@ class PasswordStrength {
   private staticDictionary: StaticDictionary;
   private feedbacker: zxcvbn.Feedback;
 
-  private readonly wrapper = document.createElement("div");
+  private wrapper: HTMLDivElement;
   private readonly score = document.createElement("span");
   private readonly verdictResult = document.createElement("input");
 
@@ -71,9 +71,13 @@ class PasswordStrength {
 
       this.feedbacker = initializeFeedbacker(zxcvbn.Feedback);
 
-      this.wrapper.className = "inputAddon inputAddonPasswordStrength";
-      this.input.parentNode!.insertBefore(this.wrapper, this.input);
-      this.wrapper.appendChild(this.input);
+      const wrapper: HTMLDivElement | null = this.input.closest(".inputAddon");
+      if (wrapper === null) {
+        throw new Error("Expected a parent with `.inputAddon`.");
+      }
+
+      this.wrapper = wrapper;
+      this.wrapper.classList.add("inputAddonPasswordStrength");
 
       const rating = document.createElement("div");
       rating.className = "passwordStrengthRating";

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/PasswordStrength.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/PasswordStrength.js
index cabb16a7ec9d16c202c5ae2dd28db82c55287b51..36aba4d40db6c0010da731c6d5bd46727d12f99a 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/PasswordStrength.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/PasswordStrength.js
@@ -40,7 +40,6 @@ define(["require", "exports", "tslib", "../../Language", "../../Dom/Util"], func
     class PasswordStrength {
         constructor(input, options) {
             this.input = input;
-            this.wrapper = document.createElement("div");
             this.score = document.createElement("span");
             this.verdictResult = document.createElement("input");
             void new Promise((resolve_1, reject_1) => { require(["zxcvbn"], resolve_1, reject_1); }).then(tslib_1.__importStar).then(({ default: zxcvbn }) => {
@@ -52,9 +51,12 @@ define(["require", "exports", "tslib", "../../Language", "../../Dom/Util"], func
                     this.staticDictionary = options.staticDictionary;
                 }
                 this.feedbacker = initializeFeedbacker(zxcvbn.Feedback);
-                this.wrapper.className = "inputAddon inputAddonPasswordStrength";
-                this.input.parentNode.insertBefore(this.wrapper, this.input);
-                this.wrapper.appendChild(this.input);
+                const wrapper = this.input.closest(".inputAddon");
+                if (wrapper === null) {
+                    throw new Error("Expected a parent with `.inputAddon`.");
+                }
+                this.wrapper = wrapper;
+                this.wrapper.classList.add("inputAddonPasswordStrength");
                 const rating = document.createElement("div");
                 rating.className = "passwordStrengthRating";
                 const ratingLabel = document.createElement("small");

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index a1be3af7cb87551286e986e01dbf5aeb4292293b..608253b608ba8c7da0a1ccf61bb9cbe6a84c06f6 100644 (file)
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -294,8 +294,16 @@ input {
 .inputAddonPasswordStrength {
        align-items: flex-start;
 
+       input.medium {
+               align-self: stretch;
+       }
+
        @include screen-xs {
-               flex-direction: column;
+               flex-wrap: wrap;
+
+               input.medium {
+                       width: auto;
+               }
        }
 }