Client - allow password display

fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue

@@ -20,11 +20,10 @@
         </label>
         <label class="form-items" for="password">
           {{ $t('user.PASSWORD') }}
-          <input
+          <PasswordInput
             id="password"
-            type="password"
-            v-model="userForm.password"
             :disabled="loading"
+            @updatePassword="updatePassword"
           />
         </label>
         <hr />
@@ -96,6 +95,7 @@
     onMounted,
   } from 'vue'
 
+  import PasswordInput from '@/components/Common/PasswordInput.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
   import { IUserProfile, IUserPayload } from '@/types/user'
   import { useStore } from '@/use/useStore'
@@ -147,6 +147,9 @@
   function updateBio(value: string) {
     userForm.bio = value
   }
+  function updatePassword(password: string) {
+    userForm.password = password
+  }
   function updateProfile() {
     store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
   }
@@ -158,9 +161,20 @@
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   @import '~@/scss/vars.scss';
 
+  .form-items {
+    .password-input {
+      ::v-deep(.show-password) {
+        font-weight: normal;
+        font-size: 0.8em;
+        margin-top: -4px;
+        padding-left: 0;
+      }
+    }
+  }
+
   .form-buttons {
     flex-direction: row;
     @media screen and (max-width: $x-small-limit) {

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -42,20 +42,17 @@
                   : $t('user.EMAIL')
               "
             />
-            <input
+            <PasswordInput
               v-if="action !== 'reset-request'"
-              id="password"
               :disabled="registration_disabled"
-              required
-              @invalid="invalidateForm"
-              type="password"
-              minlength="8"
-              v-model="formData.password"
+              :required="true"
               :placeholder="
                 action === 'reset'
                   ? $t('user.ENTER_PASSWORD')
                   : $t('user.PASSWORD')
               "
+              @updatePassword="updatePassword"
+              @passwordError="invalidateForm"
             />
           </div>
           <button type="submit" :disabled="registration_disabled">
@@ -95,6 +92,7 @@
   } from 'vue'
   import { useRoute } from 'vue-router'
 
+  import PasswordInput from '@/components/Common/PasswordInput.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
   import { TAppConfig } from '@/types/application'
   import { ILoginRegisterFormData } from '@/types/user'
@@ -144,6 +142,9 @@
   function invalidateForm() {
     formErrors.value = true
   }
+  function updatePassword(password: string) {
+    formData.password = password
+  }
   function onSubmit(actionType: string) {
     switch (actionType) {
       case 'reset':