Correctly count length of passwords with multibyte characters

nimiq · Jan 6, 2024 · 5666de9 · 5666de9
1 parent 5aa9720
commit 5666de9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/PasswordInput.js b/src/components/PasswordInput.js
@@ -100,7 +100,7 @@ class PasswordInput extends Nimiq.Observable {
     }
 
     _onInputChanged() {
-        const passwordLength = this.$input.value.length;
+        const passwordLength = [...this.$input.value].length;
         this.valid = passwordLength >= this._minLength && passwordLength <= this._maxLength;
 
         this.fire(PasswordInput.Events.LENGTH, passwordLength);

diff --git a/src/components/PasswordSetterBox.js b/src/components/PasswordSetterBox.js
@@ -143,8 +143,10 @@ class PasswordSetterBox extends Nimiq.Observable {
             this._repeatPasswordTimout = null;
         }
 
+        const inputLength = [...this._passwordInput.text].length;
+
         if (this._password) {
-            if (this._passwordInput.text.length > 0 && this._passwordInput.text.length < this._password.length) {
+            if (inputLength > 0 && inputLength < [...this._password].length) {
                 this._repeatPasswordTimout = window.setTimeout(
                     () => {
                         this.$el.classList.remove('repeat-long');
@@ -158,15 +160,14 @@ class PasswordSetterBox extends Nimiq.Observable {
         }
 
         const score = PasswordStrength.strength(this._passwordInput.text);
-        const length = this._passwordInput.text.length;
 
         this.$el.classList.toggle(
             'input-eligible',
-            isValid && (!this._password || this._passwordInput.text.length >= this._password.length),
+            isValid && (!this._password || inputLength >= [...this._password].length),
         );
 
-        this.$el.classList.toggle('too-long', length > PasswordSetterBox.PASSWORD_MAX_LENGTH);
-        this.$el.classList.toggle('strength-short', !isValid && length <= PasswordSetterBox.PASSWORD_MAX_LENGTH);
+        this.$el.classList.toggle('too-long', inputLength > PasswordSetterBox.PASSWORD_MAX_LENGTH);
+        this.$el.classList.toggle('strength-short', !isValid && inputLength <= PasswordSetterBox.PASSWORD_MAX_LENGTH);
         this.$el.classList.toggle('strength-weak', isValid && score < PasswordStrength.Score.MINIMUM);
         this.$el.classList.toggle('strength-good',
             isValid
@@ -180,7 +181,7 @@ class PasswordSetterBox extends Nimiq.Observable {
     }
 
     _isPasswordEligible() {
-        return this._passwordInput.text.length >= PasswordInput.DEFAULT_MIN_LENGTH;
+        return [...this._passwordInput.text].length >= PasswordInput.DEFAULT_MIN_LENGTH;
     }
 
     /**
@@ -207,7 +208,7 @@ class PasswordSetterBox extends Nimiq.Observable {
             this._passwordInput.reset();
             return;
         }
-        if (this._passwordInput.text.length >= this._password.length) {
+        if ([...this._passwordInput.text].length >= [...this._password].length) {
             this.$el.classList.remove('repeat-short');
             this.$el.classList.add('repeat-long');
             await AnimationUtils.animate('shake', this.$el);