UI: Simplified approach to IP copying support

index.html

@@ -76,12 +76,15 @@ __      __   _  __   ____  __
                   <span>HDD </span>
                   <span id="hddactivity" style="margin-left: 7px;">&#x1F7E2;</span>
                 </div>
-				<a id="loginLink" style="user-select: text ;text-decoration: none; height: 100%;">
-				<div  style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
-						<span style="cursor: pointer" id="networkStatus">Connect via Tailscale </span>
-						  <img src="assets/tailscale.svg" height="35px" style="margin-left: 7px;">
-						</div>
-					  </a>
+		<a id="loginLink" style="user-select: text ;text-decoration: none; height: 100%;">
+		  <div  style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
+                    <div style="position: relative;">
+	              <span style="cursor: pointer" id="networkStatus">Connect via Tailscale </span>
+	              <span style="cursor: pointer; position: absolute; right: 0px; visibility: hidden;" id="ipCopied">Copied! </span>
+                    </div>
+	            <img src="assets/tailscale.svg" height="35px" style="margin-left: 7px;">
+		  </div>
+		</a>
                 <a href="https://discord.gg/yTNZgySKGa" style="text-decoration: none; height: 100%;" target="_blank">
                   <div style="color: white; font-family: montserrat; font-weight: 400; font-size: large; height: 100%; display: flex; align-items: center;">
                     <span>Join Discord </span>

network.js

@@ -12,6 +12,7 @@ function setupNetworkInterface()
     });
     const loginElem = document.getElementById("loginLink");
     const statusElem = document.getElementById("networkStatus");
+    const ipCopiedElem = document.getElementById("ipCopied");
     const loginUrlCb = (url) => {
         loginElem.href = url;
         loginElem.target = "_blank";
@@ -33,36 +34,21 @@ function setupNetworkInterface()
     const netmapUpdateCb = (map) => {
         const ip = map.self.addresses[0];
         statusElem.innerText = "IP: "+ip;
-		loginElem.title = "Right click to copy the IP"
-		loginElem.draggable = false;
-		const rmb_to_copy = (event) => {
-			// To prevent the default contexmenu from showing up when right-clicking..
-			event.preventDefault();
-			// Copy the IP to the clipboard.
-			window.navigator.clipboard.writeText(ip)
-			.catch((msg) => { console.log("network.js: Copy ip to clipboard: Error: " + msg) });
-
-			// We add the tooltip to the DOM and create the div element.
-			const tooltip = document.createElement("div");
-			statusElem.classList.add("clicked");
-			tooltip.classList.add("tooltip");
-			
-			// Show tooltip underneath mouse when copied to clipboard.
-			tooltip.style.fontSize = "13px"
-			tooltip.style.position = "absolute"
-			tooltip.style.left = `${event.clientX}px`
-			tooltip.style.top = `${event.clientY}px`
-			tooltip.style.fontWeight = "bold"
-			tooltip.innerText = "Copied to clipboard";
-			statusElem.appendChild(tooltip);
-
-			// To remove the tooltip again after some time passes.
-			setTimeout(() => {
-				tooltip.remove();
-				statusElem.classList.remove("clicked");
-			}, 1500);
-		};
-		loginElem.addEventListener("contextmenu", rmb_to_copy);
+	loginElem.title = "Right click to copy"
+	const rmb_to_copy = (event) => {
+		// To prevent the default contexmenu from showing up when right-clicking..
+		event.preventDefault();
+		// Copy the IP to the clipboard.
+		window.navigator.clipboard.writeText(ip)
+		.catch((msg) => { console.log("network.js: Copy ip to clipboard: Error: " + msg) });
+		statusElem.style.visibility = "hidden";
+		ipCopiedElem.style.visibility = "unset";
+		setTimeout(() => {
+			statusElem.style.visibility = "unset";
+			ipCopiedElem.style.visibility = "hidden";
+		}, 2000);
+	};
+	loginElem.addEventListener("contextmenu", rmb_to_copy);
     };
     loginElem.style.cursor = "pointer";
     loginElem.title = "Connect to Tailscale";