mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-25 09:16:18 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
schlagmichdoch 2023-10-11 20:19:19 +02:00
parent a32b310bf0
commit bb1468fa42
8 changed files with 76 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public_included_ws_fallback/index.html
View file

@ -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>

6
public_included_ws_fallback/lang/en.json
View file

@ -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.",

36
public_included_ws_fallback/scripts/ui.js
View file

@ -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
}

2
public_included_ws_fallback/styles.css
View file

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