Prefill room secrets entry with displayName given by server to prevent displayName `undefined` in EditPairedDevices Dialog (fixes #221)

public/scripts/network.js

@@ -350,7 +350,7 @@ class Peer {
     // Is overwritten in expanding classes
     _send(message) {}
 
-    sendDisplayName(displayName) {
+    _sendDisplayName(displayName) {
         this.sendJSON({type: 'display-name-changed', displayName: displayName});
     }
 
@@ -756,15 +756,23 @@ class Peer {
     }
 
     _onDisplayNameChanged(message) {
-        const displayNameHasChanged = this._displayName !== message.displayName
+        const displayNameHasChanged = message.displayName !== this._displayName;
 
-        if (message.displayName && displayNameHasChanged) {
+        if (!message.displayName || !displayNameHasChanged) return;
-            this._displayName = message.displayName;
+
+        this._displayName = message.displayName;
+
+        const roomSecret = this._getPairSecret();
+
+        if (roomSecret) {
+            PersistentStorage
+                .updateRoomSecretDisplayName(roomSecret, message.displayName)
+                .then(roomSecretEntry => {
+                    console.log(`Successfully updated DisplayName for roomSecretEntry ${roomSecretEntry.key}`);
+                })
         }
 
         Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
-
-        if (!displayNameHasChanged) return;
         Events.fire('notify-peer-display-name-changed', this._peerId);
     }
 }
@@ -985,7 +993,7 @@ class RTCPeer extends Peer {
                 await this._handleRemoteCandidate(message.candidate);
                 break;
             default:
-                console.warn(this.name, 'Unknown message type:', message.type);
+                console.warn('Unknown signalType:', message.signalType);
                 break;
         }
     }
@@ -1060,8 +1068,8 @@ class RTCPeer extends Peer {
         this._server.send(message);
     }
 
-    sendDisplayName(displayName) {
+    _sendDisplayName(displayName) {
-        super.sendDisplayName(displayName);
+        super._sendDisplayName(displayName);
     }
 
     getConnectionHash() {
@@ -1403,7 +1411,7 @@ class PeersManager {
     _notifyPeerDisplayNameChanged(peerId) {
         const peer = this.peers[peerId];
         if (!peer) return;
-        this.peers[peerId].sendDisplayName(this._displayName);
+        this.peers[peerId]._sendDisplayName(this._displayName);
     }
 
     _onDisplayName(displayName) {

public/scripts/persistent-storage.js

@@ -255,15 +255,15 @@ class PersistentStorage {
         })
     }
 
-    static updateRoomSecretNames(roomSecret, displayName, deviceName) {
+    static updateRoomSecretDisplayName(roomSecret, displayName) {
-        return this.updateRoomSecret(roomSecret, undefined, displayName, deviceName);
+        return this.updateRoomSecret(roomSecret, null, displayName, null);
     }
 
     static updateRoomSecretAutoAccept(roomSecret, autoAccept) {
-        return this.updateRoomSecret(roomSecret, undefined, undefined, undefined, autoAccept);
+        return this.updateRoomSecret(roomSecret, null, null, null, autoAccept);
     }
 
-    static updateRoomSecret(roomSecret, updatedRoomSecret = undefined, updatedDisplayName = undefined, updatedDeviceName = undefined, updatedAutoAccept = undefined) {
+    static updateRoomSecret(roomSecret, updatedRoomSecret = null, updatedDisplayName = null, updatedDeviceName = null, updatedAutoAccept = null) {
         return new Promise((resolve, reject) => {
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = e => {
@@ -278,10 +278,10 @@ class PersistentStorage {
                         const objectStore = transaction.objectStore('room_secrets');
                         // Do not use `updatedRoomSecret ?? roomSecretEntry.entry.secret` to ensure compatibility with older browsers
                         const updatedRoomSecretEntry = {
-                            'secret': updatedRoomSecret !== undefined ? updatedRoomSecret : roomSecretEntry.entry.secret,
+                            'secret': updatedRoomSecret !== null ? updatedRoomSecret : roomSecretEntry.entry.secret,
-                            'display_name': updatedDisplayName !== undefined ? updatedDisplayName : roomSecretEntry.entry.display_name,
+                            'display_name': updatedDisplayName !== null ? updatedDisplayName : roomSecretEntry.entry.display_name,
-                            'device_name': updatedDeviceName !== undefined ? updatedDeviceName : roomSecretEntry.entry.device_name,
+                            'device_name': updatedDeviceName !== null ? updatedDeviceName : roomSecretEntry.entry.device_name,
-                            'auto_accept': updatedAutoAccept !== undefined ? updatedAutoAccept : roomSecretEntry.entry.auto_accept
+                            'auto_accept': updatedAutoAccept !== null ? updatedAutoAccept : roomSecretEntry.entry.auto_accept
                         };
 
                         const objectStoreRequestUpdate = objectStore.put(updatedRoomSecretEntry, roomSecretEntry.key);

public/scripts/ui.js

@@ -43,7 +43,7 @@ class PeersUI {
         Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text));
         Events.on('translation-loaded', _ => this._reloadShareMode());
         Events.on('room-type-removed', e => this._onRoomTypeRemoved(e.detail.peerId, e.detail.roomType));
-
+        Events.on('room-secret-added', e => this._onRoomSecretAdded(e.detail.peerId, e.detail.roomSecret));
 
         this.$shareModeCancelBtn.addEventListener('click', _ => this._deactivateShareMode());
 
@@ -168,6 +168,23 @@ class PeersUI {
         peerUI._removeRoomId(roomType);
     }
 
+
+    _onRoomSecretAdded(peerId, roomSecret) {
+        // If a device is paired that is already connected we must update the displayName saved for the roomSecret
+        // here as the "display-name-changed" message has already been received
+        const peerUI = this.peerUIs[peerId];
+
+        if (!peerUI || !peerUI._connected) return;
+
+        const displayName = peerUI._displayName();
+
+        PersistentStorage
+            .updateRoomSecretDisplayName(roomSecret, displayName)
+            .then(roomSecretEntry => {
+                console.log(`Successfully updated DisplayName for roomSecretEntry ${roomSecretEntry.key}`);
+            })
+    }
+
     _onSetProgress(progress) {
         const peerUI = this.peerUIs[progress.peerId];
 
@@ -1530,13 +1547,8 @@ class PairDeviceDialog extends Dialog {
     }
 
     _onPairPeerJoined(peer, roomSecret) {
-        // if devices are paired that are already connected we must save the names at this point
+        const displayName = peer.name.displayName;
-        const $peer = $(peer.id);
+        const deviceName = peer.name.deviceName;
-        let displayName, deviceName;
-        if ($peer) {
-            displayName = $peer.ui._peer.name.displayName;
-            deviceName = $peer.ui._peer.name.deviceName;
-        }
 
         PersistentStorage
             .addRoomSecret(roomSecret, displayName, deviceName)
@@ -1552,6 +1564,7 @@ class PairDeviceDialog extends Dialog {
                 Events.fire('notify-user', Localization.getTranslation("notifications.pairing-not-persistent"));
                 PersistentStorage.logBrowserNotCapable();
             });
+        Events.fire('room-secret-added', {peerId: peer.id, roomSecret: roomSecret})
     }
 
     _onPublicRoomJoinKeyInvalid() {