Add devices section to own profile modal

Allow for devices to be removed.

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

@@ -5,10 +5,6 @@
     }
 
     form {
-        .form-group {
-            margin-bottom: 2em;
-        }
-
         .form-check-label {
             margin-top: $form-check-input-margin-y;
         }
@@ -108,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 {
+            label {
+                font-weight: bold;
+            }
+            .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%;
+        }
+    }
+}

sass/_profile.scss

-#conversejs {
-    #user-profile-modal {
-        label {
-            font-weight: bold;
-        }
-    }
-    .fingerprint-trust {
-        display: flex;
-        justify-content: space-between;
-        font-size: 95%;
-    }
-}

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";

src/converse-omemo.js

@@ -70,6 +70,41 @@
 
         overrides: {
 
+            ProfileModal: {
+                events: {
+                    'change input.select-all': 'selectAll',
+                    'submit .fingerprint-removal': 'removeSelectedFingerprints'
+                },
+
+                initialize () {
+                    const { _converse } = this.__super__,
+                          device_id = _converse.omemo_store.get('device_id');
+
+                    this.devicelist = _converse.devicelists.get(_converse.bare_jid);
+                    this.current_device = this.devicelist.devices.get(device_id);
+                    this.other_devices = this.devicelist.devices.filter(d => (d.get('id') !== device_id));
+
+                    this.devicelist.devices.on('change:bundle', this.render, this);
+                    return this.__super__.initialize.apply(this, arguments);
+                },
+
+                selectAll (ev) {
+                    let sibling = ev.target.parentElement.nextElementSibling;
+                    while (sibling) {
+                        sibling.firstElementChild.checked = ev.target.checked;
+                        sibling = sibling.nextElementSibling;
+                    }
+                },
+
+                removeSelectedFingerprints (ev) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    const checkboxes = ev.target.querySelectorAll('.fingerprint-removal-item input[type="checkbox"]:checked'),
+                          device_ids = _.map(checkboxes, 'value');
+                    this.devicelist.removeOwnDevices(device_ids);
+                },
+            },
+
             UserDetailsModal: {
                 events: {
                     'click .fingerprint-trust .btn input': 'toggleDeviceTrust'
@@ -415,7 +450,7 @@
                 });
             }
 
-            _converse.getFingerprintsForContact = function (jid) {
+            _converse.generateFingerprints= function (jid) {
                 return _converse.getDevicesForContact(jid)
                     .then(devices => Promise.all(devices.map(d => generateFingerprint(d))))
             }
@@ -734,6 +769,10 @@
                         });
                         _converse.connection.sendIQ(stanza, resolve, reject, _converse.IQ_TIMEOUT);
                     }).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
+                },
+
+                removeOwnDevices (device_ids) {
+                    // TODO
                 }
             });
 
@@ -893,7 +932,11 @@
 
             _converse.api.listen.on('userDetailsModalInitialized', (contact) => {
                 const jid = contact.get('jid');
-                _converse.getFingerprintsForContact(jid).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
+                _converse.generateFingerprints(jid).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
+            });
+
+            _converse.api.listen.on('profileModalInitialized', (contact) => {
+                _converse.generateFingerprints(_converse.bare_jid).catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
             });
         }
     });

src/converse-profile.js

@@ -48,32 +48,40 @@
                 events: {
                     'click .change-avatar': "openFileSelection",
                     'change input[type="file"': "updateFilePreview",
-                    'submit form': 'onFormSubmitted'
+                    'submit .profile-form': 'onFormSubmitted'
                 },
 
                 initialize () {
                     _converse.BootstrapModal.prototype.initialize.apply(this, arguments);
                     this.model.on('change', this.render, this);
+                    _converse.emit('profileModalInitialized', this.model);
                 },
 
                 toHTML () {
                     return tpl_profile_modal(_.extend(
                         this.model.toJSON(),
                         this.model.vcard.toJSON(), {
+                        '_': _,
+                        '__': __,
+                        '_converse': _converse,
+                        'alt_avatar': __('Your avatar image'),
                         'heading_profile': __('Your Profile'),
                         'label_close': __('Close'),
                         'label_email': __('Email'),
                         'label_fullname': __('Full Name'),
-                        'label_nickname': __('Nickname'),
                         'label_jid': __('XMPP Address (JID)'),
+                        'label_nickname': __('Nickname'),
                         'label_role': __('Role'),
                         'label_role_help': __('Use commas to separate multiple roles. Your roles are shown next to your name on your chat messages.'),
-                        'label_save': __('Save'),
                         'label_url': __('URL'),
-                        'alt_avatar': __('Your avatar image')
+                        'view': this
                     }));
                 },
 
+                afterRender () {
+                    this.tabs = _.map(this.el.querySelectorAll('.nav-item'), (tab) => new bootstrap.Tab(tab));
+                },
+
                 openFileSelection (ev) {
                     ev.preventDefault();
                     this.el.querySelector('input[type="file"]').click();

src/templates/user_details_modal.html

@@ -40,7 +40,6 @@
                                 {[ 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--small {[ if (device.get('trusted') !== -1) { ]} btn-primary active {[ } else { ]}  btn-secondary {[ } ]}">
                                             <input type="radio" name="{{{device.get('id')}}}" value="1"
@@ -51,6 +50,7 @@
                                                 {[ if (device.get('trusted') === -1) { ]} checked="checked" {[ } ]}>{{{o.__('Untrusted')}}}
                                         </label>
                                     </div>
+                                    <span class="fingerprint">{{{device.get('bundle').fingerprint}}}</span>
                                     </form>
                                 </li>
                                 {[ } ]}