Resolve "No redirect to login form on missing permissions in Vue app"

Closes #786 (closed)

aleksis/core/frontend/components/app/App.vue

@@ -86,19 +86,22 @@
 
           <router-view
             v-if="
-              !$route.meta.permission || checkPermission($route.meta.permission)
+              !$route.meta.permission || checkPermission($route.meta.permission) || $route.name === 'dashboard'
             "
           />
-          <message-box
-            type="error"
+          <error-page
             v-else-if="
               whoAmI &&
               !$apollo.queries.whoAmI.loading &&
               !checkPermission($route.meta.permission)
             "
+            short-error-message-key="base.no_permission_message_short"
+            long-error-message-key="base.no_permission_message_long"
+            redirect-button-text-key="base.no_permission_redirect_text"
+            redirect-route-name="core.account.login"
+            redirect-button-icon="mdi-login-variant"
           >
-            {{ $t("base.no_permission") }}
-          </message-box>
+          </error-page>
         </v-container>
       </v-main>
 
@@ -205,6 +208,7 @@ import CeleryProgressBottom from "../celery_progress/CeleryProgressBottom.vue";
 import Splash from "./Splash.vue";
 import SideNav from "./SideNav.vue";
 import SnackbarItem from "./SnackbarItem.vue";
+import ErrorPage from "./ErrorPage.vue";
 
 import gqlWhoAmI from "./whoAmI.graphql";
 import gqlMessages from "./messages.graphql";
@@ -263,6 +267,7 @@ export default {
   components: {
     AccountMenu,
     BroadcastChannelNotification,
+    ErrorPage,
     NotificationList,
     CeleryProgressBottom,
     Splash,