Implement click on QR-code to copy room or pair link (#174)

public/index.html

@@ -223,7 +223,7 @@
                     </div>
                     <div class="row center">
                         <div class="column">
-                            <div class="center key-qr-code"></div>
+                            <div class="center key-qr-code" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr">000 000</h1>
                             <p class="center text-center key-instructions">
                                 <span class="font-subheading" data-i18n-key="dialogs.input-key-on-this-device" data-i18n-attrs="text"></span>
@@ -293,7 +293,7 @@
                     </div>
                     <div class="row center">
                         <div class="column">
-                            <div class="center key-qr-code"></div>
+                            <div class="center key-qr-code" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr"></h1>
                             <p class="center text-center key-instructions">
                                 <span class="font-subheading" data-i18n-key="dialogs.input-room-id-on-another-device" data-i18n-attrs="text"></span>

public/lang/en.json

@@ -90,7 +90,9 @@
         "receive-title": "{{descriptor}} Received",
         "download-again": "Download again",
         "language-selector-title": "Set Language",
-        "system-language": "System Language"
+        "system-language": "System Language",
+        "public-room-qr-code_title": "Click to copy link to public room",
+        "pair-devices-qr-code_title": "Click to copy link to pair this device"
     },
     "about": {
         "close-about_aria-label": "Close About PairDrop",
@@ -114,6 +116,8 @@
         "public-room-id-invalid": "Invalid room ID",
         "public-room-left": "Left public room {{publicRoomId}}",
         "copied-to-clipboard": "Copied to clipboard",
+        "pair-url-copied-to-clipboard": "Link to pair this device copied to clipboard",
+        "room-url-copied-to-clipboard": "Link to public room copied to clipboard",
         "copied-to-clipboard-error": "Copying not possible. Copy manually.",
         "text-content-incorrect": "Text content is incorrect.",
         "file-content-incorrect": "File content is incorrect.",

public/scripts/ui.js

@@ -1215,6 +1215,7 @@ class PairDeviceDialog extends Dialog {
         Events.on('evaluate-number-room-secrets', _ => this._evaluateNumberRoomSecrets())
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
         this.$el.addEventListener('paste', e => this._onPaste(e));
+        this.$qrCode.addEventListener('click', _ => this._copyPairUrl());
 
         this.evaluateUrlAttributes();
 
@@ -1255,7 +1256,7 @@ class PairDeviceDialog extends Dialog {
         this.$key.innerText = `${this.pairKey.substring(0,3)} ${this.pairKey.substring(3,6)}`
         // Display the QR code for the url
         const qr = new QRCode({
-            content: this._getPairURL(),
+            content: this._getPairUrl(),
             width: 150,
             height: 150,
             padding: 0,
@@ -1269,12 +1270,22 @@ class PairDeviceDialog extends Dialog {
         this.show();
     }
 
-    _getPairURL() {
+    _getPairUrl() {
         let url = new URL(location.href);
         url.searchParams.append('pair_key', this.pairKey)
         return url.href;
     }
 
+    _copyPairUrl() {
+        navigator.clipboard.writeText(this._getPairUrl())
+            .then(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.pair-url-copied-to-clipboard"));
+            })
+            .catch(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard-error"));
+            })
+    }
+
     _onSubmit(e) {
         e.preventDefault();
         this._submit();
@@ -1546,6 +1557,7 @@ class PublicRoomDialog extends Dialog {
         Events.on('public-room-id-invalid', e => this._onPublicRoomIdInvalid(e.detail));
         Events.on('public-room-left', _ => this._onPublicRoomLeft());
         this.$el.addEventListener('paste', e => this._onPaste(e));
+        this.$qrCode.addEventListener('click', _ => this._copyShareRoomUrl());
 
         this.evaluateUrlAttributes();
 
@@ -1594,7 +1606,7 @@ class PublicRoomDialog extends Dialog {
 
         // Display the QR code for the url
         const qr = new QRCode({
-            content: this._getShareRoomURL(),
+            content: this._getShareRoomUrl(),
             width: 150,
             height: 150,
             padding: 0,
@@ -1619,16 +1631,26 @@ class PublicRoomDialog extends Dialog {
         Events.fire('evaluate-footer-badges');
     }
 
-    _getShareRoomURL() {
+    _getShareRoomUrl() {
         let url = new URL(location.href);
-        url.searchParams.append('room_key', this.roomId)
+        url.searchParams.append('room_id', this.roomId)
         return url.href;
     }
 
+    _copyShareRoomUrl() {
+        navigator.clipboard.writeText(this._getShareRoomUrl())
+            .then(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.room-url-copied-to-clipboard"));
+            })
+            .catch(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard-error"));
+            })
+    }
+
     evaluateUrlAttributes() {
         const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has('room_key')) {
+        if (urlParams.has('room_id')) {
-            this._joinPublicRoom(urlParams.get('room_key'));
+            this._joinPublicRoom(urlParams.get('room_id'));
             const url = getUrlWithoutArguments();
             window.history.replaceState({}, "Rewrite URL", url); //remove pair_key from url
         }

public/styles.css

@@ -831,6 +831,8 @@ x-dialog a {
 
 .key-qr-code {
     margin: 16px;
+    width: fit-content;
+    align-self: center;
 }
 
 .key-instructions {

public_included_ws_fallback/index.html

@@ -228,7 +228,7 @@
                     </div>
                     <div class="row center">
                         <div class="column">
-                            <div class="center key-qr-code"></div>
+                            <div class="center key-qr-code" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr">000 000</h1>
                             <p class="center text-center key-instructions">
                                 <span class="font-subheading" data-i18n-key="dialogs.input-key-on-this-device" data-i18n-attrs="text"></span>
@@ -298,7 +298,7 @@
                     </div>
                     <div class="row center">
                         <div class="column">
-                            <div class="center key-qr-code"></div>
+                            <div class="center key-qr-code" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr"></h1>
                             <p class="center text-center key-instructions">
                                 <span class="font-subheading" data-i18n-key="dialogs.input-room-id-on-another-device" data-i18n-attrs="text"></span>

public_included_ws_fallback/lang/en.json

@@ -90,7 +90,9 @@
         "receive-title": "{{descriptor}} Received",
         "download-again": "Download again",
         "language-selector-title": "Set Language",
-        "system-language": "System Language"
+        "system-language": "System Language",
+        "public-room-qr-code_title": "Click to copy link to public room",
+        "pair-devices-qr-code_title": "Click to copy link to pair this device"
     },
     "about": {
         "close-about_aria-label": "Close About PairDrop",
@@ -114,6 +116,8 @@
         "public-room-id-invalid": "Invalid room ID",
         "public-room-left": "Left public room {{publicRoomId}}",
         "copied-to-clipboard": "Copied to clipboard",
+        "pair-url-copied-to-clipboard": "Link to pair this device copied to clipboard",
+        "room-url-copied-to-clipboard": "Link to public room copied to clipboard",
         "copied-to-clipboard-error": "Copying not possible. Copy manually.",
         "text-content-incorrect": "Text content is incorrect.",
         "file-content-incorrect": "File content is incorrect.",

public_included_ws_fallback/scripts/ui.js

@@ -1217,6 +1217,7 @@ class PairDeviceDialog extends Dialog {
         Events.on('evaluate-number-room-secrets', _ => this._evaluateNumberRoomSecrets())
         Events.on('secret-room-deleted', e => this._onSecretRoomDeleted(e.detail));
         this.$el.addEventListener('paste', e => this._onPaste(e));
+        this.$qrCode.addEventListener('click', _ => this._copyPairUrl());
 
         this.evaluateUrlAttributes();
 
@@ -1257,7 +1258,7 @@ class PairDeviceDialog extends Dialog {
         this.$key.innerText = `${this.pairKey.substring(0,3)} ${this.pairKey.substring(3,6)}`
         // Display the QR code for the url
         const qr = new QRCode({
-            content: this._getPairURL(),
+            content: this._getPairUrl(),
             width: 150,
             height: 150,
             padding: 0,
@@ -1271,12 +1272,22 @@ class PairDeviceDialog extends Dialog {
         this.show();
     }
 
-    _getPairURL() {
+    _getPairUrl() {
         let url = new URL(location.href);
         url.searchParams.append('pair_key', this.pairKey)
         return url.href;
     }
 
+    _copyPairUrl() {
+        navigator.clipboard.writeText(this._getPairUrl())
+            .then(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.pair-url-copied-to-clipboard"));
+            })
+            .catch(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard-error"));
+            })
+    }
+
     _onSubmit(e) {
         e.preventDefault();
         this._submit();
@@ -1548,6 +1559,7 @@ class PublicRoomDialog extends Dialog {
         Events.on('public-room-id-invalid', e => this._onPublicRoomIdInvalid(e.detail));
         Events.on('public-room-left', _ => this._onPublicRoomLeft());
         this.$el.addEventListener('paste', e => this._onPaste(e));
+        this.$qrCode.addEventListener('click', _ => this._copyShareRoomUrl());
 
         this.evaluateUrlAttributes();
 
@@ -1596,7 +1608,7 @@ class PublicRoomDialog extends Dialog {
 
         // Display the QR code for the url
         const qr = new QRCode({
-            content: this._getShareRoomURL(),
+            content: this._getShareRoomUrl(),
             width: 150,
             height: 150,
             padding: 0,
@@ -1621,16 +1633,26 @@ class PublicRoomDialog extends Dialog {
         Events.fire('evaluate-footer-badges');
     }
 
-    _getShareRoomURL() {
+    _getShareRoomUrl() {
         let url = new URL(location.href);
-        url.searchParams.append('room_key', this.roomId)
+        url.searchParams.append('room_id', this.roomId)
         return url.href;
     }
 
+    _copyShareRoomUrl() {
+        navigator.clipboard.writeText(this._getShareRoomUrl())
+            .then(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.room-url-copied-to-clipboard"));
+            })
+            .catch(_ => {
+                Events.fire('notify-user', Localization.getTranslation("notifications.copied-to-clipboard-error"));
+            })
+    }
+
     evaluateUrlAttributes() {
         const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has('room_key')) {
+        if (urlParams.has('room_id')) {
-            this._joinPublicRoom(urlParams.get('room_key'));
+            this._joinPublicRoom(urlParams.get('room_id'));
             const url = getUrlWithoutArguments();
             window.history.replaceState({}, "Rewrite URL", url); //remove pair_key from url
         }

public_included_ws_fallback/styles.css

@@ -861,6 +861,8 @@ x-dialog a {
 
 .key-qr-code {
     margin: 16px;
+    width: fit-content;
+    align-self: center;
 }
 
 .key-instructions {