Client - init "About" page and admin contact in footer

+  add missing translations

fittrackee_client/src/components/About.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="about-text">
+    <div>
+      <p class="error-message" v-html="$t('about.FITTRACKEE_DESCRIPTION')" />
+      <p>
+        <i class="fa fa-book fa-padding" aria-hidden="true"></i>
+        <a
+          href="https://samr1.github.io/FitTrackee/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ capitalize($t('common.DOCUMENTATION')) }}
+        </a>
+      </p>
+      <p>
+        <i class="fa fa-github fa-padding" aria-hidden="true"></i>
+        <a
+          href="https://github.com/SamR1/FitTrackee"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ $t('about.SOURCE_CODE') }}
+        </a>
+      </p>
+      <p>
+        <i class="fa fa-balance-scale fa-padding" aria-hidden="true"></i>
+        <i18n-t keypath="about.FITTRACKEE_LICENSE">
+          <a
+            href="https://choosealicense.com/licenses/agpl-3.0/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            AGPLv3
+          </a>
+        </i18n-t>
+      </p>
+      <div v-if="appConfig.admin_contact">
+        <i class="fa fa-envelope-o fa-padding" aria-hidden="true"></i>
+        <a :href="`mailto:${appConfig.admin_contact}`">
+          {{ $t('about.CONTACT_ADMIN') }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ComputedRef, computed, capitalize } from 'vue'
+
+  import { ROOT_STORE } from '@/store/constants'
+  import { TAppConfig } from '@/types/application'
+  import { useStore } from '@/use/useStore'
+
+  const store = useStore()
+  const appConfig: ComputedRef<TAppConfig> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
+  )
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  .about-text {
+    margin-top: 200px;
+    @media screen and (max-width: $small-limit) {
+      margin-top: 0;
+    }
+    .fa-padding {
+      padding-right: $default-padding;
+    }
+  }
+</style>

fittrackee_client/src/components/Administration/AdminApplication.vue

@@ -4,6 +4,23 @@
       <template #title>{{ $t('admin.APP_CONFIG.TITLE') }}</template>
       <template #content>
         <form class="admin-form" @submit.prevent="onSubmit">
+          <label for="admin_contact">
+            {{ $t('admin.APP_CONFIG.ADMIN_CONTACT') }}:
+            <input
+              class="no-contact"
+              v-if="!edition && !appData.admin_contact"
+              :value="$t('admin.APP_CONFIG.NO_CONTACT_EMAIL')"
+              disabled
+            />
+            <input
+              v-else
+              id="admin_contact"
+              name="admin_contact"
+              type="email"
+              v-model="appData.admin_contact"
+              :disabled="!edition"
+            />
+          </label>
           <label for="max_users">
             {{ $t('admin.APP_CONFIG.MAX_USERS_LABEL') }}:
             <input
@@ -89,6 +106,7 @@
     reactive,
     withDefaults,
     onBeforeMount,
+    toRefs,
   } from 'vue'
   import { useRouter } from 'vue-router'
 
@@ -104,11 +122,13 @@
   const props = withDefaults(defineProps<Props>(), {
     edition: false,
   })
+  const { edition } = toRefs(props)
 
   const store = useStore()
   const router = useRouter()
 
   const appData: TAppConfigForm = reactive({
+    admin_contact: '',
     max_users: 0,
     max_single_file_size: 0,
     max_zip_file_size: 0,
@@ -127,12 +147,12 @@
   function updateForm(appConfig: TAppConfig) {
     Object.keys(appData).map((key) => {
       ['max_single_file_size', 'max_zip_file_size'].includes(key)
-        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          (appData[key] = getFileSizeInMB(appConfig[key]))
-        : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          (appData[key] = appConfig[key])
+      ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        (appData[key] = getFileSizeInMB(appConfig[key]))
+      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        (appData[key] = appConfig[key])
     })
   }
   function onCancel() {
@@ -160,4 +180,7 @@
       margin-right: $default-margin;
     }
   }
+  .no-contact {
+    font-style: italic;
+  }
 </style>

fittrackee_client/src/components/Footer.vue

@@ -7,21 +7,13 @@
       </div>
       <div class="footer-item bullet">•</div>
       <div class="footer-item">
-        <a
-          href="https://github.com/SamR1/FitTrackee"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          source code
-        </a>
-        under
-        <a
-          href="https://choosealicense.com/licenses/agpl-3.0/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          AGPLv3 </a
-        >license
+        <router-link to="/about">
+          {{ $t('common.ABOUT') }}
+        </router-link>
+      </div>
+      <div class="footer-item bullet" v-if="adminContact">•</div>
+      <div class="footer-item" v-if="adminContact">
+        <a :href="`mailto:${adminContact}`">{{ $t('common.CONTACT') }}</a>
       </div>
       <div class="footer-item bullet">•</div>
       <div class="footer-item">
@@ -30,7 +22,7 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          documentation
+          {{ $t('common.DOCUMENTATION') }}
         </a>
       </div>
     </div>
@@ -42,10 +34,11 @@
 
   interface Props {
     version: string
+    adminContact?: string
   }
   const props = defineProps<Props>()
 
-  const { version } = toRefs(props)
+  const { adminContact, version } = toRefs(props)
 </script>
 
 <style scoped lang="scss">