Merge pull request #250 from matrix-org/rav/disable_composer_if_no_permission

Disable the message composer if we don't have permission to post

package.json

@@ -30,7 +30,7 @@
     "highlight.js": "^8.9.1",
     "linkifyjs": "^2.0.0-beta.4",
     "marked": "^0.3.5",
-    "matrix-js-sdk": "^0.5.0",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",
     "react": "^0.14.2",

src/components/views/rooms/MessageComposer.js

@@ -91,6 +91,14 @@ module.exports = React.createClass({
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
 
+        var controls = [];
+
+        controls.push(
+            <div className="mx_MessageComposer_avatar">
+                <MemberAvatar member={me} width={24} height={24} />
+            </div>
+        );
+
         var callButton, videoCallButton, hangupButton;
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
@@ -109,25 +117,47 @@ module.exports = React.createClass({
                 </div>
         }
 
+        var canSendMessages = this.props.room.currentState.maySendMessage(
+            MatrixClientPeg.get().credentials.userId);
+
+        if (canSendMessages) {
+            // This also currently includes the call buttons. Really we should
+            // check separately for whether we can call, but this is slightly
+            // complex because of conference calls.
+            var uploadButton = (
+                <div className="mx_MessageComposer_upload"
+                        onClick={this.onUploadClick} title="Upload file">
+                    <TintableSvg src="img/upload.svg" width="19" height="24"/>
+                    <input ref="uploadInput" type="file"
+                        style={uploadInputStyle}
+                        onChange={this.onUploadFileSelected} />
+                </div>
+            );
+
+            controls.push(
+                <MessageComposerInput tabComplete={this.props.tabComplete}
+                    onResize={this.props.onResize} room={this.props.room} />,
+                uploadButton,
+                hangupButton,
+                callButton,
+                videoCallButton,
+            );
+        } else {
+            controls.push(
+                <div className="mx_MessageComposer_noperm_error">
+                    You do not have permission to post to this room
+                </div>
+            );
+        }
+
         return (
-        <div className="mx_MessageComposer">
+            <div className="mx_MessageComposer">
-            <div className="mx_MessageComposer_wrapper">
+                <div className="mx_MessageComposer_wrapper">
-                <div className="mx_MessageComposer_row">
+                    <div className="mx_MessageComposer_row">
-                    <div className="mx_MessageComposer_avatar">
+                        {controls}
-                        <MemberAvatar member={me} width={24} height={24} />
                     </div>
-                    <MessageComposerInput tabComplete={this.props.tabComplete} onResize={this.props.onResize}
-                        room={this.props.room} />
-                    <div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
-                        <TintableSvg src="img/upload.svg" width="19" height="24"/>
-                        <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
-                    </div>
-                    { hangupButton }
-                    { callButton }
-                    { videoCallButton }
                 </div>
             </div>
-        </div>
         );
     }
 });