Merge branch 'converse-omemo'

.eslintrc.json

@@ -9,12 +9,13 @@
     "plugins": ["lodash"],
     "extends": ["eslint:recommended", "plugin:lodash/canonical"],
     "globals": {
+        "Uint8Array": true,
         "Promise": true,
         "converse": true,
-        "window": true,
-        "sinon": true,
         "define": true,
-        "require": true
+        "require": true,
+        "sinon": true,
+        "window": true
     },
     "rules": {
         "lodash/prefer-lodash-method": [2, {

.gitignore

@@ -12,6 +12,7 @@
 .idea
 .su?
 builds/*
+3rdparty/libsignal-protocol-javascript/
 *.map
 dist/converse-no-dependencies-es2015.js
 

dev.html

@@ -11,6 +11,7 @@
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
     <link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
+    <script src="3rdparty/libsignal-protocol-javascript/dist/libsignal-protocol.js"></script>
     <script src="dist/converse.js"></script>
 </head>
 

locale/af/LC_MESSAGES/converse.po

@@ -8,7 +8,7 @@ msgstr ""
 "Project-Id-Version: Converse.js 0.4\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: 2018-07-22 11:17+0200\n"
-"PO-Revision-Date: 2018-07-22 12:12+0200\n"
+"PO-Revision-Date: 2018-07-22 15:37+0200\n"
 "Last-Translator: JC Brand <jc@opkode.com>\n"
 "Language-Team: Afrikaans <https://hosted.weblate.org/projects/conversejs/"
 "translations/af/>\n"

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>

package.json

@@ -46,6 +46,7 @@
     "bootstrap": "^4.0.0",
     "bootstrap.native": "^2.0.23",
     "bourbon": "^4.3.2",
+    "bytebuffer": "^3.5.5",
     "clean-css-cli": "^4.0.10",
     "emojione": "^3.0.3",
     "es6-promise": "^4.1.0",
@@ -65,6 +66,7 @@
     "jshint": "^2.9.4",
     "lodash": "4.17.4",
     "lodash-template-loader": "^2.0.0",
+    "long": "^3.1.0",
     "lodash-template-webpack-loader": "jcbrand/lodash-template-webpack-loader",
     "minimist": "^1.2.0",
     "moment": "~> 2.19.3 ",
@@ -72,6 +74,7 @@
     "otr": "0.2.16",
     "pluggable.js": "2.0.0",
     "po2json": "^0.4.4",
+    "protobufjs": "5.0.1",
     "requirejs": "2.3.5",
     "run-headless-chromium": "^0.1.1",
     "sinon": "^2.1.0",

sass/_chatbox.scss

@@ -61,6 +61,8 @@
         }
         .chatbox-buttons {
             flex-direction: row-reverse;
+            @include make-col-ready();
+            @include make-col(3);
             padding: 0;
         }
 

sass/_controlbox.scss

@@ -60,15 +60,6 @@
         width: 100%;
     }
 
-    #converse-modals {
-        .set-xmpp-status {
-            margin: 1em;
-            .custom-control-label {
-                margin-top: 0.25em;
-            }
-        }
-    }
-
     #controlbox {
         .box-flyout {
             background-color: white;

sass/_core.scss

@@ -61,6 +61,10 @@ body.reset {
     direction: ltr;
     z-index: 1031; // One more than bootstrap navbar
 
+    .nopadding {
+        padding: 0 !important;
+    }
+
     &.converse-overlayed {
         > .row {
             flex-direction: row-reverse;

sass/_forms.scss

 #conversejs {
-    form {
-        .form-group {
-            margin-bottom: 2em;
+    .btn--small {
+        font-size: 80%;
+        font-weight: normal;
     }
 
+    form {
         .form-check-label {
             margin-top: $form-check-input-margin-y;
         }
@@ -103,6 +104,11 @@
                 }
             }
         }
+
+        &.converse-form--modal {
+            padding-bottom: 0;
+        }
+
         &.converse-centered-form {
             text-align: center;
         }

sass/_modal.scss

+#conversejs {
+    #converse-modals {
+        .set-xmpp-status {
+            margin: 1em;
+            .custom-control-label {
+                margin-top: 0.25em;
+            }
+        }
+
+        #omemo-tabpanel {
+            margin-top: 1em;
+        }
+
+        .btn {
+            font-weight: normal;
+        }
+
+        #user-profile-modal {
+            .profile-form {
+                label {
+                    font-weight: bold;
+                }
+            }
+            .fingerprint-removal {
+                label {
+                    display: flex;
+                    padding: 0.75rem 1.25rem;
+                }
+            }
+
+            .list-group-item {
+                display: flex;
+                justify-content: left;
+                font-size: 95%;
+
+                input[type="checkbox"] {
+                    margin-right: 1em;
+                }
+            }
+        }
+
+        .fingerprints {
+            width: 100%;
+            margin-bottom: 1em;
+        }
+        
+        .fingerprint-trust {
+            display: flex;
+            justify-content: space-between;
+            font-size: 95%;
+            .fingerprint {
+                margin-left: 1em;
+            }
+        }
+    }
+}

sass/_profile.scss

-#conversejs {
-    #user-profile-modal {
-        label {
-            font-weight: bold;
-        }
-    }
-}

sass/_variables.scss

@@ -34,6 +34,8 @@ $green: #3AA569;
 $dark-green: #1E9652;
 $darkest-green: #0E763B;
 
+$info:  $green !default;
+
 $lightest-green: #E7FBF0;
 $light-green: #5CBC86;
 $green: #3AA569;

sass/converse.scss

@@ -26,6 +26,8 @@
     @import "bootstrap/scss/button-group";
     @import "bootstrap/scss/input-group";
     @import "bootstrap/scss/custom-forms";
+    @import "bootstrap/scss/nav";
+    @import "bootstrap/scss/navbar";
     @import "bootstrap/scss/card";
     @import "bootstrap/scss/breadcrumb";
     @import "bootstrap/scss/badge";
@@ -40,9 +42,9 @@
 }
 @import "core";
 @import "forms";
-@import "profile";
 @import "chatbox";
 @import "controlbox";
+@import "modal";
 @import "roster";
 @import "lists";
 @import "chatrooms";

spec/bookmarks.js

@@ -314,9 +314,11 @@
                 [{'category': 'pubsub', 'type': 'pep'}],
                 ['http://jabber.org/protocol/pubsub#publish-options']
             ).then(function () {
-                test_utils.waitUntil(function () {
-                    return _converse.bookmarks;
-                }, 300).then(function () {
+                return test_utils.waitUntil(() => _converse.bookmarks);
+            }).then(function () {
+                // Emit here instead of mocking fetching of bookmarks.
+                _converse.emit('bookmarksInitialized');
+
                /* The stored data is automatically pushed to all of the user's
                 * connected resources.
                 *
@@ -354,13 +356,13 @@
                                                'autojoin': 'true',
                                                'jid':'theplay@conference.shakespeare.lit'})
                                    .c('nick').t('JC');
-
                _converse.connection._dataRecv(test_utils.createRequest(stanza));
+                return test_utils.waitUntil(() => _converse.bookmarks.length);
+            }).then(function () {
                expect(_converse.bookmarks.length).toBe(1);
                expect(_converse.chatboxviews.get('theplay@conference.shakespeare.lit')).not.toBeUndefined();
                done();
             });
-            });
         }));
 
         it("can be retrieved from the XMPP server", mock.initConverseWithPromises(

spec/controlbox.js

 (function (root, factory) {
     define(["jquery", "jasmine", "mock", "test-utils"], factory);
 } (this, function ($, jasmine, mock, test_utils) {
-    var _ = converse.env._;
-    var $pres = converse.env.$pres;
-    var $msg = converse.env.$msg;
-    var $iq = converse.env.$iq;
-    var u = converse.env.utils;
+    const _ = converse.env._,
+          $pres = converse.env.$pres,
+          $msg = converse.env.$msg,
+          $iq = converse.env.$iq,
+          u = converse.env.utils,
+          Strophe = converse.env.Strophe;
 
 
     describe("The Controlbox", function () {
@@ -72,18 +73,18 @@
                 test_utils.createContacts(_converse, 'all').openControlBox();
                 _converse.emit('rosterContactsFetched');
 
+                let chatview;
                 const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
 
                 test_utils.openChatBoxFor(_converse, sender_jid);
                 return test_utils.waitUntil(() => _converse.chatboxes.length).then(() => {
-
-                    const chatview = _converse.chatboxviews.get(sender_jid);
+                    chatview = _converse.chatboxviews.get(sender_jid);
                     chatview.model.set({'minimized': true});
 
                     expect(_.isNull(_converse.chatboxviews.el.querySelector('.restore-chat .message-count'))).toBeTruthy();
                     expect(_.isNull(_converse.rosterview.el.querySelector('.msgs-indicator'))).toBeTruthy();
 
-                    var msg = $msg({
+                    const msg = $msg({
                             from: sender_jid,
                             to: _converse.connection.jid,
                             type: 'chat',
@@ -91,10 +92,13 @@
                         }).c('body').t('hello').up()
                         .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
                     _converse.chatboxes.onMessage(msg);
+                    return test_utils.waitUntil(() => _converse.rosterview.el.querySelectorAll(".msgs-indicator"));
+                }).then(() => {
+                    spyOn(chatview.model, 'incrementUnreadMsgCounter').and.callThrough();
                     expect(_converse.chatboxviews.el.querySelector('.restore-chat .message-count').textContent).toBe('1');
                     expect(_converse.rosterview.el.querySelector('.msgs-indicator').textContent).toBe('1');
 
-                    msg = $msg({
+                    const msg = $msg({
                             from: sender_jid,
                             to: _converse.connection.jid,
                             type: 'chat',
@@ -102,14 +106,15 @@
                         }).c('body').t('hello again').up()
                         .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
                     _converse.chatboxes.onMessage(msg);
+                return test_utils.waitUntil(() => chatview.model.incrementUnreadMsgCounter.calls.count());
+            }).then(() => {
                     expect(_converse.chatboxviews.el.querySelector('.restore-chat .message-count').textContent).toBe('2');
                     expect(_converse.rosterview.el.querySelector('.msgs-indicator').textContent).toBe('2');
-
                     chatview.model.set({'minimized': false});
                     expect(_.isNull(_converse.chatboxviews.el.querySelector('.restore-chat .message-count'))).toBeTruthy();
                     expect(_.isNull(_converse.rosterview.el.querySelector('.msgs-indicator'))).toBeTruthy();
                     done();
-                });
+                }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
             }));
         });
 

spec/converse.js

@@ -311,7 +311,7 @@
                     }).catch(_.partial(console.error, _));
             }));
 
-            it("has a method 'open' which opens and returns promise that resolves to a chat model", mock.initConverseWithPromises(
+            it("has a method 'open' which opens and returns a promise that resolves to a chat model", mock.initConverseWithPromises(
                 null, ['rosterGroupsFetched', 'chatBoxesInitialized'], {}, function (done, _converse) {
 
                 test_utils.openControlBox();

spec/mam.js

@@ -20,15 +20,27 @@
                     null, ['discoInitialized'], {},
                     function (done, _converse) {
 
-                test_utils.openAndEnterChatRoom(_converse, 'trek-radio', 'conference.lightwitch.org', 'jcbrand').then(function () {
-                    var chatroomview = _converse.chatboxviews.get('trek-radio@conference.lightwitch.org');
-                    var stanza = Strophe.xmlHtmlNode(
+                let view, stanza;
+
+                test_utils.openAndEnterChatRoom(_converse, 'trek-radio', 'conference.lightwitch.org', 'jcbrand')
+                .then(() => {
+                    view = _converse.chatboxviews.get('trek-radio@conference.lightwitch.org');
+                    stanza = Strophe.xmlHtmlNode(
                         `<message xmlns="jabber:client" to="jcbrand@lightwitch.org/converse.js-73057452" type="groupchat" from="trek-radio@conference.lightwitch.org/comndrdukath#0805 (STO)">
                             <body>negan</body>
                             <stanza-id xmlns="urn:xmpp:sid:0" id="45fbbf2a-1059-479d-9283-c8effaf05621" by="trek-radio@conference.lightwitch.org"/>
                          </message>`).firstElementChild;
                     _converse.connection._dataRecv(test_utils.createRequest(stanza));
-
+                    return test_utils.waitUntil(() => view.content.querySelectorAll('.chat-msg').length)
+                }).then(() => {
+                    // XXX: we wait here until the first message appears before
+                    // sending the duplicate. If we don't do that, then the
+                    // duplicate appears before the promise for `createMessage`
+                    // has been resolved, which means that the `isDuplicate`
+                    // check fails because the first message doesn't exist yet.
+                    //
+                    // Not sure whether such a race-condition might pose a problem
+                    // in "real-world" situations.
                     stanza = Strophe.xmlHtmlNode(
                         `<message xmlns="jabber:client" to="jcbrand@lightwitch.org/converse.js-73057452">
                             <result xmlns="urn:xmpp:mam:2" queryid="82d9db27-6cf8-4787-8c2c-5a560263d823" id="45fbbf2a-1059-479d-9283-c8effaf05621">
@@ -39,10 +51,14 @@
                                 </forwarded>
                             </result>
                         </message>`).firstElementChild;
-                    chatroomview.model.onMessage(stanza);
-                    expect(chatroomview.content.querySelectorAll('.chat-msg').length).toBe(1);
+
+                    spyOn(view.model, 'isDuplicate').and.callThrough();
+                    view.model.onMessage(stanza);
+                    return test_utils.waitUntil(() => view.model.isDuplicate.calls.count());
+                }).then(() => {
+                    expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
                     done();
-                });
+                }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
             }))
         });
 

spec/minchats.js

@@ -4,6 +4,7 @@
     const _ = converse.env._;
     const  $msg = converse.env.$msg;
     const u = converse.env.utils;
+    const Strophe = converse.env.Strophe;
 
     describe("The Minimized Chats Widget", function () {
 
@@ -43,7 +44,7 @@
                 expect(_converse.minimized_chats.keys().length).toBe(2);
                 expect(_.includes(_converse.minimized_chats.keys(), contact_jid)).toBeTruthy();
                 done();
-            });
+            }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
         }));
 
         it("can be toggled to hide or show minimized chats",
@@ -74,7 +75,7 @@
             }).then(() => {
                 expect(_converse.minimized_chats.toggleview.model.get('collapsed')).toBeTruthy();
                 done();
-            });
+            }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
         }));
 
         it("shows the number messages received to minimized chats",
@@ -99,7 +100,7 @@
                 contact_jid = mock.cur_names[i].replace(/ /g,'.').toLowerCase() + '@localhost';
                 test_utils.openChatBoxFor(_converse, contact_jid);
             }
-            return test_utils.waitUntil(() => _converse.chatboxes.length == 4).then(() => {
+            test_utils.waitUntil(() => _converse.chatboxes.length == 4).then(() => {
                 for (i=0; i<3; i++) {
                     chatview = _converse.chatboxviews.get(contact_jid);
                     chatview.model.set({'minimized': true});
@@ -111,9 +112,11 @@
                     }).c('body').t('This message is sent to a minimized chatbox').up()
                     .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
                     _converse.chatboxes.onMessage(msg);
-                    expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).is(':visible')).toBeTruthy();
-                    expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i+1).toString());
                 }
+                return test_utils.waitUntil(() => chatview.model.messages.length);
+            }).then(() => {
+                expect(u.isVisible(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count'))).toBeTruthy();
+                expect(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count').textContent).toBe((3).toString());
                 // Chat state notifications don't increment the unread messages counter
                 // <composing> state
                 _converse.chatboxes.onMessage($msg({
@@ -122,7 +125,7 @@
                     type: 'chat',
                     id: (new Date()).getTime()
                 }).c('composing', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
+                expect(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count').textContent).toBe((i).toString());
 
                 // <paused> state
                 _converse.chatboxes.onMessage($msg({
@@ -131,7 +134,7 @@
                     type: 'chat',
                     id: (new Date()).getTime()
                 }).c('paused', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
+                expect(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count').textContent).toBe((i).toString());
 
                 // <gone> state
                 _converse.chatboxes.onMessage($msg({
@@ -140,7 +143,7 @@
                     type: 'chat',
                     id: (new Date()).getTime()
                 }).c('gone', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
+                expect(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count').textContent).toBe((i).toString());
 
                 // <inactive> state
                 _converse.chatboxes.onMessage($msg({
@@ -149,9 +152,9 @@
                     type: 'chat',
                     id: (new Date()).getTime()
                 }).c('inactive', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
-                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe((i).toString());
+                expect(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count').textContent).toBe((i).toString());
                 done();
-            });
+            }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
         }));
 
         it("shows the number messages received to minimized groupchats",
@@ -159,7 +162,7 @@
                 null, ['rosterGroupsFetched'], {},
                 function (done, _converse) {
 
-            var room_jid = 'kitchen@conference.shakespeare.lit';
+            const room_jid = 'kitchen@conference.shakespeare.lit';
             test_utils.openAndEnterChatRoom(
                 _converse, 'kitchen', 'conference.shakespeare.lit', 'fires').then(function () {
                 var view = _converse.chatboxviews.get(room_jid);
@@ -175,11 +178,12 @@
                         type: 'groupchat'
                     }).c('body').t(message).tree();
                 view.model.onMessage(msg);
-
-                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).is(':visible')).toBeTruthy();
-                expect($(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count')).text()).toBe('1');
+                return test_utils.waitUntil(() => view.model.messages.length);
+            }).then(() => {
+                expect(u.isVisible(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count'))).toBeTruthy();
+                expect(_converse.minimized_chats.toggleview.el.querySelector('.unread-message-count').textContent).toBe('1');
                 done();
-            });
+            }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
         }));
     });
 }));

spec/user-details-modal.js

@@ -78,8 +78,9 @@
                 remove_contact_button.click();
                 return test_utils.waitUntil(() => u.isVisible(document.querySelector('.alert-danger')), 2000);
             }).then(function () {
-                expect(document.querySelector('.alert-danger .modal-title').textContent).toBe("Error");
-                expect(document.querySelector('.modal:not(#user-profile-modal) .modal-body p').textContent.trim())
+                const header = document.querySelector('.alert-danger .modal-title');
+                expect(header.textContent).toBe("Error");
+                expect(u.ancestor(header, '.modal-content').querySelector('.modal-body p').textContent.trim())
                     .toBe("Sorry, there was an error while trying to remove Max Frankfurter as a contact.");
                 document.querySelector('.alert-danger  button.close').click();
                 const show_modal_button = view.el.querySelector('.show-user-details-modal');

src/converse-bookmarks.js

@@ -577,8 +577,10 @@
                 // Add a handler for bookmarks pushed from other connected clients
                 // (from the same user obviously)
                 _converse.connection.addHandler((message) => {
-                    if (message.querySelector('event[xmlns="'+Strophe.NS.PUBSUB+'#event"]')) {
-                        _converse.bookmarks.createBookmarksFromStanza(message);
+                    if (sizzle('event[xmlns="'+Strophe.NS.PUBSUB+'#event"] items[node="storage:bookmarks"]', message).length) {
+                        _converse.api.waitUntil('bookmarksInitialized')
+                            .then(() => _converse.bookmarks.createBookmarksFromStanza(message))
+                            .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
                     }
                 }, null, 'message', 'headline', null, _converse.bare_jid);
             });

src/converse-core.js

@@ -86,6 +86,7 @@
         'converse-muc',
         'converse-muc-views',
         'converse-notification',
+        'converse-omemo',
         'converse-oauth',
         'converse-ping',
         'converse-profile',

src/templates/toolbar_omemo.html

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