fix: passwort strength indicator (#5553)

frontend/components/Domain/User/UserPasswordStrength.vue

@@ -3,8 +3,8 @@
     <div style="flex-basis: 500px">
       <strong> {{ $t("user.password-strength", { strength: pwStrength.strength.value }) }}</strong>
       <v-progress-linear
-        :value="pwStrength.score.value"
-        class="rounded-lg"
+        v-model="pwStrength.score.value"
+        rounded
         :color="pwStrength.color.value"
         height="15"
       />
@@ -12,27 +12,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePasswordStrength } from "~/composables/use-passwords";
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(props) {
-    const asRef = toRef(props, "modelValue");
-    const i18n = useI18n();
+const modelValue = defineModel<string>({ default: "" });
+const i18n = useI18n();
 
-    const pwStrength = usePasswordStrength(asRef, i18n);
-
-    return {
-      pwStrength,
-    };
-  },
-});
+const pwStrength = usePasswordStrength(modelValue, i18n);
 </script>
-
-<style scoped></style>

frontend/components/Domain/User/UserRegistrationForm.vue

@@ -52,7 +52,7 @@
           @click:append-inner="pwFields.togglePasswordShow"
         />
 
-        <UserPasswordStrength :value="credentials.password1.value" />
+        <UserPasswordStrength v-model="credentials.password1.value" />
 
         <v-text-field
           v-model="credentials.password2.value"

frontend/pages/user/profile/edit.vue

@@ -149,7 +149,7 @@
                       variant="underlined"
                       @click:append="showPassword = !showPassword"
                     />
-                    <UserPasswordStrength :value="password.newOne" />
+                    <UserPasswordStrength v-model="password.newOne" />
                   </v-form>
                 </v-card-text>
                 <v-card-actions>