Change lock icon when clicking the toggle

updates #497

spec/omemo.js

@@ -5,6 +5,7 @@
     var b64_sha1 = converse.env.b64_sha1;
     var $iq = converse.env.$iq;
     var _ = converse.env._;
+    var u = converse.env.utils;
 
     describe("The OMEMO module", function() {
 
@@ -151,12 +152,24 @@
                 const view = _converse.chatboxviews.get(contact_jid);
                 const toolbar = view.el.querySelector('.chat-toolbar');
                 expect(view.model.get('omemo_active')).toBe(undefined);
-                expect(_.isNull(toolbar.querySelector('.toggle-omemo'))).toBe(false);
+                const toggle = toolbar.querySelector('.toggle-omemo');
+                expect(_.isNull(toggle)).toBe(false);
+                expect(u.hasClass('fa-unlock', toggle)).toBe(true);
+                expect(u.hasClass('fa-lock', toggle)).toBe(false);
+
                 spyOn(view, 'toggleOMEMO').and.callThrough();
                 view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
                 toolbar.querySelector('.toggle-omemo').click();
                 expect(view.toggleOMEMO).toHaveBeenCalled();
                 expect(view.model.get('omemo_active')).toBe(true);
+
+                return test_utils.waitUntil(() => u.hasClass('fa-lock', toolbar.querySelector('.toggle-omemo')));
+            }).then(function () {
+                const view = _converse.chatboxviews.get(contact_jid);
+                const toolbar = view.el.querySelector('.chat-toolbar');
+                const toggle = toolbar.querySelector('.toggle-omemo');
+                expect(u.hasClass('fa-unlock', toggle)).toBe(false);
+                expect(u.hasClass('fa-lock', toggle)).toBe(true);
                 done();
             }).catch(_.partial(console.error, _));
         }));

src/converse-chatboxes.js

@@ -336,7 +336,8 @@
                         'time': moment().format(),
                         'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
                         'is_spoiler': is_spoiler,
-                        'spoiler_hint': is_spoiler ? spoiler_hint : undefined
+                        'spoiler_hint': is_spoiler ? spoiler_hint : undefined,
+                        'type': this.get('message_type')
                     });
                 },
 
@@ -390,8 +391,7 @@
                                         this.getOutgoingMessageAttributes(), {
                                         'file': file,
                                         'progress': 0,
-                                        'slot_request_url': slot_request_url,
+                                        'slot_request_url': slot_request_url
-                                        'type': this.get('message_type'),
                                     })
                                 );
                             }

src/converse-omemo.js

@@ -64,9 +64,26 @@
                     'click .toggle-omemo': 'toggleOMEMO'
                 },
 
+                renderOMEMOToolbarButton () {
+                    const { _converse } = this.__super__,
+                          { __ } = _converse;
+                    contactHasOMEMOSupport(_converse, this.model.get('jid')).then((support) => {
+                        if (support) {
+                            const icon = this.el.querySelector('.toggle-omemo'),
+                                html = tpl_toolbar_omemo(_.extend(this.model.toJSON(), {'__': __}));
+                            if (icon) {
+                                icon.outerHTML = html;
+                            } else {
+                                this.el.querySelector('.chat-toolbar').insertAdjacentHTML('beforeend', html);
+                            }
+                        }
+                    }).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
+                },
+
                 toggleOMEMO (ev) {
                     ev.preventDefault();
                     this.model.save({'omemo_active': !this.model.get('omemo_active')});
+                    this.renderOMEMOToolbarButton();
                 }
             }
         },
@@ -326,17 +343,6 @@
                 return _converse.omemo_store.fetchSession();
             }
 
-            function addOMEMOToolbarButton (view) {
-                const { __ } = _converse;
-                contactHasOMEMOSupport(_converse, view.model.get('jid')).then((support) => {
-                    if (support) {
-                        view.el.querySelector('.chat-toolbar').insertAdjacentHTML(
-                            'beforeend',
-                            tpl_toolbar_omemo({'__': __}));
-                    }
-                }).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
-            }
-
             function initOMEMO() {
                 _converse.devicelists = new _converse.DeviceLists();
                 _converse.devicelists.browserStorage = new Backbone.BrowserStorage.session(
@@ -351,7 +357,7 @@
 
             _converse.api.listen.on('afterTearDown', () => _converse.devices.reset());
             _converse.api.listen.on('connected', registerPEPPushHandler);
-            _converse.api.listen.on('renderToolbar', addOMEMOToolbarButton);
+            _converse.api.listen.on('renderToolbar', (view) => view.renderOMEMOToolbarButton());
             _converse.api.listen.on('statusInitialized', initOMEMO);
             _converse.api.listen.on('addClientFeatures',
                 () => _converse.api.disco.own.features.add(Strophe.NS.OMEMO_DEVICELIST+"notify"));

src/templates/toolbar_omemo.html

@@ -1 +1 @@
-<li class="toggle-omemo fa fa-unlock" title="{{{o.__('Messages are being sent in plaintext')}}}"></li>
+<li class="toggle-omemo fa {[ if (o.omemo_active) { ]} fa-lock {[ } else { ]} fa-unlock {[ } ]}" title="{{{o.__('Messages are being sent in plaintext')}}}"></li>