display user permissions

src/views/account/Permission.vue

@@ -0,0 +1,31 @@
+<template>
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Meine Berechtigungen</h1>
+      </div>
+    </template>
+    <template #main>
+      <Permission :permissions="permissions" :disableEdit="true" />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import Permission from "@/components/admin/Permission.vue";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["permissions"]),
+  },
+});
+</script>

src/views/account/View.vue

@@ -1,8 +1,8 @@
 <template>
   <SidebarLayout>
     <template #sidebar>
-      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="true">
-        <template #topList>
+      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="isOwner">
+        <template v-if="isOwner" #topList>
           <RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
         </template>
         <template #list>
@@ -12,6 +12,11 @@
             :link="{ name: 'account-logindata' }"
             :active="activeRouteName == 'account-logindata'"
           />
+          <RoutingLink
+            title="Meine Berechtigungen"
+            :link="{ name: 'account-permission' }"
+            :active="activeRouteName == 'account-permission'"
+          />
         </template>
       </SidebarTemplate>
     </template>
@@ -28,11 +33,13 @@ import SidebarLayout from "@/layouts/Sidebar.vue";
 import SidebarTemplate from "@/templates/Sidebar.vue";
 import RoutingLink from "@/components/admin/RoutingLink.vue";
 import { RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   computed: {
+    ...mapState(useAbilityStore, ["isOwner"]),
     activeRouteName() {
       return this.$route.name;
     },