From 14e66aee049b84632f7252738e8c9bbf3d28da03 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Thu, 13 Jul 2023 16:18:03 +0200
Subject: [PATCH] Client - improve semantic

---
 fittrackee_client/src/App.vue                 | 34 +++++++-------
 .../components/Administration/AdminUsers.vue  | 16 ++++---
 .../Dashboard/UserRecords/RecordsCard.vue     |  2 +-
 fittrackee_client/src/components/Footer.vue   |  4 +-
 fittrackee_client/src/components/NavBar.vue   |  4 +-
 .../src/components/PrivacyPolicy.vue          | 45 ++++++++++---------
 .../User/ProfileDisplay/UserInfos.vue         |  8 +++-
 .../src/components/User/UserApps/UserApp.vue  | 16 ++++---
 .../components/User/UserApps/UserAppsList.vue | 16 ++++---
 .../WorkoutDetail/WorkoutCardTitle.vue        |  5 ++-
 .../src/components/Workouts/WorkoutsList.vue  | 16 ++++---
 11 files changed, 93 insertions(+), 73 deletions(-)

diff --git a/fittrackee_client/src/App.vue b/fittrackee_client/src/App.vue
index 939bc682..a5c90e46 100644
--- a/fittrackee_client/src/App.vue
+++ b/fittrackee_client/src/App.vue
@@ -1,24 +1,26 @@
 <template>
   <div id="top" />
   <NavBar @menuInteraction="updateHideScrollBar" />
-  <div v-if="appLoading" class="app-container">
-    <div class="app-loading">
-      <Loader />
+  <main>
+    <div v-if="appLoading" class="app-container">
+      <div class="app-loading">
+        <Loader />
+      </div>
     </div>
-  </div>
-  <div v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
-    <router-view v-if="appConfig" />
-    <NoConfig v-else />
-  </div>
-  <div class="container scroll">
-    <div
-      class="scroll-button"
-      :class="{ 'display-button': displayScrollButton }"
-      @click="scrollToTop"
-    >
-      <i class="fa fa-chevron-up" aria-hidden="true"></i>
+    <div v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
+      <router-view v-if="appConfig" />
+      <NoConfig v-else />
     </div>
-  </div>
+    <div class="container scroll">
+      <div
+        class="scroll-button"
+        :class="{ 'display-button': displayScrollButton }"
+        @click="scrollToTop"
+      >
+        <i class="fa fa-chevron-up" aria-hidden="true"></i>
+      </div>
+    </div>
+  </main>
   <Footer
     v-if="appConfig"
     :version="appConfig ? appConfig.version : ''"
diff --git a/fittrackee_client/src/components/Administration/AdminUsers.vue b/fittrackee_client/src/components/Administration/AdminUsers.vue
index b6710d1f..0f84e5ab 100644
--- a/fittrackee_client/src/components/Administration/AdminUsers.vue
+++ b/fittrackee_client/src/components/Administration/AdminUsers.vue
@@ -61,13 +61,15 @@
                   <span class="cell-heading">
                     {{ $t('user.PROFILE.REGISTRATION_DATE') }}
                   </span>
-                  {{
-                    formatDate(
-                      user.created_at,
-                      authUser.timezone,
-                      authUser.date_format
-                    )
-                  }}
+                  <time>
+                    {{
+                      formatDate(
+                        user.created_at,
+                        authUser.timezone,
+                        authUser.date_format
+                      )
+                    }}
+                  </time>
                 </td>
                 <td class="text-center">
                   <span class="cell-heading">
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
index 67bd3367..91892267 100644
--- a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
+++ b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
@@ -22,7 +22,7 @@
                 params: { workoutId: record.workout_id },
               }"
             >
-              {{ record.workout_date }}
+              <time>{{ record.workout_date }}</time>
             </router-link>
           </span>
         </div>
diff --git a/fittrackee_client/src/components/Footer.vue b/fittrackee_client/src/components/Footer.vue
index 2c847165..6cdae94f 100644
--- a/fittrackee_client/src/components/Footer.vue
+++ b/fittrackee_client/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="footer">
+  <footer id="footer">
     <div class="footer-items">
       <div class="footer-item">
         <strong>FitTrackee</strong>
