From f8b420f4e48aa736885f09714d9311074bcec571 Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Tue, 9 Jun 2026 12:35:24 -0600
Subject: [PATCH] =?UTF-8?q?Fix=20clipboard=20copy=20on=20HTTP=20=E2=80=94?=
 =?UTF-8?q?=20use=20execCommand=20fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

navigator.clipboard requires HTTPS (secure context). Fall back to
textarea + execCommand('copy') for the View in CARD button.
---
 frontend/src/components/CardActionModal.js  | 11 ++++++++++-
 frontend/src/components/CardOwnerTooltip.js | 12 +++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/CardActionModal.js b/frontend/src/components/CardActionModal.js
index bc7f052..90b99ad 100644
--- a/frontend/src/components/CardActionModal.js
+++ b/frontend/src/components/CardActionModal.js
@@ -155,7 +155,16 @@ export default function CardActionModal({ isOpen, onClose, item, initialAction,
                 {item?.host_id && (
                   <button
                     onClick={() => {
-                      navigator.clipboard.writeText(String(item.host_id));
+                      try {
+                        const ta = document.createElement('textarea');
+                        ta.value = String(item.host_id);
+                        ta.style.position = 'fixed';
+                        ta.style.opacity = '0';
+                        document.body.appendChild(ta);
+                        ta.select();
+                        document.execCommand('copy');
+                        document.body.removeChild(ta);
+                      } catch (_) { /* best effort */ }
                       window.open('https://card.charter.com/ipn-search', '_blank');
                     }}
                     title={`Copy Host ID ${item.host_id} and open CARD`}
diff --git a/frontend/src/components/CardOwnerTooltip.js b/frontend/src/components/CardOwnerTooltip.js
index ac7c445..2aa4c47 100644
--- a/frontend/src/components/CardOwnerTooltip.js
+++ b/frontend/src/components/CardOwnerTooltip.js
@@ -12,6 +12,7 @@ import ReactDOM from 'react-dom';
 import { Loader, AlertCircle, ExternalLink, Copy } from 'lucide-react';
 
 // ⚠️ CONVENTION: Use relative API path fallback, not absolute URL. Should be: process.env.REACT_APP_API_BASE || '/api'
+// Other components in this project use fetch() with relative paths and credentials: 'include'
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 
 const TOOLTIP_GAP = 8;
@@ -328,7 +329,16 @@ function TooltipBody({ data, loading, error, anchorRect, ip, hostId, onAction, o
                             {hostId && (
                                 <button
                                     onClick={() => {
-                                        navigator.clipboard.writeText(String(hostId));
+                                        try {
+                                            const ta = document.createElement('textarea');
+                                            ta.value = String(hostId);
+                                            ta.style.position = 'fixed';
+                                            ta.style.opacity = '0';
+                                            document.body.appendChild(ta);
+                                            ta.select();
+                                            document.execCommand('copy');
+                                            document.body.removeChild(ta);
+                                        } catch (_) { /* best effort */ }
                                         window.open('https://card.charter.com/ipn-search', '_blank');
                                     }}
                                     title={`Copy Host ID ${hostId} and open CARD`}