Replace NoFound view by a generic error view

resources/js/app.js

@@ -9,7 +9,7 @@ import Register     from './views/Register'
 import Accounts     from './views/Accounts'
 import Create       from './views/Create'
 import Edit         from './views/Edit'
-import NotFound     from './views/NotFound'
+import NotFound     from './views/Error'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
@@ -51,7 +51,12 @@ const router = new VueRouter({
         {
             path: '/404',
             name: '404',
-            component: NotFound,
+            component: NotFound
+        },
+        {
+            path: '/error',
+            name: 'GenericError',
+            component: NotFound
         },
     ],
 });

resources/js/views/Edit.vue

@@ -87,7 +87,7 @@
                 })
                 .catch(error => {
                     if (error.response.status === 404) {
-                        this.$router.push({name: '404' });
+                        this.$router.push({ name: '404' });
                     }
                 });
             },
@@ -120,7 +120,7 @@
                         this.errors = error.response.data.error
                     }
                     else if (error.response.status === 404) {
-                        this.$router.push({name: '404' });
+                        this.$router.push({ name: '404' });
                     }
                 });
             },

resources/js/views/Error.vue

@@ -1,8 +1,13 @@
 <template>
     <div>
         <modal v-model="ShowModal">
-            <div>
+            <div v-if="$route.name == '404'">
-                Resource not found, please <router-link :to="{ name: 'accounts' }" class="is-text has-text-white">refresh</router-link>
+                <p class="error-404"></p>
+                <p>Resource not found, please <router-link :to="{ name: 'accounts' }" class="is-text has-text-white">refresh</router-link></p>
+            </div>
+            <div v-else>
+                <p class="error-generic"></p>
+                <p>An error occured, please <router-link :to="{ name: 'accounts' }" class="is-text has-text-white">refresh</router-link></p>
             </div>
         </modal>
     </div>