status-im/js-waku-examples
2
0
Fork 0
mirror of https://github.com/status-im/js-waku-examples.git synced 2025-02-26 21:50:46 +00:00
Code Issues Projects Releases Wiki Activity

add URL field with copy button and open in new tab

Browse Source
This commit is contained in:
weboko 2023-01-12 01:48:24 +01:00
parent f11324c47f
commit c923fbd190
No known key found for this signature in database
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
examples/noise-js/index.html
View File

@ -13,10 +13,25 @@
<p id="handshake-span"> <p id="handshake-span">
<b>Handshake Status:</b> <span id="handshake-status">-</span> <b>Handshake Status:</b> <span id="handshake-status">-</span>
</p> </p>
<div id="qr-url-container">
<p>
<b>URL for handshake:</b>
<input
type="text"
id="qr-url"
style="display: inline-block; width: 250px"
readonly
/>
</p>
<button id="copy-url" style="width: 100px">Copy URL</button>
<button id="open-tab" style="width: 100px">Open in new</button>
</div>
<canvas id="qr-canvas"></canvas> <canvas id="qr-canvas"></canvas>
<a href="#" id="qr-url" style="display: none" target="_blank" <!-- <a href="#" id="qr-url" style="display: none" target="_blank"
>Open QR code link in new window instead of scanning it.</a >Open QR code link in new window instead of scanning it.</a
> > -->
<div id="chat-area" style="display: none"> <div id="chat-area" style="display: none">
<label for="nick-input">Your nickname</label> <label for="nick-input">Your nickname</label>

21
examples/noise-js/index.js
View File

@ -21,6 +21,20 @@ const qrCanvas = document.getElementById("qr-canvas");
const qrUrl = document.getElementById("qr-url"); const qrUrl = document.getElementById("qr-url");
const wakuStatusSpan = document.getElementById("waku-status"); const wakuStatusSpan = document.getElementById("waku-status");
const handshakeStatusSpan = document.getElementById("handshake-status"); const handshakeStatusSpan = document.getElementById("handshake-status");
const qrUrlContainer = document.getElementById("qr-url-container");
const copyURLButton = document.getElementById("copy-url");
const openTabButton = document.getElementById("open-tab");
copyURLButton.onclick = () => {
const copyText = document.getElementById("qr-url");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
};
openTabButton.onclick = () => {
window.open(qrUrl.value, "_blank");
};
function getPairingInfofromUrl() { function getPairingInfofromUrl() {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@ -105,7 +119,7 @@ async function confirmAuthCodeFlow(pairingObj) {
async function hideQR() { async function hideQR() {
qrCanvas.remove(); qrCanvas.remove();
qrUrl.remove(); qrUrlContainer.remove();
} }
async function disableUI() { async function disableUI() {
@ -181,7 +195,7 @@ async function main() {
if (initiator) { if (initiator) {
console.log("Initiator"); console.log("Initiator");
qrCanvas.remove(); // Initiator does not require a QR code hideQR(); // Initiator does not require a QR code
const pairingObj = new noise.WakuPairing( const pairingObj = new noise.WakuPairing(
sender, sender,
@ -249,8 +263,7 @@ async function main() {
console.error(err); console.error(err);
} else { } else {
handshakeStatusSpan.innerHTML = "waiting for handshake..."; handshakeStatusSpan.innerHTML = "waiting for handshake...";
qrUrl.href = qrURLString; qrUrl.value = qrURLString;
qrUrl.style.display = "block";
} }
}); });