Add access control checks to dashboard

dashboard/.env

@@ -1,4 +1,9 @@
+VITE_OIDC_ENABLED=\$VITE_OIDC_ENABLED
 VITE_OIDC_AUTHORITY=\$VITE_OIDC_AUTHORITY
 VITE_OIDC_CLIENT_ID=\$VITE_OIDC_CLIENT_ID
 VITE_OIDC_REDIRECT_URI=\$VITE_OIDC_REDIRECT_URI
 VITE_OIDC_EXTRA_SCOPES=\$VITE_OIDC_EXTRA_SCOPES
+VITE_OIDC_ABAC_ENABLED=\$VITE_OIDC_ABAC_ENABLED
+VITE_OIDC_ABAC_CLAIM_PATH=\$VITE_OIDC_ABAC_CLAIM_PATH
+VITE_OIDC_ABAC_CLAIM_PATH_SEPARATOR=\$VITE_OIDC_ABAC_CLAIM_PATH_SEPARATOR
+VITE_OIDC_ABAC_CLAIM_VALUE_PREFIX=\$VITE_OIDC_ABAC_CLAIM_VALUE_PREFIX

dashboard/.env.development

@@ -1,4 +1,9 @@
-VITE_OIDC_AUTHORITY=http://keycloak:7470/realms/enduro
+VITE_OIDC_ENABLED=true
+VITE_OIDC_AUTHORITY=http://keycloak:7470/realms/artefactual
 VITE_OIDC_CLIENT_ID=enduro
 VITE_OIDC_REDIRECT_URI=http://localhost:8080/user/signin-callback
 VITE_OIDC_EXTRA_SCOPES=enduro
+VITE_OIDC_ABAC_ENABLED=true
+VITE_OIDC_ABAC_CLAIM_PATH=enduro
+VITE_OIDC_ABAC_CLAIM_PATH_SEPARATOR=
+VITE_OIDC_ABAC_CLAIM_VALUE_PREFIX=

dashboard/package.json

@@ -19,6 +19,7 @@
     "@pinia/plugin-debounce": "^1.0.1",
     "@types/humanize-duration": "^3.27.4",
     "@vueuse/core": "^10.7.0",
+    "buffer": "^6.0.3",
     "humanize-duration": "^3.31.0",
     "moment": "^2.30.1",
     "oidc-client-ts": "^3.0.1",

dashboard/src/App.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { watch } from "vue";
 import { client } from "@/client";
-import { useLayoutStore } from "./stores/layout";
+import { useAuthStore } from "@/stores/auth";
 import Header from "@/components/Header.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import { DialogWrapper } from "vue3-promise-dialog";
 
