Hide the textarea when a user is muted in a groupchat

CHANGES.md

@@ -5,6 +5,7 @@
 * Bugfix: Don't set `muc_domain` for roomspanel if `locked_muc_domain` is `true`.
 * Bugfix: Modal auto-closes when you open it for a second time.
 * Take roster nickname into consideration when rendering messages and chat headings.
+* Hide the textarea when a user is muted in a groupchat.
 
 ## 4.2.0 (2019-04-04)
 

css/converse.css

@@ -11680,6 +11680,14 @@ body.converse-fullscreen {
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
           background-color: var(--chatroom-head-button-color); }
+  #conversejs.converse-embedded .chatroom .muc-bottom-panel,
+  #conversejs .chatroom .muc-bottom-panel {
+    border-top: var(--message-input-border-top);
+    height: 4em;
+    padding: 1em;
+    font-size: var(--font-size-small);
+    background-color: var(--chatroom-head-color);
+    color: white; }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .suggestion-box__results--above,
   #conversejs .chatroom .sendXMPPMessage .suggestion-box__results--above {
     bottom: 4.5em; }

sass/_chatrooms.scss

@@ -306,6 +306,15 @@
             }
         }
 
+        .muc-bottom-panel {
+            border-top: var(--message-input-border-top);
+            height: 4em;
+            padding: 1em;
+            font-size: var(--font-size-small);
+            background-color: var(--chatroom-head-color);
+            color: white;
+        }
+
         .sendXMPPMessage {
 
             .suggestion-box__results--above {

spec/messages.js

@@ -1630,7 +1630,7 @@
                     let fullname = _converse.xmppstatus.get('fullname');
                     fullname = _.isEmpty(fullname)? _converse.bare_jid: fullname;
                     await _converse.api.chats.open(sender_jid)
-                    var msg_text = 'This message will not be sent, due to an error';
+                    let msg_text = 'This message will not be sent, due to an error';
                     const view = _converse.api.chatviews.get(sender_jid);
                     let message = view.model.messages.create({
                         'msgid': '82bc02ce-9651-4336-baf0-fa04762ed8d2',
@@ -1639,7 +1639,7 @@
                         'time': moment().format(),
                         'message': msg_text
                     });
-                    view.model.sendMessage(message);
+                    view.model.sendMessage(msg_text);
                     await new Promise((resolve, reject) => view.once('messageInserted', resolve));
                     const chat_content = view.el.querySelector('.chat-content');
                     let msg_txt = sizzle('.chat-msg:last .chat-msg__text', chat_content).pop().textContent;
@@ -1656,7 +1656,7 @@
                         'time': moment().format(),
                         'message': msg_text
                     });
-                    view.model.sendMessage(message);
+                    view.model.sendMessage(msg_text);
                     await new Promise((resolve, reject) => view.once('messageInserted', resolve));
                     msg_txt = sizzle('.chat-msg:last .chat-msg__text', chat_content).pop().textContent;
                     expect(msg_txt).toEqual(msg_text);
@@ -1724,7 +1724,7 @@
                         'time': moment().format(),
                         'message': msg_text
                     });
-                    view.model.sendMessage(message);
+                    view.model.sendMessage(msg_text);
                     await new Promise((resolve, reject) => view.once('messageInserted', resolve));
                     msg_txt = sizzle('.chat-msg:last .chat-msg__text', chat_content).pop().textContent;
                     expect(msg_txt).toEqual(msg_text);

spec/muc.js

@@ -4645,12 +4645,6 @@
                     async function (done, _converse) {
 
                 await test_utils.openAndEnterChatRoom(_converse, 'trollbox', 'localhost', 'troll');
-                let sent_IQ, IQ_id;
-                const sendIQ = _converse.connection.sendIQ;
-                spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) {
-                    sent_IQ = iq;
-                    IQ_id = sendIQ.bind(this)(iq, callback, errback);
-                });
                 const view = _converse.chatboxviews.get('trollbox@localhost');
                 const textarea = view.el.querySelector('.chat-textarea');
                 textarea.value = 'Hello world';

src/converse-chatview.js

