Implement own device removal via stanza

css/converse.css

@@ -8575,8 +8575,10 @@ body.reset {
   margin-top: 1em; }
 #conversejs #converse-modals .btn {
   font-weight: normal; }
-#conversejs #converse-modals #user-profile-modal label {
+#conversejs #converse-modals #user-profile-modal .profile-form label {
   font-weight: bold; }
+#conversejs #converse-modals #user-profile-modal .fingerprint-removal label {
+  padding: 0.75rem 1.25rem; }
 #conversejs #converse-modals #user-profile-modal .list-group-item {
   display: flex;
   justify-content: left;

sass/_modal.scss

@@ -16,9 +16,17 @@
         }
 
         #user-profile-modal {
+            .profile-form {
                 label {
                     font-weight: bold;
                 }
+            }
+            .fingerprint-removal {
+                label {
+                    padding: 0.75rem 1.25rem;
+                }
+            }
+
             .list-group-item {
                 display: flex;
                 justify-content: left;

src/converse-chatboxes.js

@@ -259,7 +259,7 @@
                     });
                     this.messages = new _converse.Messages();
                     this.messages.browserStorage = new Backbone.BrowserStorage[_converse.storage](
-                        b64_sha1(`converse.messages${this.get('jid')}${_converse.bare_jid}`));
+                        `converse.messages${this.get('jid')}${_converse.bare_jid}`);
                     this.messages.chatbox = this;
 
                     this.messages.on('change:upload', (message) => {
@@ -626,7 +626,7 @@
 
                 onConnected () {
                     this.browserStorage = new Backbone.BrowserStorage.session(
-                        b64_sha1(`converse.chatboxes-${_converse.bare_jid}`));
+                        `converse.chatboxes-${_converse.bare_jid}`);
                     this.registerMessageHandler();
                     this.fetch({
                         'add': true,

src/templates/profile_modal.html

@@ -68,37 +68,47 @@
                             <form class="converse-form fingerprint-removal">
                                 <ul class="list-group fingerprints">
                                     <li class="list-group-item active">{{{o.__("This device's OMEMO fingerprint")}}}</li>
-                                    <li class="fingerprint-removal-item list-group-item">
+                                    <li class="list-group-item">
                                         {[ if (o.view.current_device.get('bundle') && o.view.current_device.get('bundle').fingerprint) { ]}
-                                            <input type="checkbox" value="{{{o.view.current_device.get('id')}}}"
-                                                   aria-label="{{{o.__('Checkbox for removing the following fingerprint')}}}">
                                             <span class="fingerprint">{{{o.view.current_device.get('bundle').fingerprint}}}</span>
                                         {[ } else {]}
                                             <span class="spinner fa fa-spinner centered"/>
                                         {[ } ]}
                                     </li>
                                 </ul>
-                                {[ if (o.view.other_devices) { ]}
+                                {[ if (o.view.other_devices.length) { ]}
                                     <ul class="list-group fingerprints">
-                                        <li class="list-group-item active">
+                                        <li class="list-group-item nopadding active">
+                                            <label>
                                             <input type="checkbox" class="select-all" title="{{{o.__('Select all')}}}"
                                                    aria-label="{{{o.__('Checkbox to select fingerprints of all other OMEMO devices')}}}">
                                             {{{o.__('Other OMEMO-enabled devices')}}}
+                                            </label>
                                         </li>
                                         {[ o._.forEach(o.view.other_devices, function (device) { ]}
                                             {[ if (device.get('bundle') && device.get('bundle').fingerprint) { ]}
-                                            <li class="fingerprint-removal-item list-group-item">
+                                            <li class="fingerprint-removal-item list-group-item nopadding">
+                                                <label>
                                                 <input type="checkbox" value="{{{device.get('id')}}}"
                                                        aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}">
                                                 <span class="fingerprint">{{{device.get('bundle').fingerprint}}}</span>
+                                                </label>
+                                            </li>
+                                            {[ } else {]}
+                                            <li class="fingerprint-removal-item list-group-item nopadding">
+                                                <label>
+                                                <input type="checkbox" value="{{{device.get('id')}}}"
+                                                       aria-label="{{{o.__('Checkbox for selecting the following fingerprint')}}}">
+                                                <span>{{{o.__('Device without a fingerprint')}}}</span>
+                                                </label>
                                             </li>
                                             {[ } ]}
                                         {[ }); ]}
                                     </ul>
-                                {[ } ]}
                                     <div class="form-group">
                                         <button type="submit" class="save-form btn btn-primary">{{{o.__('Remove checked devices and close')}}}</button>
                                     </div>
+                                {[ } ]}
                             </form>
                         </div>
                     {[ } ]}