Adjust UI to permissions

webapp/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "bootstrap": "~5.3.3",
     "core-js": "^3.38.0",
+    "pinia": "^2.2.1",
     "vue": "^3.4.35",
     "vue-router": "^4.4.2"
   },

webapp/src/App.vue

@@ -2,7 +2,7 @@
   <header>
     <nav class="navbar navbar-expand-md navbar-dark bg-primary">
       <div class="container-fluid">
-        <router-link to="/service" class="navbar-brand">
+        <router-link :to="{ name: 'Dashboard' }" class="navbar-brand">
           <img
             src="/brand.png"
             alt="Logo"
@@ -23,9 +23,34 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto">
-            <li class="nav-item" v-if="profile">
-              <router-link :to="{ name: 'Service' }" class="nav-link">
-                Dienste
+            <li
+              class="nav-item"
+              v-if="
+                store.profile?.permissions.DistributionLists_View ||
+                store.profile?.permissions.DistributionLists_Admin
+              "
+            >
+              <router-link :to="{ name: 'DistributionLists' }" class="nav-link">
+                Verteilerlisten
+              </router-link>
+            </li>
+            <li
+              class="nav-item"
+              v-if="store.profile?.permissions.ServiceHistory_View"
+            >
+              <router-link :to="{ name: 'ServiceHistory' }" class="nav-link">
+                Diensthistorie
+              </router-link>
+            </li>
+            <li
+              class="nav-item"
+              v-if="
+                store.profile?.permissions.Permissions_View ||
+                store.profile?.permissions.Permissions_Admin
+              "
+            >
+              <router-link :to="{ name: 'Permissions' }" class="nav-link">
+                Berechtigungen
               </router-link>
             </li>
           </ul>
@@ -47,16 +72,16 @@
 </template>
 
 <script setup lang="ts">
-import type { ProfileResponse } from "@/services/profile"
 import ProfileNav from "@/components/ProfileNav.vue"
+import { useProfileStore } from "@/stores/profile"
 import korga from "@/services/profile"
-import { onMounted, ref } from "vue"
+import { onMounted } from "vue"
 
-const profile = ref<ProfileResponse | null>(null)
+const store = useProfileStore()
 
 onMounted(async () => {
   try {
-    profile.value = await korga.getProfile()
+    store.profile = await korga.getProfile()
   } catch (error) {
     console.log(error)
   }

webapp/src/components/ProfileNav.vue

@@ -1,12 +1,12 @@
 <template>
   <ul class="navbar-nav">
-    <li v-if="profile !== null" class="nav-item dropdown">
+    <li v-if="store.profile !== null" class="nav-item dropdown">
       <button
         class="btn btn-link nav-link dropdown-toggle"
         type="button"
         data-bs-toggle="dropdown"
       >
-        {{ profile.givenName }}
+        {{ store.profile.givenName }}
       </button>
       <ul class="dropdown-menu dropdown-menu-end">
         <li>
@@ -22,40 +22,25 @@
   </ul>
 </template>
 
-<script lang="ts">
-import type { ProfileResponse } from "@/services/profile"
-import { defineComponent, onMounted, ref } from "vue"
+<script setup lang="ts">
+import { useProfileStore } from "@/stores/profile"
 import korga from "@/services/profile"
 
-export default defineComponent({
-  setup() {
-    const profile = ref<ProfileResponse | null>(null)
+const store = useProfileStore()
 
-    onMounted(async () => {
-      try {
-        profile.value = await korga.getProfile()
-      } catch (error) {
-        profile.value = null
-      }
-    })
+async function login() {
+  try {
+    await korga.challengeLogin()
+  } catch (error) {
+    console.log(error)
+  }
+}
 
-    async function login() {
-      try {
-        await korga.challengeLogin()
-      } catch (error) {
-        profile.value = null
-      }
-    }
-
-    async function logout() {
-      try {
-        await korga.logout()
-      } catch (error) {
-        profile.value = null
-      }
-    }
-
-    return { login, logout, profile }
-  },
-})
+async function logout() {
+  try {
+    await korga.logout()
+  } catch (error) {
+    console.log(error)
+  }
+}
 </script>

webapp/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue"
+import { createPinia } from "pinia"
 import App from "./App.vue"
 import router from "./router"
 import "bootstrap"
 import "./custom_styles.scss"
-createApp(App).use(router).mount("#app")
+createApp(App).use(router).use(createPinia()).mount("#app")

webapp/src/router/index.ts → webapp/src/router.ts

@@ -4,17 +4,23 @@ import { createRouter, createWebHistory } from "vue-router"
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
-    redirect: "/service",
+    name: "Dashboard",
+    component: () => import("./views/DashboardView.vue"),
   },
   {
-    path: "/service",
-    name: "Service",
-    component: () => import("../views/ServiceList.vue"),
+    path: "/service-history",
+    name: "ServiceHistory",
+    component: () => import("./views/ServiceHistory.vue"),
   },
   {
     path: "/distribution-lists",
     name: "DistributionLists",
-    component: () => import("../views/DistributionLists.vue"),
+    component: () => import("./views/DistributionLists.vue"),
+  },
+  {
+    path: "/permissions",
+    name: "Permissions",
+    component: () => import("./views/PermissionsView.vue"),
   },
 ]
 

