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/Workout/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutCard.vue
@ -6,7 +6,7 @@
          <img
            class="profile-img"
            v-if="userPictureUrl !== ''"
-            :alt="t('user.USER_PICTURE')"
+            :alt="$t('user.USER_PICTURE')"
            :src="userPictureUrl"
          />
          <div v-else class="no-picture">
@ -49,7 +49,7 @@
        <div v-if="workout">
          <StaticMap v-if="workout.with_gpx" :workout="workout" />
          <div v-else class="no-map">
-            {{ t('workouts.NO_MAP') }}
+            {{ $t('workouts.NO_MAP') }}
          </div>
        </div>
      </div>
@ -78,9 +78,8 @@
 <script lang="ts">
  import { Locale, format, formatDistance } from 'date-fns'
  import { PropType, defineComponent, ComputedRef, computed } from 'vue'
-  import { useI18n } from 'vue-i18n'

-  import SportImage from '@/components/Common/SportImage/index.vue'
+  import SportImage from '@/components/Common/Images/SportImage/index.vue'
  import StaticMap from '@/components/Common/StaticMap.vue'
  import { ROOT_STORE } from '@/store/constants'
  import { ISport } from '@/types/sports'
@ -111,7 +110,6 @@
      },
    },
    setup(props) {
-      const { t } = useI18n()
      const store = useStore()

      const userPictureUrl: ComputedRef<string> = computed(() =>
@ -128,7 +126,6 @@
        formatDistance,
        getDateWithTZ,
        locale,
-        t,
        userPictureUrl,
      }
    },
--- a/fittrackee_client/src/components/Workout/WorkoutChart.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutChart.vue
@ -1,7 +1,7 @@
 <template>
  <div id="workout-chart">
    <Card>
-      <template #title>{{ t('workouts.ANALYSIS') }} </template>
+      <template #title>{{ $t('workouts.ANALYSIS') }} </template>
      <template #content>
        <div class="chart-radio">
          <label>
@ -11,7 +11,7 @@
              :checked="displayDistance"
              @click="updateDisplayDistance"
            />
-            {{ t('workouts.DISTANCE') }}
+            {{ $t('workouts.DISTANCE') }}
          </label>
          <label>
            <input
@ -20,7 +20,7 @@
              :checked="!displayDistance"
              @click="updateDisplayDistance"
            />
-            {{ t('workouts.DURATION') }}
+            {{ $t('workouts.DURATION') }}
          </label>
        </div>
        <LineChart
@ -29,7 +29,7 @@
          @mouseleave="emitEmptyCoordinates"
        />
        <div class="no-data-cleaning">
-          {{ t('workouts.NO_DATA_CLEANING') }}
+          {{ $t('workouts.NO_DATA_CLEANING') }}
        </div>
      </template>
    </Card>
@ -201,7 +201,6 @@
      return {
        displayDistance,
        lineChartProps,
-        t,
        emitEmptyCoordinates,
        updateDisplayDistance,
      }
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
@ -5,8 +5,8 @@
      :class="{ inactive: !workoutObject.previousUrl }"
      :title="
        workoutObject.previousUrl
-          ? t(`workouts.PREVIOUS_${workoutObject.type}`)
-          : t(`workouts.NO_PREVIOUS_${workoutObject.type}`)
+          ? $t(`workouts.PREVIOUS_${workoutObject.type}`)
+          : $t(`workouts.NO_PREVIOUS_${workoutObject.type}`)
      "
      @click="
        workoutObject.previousUrl
@ -42,7 +42,7 @@
          <span class="workout-segment">
            —
            <i class="fa fa-map-marker" aria-hidden="true" />
-            {{ t('workouts.SEGMENT') }}
+            {{ $t('workouts.SEGMENT') }}
            {{ workoutObject.segmentId + 1 }}
          </span>
        </div>
@ -57,7 +57,7 @@
                params: { workoutId: workoutObject.workoutId },
              }"
            >
-              > {{ t('workouts.BACK_TO_WORKOUT') }}
+              > {{ $t('workouts.BACK_TO_WORKOUT') }}
            </router-link></span
          >
        </div>
@ -68,8 +68,8 @@
      :class="{ inactive: !workoutObject.nextUrl }"
      :title="
        workoutObject.nextUrl
