From 7a6dccf6672dd9d9beed5365cf851fb33a9efcac Mon Sep 17 00:00:00 2001
From: Laurent <58115082+naaturel@users.noreply.github.com>
Date: Sat, 8 Mar 2025 22:32:50 +0100
Subject: [PATCH] Handle undefined routes

---
 src/components/TextBlock.vue |  6 +++---
 src/router/index.ts          | 32 ++++++--------------------------
 src/views/ErrorView.vue      | 14 +++++++++++---
 3 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/components/TextBlock.vue b/src/components/TextBlock.vue
index 0643459..f753a24 100644
--- a/src/components/TextBlock.vue
+++ b/src/components/TextBlock.vue
@@ -13,12 +13,11 @@
 .text-block {
   display: flex;
   flex-direction: column;
+
   justify-content: center;
   align-items: center;
-}
+  /*justify-content: start;*/
 
-.text-block {
-  justify-content: start;
   word-break: break-word;
   height: fit-content;
 
@@ -27,6 +26,7 @@
   background: rgb(239, 239, 239);
 }
 
+
 @media screen and (max-width: 1501px) {
   .text-block {
     padding: 5px 15px 5px 15px;
diff --git a/src/router/index.ts b/src/router/index.ts
index 14650c7..d54cf5c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,38 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import AboutView from '../views/AboutView.vue'
-import ErrorView from '../views/ErrorView.vue'
 import CreateView from "../views/CreateView.vue";
 import JoinView from "../views/JoinView.vue";
+import ErrorView from '../views/ErrorView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView,
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: AboutView,
-    },
-    {
-      path: '/error',
-      name: 'error',
-      component: ErrorView,
-    },
-    {
-      path: '/create',
-      name: 'create',
-      component: CreateView,
-    },
-    {
-      path: '/join',
-      name: 'join',
-      component: JoinView,
-    }
+    { path: '/', name: 'home', component: HomeView},
+    { path: '/about', name: 'about', component: AboutView},
+    { path: '/create', name: 'create', component: CreateView},
+    { path: '/join', name: 'join', component: JoinView},
+    { path: '/:pathMatch(.*)*', component: ErrorView }
   ]
 })
 
diff --git a/src/views/ErrorView.vue b/src/views/ErrorView.vue
index 1373306..12c7dd9 100644
--- a/src/views/ErrorView.vue
+++ b/src/views/ErrorView.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
 
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-
-  <h1>Oopsie</h1>
-  <p>Something went wrong</p>
+  <TextBlock>
+    <h1>Oopsie</h1>
+    <p>Something went wrong</p>
+  </TextBlock>
 
 </template>
 
 <style scoped>
 
+.text-block {
+  border-left: solid 4px red;
+  width: 35%;
+  height: 35%;
+}
+
 </style>