webapp/src/services/profile.ts

@@ -5,16 +5,18 @@ export interface ProfileResponse {
   givenName: string
   familyName: string
   emailAddress: string
+  permissions: {
+    Permissions_View: boolean
+    Permissions_Admin: boolean
+    DistributionLists_View: boolean
+    DistributionLists_Admin: boolean
+    ServiceHistory_View: boolean
+  }
 }
 
-let profile: ProfileResponse | null = null
 export default {
   async getProfile(): Promise<ProfileResponse | null> {
-    if (profile != null) {
-      return profile
-    }
-    profile = await client.get("/api/profile")
-    return profile
+    return await client.get("/api/profile")
   },
 
   async challengeLogin() {
@@ -23,6 +25,5 @@ export default {
 
   async logout() {
     await client.getResponse("/api/logout")
-    profile = null
   },
 }

webapp/src/stores/profile.ts

@@ -0,0 +1,8 @@
+import type { ProfileResponse } from "@/services/profile"
+import { defineStore } from "pinia"
+import { ref } from "vue"
+
+export const useProfileStore = defineStore("profile", () => {
+  const profile = ref<ProfileResponse | null>(null)
+  return { profile }
+})

webapp/src/views/DashboardView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="container">
+    <h1>Korga</h1>
+
+    <div
+      class="card"
+      v-if="
+        store.profile?.permissions.DistributionLists_View ||
+        store.profile?.permissions.DistributionLists_Admin
+      "
+    >
+      <div class="card-body">
+        <h5 class="card-title">Verteilerlisten</h5>
+        <p class="card-text">
+          Mit Verteilerlisten kannst du Einzelpersonen, Gruppen oder alle
+          Personen eines Status per E-Mail erreichen. Praktisch für Rundmails,
+          gemeinsam genutzte Accounts und mehr.
+        </p>
+        <router-link
+          :to="{ name: 'DistributionLists' }"
+          class="btn btn-primary"
+        >
+          Verteilerlisten ansehen
+        </router-link>
+      </div>
+    </div>
+
+    <div class="card" v-if="store.profile?.permissions.ServiceHistory_View">
+      <div class="card-body">
+        <h5 class="card-title">Diensthistorie</h5>
+        <p class="card-text">
+          Die Diensthistorie zeigt dir, wer im letzten Jahr wie oft für welchen
+          Dienst eingeteilt war. Das hilft dir bei der Dienstplanung, um Dienste
+          gleichmäßig zu vergeben.
+        </p>
+        <router-link :to="{ name: 'ServiceHistory' }" class="btn btn-primary">
+          Diensthistorie ansehen
+        </router-link>
+      </div>
+    </div>
+
+    <div
+      class="card"
+      v-if="
+        store.profile?.permissions.Permissions_View ||
+        store.profile?.permissions.Permissions_Admin
+      "
+    >
+      <div class="card-body">
+        <h5 class="card-title">Berechtigungen</h5>
+        <p class="card-text">
+          Mit Berechtigungen kannst du festlegen, wer welche Daten in Korga
+          sehen und verändern darf. Das ist wichtig um sensible Daten zu
+          schützen.
+        </p>
+        <router-link :to="{ name: 'Permissions' }" class="btn btn-primary">
+          Berechtigungen ansehen
+        </router-link>
+      </div>
+    </div>
+
+    <button
+      v-if="store.profile === null"
+      class="btn btn-primary"
+      @click.prevent="login"
+    >
+      Mit ChurchTools Anmelden
+    </button>
+    <div
+      v-else-if="
+        !Object.values(store.profile.permissions).some((obj) => obj === true)
+      "
+    >
+      Ganz schön leer hier, oder? Das liegt daran, dass du noch keine
+      Berechtigungen hast. Bitte wende dich an den Administrator, um Zugriff zu
+      erhalten.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useProfileStore } from "@/stores/profile"
+import korga from "@/services/profile"
+
+async function login() {
+  try {
+    await korga.challengeLogin()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const store = useProfileStore()
+</script>

webapp/src/views/DistributionLists.vue

@@ -1,7 +1,7 @@
 <template>
   <LoadingSpinner v-if="!loaded" :state="{ error }" />
   <div v-else class="container page-loaded-container">
-    <h1>E-Mail-Verteiler</h1>
+    <h1>Verteilerlisten</h1>
     <div class="container">
       <div
         v-for="dl in distributionLists"