-const layoutStore = useLayoutStore();
+const authStore = useAuthStore();
 
 // Connect to the package monitor API when the user is loaded successfully.
 watch(
-  () => layoutStore.isUserValid,
+  () => authStore.isUserValid,
   (valid) => {
     if (valid) {
       client.package.packageMonitorRequest().then(() => {
@@ -25,19 +25,19 @@ watch(
   <div class="d-flex flex-column min-vh-100">
     <div
       class="visually-hidden-focusable p-3 border-bottom"
-      v-if="layoutStore.isUserValid"
+      v-if="authStore.isUserValid"
     >
       <a class="btn btn-sm btn-outline-primary" href="#main"
         >Skip to main content</a
       >
     </div>
-    <Header v-if="layoutStore.isUserValid" />
+    <Header v-if="authStore.isUserValid" />
     <div class="flex-grow-1 d-flex">
-      <Sidebar v-if="layoutStore.isUserValid" />
+      <Sidebar v-if="authStore.isUserValid" />
       <main class="flex-grow-1 d-flex px-2 pt-3" id="main">
         <router-view></router-view>
       </main>
     </div>
-    <DialogWrapper v-if="layoutStore.isUserValid" />
+    <DialogWrapper v-if="authStore.isUserValid" />
   </div>
 </template>

dashboard/src/client.ts

@@ -1,8 +1,7 @@
-import auth from "./auth";
 import * as api from "./openapi-generator";
 import * as runtime from "./openapi-generator/runtime";
+import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "./stores/package";
-import { useLayoutStore } from "@/stores/layout";
 
 export interface Client {
   package: api.PackageApi;
@@ -61,13 +60,12 @@ function connectPackageMonitor() {
 function createClient(): Client {
   const config: api.Configuration = new api.Configuration({
     basePath: getPath(),
-    accessToken: () =>
-      auth.getUser().then((user) => (user ? user.access_token : "")),
+    accessToken: () => useAuthStore().getUserAccessToken,
     middleware: [
       {
         post(context) {
           if (context.response.status == 401) {
-            useLayoutStore().removeUser();
+            useAuthStore().removeUser();
             return Promise.resolve();
           }
           return Promise.resolve(context.response);

dashboard/src/components/Breadcrumb.vue

@@ -5,6 +5,7 @@ const layoutStore = useLayoutStore();
 </script>
 
 <template>
+  <span v-if="layoutStore.breadcrumb.length" class="text-muted me-2">/</span>
   <nav aria-label="Breadcrumb" class="d-inline-block">
     <ol class="breadcrumb mb-0">
       <li

dashboard/src/components/Header.vue

@@ -61,7 +61,6 @@ onMounted(() => {
       </router-link>
 
       <div class="flex-grow-1 d-none d-md-block">
-        <span class="text-muted me-2">/</span>
         <Breadcrumb />
       </div>
     </nav>

dashboard/src/components/PackageDetailsCard.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { storageServiceDownloadURL } from "@/client";
 import StatusBadge from "@/components/StatusBadge.vue";
+import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "@/stores/package";
 import { computed, watch } from "vue";
 
+const authStore = useAuthStore();
 const packageStore = usePackageStore();
 
 const download = () => {
@@ -48,6 +50,7 @@ watch(packageStore.ui.download, () => download());
           View metadata summary
         </button>
         <button
+          v-if="authStore.checkAttributes(['storage:package:download'])"
           :class="{
             btn: true,
             'btn-primary': true,

dashboard/src/components/PackageLocationCard.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import UUID from "@/components/UUID.vue";
 import { openPackageLocationDialog } from "@/dialogs";
+import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "@/stores/package";
 
+const authStore = useAuthStore();
 const packageStore = usePackageStore();
 
 let failed = $ref<boolean | null>(null);
@@ -37,7 +39,13 @@ const choose = async () => {
         >
         <span v-else><UUID :id="packageStore.current.locationId" /></span>
       </p>
-      <div class="actions" v-if="!packageStore.isRejected">
+      <div
+        class="actions"
+        v-if="
+          !packageStore.isRejected &&
+          authStore.checkAttributes(['package:move'])
+        "
+      >
         <button
           type="button"
           class="btn btn-primary btn-sm"

dashboard/src/components/PreservationActionCollapse.vue

@@ -2,11 +2,14 @@
 import type { api } from "@/client";
 import PackageReviewAlert from "@/components/PackageReviewAlert.vue";
 import StatusBadge from "@/components/StatusBadge.vue";
+import { useAuthStore } from "@/stores/auth";
 import Collapse from "bootstrap/js/dist/collapse";
 import { onMounted, watch } from "vue";
 import IconCircleChevronDown from "~icons/akar-icons/circle-chevron-down";
 import IconCircleChevronUp from "~icons/akar-icons/circle-chevron-up";
 
+const authStore = useAuthStore();
+
 const { action, index, toggleAll } = defineProps<{
   action: api.EnduroPackagePreservationAction;
   index: number;
@@ -102,7 +105,10 @@ watch($$(expandCounter), () => show());
       "
     />
     -->
-    <PackageReviewAlert v-model:expandCounter="expandCounter" />
+    <PackageReviewAlert
+      v-model:expandCounter="expandCounter"
+      v-if="authStore.checkAttributes(['package:review'])"
+    />
 
     <div
       ref="el"