frontend: Create a view if no view was found to show a better error

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3bd70c009bc6ca9c5736aad7f89b0723b686648c..ccbc16f10830c03eb1ca87a4d3ea24a8a3dbd2a9 100644 (file)
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -4,6 +4,7 @@ import HomeView from '../views/HomeView.vue'
 import LoginView from "../views/LoginView.vue"
 import BuildersView from "../views/BuildersView.vue"
 import MirrorsView from "../views/MirrorsView.vue"
+import NotFoundView from "../views/NotFoundView.vue"
 
 const router = createRouter({
        history: createWebHistory(import.meta.env.BASE_URL),
@@ -34,6 +35,13 @@ const router = createRouter({
                        name: "mirrors",
                        component: MirrorsView,
                },
+
+               // 404 - Not Found
+               {
+                       path: "/:pathMatch(.*)*",
+                       name: "not-found",
+                       component: NotFoundView,
+               }
        ],
 })
 

diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
new file mode 100644 (file)
index 0000000..49cdd43
--- /dev/null
+++ b/frontend/src/views/NotFoundView.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+       import Container from "@/components/Container.vue"
+</script>
+
+<template>
+       <section class="hero is-fullheight-with-navbar is-dark">
+               <div class="hero-body">
+                       <Container>
+                               <p class="title">
+                                       {{ $t("Oops, we could not find what you are looking for...") }}
+                               </p>
+                       </Container>
+               </div>
+       </section>
+</template>