From 27f314574007af31c7ae64964e622efe72865981 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 1 Nov 2023 09:31:00 +0100
Subject: [PATCH] Set up Not Found views

---
 resources/js_vue3/router/index.js               | 4 ++--
 resources/js_vue3/services/httpClientFactory.js | 8 +++++++-
 resources/js_vue3/stores/notify.js              | 4 ++++
 resources/js_vue3/views/Error.vue               | 4 ++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/resources/js_vue3/router/index.js b/resources/js_vue3/router/index.js
index f2247091..313ab1e6 100644
--- a/resources/js_vue3/router/index.js
+++ b/resources/js_vue3/router/index.js
@@ -59,8 +59,8 @@ const router = createRouter({
 
         { path: '/about', name: 'about', component: About, meta: { showAbout: true } },
         { path: '/error', name: 'genericError', component: Errors, meta: { middlewares: [noEmptyError], err: null } },
-        // { path: '/404', name: '404',component: Errors, props: true },
-        // { path: '*', redirect: { name: '404' } },
+        { path: '/404', name: '404', component: Errors, props: true },
+        { path: '/:pathMatch(.*)*', name: 'notFound', component: Errors, props: true },
 
 		// Lazy loaded view
 		{ path: '/about', name: 'about', component: () => import('../views/About.vue') }
diff --git a/resources/js_vue3/services/httpClientFactory.js b/resources/js_vue3/services/httpClientFactory.js
index f0c62896..7f97250c 100644
--- a/resources/js_vue3/services/httpClientFactory.js
+++ b/resources/js_vue3/services/httpClientFactory.js
@@ -66,11 +66,17 @@ export const httpClientFactory = (endpoint = 'api') => {
                 return Promise.reject(error)
             }
 
+            // Not found
+            if (error.response.status === 404) {
+                useNotifyStore().notFound()
+                return new Promise(() => {})
+            }
+
             // api calls are stateless so when user inactivity is detected
             // by the backend middleware, it cannot logout the user directly
             // so it returns a 418 response.
             // We catch the 418 response and log the user out
-            if ( error.response.status === 418 ) {
+            if (error.response.status === 418) {
                 const user = useUserStore()
                 user.logout()
             }
diff --git a/resources/js_vue3/stores/notify.js b/resources/js_vue3/stores/notify.js
index f0a2e236..87691760 100644
--- a/resources/js_vue3/stores/notify.js
+++ b/resources/js_vue3/stores/notify.js
@@ -46,6 +46,10 @@ export const useNotifyStore = defineStore({
             // 
         },
 
+        notFound(err) {
+            router.push({ name: '404' })
+        },
+
         error(err) {
             this.parseError(err)
             router.push({ name: 'genericError' })
diff --git a/resources/js_vue3/views/Error.vue b/resources/js_vue3/views/Error.vue
index 49e34919..a12c4ae6 100644
--- a/resources/js_vue3/views/Error.vue
+++ b/resources/js_vue3/views/Error.vue
@@ -23,8 +23,8 @@
 
 <template>
     <div class="error-message">
-        <modal v-model="showModal" :closable="props.closable" @modal-closed="exit">
-            <div class="error-message" v-if="$route.name == '404'">
+        <modal v-model="showModal" :closable="props.closable">
+            <div class="error-message" v-if="$route.name == '404' || $route.name == 'notFound'">
                 <p class="error-404"></p>
                 <p>{{ $t('errors.resource_not_found') }}</p>
             </div>