Add 404 page

- User will be redirected to 404 page when navigating to
  undefined routes

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I5d7bbcfdd279b6f6c993370e3adb39a516dbb1ba

4 files changed, 71 insertions, 44 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index c38b6a18..07eae3de 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -114,6 +114,7 @@
     "managePowerUsage": "Manage power usage",
     "networkSettings": "Network settings",
     "overview": "Overview",
+    "pageNotFound": "Page not found",
     "profileSettings": "Profile settings",
     "rebootBmc": "Reboot BMC",
     "sensors": "Sensors",
@@ -498,6 +499,9 @@
       "successSaveNetworkSettings": "Successfully saved network settings."
     }
   },
+  "pagePageNotFound": {
+    "description": "The requested resource could not be found."
+  },
   "pageRebootBmc": {
     "lastReboot": "Last BMC reboot",
     "rebootBmc": "Reboot BMC",
diff --git a/src/router/index.js b/src/router/index.js
index 4f66ae73..68340452 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import Firmware from '@/views/Configuration/Firmware';
 import Kvm from '@/views/Control/Kvm';
 import ManagePowerUsage from '@/views/Control/ManagePowerUsage';
 import NetworkSettings from '@/views/Configuration/NetworkSettings';
+import PageNotFound from '@/views/PageNotFound';
 import RebootBmc from '@/views/Control/RebootBmc';
 import ServerLed from '@/views/Control/ServerLed';
 import SerialOverLan from '@/views/Control/SerialOverLan';
@@ -34,6 +35,54 @@ Vue.use(VueRouter);
 // Example meta: {title: 'appPageTitle.overview'}
 const routes = [
   {
+    path: '/login',
+    component: LoginLayout,
+    children: [
+      {
+        path: '',
+        name: 'login',
+        component: Login,
+        meta: {
+          title: 'appPageTitle.login'
+        }
+      },
+      {
+        path: '/change-password',
+        name: 'change-password',
+        component: ChangePassword,
+        meta: {
+          title: 'appPageTitle.changePassword',
+          requiresAuth: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/console',
+    component: ConsoleLayout,
+    meta: {
+      requiresAuth: true
+    },
+    children: [
+      {
+        path: 'serial-over-lan-console',
+        name: 'serial-over-lan-console',
+        component: SerialOverLanConsole,
+        meta: {
+          title: 'appPageTitle.serialOverLan'
+        }
+      },
+      {
+        path: 'kvm',
+        name: 'kvm-console',
+        component: KvmConsole,
+        meta: {
+          title: 'appPageTitle.kvm'
+        }
+      }
+    ]
+  },
+  {
     path: '/',
     meta: {
       requiresAuth: true
@@ -191,53 +240,13 @@ const routes = [
         meta: {
           title: 'appPageTitle.unauthorized'
         }
-      }
-    ]
-  },
-  {
-    path: '/login',
-    component: LoginLayout,
-    children: [
-      {
-        path: '',
-        name: 'login',
-        component: Login,
-        meta: {
-          title: 'appPageTitle.login'
-        }
-      },
-      {
-        path: '/change-password',
-        name: 'change-password',
-        component: ChangePassword,
-        meta: {
-          title: 'appPageTitle.changePassword',
-          requiresAuth: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/console',
-    component: ConsoleLayout,
-    meta: {
-      requiresAuth: true
-    },
-    children: [
-      {
-        path: 'serial-over-lan-console',
-        name: 'serial-over-lan-console',
-        component: SerialOverLanConsole,
-        meta: {
-          title: 'appPageTitle.serialOverLan'
-        }
       },
       {
-        path: 'kvm',
-        name: 'kvm-console',
-        component: KvmConsole,
+        path: '*',
+        name: 'page-not-found',
+        component: PageNotFound,
         meta: {
-          title: 'appPageTitle.kvm'
+          title: 'appPageTitle.pageNotFound'
         }
       }
     ]
diff --git a/src/views/PageNotFound/PageNotFound.vue b/src/views/PageNotFound/PageNotFound.vue
new file mode 100644
index 00000000..be4b3c49
--- /dev/null
+++ b/src/views/PageNotFound/PageNotFound.vue
@@ -0,0 +1,12 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pagePageNotFound.description')" />
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+export default {
+  name: 'PageNotFound',
+  components: { PageTitle }
+};
+</script>
diff --git a/src/views/PageNotFound/index.js b/src/views/PageNotFound/index.js
new file mode 100644
index 00000000..ed1d519a
--- /dev/null
+++ b/src/views/PageNotFound/index.js
@@ -0,0 +1,2 @@
+import PageNotFound from './PageNotFound.vue';
+export default PageNotFound;