-          ? t(`workouts.NEXT_${workoutObject.type}`)
-          : t(`workouts.NO_NEXT_${workoutObject.type}`)
+          ? $t(`workouts.NEXT_${workoutObject.type}`)
+          : $t(`workouts.NO_NEXT_${workoutObject.type}`)
      "
      @click="
        workoutObject.nextUrl ? $router.push(workoutObject.nextUrl) : null
@ -82,9 +82,8 @@

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

-  import SportImage from '@/components/Common/SportImage/index.vue'
+  import SportImage from '@/components/Common/Images/SportImage/index.vue'
  import { ISport } from '@/types/sports'
  import { IWorkoutObject } from '@/types/workouts'

@ -105,8 +104,7 @@
    },
    emits: ['displayModal'],
    setup(props, { emit }) {
-      const { t } = useI18n()
-      return { t, emit }
+      return { emit }
    },
  })
 </script>
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
@ -2,25 +2,26 @@
  <div id="workout-info">
    <div class="workout-data">
      <i class="fa fa-clock-o" aria-hidden="true" />
-      {{ t('workouts.DURATION') }}: <span>{{ workoutObject.moving }}</span>
+      {{ $t('workouts.DURATION') }}: <span>{{ workoutObject.moving }}</span>
      <WorkoutRecord :workoutObject="workoutObject" record_type="LD" />
      <div v-if="withPause">
-        ({{ t('workouts.PAUSES') }}: <span>{{ workoutObject.pauses }}</span> -
-        {{ t('workouts.TOTAL_DURATION') }}:
+        ({{ $t('workouts.PAUSES') }}: <span>{{ workoutObject.pauses }}</span> -
+        {{ $t('workouts.TOTAL_DURATION') }}:
        <span>{{ workoutObject.duration }})</span>
      </div>
    </div>
    <div class="workout-data">
      <i class="fa fa-road" aria-hidden="true" />
-      {{ t('workouts.DISTANCE') }}: <span>{{ workoutObject.distance }} km</span>
+      {{ $t('workouts.DISTANCE') }}:
+      <span>{{ workoutObject.distance }} km</span>
      <WorkoutRecord :workoutObject="workoutObject" record_type="FD" />
    </div>
    <div class="workout-data">
      <i class="fa fa-tachometer" aria-hidden="true" />
-      {{ t('workouts.AVERAGE_SPEED') }}:
+      {{ $t('workouts.AVERAGE_SPEED') }}:
      <span>{{ workoutObject.aveSpeed }} km/h</span
      ><WorkoutRecord :workoutObject="workoutObject" record_type="AS" /><br />
-      {{ t('workouts.MAX_SPEED') }}:
+      {{ $t('workouts.MAX_SPEED') }}:
      <span>{{ workoutObject.maxSpeed }} km/h</span>
      <WorkoutRecord :workoutObject="workoutObject" record_type="MS" />
    </div>
@ -31,11 +32,11 @@
      <img
        class="mountains"
        src="/img/workouts/mountains.svg"
-        :alt="t('workouts.ELEVATION')"
+        :alt="$t('workouts.ELEVATION')"
      />
-      {{ t('workouts.MIN_ALTITUDE') }}: <span>{{ workoutObject.minAlt }} m</span
-      ><br />
-      {{ t('workouts.MAX_ALTITUDE') }}:
+      {{ $t('workouts.MIN_ALTITUDE') }}:
+      <span>{{ workoutObject.minAlt }} m</span><br />
+      {{ $t('workouts.MAX_ALTITUDE') }}:
      <span>{{ workoutObject.maxAlt }} m</span>
    </div>
    <div
@ -43,9 +44,9 @@
      v-if="workoutObject.ascent !== null && workoutObject.descent !== null"
    >
      <i class="fa fa-location-arrow" aria-hidden="true" />
-      {{ t('workouts.ASCENT') }}: <span>{{ workoutObject.ascent }} m</span
+      {{ $t('workouts.ASCENT') }}: <span>{{ workoutObject.ascent }} m</span
      ><br />
-      {{ t('workouts.DESCENT') }}: <span>{{ workoutObject.descent }} m</span>
+      {{ $t('workouts.DESCENT') }}: <span>{{ workoutObject.descent }} m</span>
    </div>
    <WorkoutWeather :workoutObject="workoutObject" />
  </div>
@ -53,7 +54,6 @@

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

  import WorkoutRecord from '@/components/Workout/WorkoutDetail/WorkoutRecord.vue'
  import WorkoutWeather from '@/components/Workout/WorkoutDetail/WorkoutWeather.vue'
@ -72,14 +72,12 @@
      },
    },
    setup(props) {
-      const { t } = useI18n()
      return {
        withPause: computed(
          () =>
            props.workoutObject.pauses !== '0:00:00' &&
            props.workoutObject.pauses !== null
        ),
-        t,
      }
    },
  })
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
@ -23,7 +23,7 @@
          />
        </LMap>
      </div>
