From 1f312186399b4f5e2a663fcdb6db2ecb40a6604f Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Mon, 27 Sep 2021 20:53:30 +0530
Subject: [PATCH] Add a 404 page to the admin UI.

---
 frontend/src/assets/style.scss |  4 ++++
 frontend/src/router/index.js   | 14 ++++++++++++++
 frontend/src/views/404.vue     | 13 +++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 frontend/src/views/404.vue

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index bb075ac5..d3556710 100644
--- a/frontend/src/assets/style.scss
+++ b/frontend/src/assets/style.scss
@@ -520,6 +520,10 @@ body.is-noscroll {
   }
 }
 
+.page-404 h1 {
+  font-size: 100px;
+}
+
 /* Dashboard */
 section.dashboard {
   .title {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 1896773e..5fa106fb 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -5,6 +5,12 @@ Vue.use(VueRouter);
 
 // The meta.group param is used in App.vue to expand menu group by name.
 const routes = [
+  {
+    path: '/404',
+    name: '404_page',
+    meta: { title: '404' },
+    component: () => import(/* webpackChunkName: "main" */ '../views/404.vue'),
+  },
   {
     path: '/',
     name: 'dashboard',
@@ -116,6 +122,14 @@ const router = new VueRouter({
   },
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.matched.length === 0) {
+    next('/404');
+  } else {
+    next();
+  }
+});
+
 router.afterEach((to) => {
   Vue.nextTick(() => {
     document.title = `${to.meta.title} / listmonk`;
diff --git a/frontend/src/views/404.vue b/frontend/src/views/404.vue
new file mode 100644
index 00000000..f2bf5ae3
--- /dev/null
+++ b/frontend/src/views/404.vue
@@ -0,0 +1,13 @@
+<template>
+  <section class="page-404">
+    <h1 class="title">404</h1>
+  </section>
+</template>
+
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+});
+</script>