Check permission to invite before showing invite buttons/disable them

res/css/views/rooms/_MemberList.scss

@@ -87,6 +87,11 @@ limitations under the License.
     }
 }
 
+.mx_MemberList_invite.mx_AccessibleButton_disabled {
+    background-color: $greyed-fg-color;;
+    cursor: not-allowed;
+}
+
 .mx_MemberList_invite span {
     background-image: url('$(res)/img/feather-customised/user-add.svg');
     background-repeat: no-repeat;

src/components/views/rooms/MemberInfo.js

@@ -589,6 +589,7 @@ module.exports = withMatrixClient(React.createClass({
 
         can.kick = me.powerLevel >= powerLevels.kick;
         can.ban = me.powerLevel >= powerLevels.ban;
+        can.invite = me.powerLevel >= powerLevels.invite;
         can.mute = me.powerLevel >= editPowerLevel;
         can.modifyLevel = me.powerLevel >= editPowerLevel && (isMe || me.powerLevel > them.powerLevel);
         can.modifyLevelMax = me.powerLevel;
@@ -727,7 +728,7 @@ module.exports = withMatrixClient(React.createClass({
                 );
             }
 
-            if (!member || !member.membership || member.membership === 'leave') {
+            if (this.state.can.invite && (!member || !member.membership || member.membership === 'leave')) {
                 const roomId = member && member.roomId ? member.roomId : RoomViewStore.getRoomId();
                 const onInviteUserButton = async () => {
                     try {

src/components/views/rooms/MemberList.js

@@ -449,10 +449,23 @@ module.exports = React.createClass({
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
         let inviteButton;
+
         if (room && room.getMyMembership() === 'join') {
+            // assume we can invite until proven false
+            let canInvite = true;
+
+            const plEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+            const me = room.getMember(cli.getUserId());
+            if (plEvent && me) {
+                const content = plEvent.getContent();
+                if (content && content.invite > me.powerLevel) {
+                    canInvite = false;
+                }
+            }
+
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             inviteButton =
-                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
+                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick} disabled={!canInvite}>
                     <span>{ _t('Invite to this room') }</span>
                 </AccessibleButton>;
         }