From 36c4c0c8d79f69f7d0b8e37fb835bd98328e972e Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Fri, 30 Jun 2023 21:44:35 +0200
Subject: [PATCH 1/2] Rollback --backdrop-color var, to fix themes dialog

---
 ui/media/css/main.css   | 4 ++--
 ui/media/css/themes.css | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 9eefa4c2..538d2cb8 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -485,7 +485,7 @@ dialog {
 }
 
 dialog::backdrop {
-    background: var(--backdrop-color);
+    background: rgba(32, 33, 36, 50%);
 }
 
 dialog > div {
@@ -1295,7 +1295,7 @@ input::file-selector-button {
 
 .popup {
     position: absolute;
-    background: var(--backdrop-color);
+    background: rgba(32, 33, 36, 50%);
     top: 0px;
     left: 0px;
     right: 0px;
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index 30d20a28..280225b7 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -1,4 +1,4 @@
-:root, ::backdrop {
+:root {
     --main-hue: 222;
 	--main-saturation: 4%;
 	--value-base: 13%;
@@ -45,7 +45,6 @@
     --status-orange: rgb(200, 139, 0);
     --status-green: green;
     --status-red: red;
-    --backdrop-color: rgba(32, 33, 36, 50%);
 }
 
 .theme-light {

From 2f9b492f5ba2681376050f6f45db5c343e199ee3 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sat, 1 Jul 2023 00:15:18 +0200
Subject: [PATCH 2/2] Don't show copy button without clipboard access

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

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 9eefa4c2..8cf86aaa 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1575,6 +1575,7 @@ body.wait-pause {
     margin-top: 0.2em;
     margin-bottom: 0.2em;
     display: inline-block;
+    width: 80%;
 }
 
 #copy-cloudflare-address {
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 279feddb..7ced5b17 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -2103,7 +2103,7 @@ function tunnelUpdate(event) {
     if ("cloudflare" in event) {
         document.getElementById("cloudflare-off").classList.add("displayNone")
         document.getElementById("cloudflare-on").classList.remove("displayNone")
-        cloudflareAddressField.innerHTML = event.cloudflare
+        cloudflareAddressField.value = 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 cd86be63..e2f94d69 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><div id="cloudflare-address"></div><button id="copy-cloudflare-address">Copy</button></div></div>
+               address:</div><div><input id="cloudflare-address" value="" readonly><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>.`,
@@ -714,9 +714,17 @@ listenPortField.addEventListener("change", debounce( ()=>{
 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")
-})
+navigator.permissions.query({ name: "clipboard-write" }).then(function (result) {
+   if (result.state === "granted") {
+       // you can read from the clipboard
+       copyCloudflareAddressBtn.addEventListener("click", (e) => {
+           navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
+           showToast("Copied server address to clipboard")
+       })
+   } else {
+       copyCloudflareAddressBtn.classList.add("displayNone")
+   }
+});
+
 
 document.addEventListener("system_info_update", (e) => setDeviceInfo(e.detail))