@@ -22,7 +22,7 @@
         </router-link>
       </div>
     </div>
-  </div>
+  </footer>
 </template>
 
 <script setup lang="ts">
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 3495e972..30573dc6 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="nav">
+  <header id="nav">
     <Modal
       v-show="displayModal"
       :title="$t('common.CONFIRMATION')"
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">
diff --git a/fittrackee_client/src/components/PrivacyPolicy.vue b/fittrackee_client/src/components/PrivacyPolicy.vue
index fadc3956..7d1ff927 100644
--- a/fittrackee_client/src/components/PrivacyPolicy.vue
+++ b/fittrackee_client/src/components/PrivacyPolicy.vue
@@ -4,19 +4,20 @@
       {{ capitalize($t('privacy_policy.TITLE')) }}
     </h1>
     <p class="last-update">
-      {{ $t('privacy_policy.LAST_UPDATE')}}: {{ private_policy_date }}
+      {{ $t('privacy_policy.LAST_UPDATE') }}:
+      <time>{{ privatePolicyDate }}</time>
     </p>
     <template v-if="appConfig.privacy_policy">
-      <div
-        v-html="snarkdown(linkifyAndClean(appConfig.privacy_policy))"
-      />
+      <div v-html="snarkdown(linkifyAndClean(appConfig.privacy_policy))" />
     </template>
     <template v-else>
       <template v-for="paragraph in paragraphs" :key="paragraph">
         <h2>
-          {{ $t(`privacy_policy.CONTENT.${paragraph}.TITLE`)}}
+          {{ $t(`privacy_policy.CONTENT.${paragraph}.TITLE`) }}
         </h2>
-        <p v-html="snarkdown($t(`privacy_policy.CONTENT.${paragraph}.CONTENT`))" />
+        <p
+          v-html="snarkdown($t(`privacy_policy.CONTENT.${paragraph}.CONTENT`))"
+        />
       </template>
     </template>
   </div>
@@ -34,7 +35,7 @@
   import { linkifyAndClean } from '@/utils/inputs'
 
   const store = useStore()
-  const fittrackee_private_policy_date = 'Sun, 26 Feb 2023 17:00:00 GMT'
+  const fittrackeePrivatePolicyDate = 'Sun, 26 Feb 2023 17:00:00 GMT'
   const appConfig: ComputedRef<TAppConfig> = computed(
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
   )
@@ -46,19 +47,24 @@
   )
   const dateFormat = computed(() => getDateFormat())
   const timezone = computed(() => getTimezone())