-      <div v-else class="no-map">{{ t('workouts.NO_MAP') }}</div>
+      <div v-else class="no-map">{{ $t('workouts.NO_MAP') }}</div>
    </div>
  </div>
 </template>
@ -32,7 +32,6 @@
  import { gpx } from '@tmcw/togeojson'
  import { LGeoJson, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
  import { ComputedRef, PropType, computed, defineComponent, ref } from 'vue'
-  import { useI18n } from 'vue-i18n'

  import { ROOT_STORE } from '@/store/constants'
  import { IAppConfig } from '@/types/application'
@ -59,7 +58,6 @@
      },
    },
    setup(props) {
-      const { t } = useI18n()
      const store = useStore()

      function getGeoJson(gpxContent: string): GeoJSONData {
@ -120,7 +118,6 @@
        bounds,
        center,
        geoJson,
-        t,
        workoutMap,
        fitBounds,
        getApiUrl,
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue
@ -9,17 +9,17 @@
          <th />
          <th>
            <div class="weather-th">
-              {{ t('workouts.START') }}
+              {{ $t('workouts.START') }}
              <img
                class="weather-img"
                :src="`/img/weather/${workoutObject.weatherStart.icon}.svg`"
                :alt="
-                  t(
+                  $t(
                    `workouts.WEATHER.DARK_SKY.${workoutObject.weatherStart.icon}`
                  )
                "
                :title="
-                  t(
+                  $t(
                    `workouts.WEATHER.DARK_SKY.${workoutObject.weatherStart.icon}`
                  )
                "
@ -28,17 +28,17 @@
          </th>
          <th>
            <div class="weather-th">
-              {{ t('workouts.END') }}
+              {{ $t('workouts.END') }}
              <img
                class="weather-img"
                :src="`/img/weather/${workoutObject.weatherEnd.icon}.svg`"
                :alt="
-                  t(
+                  $t(
                    `workouts.WEATHER.DARK_SKY.${workoutObject.weatherEnd.icon}`
                  )
                "
                :title="
-                  t(
+                  $t(
                    `workouts.WEATHER.DARK_SKY.${workoutObject.weatherEnd.icon}`
                  )
                "
@ -53,8 +53,8 @@
            <img
              class="weather-img weather-img-small"
              src="/img/weather/temperature.svg"
-              :alt="t(`workouts.WEATHER.TEMPERATURE`)"
-              :title="t(`workouts.WEATHER.TEMPERATURE`)"
+              :alt="$t(`workouts.WEATHER.TEMPERATURE`)"
+              :title="$t(`workouts.WEATHER.TEMPERATURE`)"
            />
          </td>
          <td>
@ -69,8 +69,8 @@
            <img
              class="weather-img weather-img-small"
              src="/img/weather/pour-rain.svg"
-              :alt="t(`workouts.WEATHER.HUMIDITY`)"
-              :title="t(`workouts.WEATHER.HUMIDITY`)"
+              :alt="$t(`workouts.WEATHER.HUMIDITY`)"
+              :title="$t(`workouts.WEATHER.HUMIDITY`)"
            />
          </td>
          <td>
@ -85,8 +85,8 @@
            <img
              class="weather-img weather-img-small"
              src="/img/weather/breeze.svg"
-              :alt="t(`workouts.WEATHER.WIND`)"
-              :title="t(`workouts.WEATHER.WIND`)"
+              :alt="$t(`workouts.WEATHER.WIND`)"
+              :title="$t(`workouts.WEATHER.WIND`)"
            />
          </td>
          <td>{{ Number(workoutObject.weatherStart.wind).toFixed(1) }}m/s</td>
@ -99,9 +99,9 @@

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

  import { IWorkoutObject } from '@/types/workouts'
+
  export default defineComponent({
    name: 'WorkoutWeather',
    props: {
@ -110,10 +110,6 @@
        required: true,
      },
    },
-    setup() {
-      const { t } = useI18n()
-      return { t }
-    },
  })
 </script>

--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
@ -2,8 +2,8 @@
  <div class="workout-detail">
    <Modal
      v-if="displayModal"
-      :title="t('common.CONFIRMATION')"
-      :message="t('workouts.WORKOUT_DELETION_CONFIRMATION')"
+      :title="$t('common.CONFIRMATION')"
+      :message="$t('workouts.WORKOUT_DELETION_CONFIRMATION')"
      @confirmAction="deleteWorkout(workoutObject.workoutId)"
      @cancelAction="updateDisplayModal(false)"
    />
@ -36,7 +36,6 @@
    ref,
    watch,
  } from 'vue'
-  import { useI18n } from 'vue-i18n'
  import { useRoute } from 'vue-router'

  import Card from '@/components/Common/Card.vue'
@ -90,7 +89,6 @@
    setup(props) {
      const route = useRoute()
      const store = useStore()
-      const { t } = useI18n()

      function getWorkoutObjectUrl(
        workout: IWorkout,
@ -196,7 +194,6 @@
          getWorkoutObject(workout.value, segment.value)
        ),
        displayModal,
-        t,
        deleteWorkout,
        updateDisplayModal,
      }
--- a/fittrackee_client/src/components/Workout/WorkoutEdition.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutEdition.vue
@ -5,7 +5,7 @@
  >
    <Card>
      <template #title>{{
-        t(`workouts.${isCreation ? 'ADD' : 'EDIT'}_WORKOUT`)
+        $t(`workouts.${isCreation ? 'ADD' : 'EDIT'}_WORKOUT`)
      }}</template>
      <template #content>
        <div id="workout-form">
@ -20,7 +20,7 @@
                    :disabled="loading"
                    @click="updateWithGpx"
                  />
-                  <label for="withGpx">{{ t('workouts.WITH_GPX') }}</label>
+                  <label for="withGpx">{{ $t('workouts.WITH_GPX') }}</label>
                </div>
                <div>
                  <input
@ -31,12 +31,12 @@
                    @click="updateWithGpx"
                  />
                  <label for="withoutGpx">{{
-                    t('workouts.WITHOUT_GPX')
+                    $t('workouts.WITHOUT_GPX')
                  }}</label>
                </div>
              </div>
              <div class="form-item">
-                <label> {{ t('workouts.SPORT', 1) }}: </label>
+                <label> {{ $t('workouts.SPORT', 1) }}: </label>
                <select
                  id="sport"
                  required
@ -54,8 +54,8 @@
              </div>
              <div class="form-item" v-if="isCreation && withGpx">
                <label for="gpxFile">
-                  {{ t('workouts.GPX_FILE') }}
-                  {{ t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}:
+                  {{ $t('workouts.GPX_FILE') }}
+                  {{ $t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}:
                </label>
                <input
                  id="gpxFile"
@ -67,26 +67,28 @@
                />
                <div class="files-help">
                  <div>
-                    <strong>{{ t('workouts.GPX_FILE') }}:</strong>
+                    <strong>{{ $t('workouts.GPX_FILE') }}:</strong>
                    <ul>
-                      <li>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</li>
+                      <li>
+                        {{ $t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}
+                      </li>
                    </ul>
                  </div>

                  <div>
-                    <strong>{{ t('workouts.ZIP_ARCHIVE') }}:</strong>
+                    <strong>{{ $t('workouts.ZIP_ARCHIVE') }}:</strong>
                    <ul>
-                      <li>{{ t('workouts.NO_FOLDER') }}</li>
+                      <li>{{ $t('workouts.NO_FOLDER') }}</li>
                      <li>
-                        {{ t('workouts.MAX_FILES') }}: {{ gpx_limit_import }}
+                        {{ $t('workouts.MAX_FILES') }}: {{ gpx_limit_import }}
                      </li>
-                      <li>{{ t('workouts.MAX_SIZE') }}: {{ zipSizeLimit }}</li>
+                      <li>{{ $t('workouts.MAX_SIZE') }}: {{ zipSizeLimit }}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="form-item" v-else>
-                <label for="title"> {{ t('workouts.TITLE') }}: </label>
+                <label for="title"> {{ $t('workouts.TITLE') }}: </label>
                <input
                  id="title"
                  name="title"
@ -99,7 +101,7 @@
              <div v-if="!withGpx">
                <div class="workout-date-duration">
                  <div class="form-item">
-                    <label>{{ t('workouts.WORKOUT_DATE') }}:</label>
+                    <label>{{ $t('workouts.WORKOUT_DATE') }}:</label>
                    <div class="workout-date-time">
                      <input
                        id="workout-date"
@ -121,7 +123,7 @@
                    </div>
                  </div>
                  <div class="form-item">
-                    <label>{{ t('workouts.DURATION') }}:</label>
+                    <label>{{ $t('workouts.DURATION') }}:</label>
                    <div>
                      <input
                        id="workout-duration-hour"
@ -162,7 +164,7 @@
                  </div>
                </div>
                <div class="form-item">
-                  <label>{{ t('workouts.DISTANCE') }} (km):</label>
+                  <label>{{ $t('workouts.DISTANCE') }} (km):</label>
                  <input
                    type="number"
                    min="0"
@ -174,7 +176,7 @@
                </div>
              </div>
              <div class="form-item">
-                <label> {{ t('workouts.NOTES') }}: </label>
+                <label> {{ $t('workouts.NOTES') }}: </label>
                <CustomTextArea
                  name="notes"
                  :input="workoutDataObject.notes"
@ -189,10 +191,10 @@
            </div>
            <div v-else class="form-buttons">
              <button class="confirm" type="submit" :disabled="loading">
-                {{ t('buttons.SUBMIT') }}
+                {{ $t('buttons.SUBMIT') }}
              </button>
              <button class="cancel" @click.prevent="onCancel">
-                {{ t('buttons.CANCEL') }}
+                {{ $t('buttons.CANCEL') }}
              </button>
            </div>
          </form>
@ -406,7 +408,6 @@
        errorMessages,
        fileSizeLimit,
        gpx_limit_import,
-        t,
        translatedSports,
        withGpx,
        zipSizeLimit,
--- a/fittrackee_client/src/components/Workout/WorkoutNotes.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutNotes.vue
@ -1,9 +1,9 @@
 <template>
  <div id="workout-note">
    <Card>
-      <template #title>{{ t('workouts.NOTES') }}</template>
+      <template #title>{{ $t('workouts.NOTES') }}</template>
      <template #content>
-        {{ notes && notes !== '' ? notes : t('workouts.NO_NOTES') }}</template
+        {{ notes && notes !== '' ? notes : $t('workouts.NO_NOTES') }}</template
      >
    </Card>
  </div>
@ -11,7 +11,6 @@

 <script lang="ts">
  import { defineComponent } from 'vue'
-  import { useI18n } from 'vue-i18n'

  import Card from '@/components/Common/Card.vue'

@ -26,10 +25,6 @@
        required: false,
      },
    },
-    setup() {
-      const { t } = useI18n()
-      return { t }
-    },
  })
 </script>

--- a/fittrackee_client/src/components/Workout/WorkoutSegments.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutSegments.vue
@ -1,7 +1,7 @@
 <template>
  <div id="workout-segments">
    <Card>
-      <template #title>{{ t('workouts.SEGMENT', 2) }}</template>
+      <template #title>{{ $t('workouts.SEGMENT', 2) }}</template>
      <template #content>
        <ul>
          <li v-for="(segment, index) in segments" :key="segment.segment_id">
@ -13,10 +13,10 @@
                  segmentId: index + 1,
                },
              }"
-              >{{ t('workouts.SEGMENT', 1) }} {{ index + 1 }}</router-link
+              >{{ $t('workouts.SEGMENT', 1) }} {{ index + 1 }}</router-link
            >
-            ({{ t('workouts.DISTANCE') }}: {{ segment.distance }} km,
-            {{ t('workouts.DURATION') }}: {{ segment.duration }})
+            ({{ $t('workouts.DISTANCE') }}: {{ segment.distance }} km,
+            {{ $t('workouts.DURATION') }}: {{ segment.duration }})
          </li>
        </ul>
      </template>
@ -26,7 +26,6 @@

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

  import Card from '@/components/Common/Card.vue'
  import { IWorkoutSegment } from '@/types/workouts'
@ -42,10 +41,6 @@
        required: true,
      },
    },
-    setup() {
-      const { t } = useI18n()
-      return { t }
-    },
  })
 </script>