From 9ce076eb0d0df21395a54f2d66538dec83fa9b1f Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sun, 28 May 2023 01:18:39 +0200
Subject: [PATCH] Copy address button

---
 ui/media/css/main.css     |  6 ++++++
 ui/media/js/main.js       |  2 +-
 ui/media/js/parameters.js | 10 +++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 47a88601..cdb67703 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1316,6 +1316,12 @@ body.wait-pause {
     border: var(--input-border-size) solid var(--input-border-color);
     margin-top: 0.2em;
     margin-bottom: 0.2em;
+    display: inline-block;
+}
+
+#copy-cloudflare-address {
+    padding: 4px 8px;
+    margin-left: 0.5em;
 }
 
 /* TOAST NOTIFICATIONS */
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index d08d7c4a..c3f0c016 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1955,7 +1955,7 @@ function tunnelUpdate(event) {
     if ("cloudflare" in event) {
         document.getElementById('cloudflare-off').classList.add("displayNone")
         document.getElementById('cloudflare-on').classList.remove("displayNone")
-        document.getElementById('cloudflare-address').innerHTML = event.cloudflare
+        cloudflareAddressField.innerHTML = event.cloudflare
         document.getElementById('toggle-cloudflare-tunnel').innerHTML = "Stop"
     } else {
         document.getElementById('cloudflare-on').classList.add("displayNone")
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index cab32cc8..cb66383c 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -233,7 +233,7 @@ var PARAMETERS = [
         note: `<span id="cloudflare-off">Create a VPN tunnel to share your Easy Diffusion instance with your friends. This will
                generate a web server address on the public Internet for your Easy Diffusion instance. </span>
                <div id="cloudflare-on" class="displayNone"><div>This Easy Diffusion server is available on the Internet using the
-               address:</div><div id="cloudflare-address"></div></div>
+               address:</div><div><div id="cloudflare-address"></div><button id="copy-cloudflare-address">Copy</button></div></div>
                <b>Anyone knowing this address can access your server.</b> The address of your server will change each time
                you share a session.<br>
                Uses <a href="https://try.cloudflare.com/" target="_blank">Cloudflare services</a>.`,
@@ -709,4 +709,12 @@ listenPortField.addEventListener("change", debounce( ()=>{
     saveSettingsBtn.click()
 }, 1000))
 
+let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address")
+let cloudflareAddressField = document.getElementById("cloudflare-address")
+
+copyCloudflareAddressBtn.addEventListener("click", (e) => {
+    navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
+    showToast("Copied server address to clipboard")
+})
+
 document.addEventListener("system_info_update", (e) => setDeviceInfo(e.detail))