From d0da635fe5636406f211653a9a3006247a7e389b Mon Sep 17 00:00:00 2001
From: Max <m.giller.dev@gmail.com>
Date: Sun, 3 Jan 2021 20:50:52 +0100
Subject: [PATCH] Added 404 page

---
 src/components/layout/LayoutMinimal.vue | 19 ++++++++++++++++---
 src/router/index.js                     |  6 ++++++
 src/views/NotFound.vue                  | 17 +++++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/views/NotFound.vue

diff --git a/src/components/layout/LayoutMinimal.vue b/src/components/layout/LayoutMinimal.vue
index a0387b3..9a400bc 100644
--- a/src/components/layout/LayoutMinimal.vue
+++ b/src/components/layout/LayoutMinimal.vue
@@ -1,13 +1,18 @@
 <template>
-  <div>
+  <main>
     <BaseLogo id="logo" size="medium" center class="space-top" />
-    <BaseContainer :width="width" center class="space-bottom">
+    <BaseContainer
+      :width="width"
+      center
+      class="space-bottom"
+      :class="{ 'center-content': center }"
+    >
       <BaseTitle v-if="title" center size="huge" class="centered">
         {{ title }}
       </BaseTitle>
       <slot />
     </BaseContainer>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -30,6 +35,11 @@ export default {
     title: {
       default: "",
       type: String
+    },
+    center: {
+      default: false,
+      required: false,
+      type: Boolean
     }
   }
 };
@@ -41,4 +51,7 @@ export default {
 
 .space-bottom
   margin-bottom: 5rem
+
+.center-content
+  text-align: center
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 6794826..7ad8dd3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import store from "../store";
 import Login from "../views/Login.vue";
+import NotFound from "../views/NotFound.vue";
 import Home from "../views/Home.vue";
 import History from "../views/History.vue";
 
@@ -42,6 +43,11 @@ const routes = [
       store.dispatch("logout");
       next("/");
     }
+  },
+  {
+    path: "*",
+    name: "NotFound",
+    component: NotFound
   }
 ];
 
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..00ea51a
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,17 @@
+<template>
+  <LayoutMinimal center title="Couldn't find what you were looking for :(">
+    404
+  </LayoutMinimal>
+</template>
+
+<script>
+// @ is an alias to /src
+import LayoutMinimal from "@/components/layout/LayoutMinimal";
+
+export default {
+  name: "NotFound",
+  components: {
+    LayoutMinimal
+  }
+};
+</script>