Show an icon to indicate that a message is encrypted

updates #497

dist/converse.js

@@ -64414,7 +64414,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 date = moment(el.getAttribute('data-isodate')),
                 next_el = el.nextElementSibling;
 
-          if (!u.hasClass('chat-msg--action', el) && !u.hasClass('chat-msg--action', previous_el) && previous_el.getAttribute('data-from') === from && date.isBefore(moment(previous_el.getAttribute('data-isodate')).add(10, 'minutes'))) {
+          if (!u.hasClass('chat-msg--action', el) && !u.hasClass('chat-msg--action', previous_el) && previous_el.getAttribute('data-from') === from && date.isBefore(moment(previous_el.getAttribute('data-isodate')).add(10, 'minutes')) && el.getAttribute('data-encrypted') === previous_el.getAttribute('data-encrypted')) {
             u.addClass('chat-msg--followup', el);
           }
 
@@ -64422,7 +64422,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             return;
           }
 
-          if (!u.hasClass('chat-msg--action', 'el') && next_el.getAttribute('data-from') === from && moment(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes'))) {
+          if (!u.hasClass('chat-msg--action', 'el') && next_el.getAttribute('data-from') === from && moment(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes')) && el.getAttribute('data-encrypted') === next_el.getAttribute('data-encrypted')) {
             u.addClass('chat-msg--followup', next_el);
           } else {
             u.removeClass('chat-msg--followup', next_el);
@@ -74333,6 +74333,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 key = sizzle(`key[rid="${_converse.omemo_store.get('device_id')}"]`, encrypted).pop();
 
           if (key) {
+            attrs['is_encrypted'] = true;
             attrs['encrypted'] = {
               'device_id': header.getAttribute('sid'),
               'iv': header.querySelector('iv').textContent,
@@ -74471,6 +74472,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 __ = _converse.__;
 
           if (this.get('omemo_active') && attrs.message) {
+            attrs['is_encrypted'] = true;
             const message = this.messages.create(attrs);
             this.getBundlesAndBuildSessions().then(devices => this.createOMEMOMessageStanza(message, devices)).then(stanza => this.sendMessageStanza(stanza)).catch(e => {
               this.messages.create({
@@ -81277,12 +81279,14 @@ __p += ' chat-msg--action ';
  } ;
 __p += ' ' +
 __e(o.extra_classes) +
-'" data-isodate="' +
+'"\n        data-isodate="' +
 __e(o.time) +
 '" data-msgid="' +
 __e(o.msgid) +
 '" data-from="' +
 __e(o.from) +
+'" data-encrypted="' +
+__e(o.is_encrypted) +
 '">\n    ';
  if (o.type !== 'headline' && !o.is_me_message) { ;
 __p += '\n    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>\n    ';
@@ -81319,6 +81323,10 @@ __e(o.isodate) +
 __e(o.pretty_time) +
 '</time>';
  } ;
+__p += '\n            ';
+ if (o.is_encrypted) { ;
+__p += '<span class="fa fa-lock"></span>';
+ } ;
 __p += '\n        </span>\n        ';
  if (!o.is_me_message) { ;
 __p += '<div class="chat-msg__body">';

mockup/chatbox.html

@@ -134,12 +134,33 @@
                                     <span class="chat-msg__heading">
                                         <span class="chat-msg__author">Juliet Capulet</span>
                                         <span class="chat-msg__time">15:31</span>
+                                        <span class="fa fa-lock"></span>
                                     </span>
                                     <div class="chat-msg__body">
                                         <div class="chat-msg__message">
                                             <span class="chat-msg__text">
                                             O Romeo, Romeo! wherefore art thou Romeo?
                                             Deny thy father and refuse thy name;
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="chat-msg__actions">
+                                    <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
+                                </div>
+                            </div>
+
+                            <div class="message chat-msg chat-msg--followup">
+                                <canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
+                                <div class="chat-msg__content">
+                                    <span class="chat-msg__heading">
+                                        <span class="chat-msg__author">Juliet Capulet</span>
+                                        <span class="chat-msg__time">15:31</span>
+                                        <span class="fa fa-lock"></span>
+                                    </span>
+                                    <div class="chat-msg__body">
+                                        <div class="chat-msg__message">
+                                            <span class="chat-msg__text">
                                             Or, if thou wilt not, be but sworn my love,
                                             And I'll no longer be a Capulet.
                                             </span>

src/converse-chatview.js

@@ -737,14 +737,16 @@
 
                     if (!u.hasClass('chat-msg--action', el) && !u.hasClass('chat-msg--action', previous_el) &&
                             previous_el.getAttribute('data-from') === from &&
-                            date.isBefore(moment(previous_el.getAttribute('data-isodate')).add(10, 'minutes'))) {
+                            date.isBefore(moment(previous_el.getAttribute('data-isodate')).add(10, 'minutes')) &&
+                            el.getAttribute('data-encrypted') === previous_el.getAttribute('data-encrypted')) {
                         u.addClass('chat-msg--followup', el);
                     }
                     if (!next_el) { return; }
 
                     if (!u.hasClass('chat-msg--action', 'el') &&
                             next_el.getAttribute('data-from') === from &&
-                            moment(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes'))) {
+                            moment(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes')) &&
+                            el.getAttribute('data-encrypted') === next_el.getAttribute('data-encrypted')) {
                         u.addClass('chat-msg--followup', next_el);
                     } else {
                         u.removeClass('chat-msg--followup', next_el);

src/converse-omemo.js

@@ -286,6 +286,7 @@
                           header = encrypted.querySelector('header'),
                           key = sizzle(`key[rid="${_converse.omemo_store.get('device_id')}"]`, encrypted).pop();
                     if (key) {
+                        attrs['is_encrypted'] = true;
                         attrs['encrypted'] = {
                             'device_id': header.getAttribute('sid'),
                             'iv': header.querySelector('iv').textContent,
@@ -418,6 +419,7 @@
                           { __ } = _converse;
 
                     if (this.get('omemo_active') && attrs.message) {
+                        attrs['is_encrypted'] = true;
                         const message = this.messages.create(attrs);
                         this.getBundlesAndBuildSessions()
                             .then(devices => this.createOMEMOMessageStanza(message, devices))

src/templates/message.html

@@ -1,4 +1,5 @@
-<div class="message chat-msg {{{o.type}}} {[ if (o.is_me_message) { ]} chat-msg--action {[ } ]} {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}" data-from="{{{o.from}}}">
+<div class="message chat-msg {{{o.type}}} {[ if (o.is_me_message) { ]} chat-msg--action {[ } ]} {{{o.extra_classes}}}"
+        data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}" data-from="{{{o.from}}}" data-encrypted="{{{o.is_encrypted}}}">
     {[ if (o.type !== 'headline' && !o.is_me_message) { ]}
     <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
     {[ } ]}
@@ -9,6 +10,7 @@
                 {[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
             </span>
             {[ if (!o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
+            {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
         </span>
         {[ if (!o.is_me_message) { ]}<div class="chat-msg__body">{[ } ]}
             {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}