Client - add password reset + refacto

2021-10-20 17:38:25 +02:00
parent c4eb9bdbf8
commit 8d93024a5f
66 changed files with 797 additions and 318 deletions
--- a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
@ -2,8 +2,8 @@
  <div id="user-infos-edition">
    <Modal
      v-if="displayModal"
-      :title="t('common.CONFIRMATION')"
-      :message="t('user.CONFIRM_ACCOUNT_DELETION')"
+      :title="$t('common.CONFIRMATION')"
+      :message="$t('user.CONFIRM_ACCOUNT_DELETION')"
      @confirmAction="deleteAccount(user.username)"
      @cancelAction="updateDisplayModal(false)"
    />
@ -11,15 +11,15 @@
      <ErrorMessage :message="errorMessages" v-if="errorMessages" />
      <form @submit.prevent="updateProfile">
        <label class="form-items" for="email">
-          {{ t('user.EMAIL') }}
+          {{ $t('user.EMAIL') }}
          <input id="email" :value="user.email" disabled />
        </label>
        <label class="form-items" for="registrationDate">
-          {{ t('user.PROFILE.REGISTRATION_DATE') }}
+          {{ $t('user.PROFILE.REGISTRATION_DATE') }}
          <input id="registrationDate" :value="registrationDate" disabled />
        </label>
        <label class="form-items" for="password">
-          {{ t('user.PASSWORD') }}
+          {{ $t('user.PASSWORD') }}
          <input
            id="password"
            type="password"
@ -28,7 +28,7 @@
          />
        </label>
        <label class="form-items" for="passwordConfirmation">
-          {{ t('user.PASSWORD_CONFIRMATION') }}
+          {{ $t('user.PASSWORD_CONFIRMATION') }}
          <input
            id="passwordConfirmation"
            type="password"
@ -38,7 +38,7 @@
        </label>
        <hr />
        <label class="form-items" for="first_name">
-          {{ t('user.PROFILE.FIRST_NAME') }}
+          {{ $t('user.PROFILE.FIRST_NAME') }}
          <input
            id="first_name"
            v-model="userForm.first_name"
@ -46,11 +46,11 @@
          />
        </label>
        <label class="form-items" for="last_name">
-          {{ t('user.PROFILE.LAST_NAME') }}
+          {{ $t('user.PROFILE.LAST_NAME') }}
          <input id="last_name" v-model="userForm.last_name" />
        </label>
        <label class="form-items" for="birth_date">
-          {{ t('user.PROFILE.BIRTH_DATE') }}
+          {{ $t('user.PROFILE.BIRTH_DATE') }}
          <input
            id="birth_date"
            type="date"
@ -60,7 +60,7 @@
          />
        </label>
        <label class="form-items" for="location">
-          {{ t('user.PROFILE.LOCATION') }}
+          {{ $t('user.PROFILE.LOCATION') }}
          <input
            id="location"
            v-model="userForm.location"
@ -68,7 +68,7 @@
          />
        </label>
        <label class="form-items">
-          {{ t('user.PROFILE.BIO') }}
+          {{ $t('user.PROFILE.BIO') }}
          <CustomTextArea
            name="bio"
            :charLimit="200"
@ -79,13 +79,13 @@
        </label>
        <div class="form-buttons">
          <button class="confirm" type="submit">
-            {{ t('buttons.SUBMIT') }}
+            {{ $t('buttons.SUBMIT') }}
          </button>
          <button class="cancel" @click.prevent="$router.go(-1)">
-            {{ t('buttons.CANCEL') }}
+            {{ $t('buttons.CANCEL') }}
          </button>
          <button class="danger" @click.prevent="updateDisplayModal(true)">
-            {{ t('buttons.DELETE_MY_ACCOUNT') }}
+            {{ $t('buttons.DELETE_MY_ACCOUNT') }}
          </button>
        </div>
      </form>
@ -105,7 +105,6 @@
    ref,
    onMounted,
  } from 'vue'
-  import { useI18n } from 'vue-i18n'

  import CustomTextArea from '@/components/Common/CustomTextArea.vue'
  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