-  const private_policy_date = computed(() => getPolicyDate())
+  const privatePolicyDate = computed(() => getPolicyDate())
   const paragraphs = [
-      'DATA_COLLECTED', 'INFORMATION_USAGE', 'INFORMATION_PROTECTION',
-      'INFORMATION_DISCLOSURE', 'SITE_USAGE_BY_CHILDREN', 'YOUR_CONSENT',
-      'ACCOUNT_DELETION', 'CHANGES_TO_OUR_PRIVACY_POLICY'
+    'DATA_COLLECTED',
+    'INFORMATION_USAGE',
+    'INFORMATION_PROTECTION',
+    'INFORMATION_DISCLOSURE',
+    'SITE_USAGE_BY_CHILDREN',
+    'YOUR_CONSENT',
+    'ACCOUNT_DELETION',
+    'CHANGES_TO_OUR_PRIVACY_POLICY',
   ]
 
   function getTimezone() {
     return authUser.value.timezone
-        ? authUser.value.timezone
-        : Intl.DateTimeFormat().resolvedOptions().timeZone
-          ? Intl.DateTimeFormat().resolvedOptions().timeZone
-          : 'Europe/Paris'
+      ? authUser.value.timezone
+      : Intl.DateTimeFormat().resolvedOptions().timeZone
+      ? Intl.DateTimeFormat().resolvedOptions().timeZone
+      : 'Europe/Paris'
   }
   function getDateFormat() {
     return dateStringFormats[language.value]
@@ -66,14 +72,13 @@
   function getPolicyDate() {
     return formatDate(
       appConfig.value.privacy_policy && appConfig.value.privacy_policy_date
-          ? `${appConfig.value.privacy_policy_date}`
-          : fittrackee_private_policy_date,
+        ? `${appConfig.value.privacy_policy_date}`
+        : fittrackeePrivatePolicyDate,
       timezone.value,
       dateFormat.value,
-      false,
-  )
+      false
+    )
   }
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
index f8eb40d7..748be5db 100644
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
@@ -58,13 +58,17 @@
     <div v-else>
       <dl>
         <dt>{{ $t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
-        <dd>{{ registrationDate }}</dd>
+        <dd>
+          <time>{{ registrationDate }}</time>
+        </dd>
         <dt>{{ $t('user.PROFILE.FIRST_NAME') }}:</dt>
         <dd>{{ user.first_name }}</dd>
         <dt>{{ $t('user.PROFILE.LAST_NAME') }}:</dt>
         <dd>{{ user.last_name }}</dd>
         <dt>{{ $t('user.PROFILE.BIRTH_DATE') }}:</dt>
-        <dd>{{ birthDate }}</dd>
+        <dd>
+          <time v-if="birthDate">{{ birthDate }}</time>
+        </dd>
         <dt>{{ $t('user.PROFILE.LOCATION') }}:</dt>
         <dd>{{ user.location }}</dd>
         <dt>{{ $t('user.PROFILE.BIO') }}:</dt>
diff --git a/fittrackee_client/src/components/User/UserApps/UserApp.vue b/fittrackee_client/src/components/User/UserApps/UserApp.vue
index d0137672..6a9ef46b 100644
--- a/fittrackee_client/src/components/User/UserApps/UserApp.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserApp.vue
@@ -49,13 +49,15 @@
         </dd>
         <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
         <dd>
-          {{
-            formatDate(
-              client.issued_at,
-              authUser.timezone,
-              authUser.date_format
-            )
-          }}
+          <time>
+            {{
+              formatDate(
+                client.issued_at,
+                authUser.timezone,
+                authUser.date_format
+              )
+            }}
+          </time>
         </dd>
         <dt>{{ $t('oauth2.APP.NAME') }}:</dt>
         <dd>{{ client.name }}</dd>
diff --git a/fittrackee_client/src/components/User/UserApps/UserAppsList.vue b/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
index c8c7f611..d8299188 100644
--- a/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
@@ -8,13 +8,15 @@
         </router-link>
         <span class="app-issued-at">
           {{ $t('oauth2.APP.ISSUE_AT') }}
-          {{
-            formatDate(
-              client.issued_at,
-              authUser.timezone,
-              authUser.date_format
-            )
-          }}
+          <time>
+            {{
+              formatDate(
+                client.issued_at,
+                authUser.timezone,
+                authUser.date_format
+              )
+            }}
+          </time>
         </span>
       </li>
     </ul>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
index ce0d4891..4bd5c48e 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
@@ -61,8 +61,9 @@
           </span>
         </div>
         <div class="workout-date">
-          {{ workoutObject.workoutDate }} -
-          {{ workoutObject.workoutTime }}
+          <time>
+            {{ workoutObject.workoutDate }} - {{ workoutObject.workoutTime }}
+          </time>
           <span class="workout-link">
             <router-link
               v-if="workoutObject.type === 'SEGMENT'"
diff --git a/fittrackee_client/src/components/Workouts/WorkoutsList.vue b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
index d63668c3..9eca4d1c 100644
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
@@ -83,13 +83,15 @@
                 <span class="cell-heading">
                   {{ $t('workouts.DATE') }}
                 </span>
-                {{
-                  formatDate(
-                    workout.workout_date,
-                    user.timezone,
-                    user.date_format
-                  )
-                }}
+                <time>
+                  {{
+                    formatDate(
+                      workout.workout_date,
+                      user.timezone,
+                      user.date_format
+                    )
+                  }}
+                </time>
               </td>
               <td class="text-right">
                 <span class="cell-heading">