Generalize error page

aleksis/core/frontend/components/app/Error404.vue → aleksis/core/frontend/components/app/ErrorPage.vue

@@ -3,8 +3,8 @@
     class="d-flex justify-center align-center flex-column text-center"
     id="wrapper"
   >
-    <h1 class="text-h2">{{ $t("network_errors.error_404") }}</h1>
-    <div>{{ $t("network_errors.page_not_found") }}</div>
+    <h1 class="text-h2">{{ $t(shortErrorMessageKey) }}</h1>
+    <div>{{ $t(longErrorMessageKey) }}</div>
     <v-btn color="secondary" :to="{ name: 'dashboard' }">
       {{ $t("network_errors.take_me_back") }}
     </v-btn>
@@ -13,7 +13,11 @@
 
 <script>
 export default {
-  name: "Error404",
+  name: "ErrorPage",
+  props: {
+    shortErrorMessageKey: String,
+    longErrorMessageKey: String,
+  }
 };
 </script>
 

aleksis/core/frontend/plugins/aleksis.js

@@ -72,6 +72,7 @@ AleksisVue.install = function (Vue) {
     Vue.component("ButtonMenu", () =>
       import("../components/generic/ButtonMenu.vue")
     );
+    Vue.component("ErrorPage", () => import("../components/app/ErrorPage.vue"))
   };
 
   /**

aleksis/core/frontend/routes.js

@@ -792,8 +792,9 @@ for (const [appName, appRoutes] of Object.entries(appObjects)) {
 // Fallback route defined last to ensure 404 view works
 routes.push({
   path: "/*",
-  component: () => import("./components/app/Error404.vue"),
+  component: () => import("./components/app/ErrorPage.vue"),
   name: "core.error404",
+  props: { shortErrorMessageKey: "network_errors.error_404", longErrorMessageKey: "network_errors.page_not_found" },
 });
 
 export default routes;