Move password strength calculation into PasswordStrengthMeter component

Co-authored-by: CommanderStorm <26258709+CommanderStorm@users.noreply.github.com>

src/components/PasswordStrengthMeter.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="password && strength !== null" class="password-strength mt-2">
-        <div class="strength-meter" :class="{ 'mx-auto': centered }">
+        <div class="strength-meter mx-auto">
             <div 
                 class="strength-meter-fill" 
                 :class="strengthClass"
@@ -14,22 +14,29 @@
 </template>
 
 <script>
+import zxcvbn from "zxcvbn";
+
 export default {
     props: {
         password: {
             type: String,
             required: true,
         },
-        strength: {
-            type: Number,
-            default: null,
-        },
-        centered: {
-            type: Boolean,
-            default: false,
+        username: {
+            type: String,
+            default: "",
         },
     },
     computed: {
+        strength() {
+            if (!this.password) {
+                return null;
+            }
+            
+            const userInputs = this.username ? [ this.username ] : [];
+            const result = zxcvbn(this.password, userInputs);
+            return result.score;
+        },
         strengthClass() {
             if (this.strength === null) {
                 return "";
@@ -60,11 +67,8 @@ export default {
     background-color: #e0e0e0;
     border-radius: 8px;
     overflow: hidden;
-
-    &.mx-auto {
-        margin-left: auto;
-        margin-right: auto;
-    }
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .strength-meter-fill {

src/components/settings/Security.vue

@@ -41,14 +41,12 @@
                             class="form-control"
                             autocomplete="new-password"
                             required
-                            @input="checkPasswordStrength"
                         />
                         
                         <!-- Password strength indicator -->
                         <PasswordStrengthMeter 
                             :password="password.newPassword" 
-                            :strength="passwordStrength" 
-                            :centered="true"
+                            :username="$root.username"
                         />
                     </div>
 
@@ -155,7 +153,6 @@
 import Confirm from "../../components/Confirm.vue";
 import TwoFADialog from "../../components/TwoFADialog.vue";
 import PasswordStrengthMeter from "../../components/PasswordStrengthMeter.vue";
-import zxcvbn from "zxcvbn";
 
 export default {
     components: {
@@ -172,7 +169,6 @@ export default {
                 newPassword: "",
                 repeatNewPassword: "",
             },
-            passwordStrength: null,
         };
     },
 
@@ -195,19 +191,6 @@ export default {
     },
 
     methods: {
-        /**
-         * Check password strength using zxcvbn
-         * @returns {void}
-         */
-        checkPasswordStrength() {
-            if (!this.password.newPassword) {
-                this.passwordStrength = null;
-                return;
-            }
-            
-            const result = zxcvbn(this.password.newPassword, [ this.$root.username ]);
-            this.passwordStrength = result.score;
-        },
         /**
          * Check new passwords match before saving them
          * @returns {void}
@@ -228,7 +211,6 @@ export default {
                         this.password.currentPassword = "";
                         this.password.newPassword = "";
                         this.password.repeatNewPassword = "";
-                        this.passwordStrength = null;
 
                         // Update token of the current session
                         if (res.token) {

src/pages/Setup.vue

@@ -42,13 +42,12 @@
                         :placeholder="$t('Password')"
                         required
                         data-cy="password-input"
-                        @input="checkPasswordStrength"
                     />
                     <label for="floatingPassword">{{ $t("Password") }}</label>
                 </div>
 
                 <!-- Password strength indicator -->
-                <PasswordStrengthMeter :password="password" :strength="passwordStrength" />
+                <PasswordStrengthMeter :password="password" :username="username" />
 
                 <div class="form-floating mt-3">
                     <input
@@ -77,7 +76,6 @@
 </template>
 
 <script>
-import zxcvbn from "zxcvbn";
 import PasswordStrengthMeter from "../components/PasswordStrengthMeter.vue";
 
 export default {
@@ -90,7 +88,6 @@ export default {
             username: "",
             password: "",
             repeatPassword: "",
-            passwordStrength: null,
         };
     },
     watch: {},
@@ -104,19 +101,6 @@ export default {
         });
     },
     methods: {
-        /**
-         * Check password strength using zxcvbn
-         * @returns {void}
-         */
-        checkPasswordStrength() {
-            if (!this.password) {
-                this.passwordStrength = null;
-                return;
-            }
-            
-            const result = zxcvbn(this.password, [ this.username ]);
-            this.passwordStrength = result.score;
-        },
         /**
          * Submit form data for processing
          * @returns {void}