Merge branch 'master' into...

Merge branch 'master' into '856-language-select-uses-english-as-default-language-and-not-browser-language'

# Conflicts:
#   CHANGELOG.rst

CHANGELOG.rst

@@ -9,10 +9,20 @@ and this project adheres to `Semantic Versioning`_.
 Unreleased
 ----------
 
+Changes
+~~~~~~~
+
+* The frontend is now able to display headings in the main toolbar.
+
 Fixed
 ~~~~~
 
+* Default translations from vuetify were not loaded.
 * Browser locale was not the default locale in the entire frontend.
+* In some cases, some items in the sidenav menu were not shown due to its height being higher than the visible page area.
+* The search bar in the sidenav menu is shown even though the user has no permission to see it.
+* Add permission check to accept invitation menu point in order to hide it when this feature is disabled.
+* Metrics endpoint for Prometheus was at the wrong URL.
 
 `3.0`_ - 2022-05-11
 -------------------

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

@@ -25,7 +25,7 @@
           class="white--text text-decoration-none"
           @click="$router.push({ name: 'dashboard' })"
         >
-          {{ systemProperties.sitePreferences.generalTitle }}
+          {{ $root.toolbarTitle }}
         </v-toolbar-title>
 
         <v-progress-linear

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

 <template>
-  <v-navigation-drawer app :value="value" @input="$emit('input', $event)">
+  <v-navigation-drawer app :value="value" height="100dvh" @input="$emit('input', $event)">
     <v-list nav dense shaped>
       <v-list-item class="logo">
         <a
@@ -10,7 +10,7 @@
           <brand-logo :site-preferences="systemProperties.sitePreferences" />
         </a>
       </v-list-item>
-      <v-list-item class="search">
+      <v-list-item v-if="checkPermission('core.search_rule')" class="search">
         <sidenav-search />
       </v-list-item>
       <v-list-item-group :value="$route.name" v-if="sideNavMenu">
@@ -95,6 +95,8 @@ import BrandLogo from "./BrandLogo.vue";
 import LanguageForm from "./LanguageForm.vue";
 import SidenavSearch from "./SidenavSearch.vue";
 
