Improve error page when a user attempts to access a route without the needed permissions

CHANGELOG.rst

@@ -45,6 +45,7 @@ Changed
 * [Dev] The undocumented field `check` on `DataCheckResult` was renamed to `data_check`
 * Frontend bundling migrated from Webpack to Vite
 * Get dashboard widgets and data checks from apps with new registration mechanism.
+* Better error page with redirect option to login page when user has no permission to access a route.
 
 Fixed
 ~~~~~

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,

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

@@ -5,9 +5,9 @@
   >
     <h1 class="text-h2">{{ $t(shortErrorMessageKey) }}</h1>
     <div>{{ $t(longErrorMessageKey) }}</div>
-    <v-btn color="secondary" :to="{ name: 'dashboard' }">
-      <v-icon left>mdi-home-outline</v-icon>
-      {{ $t("network_errors.back_to_start") }}
+    <v-btn color="secondary" :to="{ name: redirectRouteName }">
+      <v-icon left>{{ redirectButtonIcon }}</v-icon>
+      {{ $t(redirectButtonTextKey) }}
     </v-btn>
   </div>
 </template>
@@ -24,6 +24,18 @@ export default {
       type: String,
       required: true,
     },
+    redirectButtonTextKey: {
+      type: String,
+      required: true,
+    },
+    redirectRouteName: {
+      type: String,
+      required: true,
+    },
+    redirectButtonIcon: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>

aleksis/core/frontend/messages/en.json

@@ -77,7 +77,9 @@
     "person_is_dummy": "Your administrator account is not linked to any person. Therefore, a dummy person has been linked to your account.",
     "privacy_policy": "Privacy Policy",
     "user_not_linked_to_person": "Your user account is not linked to a person. This means you cannot access any school-related information. Please contact the managers of AlekSIS at your school.",
-    "no_permission": "You have no permission to view this page. Please login with an other account.",
+    "no_permission_message_long": "You have no permission to view this page. Please login with an other account.",
+    "no_permission_message_short": "No permission",
+    "no_permission_redirect_text": "Go to login",
     "logo": "Logo"
   },
   "celery_progress": {

aleksis/core/frontend/routes.js

@@ -1072,6 +1072,9 @@ routes.push({
   props: {
     shortErrorMessageKey: "network_errors.error_404",
     longErrorMessageKey: "network_errors.page_not_found",
+    redirectButtonTextKey: "network_errors.back_to_start",
+    redirectRouteName: "dashboard",
+    redirectButtonIcon: "mdi-home-outline",
   },
 });