@@ -402,7 +402,7 @@ converse.plugins.add('converse-chatview', {
                 } else {
                     placeholder = __('Message');
                 }
-                const form_container = this.el.querySelector('.message-form-container');
+                const form_container = this.el.querySelector('.bottom-panel');
                 form_container.innerHTML = tpl_chatbox_message_form(
                     _.extend(this.model.toJSON(), {
                         'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),

src/converse-muc-views.js

@@ -16,6 +16,7 @@ import muc_utils from "@converse/headless/utils/muc";
 import tpl_add_chatroom_modal from "templates/add_chatroom_modal.html";
 import tpl_chatarea from "templates/chatarea.html";
 import tpl_chatroom from "templates/chatroom.html";
+import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html";
 import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
 import tpl_chatroom_details_modal from "templates/chatroom_details_modal.html";
 import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html";
@@ -539,6 +540,7 @@ converse.plugins.add('converse-muc-views', {
                 this.model.on('change:connection_status', this.afterConnected, this);
                 this.model.on('change:jid', this.renderHeading, this);
                 this.model.on('change:name', this.renderHeading, this);
+                this.model.on('change:role', this.renderBottomPanel, this);
                 this.model.on('change:subject', this.renderHeading, this);
                 this.model.on('change:subject', this.setChatRoomSubject, this);
                 this.model.on('configurationNeeded', this.getAndRenderConfigurationForm, this);
@@ -585,8 +587,7 @@ converse.plugins.add('converse-muc-views', {
                 this.el.innerHTML = tpl_chatroom();
                 this.renderHeading();
                 this.renderChatArea();
-                this.renderMessageForm();
-                this.initMentionAutoComplete();
+                this.renderBottomPanel();
                 if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
                     this.showSpinner();
                 }
@@ -598,6 +599,18 @@ converse.plugins.add('converse-muc-views', {
                 this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();
             },
 
+            renderBottomPanel () {
+                const container = this.el.querySelector('.bottom-panel');
+                if (this.model.get('role') === 'visitor') {
+                    container.innerHTML = tpl_chatroom_bottom_panel({'__': __});
+                } else {
+                    if (!container.firstElementChild || !container.querySelector('.sendXMPPMessage')) {
+                        this.renderMessageForm();
+                        this.initMentionAutoComplete();
+                    }
+                }
+            },
+
             renderChatArea () {
                 /* Render the UI container in which groupchat messages will appear.
                  */

src/headless/converse-chatboxes.js

@@ -696,6 +696,12 @@ converse.plugins.add('converse-chatboxes', {
                 return !_.isNil(sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop());
             },
 
+            getErrorMessage (stanza) {
+                const error = stanza.querySelector('error');
+                return _.propertyOf(error.querySelector('text'))('textContent') ||
+                    __('Sorry, an error occurred:') + ' ' + error.innerHTML;
+            },
+
             getMessageBody (stanza) {
                 /* Given a message stanza, return the text contained in its body.
                  */
@@ -899,12 +905,6 @@ converse.plugins.add('converse-chatboxes', {
                 chatbox.messages.create(attrs);
             },
 
-            getErrorMessage (stanza) {
-                const error = stanza.querySelector('error');
-                return _.propertyOf(error.querySelector('text'))('textContent') ||
-                    __('Sorry, an error occurred:') + ' ' + error.innerHTML;
-            },
-
             /**
              * Handler method for all incoming single-user chat "message" stanzas.
              * @private

src/headless/converse-muc.js

@@ -718,7 +718,7 @@ converse.plugins.add('converse-muc', {
              */
             saveAffiliationAndRole (pres) {
                 const item = sizzle(`x[xmlns="${Strophe.NS.MUC_USER}"] item`, pres).pop();
-                const is_self = pres.querySelector("status[code='110']");
+                const is_self = !_.isNull(pres.querySelector("status[code='110']"));
                 if (is_self && !_.isNil(item)) {
                     const affiliation = item.getAttribute('affiliation');
                     const role = item.getAttribute('role');

src/headless/dist/converse-headless.js

@@ -41045,6 +41045,11 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
         return !_.isNil(sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop());
       },
 
+      getErrorMessage(stanza) {
+        const error = stanza.querySelector('error');
+        return _.propertyOf(error.querySelector('text'))('textContent') || __('Sorry, an error occurred:') + ' ' + error.innerHTML;
+      },
+
       getMessageBody(stanza) {
         /* Given a message stanza, return the text contained in its body.
          */
@@ -41265,11 +41270,6 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
         chatbox.messages.create(attrs);
       },
 
-      getErrorMessage(stanza) {
-        const error = stanza.querySelector('error');
-        return _.propertyOf(error.querySelector('text'))('textContent') || __('Sorry, an error occurred:') + ' ' + error.innerHTML;
-      },
-
       /**
        * Handler method for all incoming single-user chat "message" stanzas.
        * @private
@@ -45819,7 +45819,7 @@ _converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins.add('converse-muc
        */
       saveAffiliationAndRole(pres) {
         const item = sizzle(`x[xmlns="${Strophe.NS.MUC_USER}"] item`, pres).pop();
-        const is_self = pres.querySelector("status[code='110']");
+        const is_self = !_.isNull(pres.querySelector("status[code='110']"));
 
         if (is_self && !_.isNil(item)) {
           const affiliation = item.getAttribute('affiliation');

src/templates/chatarea.html

 <div class="chat-area col-md-9 col-8">
     <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}" aria-live="polite"></div>
-    <div class="message-form-container"/>
+    <div class="bottom-panel"/>
 </div>

src/templates/chatbox.html

 <div class="flyout box-flyout">
     <div class="chat-body">
         <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}" aria-live="polite"></div>
-        <div class="message-form-container"></div>
+        <div class="bottom-panel"></div>
     </div>
 </div>

src/templates/chatroom_bottom_panel.html

+<div class="muc-bottom-panel">{{{o.__("You're not allowed to send messages in this room")}}}</div>