From ab7fcbb5e7acc0ed8c14144035fed5991836ac22 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Thu, 27 Jul 2017 18:10:28 +0100
Subject: [PATCH] Add function to determine if a user can modify widgets and
 style UI components as a result.

---
 src/components/views/elements/AppTile.js | 84 +++++++++++++++++++-----
 1 file changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 36954ff25f..57821504af 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -98,6 +98,29 @@ export default React.createClass({
         });
     },
 
+    _canUserModify: function() {
+        let canModify = false;
+        const client = MatrixClientPeg.get();
+        // const warningMsg = 'User can not modify widgets:';
+        if (client) {
+            const room = client.getRoom(this.props.room.roomId);
+            const me = client.credentials.userId;
+            if(room && me) {
+                const member = room.getMember(me);
+                if (member && member.membership === "join") {
+                    canModify = room.currentState.maySendStateEvent('set_widget', me);
+                // } else {
+                //     console.warn(warningMsg, 'Not room member');
+                }
+            // } else {
+            //     console.warn(warningMsg, 'No roomId or userId');
+            }
+        // } else {
+        //     console.warn(warningMsg, 'No Matrix client');
+        }
+        return canModify;
+    },
+
     _onEditClick: function(e) {
         console.log("Edit widget ID ", this.props.id);
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
@@ -107,20 +130,34 @@ export default React.createClass({
         }, "mx_IntegrationsManager");
     },
 
+    /* If user has permission to modify widgets, delete the widget, otherwise revoke access for the widget to load in the user's browser
+    */
     _onDeleteClick: function() {
-        console.log("Delete widget %s", this.props.id);
-        this.setState({deleting: true});
-        MatrixClientPeg.get().sendStateEvent(
-            this.props.room.roomId,
-            'im.vector.modular.widgets',
-            {}, // empty content
-            this.props.id,
-        ).then(() => {
-            console.log('Deleted widget');
-        }, (e) => {
-            console.error('Failed to delete widget', e);
-            this.setState({deleting: false});
-        });
+        if (this._canUserModify()) {
+            console.log("Delete widget %s", this.props.id);
+            this.setState({deleting: true});
+            MatrixClientPeg.get().sendStateEvent(
+                this.props.room.roomId,
+                'im.vector.modular.widgets',
+                {}, // empty content
+                this.props.id,
+            ).then(() => {
+                console.log('Deleted widget');
+            }, (e) => {
+                console.error('Failed to delete widget', e);
+                this.setState({deleting: false});
+            });
+        } else {
+            console.log("Revoke widget permissions - %s", this.props.id);
+            this._revokeWidgetPermission();
+        }
+    },
+
+    _deleteWidgetLabel() {
+        if (this._canUserModify()) {
+            return 'Delete widget';
+        }
+        return 'Revoke widget access';
     },
 
     _grantWidgetPermission() {
@@ -129,6 +166,12 @@ export default React.createClass({
         this.setState({hasPermissionToLoad: true});
     },
 
+    _revokeWidgetPermission() {
+        console.warn('Revoking permission to load widget - ', this.state.widgetUrl);
+        localStorage.removeItem(this.state.widgetPermissionId);
+        this.setState({hasPermissionToLoad: false});
+    },
+
     formatAppTileName: function() {
         let appTileName = "No name";
         if(this.props.name && this.props.name.trim()) {
@@ -189,6 +232,13 @@ export default React.createClass({
 
         // editing is done in scalar
         const showEditButton = Boolean(this._scalarClient);
+        const deleteWidgetLabel = this._deleteWidgetLabel();
+        let deleteIcon = 'img/cancel.svg';
+        let deleteClasses = 'mx_filterFlipColor mx_AppTileMenuBarWidget';
+        if(this._canUserModify()) {
+            deleteIcon = 'img/cancel-red.svg';
+            deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
+        }
 
         return (
             <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
@@ -205,9 +255,11 @@ export default React.createClass({
                         />}
 
                         {/* Delete widget */}
-                        <img src="img/cancel.svg"
-                        className="mx_filterFlipColor mx_AppTileMenuBarWidget"
-                        width="8" height="8" alt={_t("Cancel")}
+                        <img src={deleteIcon}
+                        className={deleteClasses}
+                        width="8" height="8"
+                        alt={_t(deleteWidgetLabel)}
+                        title={_t(deleteWidgetLabel)}
                         onClick={this._onDeleteClick}
                         />
                     </span>