From d6110f1a944d64e725d1f3a5d9aa327bd35c16d5 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Date: Fri, 20 Jun 2025 18:39:08 +0200
Subject: [PATCH] fix: passwort strength indicator (#5553)

---
 .../Domain/User/UserPasswordStrength.vue      | 28 ++++---------------
 .../Domain/User/UserRegistrationForm.vue      |  2 +-
 frontend/pages/user/profile/edit.vue          |  2 +-
 3 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/frontend/components/Domain/User/UserPasswordStrength.vue b/frontend/components/Domain/User/UserPasswordStrength.vue
index 9c01af6db..4e05d76c2 100644
--- a/frontend/components/Domain/User/UserPasswordStrength.vue
+++ b/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>
diff --git a/frontend/components/Domain/User/UserRegistrationForm.vue b/frontend/components/Domain/User/UserRegistrationForm.vue
index b9312e1c7..a216f8f9d 100644
--- a/frontend/components/Domain/User/UserRegistrationForm.vue
+++ b/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"
diff --git a/frontend/pages/user/profile/edit.vue b/frontend/pages/user/profile/edit.vue
index 9f64f69e0..57855a83c 100644
--- a/frontend/pages/user/profile/edit.vue
+++ b/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>