From 320606ca3f39f01652d35f58fcfd0e8f6ca017af Mon Sep 17 00:00:00 2001 From: MrUnknownDE Date: Sat, 29 Mar 2025 17:03:13 +0100 Subject: [PATCH] add clickable ips --- frontend/app/index.html | 15 ++++++++++++--- frontend/app/script.js | 31 ++++++++++++++++++++++--------- frontend/app/whois-lookup.js | 23 +++++++++++++++++++---- 3 files changed, 53 insertions(+), 16 deletions(-) diff --git a/frontend/app/index.html b/frontend/app/index.html index cfae316..bc2d960 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -35,8 +35,14 @@ 1px 1px 0px rgba(168, 85, 247, 0.7), /* Lila */ -1px -1px 0px rgba(76, 29, 149, 0.7); /* Dunkleres Lila */ } - /* Klickbarer IP-Cursor */ - #ip-address { cursor: pointer; } + /* Klickbarer IP-Cursor und Link-Styling */ + #ip-address-link { + cursor: pointer; + text-decoration: none; /* Standard-Link-Unterstreichung entfernen */ + } + #ip-address-link:hover { + text-decoration: underline; /* Unterstreichung beim Hover */ + } /* Traceroute Output Formatierung */ #traceroute-output pre, .result-pre { /* Gemeinsamer Stil für 
 */
@@ -103,7 +109,10 @@
                 
Your Public IP

                 

                     

-                    
+                    
+                    
                 

 
                 
Geolocation

diff --git a/frontend/app/script.js b/frontend/app/script.js
index 74510ae..f69ac95 100644
--- a/frontend/app/script.js
+++ b/frontend/app/script.js
@@ -1,7 +1,8 @@
 // script.js - Hauptlogik für index.html (IP Info, IP Lookup, Traceroute)
 document.addEventListener('DOMContentLoaded', () => {
     // --- DOM Elements (User IP Info) ---
-    const ipAddressEl = document.getElementById('ip-address');
+    const ipAddressLinkEl = document.getElementById('ip-address-link'); // Geändert von ip-address
+    const ipAddressSpanEl = document.getElementById('ip-address'); // Das Span *innerhalb* des Links
     const countryEl = document.getElementById('country');
     const regionEl = document.getElementById('region');
     const cityEl = document.getElementById('city');
@@ -227,7 +228,7 @@ document.addEventListener('DOMContentLoaded', () => {
         hideGlobalError();
         [ipLoader, geoLoader, asnLoader, rdnsLoader, mapLoader].forEach(l => l?.classList.remove('hidden'));
         // Hide data elements initially (containers are hidden by default in HTML)
-        if (ipAddressEl) ipAddressEl.classList.add('hidden');
+        if (ipAddressLinkEl) ipAddressLinkEl.classList.add('hidden'); // Hide link initially
         if (mapEl) mapEl.classList.add('hidden');
         // Ensure map message is hidden initially
         if (mapMessageEl) mapMessageEl.classList.add('hidden');
@@ -240,10 +241,16 @@ document.addEventListener('DOMContentLoaded', () => {
             console.log('Received User IP Info:', data);
 
             currentIp = data.ip;
-            updateField(ipAddressEl, data.ip, ipLoader);
-            if (ipAddressEl) {
-                ipAddressEl.classList.remove('hidden'); // Show IP element
-                if (data.ip) ipAddressEl.addEventListener('click', handleIpClick);
+            // Update the span inside the link
+            updateField(ipAddressSpanEl, data.ip, ipLoader);
+            if (ipAddressLinkEl) {
+                ipAddressLinkEl.classList.remove('hidden'); // Show link element
+                if (data.ip) {
+                    // Remove old listener if it exists (safety)
+                    ipAddressLinkEl.removeEventListener('click', handleIpClick);
+                    // Add new listener
+                    ipAddressLinkEl.addEventListener('click', handleIpClick);
+                }
             }
 
             updateField(countryEl, data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, geoErrorEl);
@@ -572,10 +579,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- Event Handlers ---
     function handleIpClick(event) {
-        event.preventDefault();
+        event.preventDefault(); // Verhindert das Standardverhalten des Links (#)
         if (currentIp) {
-            console.log(`User IP clicked: ${currentIp}. Starting traceroute...`);
-            startTraceroute(currentIp);
+            console.log(`User IP link clicked: ${currentIp}. Redirecting to WHOIS lookup...`);
+            // Leite zur Whois-Seite weiter und übergebe die IP als 'query'-Parameter
+            window.location.href = `whois-lookup.html?query=${encodeURIComponent(currentIp)}`;
+        } else {
+            console.warn('Cannot redirect to WHOIS: current IP is not available.');
         }
     }
 
@@ -616,4 +626,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (lookupPingButton) lookupPingButton.addEventListener('click', handleLookupPingClick);
     if (lookupTraceButton) lookupTraceButton.addEventListener('click', handleLookupTraceClick);
 
+    // Der Event Listener für den IP-Link wird jetzt in fetchIpInfo() hinzugefügt,
+    // nachdem die IP erfolgreich abgerufen wurde.
+
 }); // End DOMContentLoaded
\ No newline at end of file
diff --git a/frontend/app/whois-lookup.js b/frontend/app/whois-lookup.js
index 4f8c5a6..b2e16d2 100644
--- a/frontend/app/whois-lookup.js
+++ b/frontend/app/whois-lookup.js
@@ -92,12 +92,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- WHOIS Lookup Specific Functions ---
     function displayWhoisResults(data, outputEl) {
-        // WHOIS data can be large and unstructured, display as JSON or raw text
-        // Using JSON.stringify for consistency, but raw text might be better depending on the library's output
+        // WHOIS data can be large and unstructured, display as raw text
         if (typeof data.result === 'string') {
-             outputEl.textContent = data.result; // Display raw text if it's a string
+             outputEl.textContent = data.result; // Display raw text
         } else {
-             outputEl.textContent = JSON.stringify(data.result, null, 2); // Display JSON otherwise
+             // Fallback if the result is not a string (shouldn't happen with current backend)
+             outputEl.textContent = JSON.stringify(data.result, null, 2);
         }
     }
 
@@ -120,6 +120,18 @@ document.addEventListener('DOMContentLoaded', () => {
         );
     }
 
+    /** Prüft URL-Parameter und startet ggf. den Lookup */
+    function checkUrlParamsAndLookup() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const queryFromUrl = urlParams.get('query');
+
+        if (queryFromUrl && whoisQueryInput) {
+            console.log(`Found query parameter in URL: ${queryFromUrl}`);
+            whoisQueryInput.value = queryFromUrl; // Set input field value
+            handleWhoisLookupClick(); // Trigger the lookup
+        }
+    }
+
     // --- Initial Load & Event Listeners ---
     fetchVersionInfo(); // Lade Versionsinfo für Footer
 
@@ -128,4 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (event.key === 'Enter') handleWhoisLookupClick();
     });
 
+    // Prüfe URL-Parameter nach dem Setup der Listener
+    checkUrlParamsAndLookup();
+
 }); // End DOMContentLoaded
\ No newline at end of file