Add clipboard utility with fallback and show selectable URLs

surfsense_web/lib/utils.ts

@@ -12,3 +12,44 @@ export const formatDate = (date: Date): string => {
 		day: "numeric",
 	});
 };
+
+/**
+ * Copy text to clipboard with fallback for older browsers and non-secure contexts.
+ * Returns true if successful, false otherwise.
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+	// Use modern Clipboard API if available and in secure context
+	if (navigator.clipboard && window.isSecureContext) {
+		try {
+			await navigator.clipboard.writeText(text);
+			return true;
+		} catch (err) {
+			console.error("Clipboard API failed:", err);
+			return false;
+		}
+	}
+
+	// Fallback for non-secure contexts or browsers without Clipboard API
+	const textArea = document.createElement("textarea");
+	textArea.value = text;
+
+	// Avoid scrolling to bottom
+	textArea.style.top = "0";
+	textArea.style.left = "0";
+	textArea.style.position = "fixed";
+	textArea.style.opacity = "0";
+
+	document.body.appendChild(textArea);
+	textArea.focus();
+	textArea.select();
+
+	try {
+		const successful = document.execCommand("copy");
+		document.body.removeChild(textArea);
+		return successful;
+	} catch (err) {
+		console.error("Fallback copy failed:", err);
+		document.body.removeChild(textArea);
+		return false;
+	}
+}