From c923fbd190386c854d6245c32e2c95d28d19b2d3 Mon Sep 17 00:00:00 2001
From: weboko <oleksandr@status.im>
Date: Thu, 12 Jan 2023 01:48:24 +0100
Subject: [PATCH] add URL field with copy button and open in new tab

---
 examples/noise-js/index.html | 19 +++++++++++++++++--
 examples/noise-js/index.js   | 21 +++++++++++++++++----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/examples/noise-js/index.html b/examples/noise-js/index.html
index e261dd0..4a4ed33 100644
--- a/examples/noise-js/index.html
+++ b/examples/noise-js/index.html
@@ -13,10 +13,25 @@
     <p id="handshake-span">
       <b>Handshake Status:</b> <span id="handshake-status">-</span>
     </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>
-    <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
-    >
+    > -->
 
     <div id="chat-area" style="display: none">
       <label for="nick-input">Your nickname</label>
diff --git a/examples/noise-js/index.js b/examples/noise-js/index.js
index ff70e82..adee825 100644
--- a/examples/noise-js/index.js
+++ b/examples/noise-js/index.js
@@ -21,6 +21,20 @@ const qrCanvas = document.getElementById("qr-canvas");
 const qrUrl = document.getElementById("qr-url");
 const wakuStatusSpan = document.getElementById("waku-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() {
   const urlParams = new URLSearchParams(window.location.search);
@@ -105,7 +119,7 @@ async function confirmAuthCodeFlow(pairingObj) {
 
 async function hideQR() {
   qrCanvas.remove();
-  qrUrl.remove();
+  qrUrlContainer.remove();
 }
 
 async function disableUI() {
@@ -181,7 +195,7 @@ async function main() {
 
     if (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(
         sender,
@@ -249,8 +263,7 @@ async function main() {
           console.error(err);
         } else {
           handshakeStatusSpan.innerHTML = "waiting for handshake...";
-          qrUrl.href = qrURLString;
-          qrUrl.style.display = "block";
+          qrUrl.value = qrURLString;
         }
       });