@ -128,7 +127,6 @@
      },
    },
    setup(props) {
-      const { t } = useI18n()
      const store = useStore()
      const userForm: IUserPayload = reactive({
        password: '',
@ -185,7 +183,6 @@
        errorMessages,
        loading,
        registrationDate,
-        t,
        userForm,
        deleteAccount,
        updateBio,
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
@ -12,16 +12,16 @@
        />
        <div class="picture-buttons">
          <button type="submit" :disabled="!pictureFile">
-            {{ t('user.PROFILE.PICTURE_UPDATE') }}
+            {{ $t('user.PROFILE.PICTURE_UPDATE') }}
          </button>
          <button class="danger" v-if="user.picture" @click="deleteUserPicture">
-            {{ t('user.PROFILE.PICTURE_REMOVE') }}
+            {{ $t('user.PROFILE.PICTURE_REMOVE') }}
          </button>
          <button class="cancel" @click="$router.push('/profile')">
-            {{ t('user.PROFILE.BACK_TO_PROFILE') }}
+            {{ $t('user.PROFILE.BACK_TO_PROFILE') }}
          </button>
        </div>
-        <span>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
+        <span>{{ $t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
      </form>
    </div>
  </div>
@ -36,7 +36,6 @@
    computed,
    ref,
  } from 'vue'
-  import { useI18n } from 'vue-i18n'

  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
  import UserPicture from '@/components/User/UserPicture.vue'
@ -59,7 +58,6 @@
      },
    },
    setup() {
-      const { t } = useI18n()
      const store = useStore()
      const errorMessages: ComputedRef<string | string[] | null> = computed(
        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
@ -92,7 +90,6 @@
        errorMessages,
        fileSizeLimit,
        pictureFile,
-        t,
        deleteUserPicture,
        updateUserPicture,
        updatePictureFile,
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
@ -4,7 +4,7 @@
      <ErrorMessage :message="errorMessages" v-if="errorMessages" />
      <form @submit.prevent="updateProfile">
        <label class="form-items">
-          {{ t('user.PROFILE.LANGUAGE') }}
+          {{ $t('user.PROFILE.LANGUAGE') }}
          <select id="language" v-model="userForm.language" :disabled="loading">
            <option
              v-for="lang in availableLanguages"
@ -16,7 +16,7 @@
          </select>
        </label>
        <label class="form-items" for="timezone">
-          {{ t('user.PROFILE.TIMEZONE') }}
+          {{ $t('user.PROFILE.TIMEZONE') }}
          <input
            id="timezone"
            v-model="userForm.timezone"
@ -24,23 +24,23 @@
          />
        </label>
        <label class="form-items">
-          {{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
+          {{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
          <select id="weekm" v-model="userForm.weekm" :disabled="loading">
            <option
              v-for="start in weekStart"
              :value="start.value"
              :key="start.value"
            >
-              {{ t(`user.PROFILE.${start.label}`) }}
+              {{ $t(`user.PROFILE.${start.label}`) }}
            </option>
          </select>
        </label>
        <div class="form-buttons">
          <button class="confirm" type="submit">
-            {{ t('buttons.SUBMIT') }}
+            {{ $t('buttons.SUBMIT') }}
          </button>
          <button class="cancel" @click.prevent="$router.go(-1)">
-            {{ t('buttons.CANCEL') }}
+            {{ $t('buttons.CANCEL') }}
          </button>
        </div>
      </form>
@ -76,7 +76,7 @@
      },
    },
    setup(props) {
-      const { t, availableLocales } = useI18n()
+      const { availableLocales } = useI18n()
      const store = useStore()
      const userForm: IUserPreferencesPayload = reactive({
        language: '',
@ -122,7 +122,6 @@
        availableLanguages,
        errorMessages,
        loading,
-        t,
        userForm,
        weekStart,
        updateProfile,
--- a/fittrackee_client/src/components/User/ProfileEdition/index.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/index.vue
@ -1,7 +1,7 @@
 <template>
  <div id="user-profile-edition">
    <Card>
-      <template #title>{{ t(`user.PROFILE.${tab}_EDITION`) }}</template>
+      <template #title>{{ $t(`user.PROFILE.${tab}_EDITION`) }}</template>
      <template #content>
        <UserProfileTabs
          :tabs="tabs"
@ -18,8 +18,7 @@
 </template>

 <script lang="ts">
-  import { PropType, defineComponent, ref, computed } from 'vue'
-  import { useI18n } from 'vue-i18n'
+  import { PropType, computed, defineComponent, ref } from 'vue'

  import Card from '@/components/Common/Card.vue'
  import UserInfosEdition from '@/components/User/ProfileEdition/UserInfosEdition.vue'
@ -50,14 +49,13 @@
      },
    },
    setup(props) {
-      const { t } = useI18n()
      const store = useStore()
      const tabs = ['PROFILE', 'PICTURE', 'PREFERENCES']
      const selectedTab = ref(props.tab)
      const loading = computed(
        () => store.getters[USER_STORE.GETTERS.USER_LOADING]
      )
-      return { loading, selectedTab, t, tabs }
+      return { loading, selectedTab, tabs }
    },
  })
 </script>