Add permission checks to components lacking access control

components/manage-layers/index.js

@@ -1,5 +1,6 @@
 import TPEN from "../../api/TPEN.js"
 import "../../components/manage-pages/index.js"
+import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 
 class ProjectLayers extends HTMLElement {
 
@@ -9,8 +10,16 @@ class ProjectLayers extends HTMLElement {
 
     }
 
-    connectedCallback() {
+    async connectedCallback() {
         TPEN.attachAuthentication(this)
+
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('LAYER', 'METADATA')
+        if (!hasViewAccess) {
+            this.shadowRoot.innerHTML = `<p>You don't have permission to view layers</p>`
+            return
+        }
+
         if (TPEN.activeProject?._id) {
             this.render()
         }
@@ -195,7 +204,15 @@ class ProjectLayers extends HTMLElement {
             </div>
         `
         this.shadowRoot.querySelectorAll(".delete-layer").forEach((button) => {
-            button.addEventListener("click", (event) => {
+            button.addEventListener("click", async (event) => {
+                const hasDeleteAccess = await CheckPermissions.checkDeleteAccess('LAYER', '*')
+                if (!hasDeleteAccess) {
+                    TPEN.eventDispatcher.dispatch("tpen-toast", {
+                        status: "error",
+                        message: "You don't have permission to delete layers"
+                    })
+                    return
+                }
                 if (!confirm("This Layer will be deleted and the Pages will no longer be a part of this project.  This action cannot be undone.")) return
                 const url = event.target.getAttribute("data-layer-id")
                 const layerId = url.substring(url.lastIndexOf("/") + 1)
@@ -217,7 +234,15 @@ class ProjectLayers extends HTMLElement {
             })
         })
 
-        this.shadowRoot.querySelector(".add-layer").addEventListener("click", () => {
+        this.shadowRoot.querySelector(".add-layer").addEventListener("click", async () => {
+            const hasCreateAccess = await CheckPermissions.checkCreateAccess('LAYER', '*')
+            if (!hasCreateAccess) {
+                TPEN.eventDispatcher.dispatch("tpen-toast", {
+                    status: "error",
+                    message: "You don't have permission to create layers"
+                })
+                return
+            }
             const canvases = []
             layers.map(layer => (layer.pages).map(page => {
                 if (!canvases.includes(page.target) && page.target) {

components/manage-pages/index.js

@@ -1,4 +1,5 @@
 import TPEN from "../../api/TPEN.js"
+import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 
 class ManagePages extends HTMLElement {
 
@@ -7,8 +8,16 @@ class ManagePages extends HTMLElement {
         this.attachShadow({ mode: "open" })
     }
 
-    connectedCallback() {
+    async connectedCallback() {
         TPEN.attachAuthentication(this)
+
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('PAGE', 'METADATA')
+        if (!hasViewAccess) {
+            this.shadowRoot.innerHTML = `<p>You don't have permission to view pages</p>`
+            return
+        }
+
         if (TPEN.activeProject?._id) {
             this.render()
         }
@@ -99,6 +108,15 @@ class ManagePages extends HTMLElement {
         const pages = layers?.pages
         this.shadowRoot.querySelectorAll(".manage-pages").forEach((button) => {
             button.addEventListener("click", async () => {
+                // Check if user has edit permission for pages
+                const hasEditAccess = await CheckPermissions.checkEditAccess('PAGE', 'METADATA')
+                if (!hasEditAccess) {
+                    TPEN.eventDispatcher.dispatch("tpen-toast", {
+                        status: "error",
+                        message: "You don't have permission to manage pages"
+                    })
+                    return
+                }
                 const buttonParent = button.getRootNode().host
                 const mainParent= buttonParent.getRootNode().host
                 const layerIndex = buttonParent.getAttribute("data-index")
@@ -174,7 +192,15 @@ class ManagePages extends HTMLElement {
                     deleteButton.innerText = "Delete Page"
                     editPageLabelButton.after(deleteButton)
 
-                    editPageLabelButton.addEventListener("click", () => {
+                    editPageLabelButton.addEventListener("click", async () => {
+                        const hasUpdateAccess = await CheckPermissions.checkEditAccess('PAGE', 'METADATA')
+                        if (!hasUpdateAccess) {
+                            TPEN.eventDispatcher.dispatch("tpen-toast", {
+                                status: "error",
+                                message: "You don't have permission to edit page labels"
+                            })
+                            return
+                        }
                         labelDiv.classList.add("hidden")
                         editPageLabelButton.classList.add("hidden")
                         const labelInput = document.createElement("input")
@@ -227,7 +253,15 @@ class ManagePages extends HTMLElement {
                         })
                     })
 
-                    deleteButton.addEventListener("click", () => {
+                    deleteButton.addEventListener("click", async () => {
+                        const hasDeleteAccess = await CheckPermissions.checkDeleteAccess('PAGE', '*')
+                        if (!hasDeleteAccess) {
+                            TPEN.eventDispatcher.dispatch("tpen-toast", {
+                                status: "error",
+                                message: "You don't have permission to delete pages"
+                            })
+                            return
+                        }
                         if (!confirm("This Page will be removed from this layer and deleted.  This action cannot be undone.")) return
                         layerCardOuter.querySelector(".layer-pages").removeChild(el)
                         layers[layerIndex].pages.splice(el.dataset.index, 1)
@@ -255,7 +289,15 @@ class ManagePages extends HTMLElement {
                 layerActions.insertBefore(saveButton, layerActions.firstChild)
                 layerActions.removeChild(layerCardOuter.querySelector("tpen-manage-pages"))
 
-                editLayerLabelButton.addEventListener("click", () => {
+                editLayerLabelButton.addEventListener("click", async () => {
+                    const hasUpdateAccess = await CheckPermissions.checkEditAccess('LAYER', 'METADATA')
+                    if (!hasUpdateAccess) {
+                        TPEN.eventDispatcher.dispatch("tpen-toast", {
+                            status: "error",
+                            message: "You don't have permission to edit layer labels"
+                        })
+                        return
+                    }
                     labelDiv.querySelector(".layer-label").classList.add("hidden")
                     editLayerLabelButton.classList.add("hidden")
                     const labelInput = document.createElement("input")
@@ -313,7 +355,15 @@ class ManagePages extends HTMLElement {
                     })
                 })
 
-                saveButton.addEventListener("click", () => {
+                saveButton.addEventListener("click", async () => {
+                    const hasUpdateAccess = await CheckPermissions.checkEditAccess('PAGE', 'ORDER')
+                    if (!hasUpdateAccess) {
+                        TPEN.eventDispatcher.dispatch("tpen-toast", {
+                            status: "error",
+                            message: "You don't have permission to reorder pages"
+                        })
+                        return
+                    }
                     if (!layerCardOuter.querySelector(".layer-pages")?.$isDirty) {
                         TPEN.eventDispatcher.dispatch("tpen-toast", {"status":"info", "message":"No Changes to Save"})
                         return

components/project-export/index.js

@@ -1,5 +1,6 @@
 import TPEN from '../../api/TPEN.js'
 import { checkIfUrlExists } from '../../utilities/checkIfUrlExists.js'
+import CheckPermissions from '../../components/check-permissions/checkPermissions.js'
 
 customElements.define('tpen-project-export', class extends HTMLElement {
     constructor() {
@@ -13,6 +14,13 @@ customElements.define('tpen-project-export', class extends HTMLElement {
     }
 
     async render() {
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('PROJECT', 'METADATA')
+        if (!hasViewAccess) {
+            this.shadowRoot.innerHTML = `<p>You don't have permission to view project export</p>`
+            return
+        }
+
         const url = `${TPEN.staticURL}/${TPEN.activeProject._id}/manifest.json`
         const response = await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/deploymentStatus`, {
             method: 'GET',

components/project-layers/index.js

@@ -1,4 +1,5 @@
 import TPEN from "../../api/TPEN.js"
+import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 
 class ProjectLayers extends HTMLElement {
     constructor() {
@@ -11,7 +12,14 @@ class ProjectLayers extends HTMLElement {
         TPEN.eventDispatcher.on('tpen-project-loaded', () => this.render())
     }
 
-    render() {
+    async render() {
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('LAYER', 'METADATA')
+        if (!hasViewAccess) {
+            this.shadowRoot.innerHTML = `<p>You don't have permission to view layers</p>`
+            return
+        }
+
         const layers = TPEN.activeProject.layers
         this.shadowRoot.innerHTML = `
             <style>

components/project-metadata/index.js

@@ -1,4 +1,5 @@
 import TPEN from "../../api/TPEN.js"
+import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 
 class ProjectMetadata extends HTMLElement {
     constructor() {
@@ -68,7 +69,15 @@ class ProjectMetadata extends HTMLElement {
         TPEN.eventDispatcher.on("tpen-project-loaded", () => this.loadMetadata(TPEN.activeProject))
     }
 
-    loadMetadata(project) {
+    async loadMetadata(project) {
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('PROJECT', 'METADATA')
+        if (!hasViewAccess) {
+            const projectMetadata = this.shadowRoot.querySelector(".metadata")
+            projectMetadata.innerHTML = `<p>You don't have permission to view project metadata</p>`
+            return
+        }
+
         let projectMetada = this.shadowRoot.querySelector(".metadata")
         const metadata = project.metadata 
         projectMetada.innerHTML = ""

components/project-permissions/index.js

@@ -1,4 +1,5 @@
 import TPEN from "../../api/TPEN.js"
+import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 
 class ProjectPermissions extends HTMLElement {
     constructor() {
@@ -12,6 +13,13 @@ class ProjectPermissions extends HTMLElement {
     }
 
     async render() {
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('PERMISSION', '*')
+        if (!hasViewAccess) {
+            this.shadowRoot.innerHTML = `<p>You don't have permission to view project permissions</p>`
+            return
+        }
+
         this.shadowRoot.innerHTML = `
             <style>
                 .roles-list {

components/update-metadata/index.js

@@ -1,6 +1,7 @@
 import TPEN from "../../api/TPEN.js"
 import User from "../../api/User.js"
 import { eventDispatcher } from "../../api/events.js"
+import CheckPermissions from "../../components/check-permissions/checkPermissions.js"
 
 class UpdateMetadata extends HTMLElement {
     constructor() {
@@ -12,7 +13,14 @@ class UpdateMetadata extends HTMLElement {
         return ['tpen-user-id']
     }
 
-    connectedCallback() {
+    async connectedCallback() {
+        // Check if user has view permission
+        const hasViewAccess = await CheckPermissions.checkViewAccess('PROJECT', 'METADATA')
+        if (!hasViewAccess) {
+            this.shadowRoot.innerHTML = `<p>You don't have permission to view project metadata</p>`
+            return
+        }
+
         this.addEventListener()
         TPEN.attachAuthentication(this)
     }
@@ -177,6 +185,15 @@ class UpdateMetadata extends HTMLElement {
     }
 
     async updateMetadata() {
+        // Check if user has edit permission
+        const hasEditAccess = await CheckPermissions.checkEditAccess('PROJECT', 'METADATA')
+        if (!hasEditAccess) {
+            return TPEN.eventDispatcher.dispatch("tpen-toast", {
+                status: "error",
+                message: "You don't have permission to update project metadata"
+            })
+        }
+
         const fields = document.querySelectorAll(".metadata-field")
         const updatedMetadata = []