diff --git a/public/index.html b/public/index.html index 8608b98..9dec54e 100644 --- a/public/index.html +++ b/public/index.html @@ -223,7 +223,7 @@
-
+

000 000

@@ -293,7 +293,7 @@

-
+

diff --git a/public/lang/en.json b/public/lang/en.json index 93e5156..2442662 100644 --- a/public/lang/en.json +++ b/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.", diff --git a/public/scripts/ui.js b/public/scripts/ui.js index 5696afa..46b4b21 100644 --- a/public/scripts/ui.js +++ b/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')) { - this._joinPublicRoom(urlParams.get('room_key')); + if (urlParams.has('room_id')) { + this._joinPublicRoom(urlParams.get('room_id')); const url = getUrlWithoutArguments(); window.history.replaceState({}, "Rewrite URL", url); //remove pair_key from url } diff --git a/public/styles.css b/public/styles.css index 8c89da4..4d5fadb 100644 --- a/public/styles.css +++ b/public/styles.css @@ -831,6 +831,8 @@ x-dialog a { .key-qr-code { margin: 16px; + width: fit-content; + align-self: center; } .key-instructions { diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html index cea46d4..5a025bf 100644 --- a/public_included_ws_fallback/index.html +++ b/public_included_ws_fallback/index.html @@ -228,7 +228,7 @@

-
+

000 000

@@ -298,7 +298,7 @@

-
+

diff --git a/public_included_ws_fallback/lang/en.json b/public_included_ws_fallback/lang/en.json index 93e5156..2442662 100644 --- a/public_included_ws_fallback/lang/en.json +++ b/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.", diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index d4cce7e..ef4041f 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/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')) { - this._joinPublicRoom(urlParams.get('room_key')); + if (urlParams.has('room_id')) { + this._joinPublicRoom(urlParams.get('room_id')); const url = getUrlWithoutArguments(); window.history.replaceState({}, "Rewrite URL", url); //remove pair_key from url } diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css index 7c8f8a5..6895f6d 100644 --- a/public_included_ws_fallback/styles.css +++ b/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 {