Client - update password update in user account

fittrackee_client/src/components/Common/PasswordInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="password-input">
     <input
+      id="password"
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
@@ -18,13 +19,21 @@
         aria-hidden="true"
       />
     </div>
+    <div v-if="checkStrength" class="form-info">
+      <i class="fa fa-info-circle" aria-hidden="true" />
+      {{ $t('user.PASSWORD_INFO') }}
+    </div>
+    <PasswordStrength v-if="checkStrength" :password="passwordValue" />
   </div>
 </template>
 
 <script setup lang="ts">
   import { Ref, ref, toRefs, watch, withDefaults } from 'vue'
 
+  import PasswordStrength from '@/components/Common/PasswordStength.vue'
+
   interface Props {
+    checkStrength?: boolean
     disabled?: boolean
     password?: string
     placeholder?: string
@@ -32,10 +41,13 @@
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    checkStrength: false,
     disabled: false,
+    password: '',
     required: false,
   })
-  const { disabled, password, placeholder, required } = toRefs(props)
+  const { checkStrength, disabled, password, placeholder, required } =
+    toRefs(props)
 
   const showPassword: Ref<boolean> = ref(false)
   const passwordValue: Ref<string> = ref('')

fittrackee_client/src/components/Common/PasswordStength.vue

@@ -38,14 +38,13 @@
     watch,
   } from 'vue'
 
-  import { ROOT_STORE } from '@/store/constants'
+  import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
   import { useStore } from '@/use/useStore'
   import { getPasswordStrength, setZxcvbnOptions } from '@/utils/password'
 
   interface Props {
     password: string
   }
-
   const props = defineProps<Props>()
   const { password } = toRefs(props)
 
@@ -53,6 +52,9 @@
   const language: ComputedRef<string> = computed(
     () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
   )
+  const isSuccess: ComputedRef<boolean> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.IS_SUCCESS]
+  )
   const passwordScore: Ref<number> = ref(0)
   const passwordStrength: Ref<string> = ref('')
   const passwordSuggestions: Ref<string[]> = ref([])
@@ -77,7 +79,11 @@
   watch(
     () => password.value,
     async (newPassword) => {
-      calculatePasswordStrength(newPassword)
+      if (isSuccess.value) {
+        passwordStrength.value = ''
+      } else {
+        calculatePasswordStrength(newPassword)
+      }
     }
   )
 </script>