Properly display error info messages

sass/_core.scss

@@ -339,7 +339,7 @@ body.converse-fullscreen {
     q {
       quotes: "“" "”" "‘" "’";
       &.reason {
-        display: block;
+        display: inline;
       }
     }
     q:before {

spec/chatbox.js

@@ -5,9 +5,13 @@ const $msg = converse.env.$msg;
 const Strophe = converse.env.Strophe;
 const u = converse.env.utils;
 const sizzle = converse.env.sizzle;
+const original_timeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
 
 describe("Chatboxes", function () {
 
+    beforeEach(() => (jasmine.DEFAULT_TIMEOUT_INTERVAL = 7000));
+    afterEach(() => (jasmine.DEFAULT_TIMEOUT_INTERVAL = original_timeout));
+
     describe("A Chatbox", function () {
 
         it("has a /help command to show the available commands", mock.initConverse(['rosterGroupsFetched', 'chatBoxesFetched'], {}, async function (done, _converse) {

spec/muc.js

@@ -10,7 +10,7 @@ const Promise = converse.env.Promise;
 const sizzle = converse.env.sizzle;
 const u = converse.env.utils;
 
-fdescribe("Groupchats", function () {
+describe("Groupchats", function () {
 
     describe("The \"rooms\" API", function () {
 
@@ -3438,7 +3438,7 @@ fdescribe("Groupchats", function () {
         }));
 
 
-        fit("takes a /kick command to kick a user",
+        it("takes a /kick command to kick a user",
             mock.initConverse(
                 ['rosterGroupsFetched'], {},
                 async function (done, _converse) {
@@ -5190,31 +5190,41 @@ fdescribe("Groupchats", function () {
             await new Promise(resolve => view.model.messages.once('rendered', resolve));
 
             let stanza = u.toStanza(`
-                <message xmlns="jabber:client" type="error" to="troll@montague.lit/resource" from="trollbox@montague.lit">
+                <message id="${view.model.messages.at(0).get('msgid')}"
+                         xmlns="jabber:client"
+                         type="error"
+                         to="troll@montague.lit/resource"
+                         from="trollbox@montague.lit">
                     <error type="auth"><forbidden xmlns="urn:ietf:params:xml:ns:xmpp-stanzas"/></error>
                 </message>`);
             _converse.connection._dataRecv(mock.createRequest(stanza));
-            await new Promise(resolve => view.model.messages.once('rendered', resolve));
-            expect(view.el.querySelector('.chat-error').textContent.trim()).toBe(
+            await u.waitUntil(() => view.el.querySelector('.chat-msg__error')?.textContent.trim(), 1000);
+            expect(view.el.querySelector('.chat-msg__error').textContent.trim()).toBe(
                 "Your message was not delivered because you weren't allowed to send it.");
 
             textarea.value = 'Hello again';
             view.onFormSubmitted(new Event('submit'));
-            await new Promise(resolve => view.model.messages.once('rendered', resolve));
+            await u.waitUntil(() => view.el.querySelectorAll('.chat-msg__text').length === 2);
 
             stanza = u.toStanza(`
-                <message xmlns="jabber:client" type="error" to="troll@montague.lit/resource" from="trollbox@montague.lit">
+                <message id="${view.model.messages.at(1).get('msgid')}"
+                         xmlns="jabber:client"
+                         type="error"
+                         to="troll@montague.lit/resource"
+                         from="trollbox@montague.lit">
                     <error type="auth">
                         <forbidden xmlns="urn:ietf:params:xml:ns:xmpp-stanzas"/>
                         <text xmlns="urn:ietf:params:xml:ns:xmpp-stanzas">Thou shalt not!</text>
                     </error>
                 </message>`);
             _converse.connection._dataRecv(mock.createRequest(stanza));
-            await new Promise(resolve => view.model.messages.once('rendered', resolve));
 
-            expect(view.el.querySelector('.message:last-child').textContent.trim()).toBe(
+            await u.waitUntil(() => view.el.querySelectorAll('.chat-msg__error').length === 2);
+            const sel = 'converse-message-history converse-chat-message:last-child .chat-msg__error';
+            await u.waitUntil(() => view.el.querySelector(sel)?.textContent.trim());
+            expect(view.el.querySelector(sel).textContent.trim()).toBe(
                 'Your message was not delivered because you weren\'t allowed to send it. '+
-                'The message from the server is: "Thou shalt not!"')
+                'The following reason was provided:  Thou shalt not!')
             done();
         }));
 

src/components/message.js

@@ -16,6 +16,7 @@ const i18n_edited = __('This message has been edited');
 const i18n_show = __('Show more');
 const i18n_show_less = __('Show less');
 const i18n_uploading = __('Uploading file:')
+const i18n_reason = __('The following reason was provided: ')
 
 
 class Message extends CustomElement {
@@ -26,6 +27,7 @@ class Message extends CustomElement {
             correcting: { type: Boolean },
             editable: { type: Boolean },
             error: { type: String },
+            error_text: { type: String },
             first_unread: { type: Boolean },
             from: { type: String },
             has_mentions: { type: Boolean },
@@ -46,6 +48,7 @@ class Message extends CustomElement {
             occupant_role: { type: String },
             oob_url: { type: String },
             progress: { type: String },
+            reason: { type: String },
             received: { type: String },
             retractable: { type: Boolean },
             sender: { type: String },
@@ -77,7 +80,11 @@ class Message extends CustomElement {
                 data-type="${this.data_name}"
                 data-value="${this.data_value}">
 
-                ${this.model.getMessageText()}
+                <div class="chat-info__message">
+                    ${ this.model.getMessageText() }
+                </div>
+                ${ this.reason ? html`<q class="reason">${this.reason}</q>` : `` }
+                ${ this.error_text ? html`<q class="reason">${this.error_text}</q>` : `` }
                 ${ this.retry ? html`<a class="retry" @click=${this.onRetryClicked}>${i18n_retry}</a>` : '' }
             </div>
         `;
@@ -234,7 +241,9 @@ class Message extends CustomElement {
                 ?is_spoiler_visible="${this.is_spoiler_visible}"
                 text="${this.model.getMessageText()}"></converse-chat-message-body>
             ${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' }
-            <div class="chat-msg__error">${this.error}</div>
+            <div class="chat-msg__error">
+                ${this.error} ${ this.error_text ? html`${i18n_reason} <q class="reason">${this.error_text}</q>` : `` }
+            </div>
         `;
     }
 

src/headless/converse-chat.js

@@ -395,7 +395,7 @@ converse.plugins.add('converse-chat', {
                 return this.messages.fetched;
             },
 
-            async handleErrormessageStanza (stanza) {
+            async handleErrorMessageStanza (stanza) {
                 const attrs = await st.parseMessage(stanza, _converse);
                 if (!await this.shouldShowErrorMessage(attrs)) {
                     return;
@@ -1175,7 +1175,7 @@ converse.plugins.add('converse-chat', {
                 return;
             }
             const chatbox = await api.chatboxes.get(from_jid);
-            chatbox?.handleErrormessageStanza(stanza);
+            chatbox?.handleErrorMessageStanza(stanza);
         }
 
 

src/headless/converse-muc.js

@@ -618,14 +618,19 @@ converse.plugins.add('converse-muc', {
                 }
             },
 
-            async handleErrormessageStanza (stanza) {
+            async handleErrorMessageStanza (stanza) {
                 const attrs = await st.parseMUCMessage(stanza, this, _converse);
                 if (!await this.shouldShowErrorMessage(attrs)) {
                     return;
                 }
                 const message = this.getMessageReferencedByError(attrs);
                 if (message) {
-                    const new_attrs = {'error': attrs.error };
+                    const new_attrs = {
+                        'error': attrs.error,
+                        'error_condition': attrs.error_condition,
+                        'error_text': attrs.error_text,
+                        'error_type': attrs.error_type,
+                    };
                     if (attrs.msgid === message.get('retraction_id')) {
                         // The error message refers to a retraction
                         new_attrs.retraction_id = undefined;
@@ -640,7 +645,7 @@ converse.plugins.add('converse-muc', {
                         }
                     } else if (!attrs.error) {
                         if (attrs.error_condition === 'forbidden') {
-                            new_attrs.error = __("You're not allowed to send a message.");
+                            new_attrs.error = __("Your message was not delivered because you weren't allowed to send it.");
                         } else if (attrs.error_condition === 'not-acceptable') {
                             new_attrs.error = __("Your message was not delivered because you're not present in the groupchat.");
                         } else {

src/templates/message.js

@@ -18,6 +18,7 @@ export default (o) => html`
         ?is_spoiler_visible=${o.is_spoiler_visible}
         ?retractable=${o.retractable}
         error=${o.error || ''}
+        error_text=${o.error_text || ''}
         from=${o.from}
         message_type=${o.type || ''}
         moderated_by=${o.moderated_by || ''}
@@ -28,6 +29,7 @@ export default (o) => html`
         oob_url=${o.oob_url || ''}
         pretty_type=${o.pretty_type}
         progress=${o.progress || ''}
+        reason=${o.reason || ''}
         received=${o.received}
         sender=${o.sender}
         spoiler_hint=${o.spoiler_hint || ''}