✨ : add error layout

gaia-app · Apr 9, 2020 · 93ffff5 · 93ffff5
1 parent c6f151b
commit 93ffff5
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 41 deletions.
diff --git a/src/main/client/app/layouts/error-layout.vue b/src/main/client/app/layouts/error-layout.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="full_container">
+    <div class="center vertical_center full_height">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AppErrorLayout',
+  };
+</script>
diff --git a/src/main/client/app/layouts/index.js b/src/main/client/app/layouts/index.js
@@ -1 +1,2 @@
+export { default as AppErrorLayout } from './error-layout.vue';
 export { default as AppNoneLayout } from './none-layout.vue';
diff --git a/src/main/client/app/main.js b/src/main/client/app/main.js
@@ -4,7 +4,10 @@ import { Multiselect } from 'vue-multiselect';
 import fontawesomeConfig from '@/shared/config/fontawesome-config';
 import bootstrapVueConfig from '@/shared/config/bootstrap-vue-config';
 
-import { AppNoneLayout } from '@/layouts';
+import {
+  AppErrorLayout,
+  AppNoneLayout,
+} from '@/layouts';
 import App from '@/app.vue';
 import router from '@/router';
 import store from '@/shared/store';
@@ -14,6 +17,7 @@ bootstrapVueConfig.init();
 Vue.use(Multiselect);
 
 // layout definitions
+Vue.component('app-error-layout', AppErrorLayout);
 Vue.component('app-none-layout', AppNoneLayout);
 
 Vue.config.productionTip = false;

diff --git a/src/main/client/app/router.js b/src/main/client/app/router.js
@@ -27,11 +27,13 @@ const appRoutes = [
     path: '/not-found',
     name: 'page-not-found',
     component: AppPageNotFound,
+    meta: { layout: 'error' },
   },
   {
     path: '/forbidden',
     name: 'page-forbidden',
     component: AppPageForbidden,
+    meta: { layout: 'error' },
   },
 ];
 

diff --git a/src/main/client/app/shared/components/page-forbidden.vue b/src/main/client/app/shared/components/page-forbidden.vue
@@ -1,24 +1,22 @@
 <template>
-  <div class="center vertical_center full_height">
-    <div class="error_page">
-      <div class="center">
-        <img
-          alt="#"
-          class="img-responsive"
-          src="@/assets/images/no-entry.png"
-        >
-      </div>
-      <br>
-      <h3>STOP HERE !</h3>
-      <p>YOU'RE NOT ALLOWED TO SEE THIS PAGE !</p>
-      <div class="center">
-        <router-link
-          class="btn btn-success"
-          to="/"
-        >
-          Go To Home Page
-        </router-link>
-      </div>
+  <div class="error_page">
+    <div class="center">
+      <img
+        alt="#"
+        class="img-responsive"
+        src="@/assets/images/no-entry.png"
+      >
+    </div>
+    <br>
+    <h3>STOP HERE !</h3>
+    <p>YOU'RE NOT ALLOWED TO SEE THIS PAGE !</p>
+    <div class="center">
+      <router-link
+        class="btn btn-success"
+        to="/"
+      >
+        Go To Home Page
+      </router-link>
     </div>
   </div>
 </template>

diff --git a/src/main/client/app/shared/components/page-not-found.vue b/src/main/client/app/shared/components/page-not-found.vue
@@ -1,24 +1,22 @@
 <template>
-  <div class="center vertical_center full_height">
-    <div class="error_page">
-      <div class="center">
-        <img
-          alt="#"
-          class="img-responsive"
-          src="@/assets/images/crying-face.png"
-        >
-      </div>
-      <br>
-      <h3>PAGE NOT FOUND !</h3>
-      <p>YOU SEEM TO BE TRYING TO FIND YOUR WAY HOME</p>
-      <div class="center">
-        <router-link
-          class="btn btn-success"
-          to="/"
-        >
-          Go To Home Page
-        </router-link>
-      </div>
+  <div class="error_page">
+    <div class="center">
+      <img
+        alt="#"
+        class="img-responsive"
+        src="@/assets/images/crying-face.png"
+      >
+    </div>
+    <br>
+    <h3>PAGE NOT FOUND !</h3>
+    <p>YOU SEEM TO BE TRYING TO FIND YOUR WAY HOME</p>
+    <div class="center">
+      <router-link
+        class="btn btn-success"
+        to="/"
+      >
+        Go To Home Page
+      </router-link>
     </div>
   </div>
 </template>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as AppErrorLayout } from './error-layout.vue';
		export { default as AppNoneLayout } from './none-layout.vue';