+import permissionsMixin from "../../mixins/permissions.js";
+
 export default {
   name: "SideNav",
   components: {
@@ -107,6 +109,10 @@ export default {
     systemProperties: { type: Object, required: true },
     value: { type: Boolean, required: true },
   },
+  mixins: [permissionsMixin],
+  mounted() {
+    this.fetchPermissions(["core.search_rule"]);
+  },
 };
 </script>
 

aleksis/core/frontend/components/app/permissions.graphql

+query gqlPermissions($permissions: [String]!) {
+  whoAmI {
+    permissions: globalPermissionsByName(permissions: $permissions) {
+      name
+      result
+    }
+  }
+}

aleksis/core/frontend/components/app/whoAmI.graphql

-query ($permissions: [String]!) {
+query whoAmI {
   whoAmI {
     username
     isAuthenticated
@@ -12,9 +12,5 @@ query ($permissions: [String]!) {
       avatarUrl
       isDummy
     }
-    permissions: globalPermissionsByName(permissions: $permissions) {
-      name
-      result
-    }
   }
 }

aleksis/core/frontend/components/authorized_oauth_applications/AuthorizedApplications.vue

 <template>
   <div>
-    <h1 class="mb-4">{{ $t("oauth.authorized_application.title") }}</h1>
     <div v-if="$apollo.queries.accessTokens.loading">
       <v-skeleton-loader type="card"></v-skeleton-loader>
     </div>

aleksis/core/frontend/components/two_factor/TwoFactor.vue

 <template>
   <div>
-    <h1 class="mb-4">{{ $t("accounts.two_factor.title") }}</h1>
     <div v-if="$apollo.queries.twoFactor.loading">
       <v-skeleton-loader type="card,card"></v-skeleton-loader>
     </div>

aleksis/core/frontend/index.js

@@ -44,6 +44,7 @@ const vuetify = new Vuetify({
     current: Vue.$cookies.get("django_language")
       ? Vue.$cookies.get("django_language")
       : "en",
+    t: (key, ...params) => i18n.t(key, params),
   },
   ...vuetifyOpts,
 });
@@ -68,6 +69,8 @@ const app = new Vue({
     backgroundActive: true,
     invalidation: false,
     snackbarItems: [],
+    toolbarTitle: "AlekSIS®",
+    permissions: [],
   }),
   computed: {
     matchedComponents() {
@@ -87,5 +90,6 @@ const app = new Vue({
 });
 
 // Late setup for some plugins handed off to out ALeksisVue plugin
+app.$loadVuetifyMessages();
 app.$loadAppMessages();
 app.$setupNavigationGuards();

aleksis/core/frontend/mixins/menus.js

 import gqlCustomMenu from "../components/app/customMenu.graphql";
 
+import permissionsMixin from "./permissions.js";
+
 /**
  * Vue mixin containing menu generation code.
  *
  * Only used by main App component, but factored out for readability.
  */
 const menusMixin = {
+  mixins: [permissionsMixin],
   data() {
     return {
       footerMenu: null,
-      permissionNames: [],
       sideNavMenu: null,
       accountMenu: null,
     };
@@ -35,8 +37,7 @@ const menusMixin = {
         }
       }
 
-      this.permissionNames = permArray;
-      this.$apollo.queries.whoAmI.refetch();
+      this.fetchPermissions(permArray);
     },
     buildMenu(routes, menuKey) {
       let menu = {};
@@ -99,14 +100,6 @@ const menusMixin = {
 
       return Object.values(menu);
     },
-    checkPermission(permissionName) {
-      return (
-        this.whoAmI &&
-        this.whoAmI.permissions &&
-        this.whoAmI.permissions.find((p) => p.name === permissionName) &&
-        this.whoAmI.permissions.find((p) => p.name === permissionName).result
-      );
-    },
     checkValidators(validators) {
       for (const validator of validators) {
         if (!validator(this.whoAmI)) {
@@ -118,14 +111,9 @@ const menusMixin = {
     buildMenus() {
       this.accountMenu = this.buildMenu(
         this.$router.getRoutes(),
-        "inAccountMenu",
-        this.whoAmI ? this.whoAmI.permissions : []
-      );
-      this.sideNavMenu = this.buildMenu(
-        this.$router.getRoutes(),
-        "inMenu",
-        this.whoAmI ? this.whoAmI.permissions : []
+        "inAccountMenu"
       );
+      this.sideNavMenu = this.buildMenu(this.$router.getRoutes(), "inMenu");
     },
   },
   apollo: {

aleksis/core/frontend/mixins/permissions.js

+import gqlPermissions from "../components/app/permissions.graphql";
+
+/**
+ * Vue mixin containing permission checking code.
+ */
+
+const permissionsMixin = {
+  apollo: {
+    permissions: {
+      query: gqlPermissions,
+      update(data) {
+        this.$root.permissions = data.whoAmI.permissions;
+      },
+      variables: {
+        permissions: [],
+      },
+    },
+  },
+  methods: {
+    checkPermission(permissionName) {
+      return (
+        this.$root.permissions &&
+        this.$root.permissions.find((p) => p.name === permissionName) &&
+        this.$root.permissions.find((p) => p.name === permissionName).result
+      );
+    },
+    fetchPermissions(permissionNames) {
+      this.$apollo.queries.permissions.fetchMore({
+        variables: {
+          permissions: permissionNames,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const oldPermissions = previousResult.whoAmI.permissions;
+          const newPermissions = fetchMoreResult.whoAmI.permissions;
+
+          const keepPermissions = oldPermissions.filter(
+            (oldPermission) =>
+              !newPermissions.find(
+                (newPermission) => newPermission.name === oldPermission.name
+              )
+          );
+
+          return {
+            whoAmI: {
+              __typename: previousResult.whoAmI.__typename,
+              permissions: [...keepPermissions, ...newPermissions],
+            },
+          };
+        },
+      });
+    },
+  },
+};
+
+export default permissionsMixin;

aleksis/core/frontend/plugins/aleksis.js

@@ -5,6 +5,7 @@
 // aleksisAppImporter is a virtual module defined in Vite config
 import { appMessages } from "aleksisAppImporter";
 import aleksisMixin from "../mixins/aleksis.js";
+import * as langs from "@/vuetify/src/locale";
 
 console.debug("Defining AleksisVue plugin");
 const AleksisVue = {};
@@ -104,6 +105,33 @@ AleksisVue.install = function (Vue) {
     document.title = newTitle;
   };
 
+  /**
+   * Set the toolbar title visible on the page.
+   *
+   * This will automatically add the base title discovered at app loading time.
+   *
+   * @param {string} title Specific title to set, or null.
+   * @param {Object} route Route to discover title from, or null.
+   */
+  Vue.prototype.$setToolBarTitle = function (title, route) {
+    let newTitle;
+
+    if (title) {
+      newTitle = title;
+    } else {
+      if (!route) {
+        route = this.$route;
+      }
+      if (route.meta.toolbarTitle) {
+        newTitle = this.$t(route.meta.toolbarTitle);
+      }
+    }
+
+    newTitle = newTitle || Vue.$pageBaseTitle;
+    console.debug(`Setting toolbar title: ${newTitle}`);
+    this.$root.toolbarTitle = newTitle;
+  };
+
   /**
    * Load i18n messages from all known AlekSIS apps.
    */
@@ -115,6 +143,15 @@ AleksisVue.install = function (Vue) {
     }
   };
 
+  /**
+   * Load vuetifys built-in translations
+   */
+  Vue.prototype.$loadVuetifyMessages = function () {
+    for (const [locale, messages] of Object.entries(langs)) {
+      this.$i18n.mergeLocaleMessage(locale, { $vuetify: messages });
+    }
+  };
+
   /**
    * Invalidate state and force reload from server.
    *
@@ -150,6 +187,7 @@ AleksisVue.install = function (Vue) {
     this.$router.afterEach((to, from, next) => {
       console.debug("Setting new page title due to route change");
       vm.$setPageTitle(null, to);
+      vm.$setToolBarTitle(null, to);
     });
 
     // eslint-disable-next-line no-unused-vars

aleksis/core/frontend/routes.js

@@ -54,6 +54,7 @@ const routes = [
       icon: "mdi-key-outline",
       titleKey: "accounts.invitation.accept_invitation.menu_title",
       validators: [notLoggedInValidator],
+      permission: "core.invite_enabled",
     },
   },
   {
@@ -734,6 +735,7 @@ const routes = [
     meta: {
       inAccountMenu: true,
       titleKey: "accounts.two_factor.menu_title",
+      toolbarTitle: "accounts.two_factor.title",
       icon: "mdi-two-factor-authentication",
       permission: "core.manage_2fa_rule",
     },
@@ -928,6 +930,7 @@ const routes = [
     meta: {
       inAccountMenu: true,
       titleKey: "oauth.authorized_application.menu_title",
+      toolbarTitle: "oauth.authorized_application.title",
       icon: "mdi-gesture-tap-hold",
       permission: "core.manage_authorized_tokens_rule",
     },
@@ -956,14 +959,6 @@ const routes = [
       invalidate: "leave",
     },
   },
-  {
-    path: "/invitations/code/enter",
-    component: () => import("./components/LegacyBaseTemplate.vue"),
-    props: {
-      byTheGreatnessOfTheAlmightyAleksolotlISwearIAmWorthyOfUsingTheLegacyBaseTemplate: true,
-    },
-    name: "core.enter_invitation_code",
-  },
   {
     path: "/invitations/code/generate",
     component: () => import("./components/LegacyBaseTemplate.vue"),

aleksis/core/settings.py

@@ -576,7 +576,7 @@ YARN_INSTALLED_APPS = [
     "@fontsource/roboto@^4.5.5",
     "jquery@^3.6.0",
     "@materializecss/materialize@~1.0.0",
-    "material-design-icons-iconfont@^6.6.0",
+    "material-design-icons-iconfont@^6.7.0",
     "select2-materialize@^0.1.8",
     "paper-css@^0.4.1",
     "jquery-sortablejs@^1.0.1",
@@ -585,7 +585,7 @@ YARN_INSTALLED_APPS = [
     "luxon@^2.3.2",
     "@iconify/iconify@^2.2.1",
     "@iconify/json@^2.1.30",
-    "@mdi/font@^6.9.96",
+    "@mdi/font@^7.2.96",
     "apollo-boost@^0.4.9",
     "apollo-link-retry@^2.2.16",
     "apollo3-cache-persist@^0.14.1",

aleksis/core/urls.py

@@ -42,11 +42,11 @@ urlpatterns = [
     ),
     path("oauth/", include("oauth2_provider.urls", namespace="oauth2_provider")),
     path("system_status/", views.SystemStatusAPIView.as_view(), name="system_status_api"),
+    path("", include("django_prometheus.urls")),
     path(
         "django/",
         include(
             [
-                path("", include("django_prometheus.urls")),
                 path("account/login/", views.LoginView.as_view(), name="login"),
                 path(
                     "accounts/signup/", views.AccountRegisterView.as_view(), name="account_signup"