fix: address PR review comments

Security fixes:
- Replace templ.SafeURL with templ.URL for mailto links to prevent XSS

Copy-clipboard improvements:
- Add guard to prevent duplicate event listener attachment
- Clear timeout on rapid clicks to prevent icon state issues
- Add visual feedback for fallback copy method

SVG fixes:
- Remove conflicting width/height attributes from copyIcon and checkIcon
  (CSS classes h-4 w-4 already control sizing)

Template improvements:
- Add Copyable component to DN on home page for consistency

Author: CybotTM

internal/web/static/js/copy-clipboard.js

@@ -16,41 +16,76 @@ export function initCopyButtons() {
  * @param {HTMLElement} element - The copyable container element
  */
 function initCopyable(element) {
+    // Prevent duplicate initialization
+    if (element.hasAttribute("data-copy-initialized")) {
+        return;
+    }
+    element.setAttribute("data-copy-initialized", "true");
+
     const button = element.querySelector("[data-copy-button]");
     const textElement = element.querySelector("[data-copy-text]");
     const copyIcon = element.querySelector("[data-copy-icon]");
     const checkIcon = element.querySelector("[data-check-icon]");
 
     if (!button || !textElement) return;
 
+    // Store timeout ID for cleanup on rapid clicks
+    let resetTimeout = null;
+
     button.addEventListener("click", async () => {
         const text = textElement.textContent?.trim() || "";
 
+        // Clear any pending timeout from previous click
+        if (resetTimeout) {
+            clearTimeout(resetTimeout);
+            resetTimeout = null;
+        }
+
         try {
             await navigator.clipboard.writeText(text);
-
-            // Show success feedback
-            if (copyIcon && checkIcon) {
-                copyIcon.classList.add("hidden");
-                checkIcon.classList.remove("hidden");
-
-                // Reset after 2 seconds
-                setTimeout(() => {
-                    copyIcon.classList.remove("hidden");
-                    checkIcon.classList.add("hidden");
-                }, 2000);
-            }
+            showSuccessFeedback(copyIcon, checkIcon, (timeoutId) => {
+                resetTimeout = timeoutId;
+            });
         } catch (err) {
             console.error("Failed to copy text:", err);
             // Fallback for older browsers
-            fallbackCopy(text);
+            const success = fallbackCopy(text);
+            if (success) {
+                showSuccessFeedback(copyIcon, checkIcon, (timeoutId) => {
+                    resetTimeout = timeoutId;
+                });
+            }
         }
     });
 }
 
+/**
+ * Show success feedback by toggling icons.
+ * @param {HTMLElement|null} copyIcon - The copy icon element
+ * @param {HTMLElement|null} checkIcon - The check icon element
+ * @param {function} onTimeout - Callback to store the timeout ID
+ */
+function showSuccessFeedback(copyIcon, checkIcon, onTimeout) {
+    if (copyIcon && checkIcon) {
+        copyIcon.classList.add("hidden");
+        checkIcon.classList.remove("hidden");
+
+        // Reset after 2 seconds
+        const timeoutId = setTimeout(() => {
+            copyIcon.classList.remove("hidden");
+            checkIcon.classList.add("hidden");
+        }, 2000);
+
+        if (onTimeout) {
+            onTimeout(timeoutId);
+        }
+    }
+}
+
 /**
  * Fallback copy method for browsers without Clipboard API.
  * @param {string} text - The text to copy
+ * @returns {boolean} - Whether the copy was successful
  */
 function fallbackCopy(text) {
     const textarea = document.createElement("textarea");
@@ -59,10 +94,12 @@ function fallbackCopy(text) {
     textarea.style.opacity = "0";
     document.body.appendChild(textarea);
     textarea.select();
+    let success = false;
     try {
-        document.execCommand("copy");
+        success = document.execCommand("copy");
     } catch (err) {
         console.error("Fallback copy failed:", err);
     }
     document.body.removeChild(textarea);
+    return success;
 }

internal/web/templates/icons.templ

@@ -170,14 +170,14 @@ templ sparklesIcon() {
 }
 
 templ copyIcon() {
-	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" class="inline-block h-4 w-4">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline-block h-4 w-4">
 		<path d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z"></path>
 		<path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z"></path>
 	</svg>
 }
 
 templ checkIcon() {
-	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" class="inline-block h-4 w-4">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline-block h-4 w-4">
 		<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
 	</svg>
 }

internal/web/templates/index.templ

@@ -15,15 +15,15 @@ templ Index(user *ldap_cache.FullLDAPUser) {
 				<span class="text-text-secondary">CN: </span> @Code(user.CN())
 			</p>
 			<p>
-				<span class="text-text-secondary">DN: </span> @Code(user.DN())
+				<span class="text-text-secondary">DN: </span> @Copyable(user.DN())
 			</p>
 			<p>
 				<span class="text-text-secondary">sAMAccountName: </span> @Code(user.SAMAccountName)
 			</p>
 			if user.Mail != nil && *user.Mail != "" {
 				<p>
 					<span class="text-text-secondary">Email: </span>
-					<a href={ templ.SafeURL("mailto:" + *user.Mail) } class="text-accent hover:underline">
+					<a href={ templ.URL("mailto:" + *user.Mail) } class="text-accent hover:underline">
 						{ *user.Mail }
 					</a>
 				</p>

internal/web/templates/users.templ

@@ -42,7 +42,7 @@ templ User(user *ldap_cache.FullLDAPUser, unassignedGroups []ldap.Group, flashes
 				<div class="rounded-md border border-border bg-surface-elevated px-3 py-2">
 					<span class="text-sm text-text-secondary">Email</span>
 					<p class="font-medium">
-						<a href={ templ.SafeURL("mailto:" + *user.Mail) } class="text-accent hover:underline">
+						<a href={ templ.URL("mailto:" + *user.Mail) } class="text-accent hover:underline">
 							{ *user.Mail }
 						</a>
 					</p>