From 6e04791b2d919af0990bb5cc41b85c0b14a77d53 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Mon, 19 Sep 2022 14:00:49 +0200
Subject: [PATCH] Client - minor fixes

---
 .../src/components/Common/NotFound.vue        | 19 ++++++++++++++++++-
 .../src/components/User/UserAuthForm.vue      |  3 +++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/fittrackee_client/src/components/Common/NotFound.vue b/fittrackee_client/src/components/Common/NotFound.vue
index 485062dd..8fa78868 100644
--- a/fittrackee_client/src/components/Common/NotFound.vue
+++ b/fittrackee_client/src/components/Common/NotFound.vue
@@ -1,5 +1,6 @@
 <template>
   <Error
+    v-if="errorDisplayed"
     title="404"
     :message="$t(`error.NOT_FOUND.${target}`)"
     :button-text="$t('common.HOME')"
@@ -7,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-  import { toRefs, withDefaults } from 'vue'
+  import { Ref, onMounted, ref, toRefs, withDefaults, onUnmounted } from 'vue'
 
   import Error from '@/components/Common/Error.vue'
   interface Props {
@@ -17,4 +18,20 @@
     target: 'PAGE',
   })
   const { target } = toRefs(props)
+  const timer = ref<number | undefined>()
+  const errorDisplayed: Ref<boolean> = ref(false)
+
+  onMounted(() => displayError())
+
+  function displayError() {
+    timer.value = setTimeout(() => {
+      errorDisplayed.value = true
+    }, 500)
+  }
+
+  onUnmounted(() => {
+    if (timer.value) {
+      clearTimeout(timer.value)
+    }
+  })
 </script>
diff --git a/fittrackee_client/src/components/User/UserAuthForm.vue b/fittrackee_client/src/components/User/UserAuthForm.vue
index 10e007af..1625c936 100644
--- a/fittrackee_client/src/components/User/UserAuthForm.vue
+++ b/fittrackee_client/src/components/User/UserAuthForm.vue
@@ -145,6 +145,7 @@
   import {
     ComputedRef,
     computed,
+    onUnmounted,
     reactive,
     ref,
     toRefs,
@@ -262,6 +263,8 @@
     formData.password = ''
   }
 
+  onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
+
   watch(
     () => route.path,
     async () => {