Work on rendering via a vdom-subview

Abandoned due to not being able to trigger events in subviews

src/converse-chatview.js

@@ -246,24 +246,6 @@
                     _converse.BootstrapModal.prototype.initialize.apply(this, arguments);
                     this.model.on('contactAdded', this.registerContactEventHandlers, this);
                     this.model.on('change', this.render, this);
-
-                    // XXX: Leaky abstraction from converse-omemo
-                    // In part, we're hampered by the fact that we can't
-                    // have sub-views inside a VDOMView.
-                    // If we did, we could put the OMEMO part of this modal
-                    // inside another view and have it render as a sub-view.
-                    // However, for this we'd need some kind of registry and
-                    // way to look up sub-views by tag from the template (which
-                    // I assume is what for example vue.js does).
-                    this.has_omemo = _converse.pluggable.plugins['converse-omemo'].enabled();
-                    if (this.has_omemo) {
-                        const jid = this.model.get('jid');
-                        this.devicelist = _converse.devicelists.get(jid) || _converse.devicelists.create({'jid': jid});
-                        this.devicelist.devices.on('change:fingerprint', this.render, this);
-                    } else {
-                        this.devicelist = {};
-                    }
-
                     this.registerContactEventHandlers();
                     _converse.emit('userDetailsModalInitialized', this.model);
                 },

src/converse-modal.js

@@ -26,6 +26,7 @@
             _converse.BootstrapModal = Backbone.VDOMView.extend({
 
                 initialize () {
+                    Backbone.VDOMView.prototype.initialize.apply(this, arguments);
                     this.render().insertIntoDOM();
                     this.modal = new bootstrap.Modal(this.el, {
                         backdrop: 'static',

src/converse-omemo.js

@@ -9,9 +9,10 @@
 (function (root, factory) {
     define([
         "converse-core",
-        "templates/toolbar_omemo.html"
+        "templates/toolbar_omemo.html",
+        "templates/omemo_fingerprints.html"
     ], factory);
-}(this, function (converse, tpl_toolbar_omemo) {
+}(this, function (converse, tpl_toolbar_omemo, tpl_omemo_fingerprints) {
 
     const { Backbone, Promise, Strophe, moment, sizzle, $iq, $msg, _, b64_sha1 } = converse.env;
     const u = converse.env.utils;
@@ -187,7 +188,8 @@
             /* The initialize function gets called as soon as the plugin is
              * loaded by Converse.js's plugin machinery.
              */
-            const { _converse } = this;
+            const { _converse } = this,
+                  { __ } = _converse;
 
             _converse.api.promises.add(['OMEMOInitialized']);
 
@@ -214,6 +216,55 @@
                 });
             }
 
+            _converse.OMEMOFingerprintsView = Backbone.VDOMView.extend({
+                events: {
+                    'click .fingerprint-trust label.btn': 'toggleDeviceTrust'
+                },
+
+                initialize () {
+                    const jid = this.model.get('jid');
+                    this.devicelist = _converse.devicelists.get(jid) || _converse.devicelists.create({'jid': jid});
+                    this.devicelist.devices.on('change:bundle', () => this.model.trigger('subview-render'));
+                },
+
+                toHTML () {
+                    return tpl_omemo_fingerprints(_.extend(
+                        this.model.toJSON(), {
+                        '_': _,
+                        '__': __,
+                        'devicelist': this.devicelist
+                    }));
+                },
+
+                toggleDeviceTrust () {
+                    debugger;
+                }
+            });
+            Backbone.registerSubView('omemo_fingerprints', _converse.OMEMOFingerprintsView);
+
+
+            function generateFingerprint (device) {
+                return new Promise((resolve, reject) => {
+                    device.getBundle().then((bundle) => {
+                        // TODO: only generate fingerprints when necessary
+                        crypto.subtle.digest('SHA-1', u.base64ToArrayBuffer(bundle['identity_key']))
+                            .then((fp) => {
+                                bundle['fingerprint'] = u.arrayBufferToHex(fp);
+                                device.save('bundle', bundle);
+                                device.trigger('change:bundle'); // Doesn't get triggered automatically due to pass-by-reference
+                                resolve();
+                            }).catch(reject);
+                    });
+                });
+            }
+
+            _converse.getFingerprintsForContact = function (jid) {
+                return new Promise((resolve, reject) => {
+                    _converse.getDevicesForContact(jid)
+                        .then((devices) => Promise.all(devices.map(d => generateFingerprint(d))).then(resolve).catch(reject));
+                });
+            }
+
             _converse.getDevicesForContact = function (jid) {
                 return new Promise((resolve, reject) => {
                     _converse.api.waitUntil('OMEMOInitialized').then(() => {

src/templates/user_details_modal.html

@@ -28,36 +28,7 @@
                 <p><label>{{{o.__('Role')}}}:</label>&nbsp;{{{o.role}}}</p>
                 {[ } ]}
 
-                {[ if (o.has_omemo) { ]}
-                    <hr>
-                    <ul class="list-group fingerprints">
-                        <li class="list-group-item active">{{{o.__('OMEMO Fingerprints')}}}</li>
-                        {[ if (!o.devicelist.devices) { ]}
-                            <li class="list-group-item"><span class="spinner fa fa-spinner centered"/></li>
-                        {[ } ]}
-                        {[ if (o.devicelist.devices) { ]}
-                            {[ o.devicelist.devices.each(function (device) { ]}
-                                {[ if (device.get('bundle') && device.get('bundle').fingerprint) { ]}
-                                <li class="list-group-item">
-                                    <form class="fingerprint-trust">
-                                    <span class="fingerprint">{{{device.get('bundle').fingerprint}}}</span>
-                                    <div class="btn-group btn-group-toggle">
-                                        <label class="btn btn-primary btn--small" {[ if (device.get('trusted') != -1) { ]} active {[ } ]}>
-                                            <input type="radio" name="trust-{{{device.get('id')}}}" value="trusted"
-                                                {[ if (device.get('trusted') != -1) { ]} checked {[ } ]}>{{{o.__('Trusted')}}}
-                                        </label>
-                                        <label class="btn btn-secondary btn--small" {[ if (device.get('trusted') != -1) { ]} active {[ } ]}>
-                                            <input type="radio" name="trust-{{{device.get('id')}}}" value="untrusted"
-                                                {[ if (device.get('trusted') == -1) { ]} checked {[ } ]}>{{{o.__('Untrusted')}}}
-                                        </label>
-                                    </div>
-                                    </form>
-                                </li>
-                                {[ } ]}
-                            {[ }); ]}
-                        {[ } ]}
-                    </ul>
-                {[ } ]}
+                <div data-subview="omemo_fingerprints"></div>
             </div>
             <div class="modal-footer">
                 {[ if (o.allow_contact_removal && o.is_roster_contact) { ]}