🐛 Disables buttons in view mode for users without permissions

CHANGES.md

@@ -18,6 +18,7 @@
 - Fix broken profile and profile options form.
 - Fix problem with mask and flip [#715](https://github.com/penpot/penpot/issues/715)
 - Fix problem with rotated blur [Taiga #1370](https://tree.taiga.io/project/penpot/issue/1370)
+- Disables buttons in view mode for users without permissions [Taiga #1328](https://tree.taiga.io/project/penpot/issue/1328)
 
 ### :heart: Community contributions by (Thank you!)
 

frontend/src/app/main.cljs

@@ -82,7 +82,8 @@
   (st/emit! (rt/initialize-router ui/routes)
             (rt/initialize-history on-navigate))
 
-  (st/emit! (udu/fetch-profile))
+  (st/emit! (udu/fetch-profile)
+            (udu/fetch-user-teams))
   (mf/mount (mf/element ui/app) (dom/get-element "app"))
   (mf/mount (mf/element modal) (dom/get-element "modal")))
 

frontend/src/app/main/data/users.cljs

@@ -55,7 +55,10 @@
   (ptk/reify ::profile-fetched
     ptk/UpdateEvent
     (update [_ state]
-      (assoc state :profile data))
+      (-> state
+          (assoc :profile data)
+          ;; Safeguard if the profile is loaded after teams
+          (assoc-in [:profile :teams] (get-in state [:profile :teams]))))
 
     ptk/EffectEvent
     (effect [_ state stream]
@@ -203,4 +206,23 @@
         (->> (rp/query :team-users {:team-id team-id})
              (rx/map #(partial fetched %)))))))
 
+(defn user-teams-fetched [data]
+  (ptk/reify ::user-teams-fetched
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [teams (->> data
+                       (group-by :id)
+                       (d/mapm #(first %2)))]
+        (assoc-in state [:profile :teams] teams)))))
+
+(defn fetch-user-teams []
+  (ptk/reify ::fetch-user-teams
+    ptk/WatchEvent
+    (watch [_ state s]
+      (->> (rp/query! :teams)
+           (rx/map user-teams-fetched)
+           (rx/catch (fn [error]
+                       (if (= (:type error) :not-found)
+                         (rx/of (rt/nav :auth-login))
+                         (rx/empty))))))))
 

frontend/src/app/main/ui/viewer/header.cljs

@@ -191,6 +191,11 @@
         profile    (mf/deref refs/profile)
         anonymous? (= uuid/zero (:id profile))
 
+        team-id    (get-in data [:project :team-id])
+
+        has-permission? (and (not anonymous?)
+                             (contains? (:teams profile) team-id))
+
         project-id (get-in data [:project :id])
         file-id    (get-in data [:file :id])
         page-id    (get-in data [:page :id])
@@ -219,7 +224,9 @@
 
     [:header.viewer-header
      [:div.main-icon
-      [:a {:on-click on-goback} i/logo-icon]]
+      [:a {:on-click on-goback
+           ;; If the user doesn't have permission we disable the link
+           :style {:pointer-events (when-not has-permission? "none")}} i/logo-icon]]
 
      [:div.sitemap-zone {:alt (t locale "viewer.header.sitemap")
                          :on-click on-click}
@@ -238,7 +245,7 @@
         :alt "View mode"}
        i/play]
 
-      (when-not anonymous?
+      (when has-permission?
         [:button.mode-zone-button.tooltip.tooltip-bottom
          {:on-click #(navigate :comments)
           :class (dom/classnames :active (= section :comments))
@@ -257,11 +264,11 @@
         :comments [:& comments-menu {:locale locale}]
         nil)
 
-      (when-not anonymous?
+      (when has-permission?
         [:& share-link {:token (:token data)
                         :page  (:page data)}])
 
-      (when-not anonymous?
+      (when has-permission?
         [:a.btn-text-basic.btn-small {:on-click on-edit}
          (t locale "viewer.header.edit-page")])