From 877b880ca5f6643f4aab913a3f92d027e30ccd28 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Wed, 6 Mar 2024 20:04:48 +0100
Subject: [PATCH] feat(ui): add 'Not found' catch all
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 ui/web/src/App.vue                        |  5 ++++-
 ui/web/src/router/index.ts                |  8 ++++++++
 ui/web/src/views/ChargingStationsView.vue |  2 +-
 ui/web/src/views/NotFoundView.vue         | 15 +++++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 ui/web/src/views/NotFoundView.vue

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 471a240a..f8fe8b24 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -1,6 +1,9 @@
 <template>
   <router-view />
-  <Container v-show="$route.path !== '/'" id="action-container">
+  <Container
+    v-show="$route.name !== 'charging-stations' && $route.name !== 'not-found'"
+    id="action-container"
+  >
     <router-view name="action" />
   </Container>
 </template>
diff --git a/ui/web/src/router/index.ts b/ui/web/src/router/index.ts
index bdb22503..23cca6a4 100644
--- a/ui/web/src/router/index.ts
+++ b/ui/web/src/router/index.ts
@@ -3,6 +3,7 @@ import ChargingStationsView from '@/views/ChargingStationsView.vue'
 import StartTransaction from '@/components/actions/StartTransaction.vue'
 import AddChargingStations from '@/components/actions/AddChargingStations.vue'
 import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
+import NotFoundView from '@/views/NotFoundView.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -39,6 +40,13 @@ export const router = createRouter({
         action: StartTransaction
       },
       props: { default: false, action: true }
+    },
+    {
+      name: 'not-found',
+      path: '/:pathMatch(.*)*',
+      components: {
+        default: NotFoundView
+      }
     }
   ]
 })
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 213832c1..c250b9a6 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -20,7 +20,7 @@
                   () => {
                     setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
                     clearToggleButtons()
-                    $router.currentRoute.value.name !== 'charging-stations' &&
+                    $route.name !== 'charging-stations' &&
                       $router.push({ name: 'charging-stations' })
                   },
                   { once: true }
diff --git a/ui/web/src/views/NotFoundView.vue b/ui/web/src/views/NotFoundView.vue
new file mode 100644
index 00000000..a87072aa
--- /dev/null
+++ b/ui/web/src/views/NotFoundView.vue
@@ -0,0 +1,15 @@
+<template><Container id="not-found">404 - Not found</Container></template>
+
+<script setup lang="ts">
+import Container from '@/components/Container.vue'
+</script>
+
+<style>
+#not-found {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  font-weight: bold;
+}
+</style>
-- 
2.34.1