From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 26 Feb 2021 16:08:24 +0000 (+0100)
Subject: Integrated the password visibility into the strength checker
X-Git-Tag: 5.4.0_Alpha_1~214^2~1
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=40e4cc7ff3adeb0ba673acced1c671fc9a2d4943;p=GitHub%2FWoltLab%2FWCF.git

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 ac5323d14c..42bcf605e0 100644
--- 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 cabb16a7ec..36aba4d40d 100644
--- 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 a1be3af7cb..608253b608 100644
--- 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;
+		}
 	}
 }