Client - add 404 error page

fittrackee_client/src/components/Error.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="error404">
+    <div class="error-content">
+      <h1>{{ title }}</h1>
+      <p>{{ message }}</p>
+      <button v-if="buttonText" @click="$router.push(path)" class="upper">
+        {{ buttonText }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    name: 'Error',
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      message: {
+        type: String,
+      },
+      buttonText: {
+        type: String,
+      },
+      path: {
+        type: String,
+        default: '/',
+      },
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/base';
+
+  #error404 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 75vh;
+
+    text-align: center;
+
+    .error-content {
+      margin-top: 50px;
+
+      h1 {
+        font-size: 6em;
+        text-shadow: 4px 4px 0 var(--app-shadow-color);
+      }
+
+      p {
+        font-size: 1.2em;
+        margin: 30px 0;
+      }
+    }
+  }
+</style>

fittrackee_client/src/locales/en/common.json

@@ -0,0 +1,3 @@
+{
+  "HOME": "Home"
+}

fittrackee_client/src/locales/en/en.ts

@@ -1,12 +1,16 @@
 import AdministrationTranslations from './administration.json'
+import CommonTranslations from './common.json'
 import DashboardTranslations from './dashboard.json'
+import ErrorTranslations from './error.json'
 import StatisticsTranslations from './statistics.json'
 import UserTranslations from './user.json'
 import WorkoutsTranslations from './workouts.json'
 
 export default {
   administration: AdministrationTranslations,
+  common: CommonTranslations,
   dashboard: DashboardTranslations,
+  error: ErrorTranslations,
   statistics: StatisticsTranslations,
   user: UserTranslations,
   workouts: WorkoutsTranslations,

fittrackee_client/src/locales/en/error.json

@@ -0,0 +1,5 @@
+{
+  "not-found": {
+    "PAGE": "Page not found"
+  }
+}

fittrackee_client/src/locales/fr/common.json

@@ -0,0 +1,3 @@
+{
+  "HOME": "Accueil"
+}

fittrackee_client/src/locales/fr/error.json

@@ -0,0 +1,5 @@
+{
+  "not-found": {
+    "PAGE": "Page introuvable"
+  }
+}

fittrackee_client/src/locales/fr/fr.ts

@@ -1,12 +1,16 @@
 import AdministrationTranslations from './administration.json'
+import CommonTranslations from './common.json'
 import DashboardTranslations from './dashboard.json'
+import ErrorTranslations from './error.json'
 import StatisticsTranslations from './statistics.json'
 import UserTranslations from './user.json'
 import WorkoutsTranslations from './workouts.json'
 
 export default {
   administration: AdministrationTranslations,
+  common: CommonTranslations,
   dashboard: DashboardTranslations,
+  error: ErrorTranslations,
   statistics: StatisticsTranslations,
   user: UserTranslations,
   workouts: WorkoutsTranslations,

fittrackee_client/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Dashboard from '@/views/DashBoard.vue'
+import NotFound from '@/views/NotFound.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -7,6 +8,7 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Dashboard',
     component: Dashboard,
   },
+  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
 ]
 
 const router = createRouter({

fittrackee_client/src/scss/base.scss

@@ -32,3 +32,25 @@ a {
   max-width: $container-width;
   width: 100%;
 }
+
+button {
+  border: solid 1px var(--app-color);
+  border-radius: 0;
+  box-shadow: 2px 2px 2px var(--app-shadow-color);
+  color: var(--app-color);
+  padding: 6px 14px;
+
+  &:hover {
+    background: var(--app-color);
+    color: #FFFFFF;
+  }
+
+  &:active {
+    box-shadow: 2px 0 2px var(--app-shadow-color);
+    transform: translateY(2px);
+  }
+}
+
+.upper {
+  text-transform: uppercase;
+}

fittrackee_client/src/scss/colors.scss

@@ -8,4 +8,6 @@
 
   --footer-background-color: #FFFFFF;
   --footer-color: #8b8c8c;
+
+  --app-shadow-color: lightgrey;
 }

fittrackee_client/src/views/NotFound.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="not-found">
+    <Error
+      title="404"
+      :message="t('error.not-found.PAGE')"
+      :button-text="t('common.HOME')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import Error from '@/components/Error.vue'
+
+  export default defineComponent({
+    name: 'NotFound',
+    components: {
+      Error,
+    },
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>