Client - allow password display

fittrackee_client/src/components/Common/PasswordInput.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="password-input">
+    <input
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :required="required"
+      :type="showPassword ? 'text' : 'password'"
+      minlength="8"
+      @input="updatePassword"
+      @invalid="invalidPassword"
+    />
+    <span class="show-password" @click="togglePassword">
+      {{ $t(`user.${showPassword ? 'HIDE' : 'SHOW'}_PASSWORD`) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, toRefs, withDefaults } from 'vue'
+  interface Props {
+    disabled?: boolean
+    placeholder?: string
+    required?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    required: false,
+  })
+  const { disabled, placeholder, required } = toRefs(props)
+  const showPassword = ref(false)
+
+  const emit = defineEmits(['updatePassword', 'passwordError'])
+
+  function togglePassword() {
+    showPassword.value = !showPassword.value
+  }
+  function updatePassword(event: Event & { target: HTMLInputElement }) {
+    emit('updatePassword', event.target.value)
+  }
+  function invalidPassword() {
+    emit('passwordError')
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+
+  .password-input {
+    display: flex;
+    flex-direction: column;
+    .show-password {
+      font-style: italic;
+      font-size: 0.85em;
+      margin-top: -0.75 * $default-margin;
+      padding-left: $default-padding;
+      cursor: pointer;
+    }
+  }
+</style>

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
+              :required="true"
-              @invalid="invalidateForm"
-              type="password"
-              minlength="8"
-              v-model="formData.password"
               :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':

fittrackee_client/src/locales/en/user.json

@@ -5,6 +5,7 @@
   "EMAIL": "Email",
   "ENTER_EMAIL": "Enter an email address",
   "ENTER_PASSWORD": "Enter a password",
+  "HIDE_PASSWORD": "hide password",
   "INVALID_TOKEN": "Invalid token, please request a new password reset.",
   "LANGUAGE": "Language",
   "LOGIN": "Login",
@@ -60,6 +61,7 @@
   "REGISTER": "Register",
   "REGISTER_DISABLED": "Sorry, registration is disabled.",
   "RESET_PASSWORD": "Reset your password",
+  "SHOW_PASSWORD": "show password",
   "USER_PICTURE": "user picture",
   "USERNAME": "Username"
 }

fittrackee_client/src/locales/fr/user.json

@@ -5,6 +5,7 @@
   "EMAIL": "Email",
   "ENTER_EMAIL": "Saisir une adresse email",
   "ENTER_PASSWORD": "Saisir un mot de passe",
+  "HIDE_PASSWORD": "masquer le mot de passe",
   "INVALID_TOKEN": "Jeton invalide, veullez demander une nouvelle réinitialisation de mot de passe.",
   "LANGUAGE": "Langue",
   "LOGIN": "Se connecter",
@@ -60,6 +61,7 @@
   "REGISTER": "S'inscrire",
   "REGISTER_DISABLED": "Désolé, les inscriptions sont désactivées.",
   "RESET_PASSWORD": "Réinitialiser votre mot de passe",
+  "SHOW_PASSWORD": "afficher le mot de passe",
   "USER_PICTURE": "photo de l'utilisateur",
   "USERNAME": "Nom d'utilisateur"
 }