MrUnknownDE/utools
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/utools.git synced 2026-04-30 19:43:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

add dns, mac and domain whois lookup

Browse Source
This commit is contained in:
MrUnknownDE
2025-03-29 16:40:31 +01:00
parent 12370ea173
commit 2207a0d325
12 changed files with 1602 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/dns-lookup.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DNS Lookup - uTools</title>
<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Eigene Styles -->
<style>
/* Einfacher Lade-Spinner */
.loader {
border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
border-left-color: #a855f7; /* Lila */
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Ergebnis-Pre-Formatierung */
.result-pre {
white-space: pre-wrap;
word-break: break-all;
font-family: monospace;
background-color: #1f2937; /* Dunkelgrau */
color: #d1d5db; /* Hellgrau */
padding: 1rem;
border-radius: 0.375rem; /* rounded-md */
max-height: 400px;
overflow-y: auto;
font-size: 0.875rem; /* text-sm */
}
/* Navigations-Styling */
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
nav a:hover { color: #a78bfa; text-decoration: underline; }
header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
.hidden { display: none; }
</style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
<header>
<h1>uTools Network Suite</h1>
<nav>
<ul>
<li><a href="index.html">IP Info & Tools</a></li>
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
<li><a href="dns-lookup.html">DNS Lookup</a></li>
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
<li><a href="mac-lookup.html">MAC Lookup</a></li>
</ul>
</nav>
</header>
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
<h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">DNS Lookup</h1>
<!-- Bereich für DNS Lookup -->
<div class="mt-8 p-4 bg-gray-700 rounded">
<div class="flex flex-col sm:flex-row gap-2 mb-4">
<input type="text" id="dns-domain-input" placeholder="Enter domain name (e.g., google.com)"
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
<select id="dns-type-select" class="px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<option value="ANY">ANY</option>
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="MX">MX</option>
<option value="TXT">TXT</option>
<option value="NS">NS</option>
<option value="CNAME">CNAME</option>
<option value="SOA">SOA</option>
<option value="SRV">SRV</option>
<option value="PTR">PTR (Reverse)</option>
</select>
<button id="dns-lookup-button"
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
Lookup DNS
</button>
</div>
<div id="dns-lookup-error" class="text-red-400 mb-4 hidden"></div>
<div id="dns-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
<h3 class="text-lg font-semibold text-purple-300 mb-2">DNS Results for: <span id="dns-lookup-query" class="font-mono text-purple-400"></span></h3>
<div id="dns-lookup-loader" class="loader hidden mb-2"></div>
<pre id="dns-lookup-output" class="result-pre"></pre> <!-- Ergebnisbereich -->
</div>
</div>
<!-- Globaler Fehlerbereich -->
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
<!-- Footer für Version -->
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
<p>&copy; 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
</footer>
</div>
<!-- Eigene JS-Logik für diese Seite -->
<script src="dns-lookup.js"></script>
</body>
</html>

132
frontend/dns-lookup.js Normal file
View File

@@ -0,0 +1,132 @@
// frontend/dns-lookup.js
document.addEventListener('DOMContentLoaded', () => {
// --- DOM Elements (DNS Lookup) ---
const dnsDomainInput = document.getElementById('dns-domain-input');
const dnsTypeSelect = document.getElementById('dns-type-select');
const dnsLookupButton = document.getElementById('dns-lookup-button');
const dnsLookupErrorEl = document.getElementById('dns-lookup-error');
const dnsLookupResultsSection = document.getElementById('dns-lookup-results-section');
const dnsLookupQueryEl = document.getElementById('dns-lookup-query');
const dnsLookupLoader = document.getElementById('dns-lookup-loader');
const dnsLookupOutputEl = document.getElementById('dns-lookup-output');
// --- DOM Elements (Common) ---
const globalErrorEl = document.getElementById('global-error');
const commitShaEl = document.getElementById('commit-sha');
// --- Configuration ---
const API_BASE_URL = '/api'; // Anpassen, falls nötig
// --- Helper Functions ---
/** Zeigt globale Fehler an */
function showGlobalError(message) {
if (!globalErrorEl) return;
globalErrorEl.textContent = `Error: ${message}`;
globalErrorEl.classList.remove('hidden');
}
/** Versteckt globale Fehler */
function hideGlobalError() {
if (!globalErrorEl) return;
globalErrorEl.classList.add('hidden');
}
/**
* Generische Funktion zum Abrufen und Anzeigen von Lookup-Ergebnissen.
* @param {string} endpoint - Der API-Endpunkt (z.B. '/dns-lookup').
* @param {object} params - Query-Parameter als Objekt (z.B. { domain: '...', type: '...' }).
* @param {HTMLElement} resultsSection - Der Container für die Ergebnisse.
* @param {HTMLElement} loaderElement - Das Loader-Element.
* @param {HTMLElement} errorElement - Das Fehleranzeige-Element für diesen Lookup.
* @param {HTMLElement} queryElement - Das Element zur Anzeige der Suchanfrage.
* @param {HTMLElement} outputElement - Das Element zur Anzeige der Ergebnisse (<pre> oder <p>).
* @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
*/
async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
resultsSection.classList.remove('hidden');
loaderElement.classList.remove('hidden');
errorElement.classList.add('hidden');
outputElement.textContent = ''; // Clear previous results
if (queryElement) queryElement.textContent = Object.values(params).join(', '); // Display query
hideGlobalError(); // Hide global errors before new request
const urlParams = new URLSearchParams(params);
const url = `${API_BASE_URL}${endpoint}?${urlParams.toString()}`;
try {
const response = await fetch(url);
const data = await response.json();
if (!response.ok || !data.success) {
throw new Error(data.error || `Request failed with status ${response.status}`);
}
console.log(`Received ${endpoint} data:`, data);
displayFn(data, outputElement); // Call the specific display function
} catch (error) {
console.error(`Failed to fetch ${endpoint}:`, error);
errorElement.textContent = `Error: ${error.message}`;
errorElement.classList.remove('hidden');
outputElement.textContent = ''; // Clear output on error
} finally {
loaderElement.classList.add('hidden');
}
}
/** Ruft die Versionsinformationen (Commit SHA) ab */
async function fetchVersionInfo() {
if (!commitShaEl) return; // Don't fetch if element doesn't exist
try {
const response = await fetch(`${API_BASE_URL}/version`);
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
const data = await response.json();
commitShaEl.textContent = data.commitSha || 'unknown';
} catch (error) {
console.error('Failed to fetch version info:', error);
commitShaEl.textContent = 'error';
// Optionally show global error
// showGlobalError(`Could not load version info: ${error.message}`);
}
}
// --- DNS Lookup Specific Functions ---
function displayDnsResults(data, outputEl) {
if (!data.records || Object.keys(data.records).length === 0) {
outputEl.textContent = 'No records found for this domain and type.';
return;
}
// Format output as JSON string for simplicity
outputEl.textContent = JSON.stringify(data.records, null, 2);
}
function handleDnsLookupClick() {
const domain = dnsDomainInput.value.trim();
const type = dnsTypeSelect.value;
if (!domain) {
dnsLookupErrorEl.textContent = 'Please enter a domain name.';
dnsLookupErrorEl.classList.remove('hidden');
return;
}
fetchAndDisplay(
'/dns-lookup',
{ domain, type },
dnsLookupResultsSection,
dnsLookupLoader,
dnsLookupErrorEl,
dnsLookupQueryEl,
dnsLookupOutputEl,
displayDnsResults
);
}
// --- Initial Load & Event Listeners ---
fetchVersionInfo(); // Lade Versionsinfo für Footer
dnsLookupButton.addEventListener('click', handleDnsLookupClick);
dnsDomainInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') handleDnsLookupClick();
});
}); // End DOMContentLoaded

35
frontend/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP Info & Diagnostics</title>
<title>IP Info & Network Tools - uTools</title> <!-- Titel angepasst -->
<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Leaflet CSS -->
@@ -39,7 +39,7 @@
#ip-address { cursor: pointer; }
/* Traceroute Output Formatierung */
#traceroute-output pre {
#traceroute-output pre, .result-pre { /* Gemeinsamer Stil für <pre> */
white-space: pre-wrap; /* Zeilenumbruch */
word-break: break-all; /* Lange Zeilen umbrechen */
font-family: monospace;
@@ -49,8 +49,9 @@
border-radius: 0.375rem; /* rounded-md */
max-height: 400px;
overflow-y: auto;
font-size: 0.875rem; /* text-sm */
}
#traceroute-output .hop-line { margin-bottom: 0.25rem; font-size: 0.875rem; } /* text-sm */
#traceroute-output .hop-line { margin-bottom: 0.25rem; }
#traceroute-output .hop-number { display: inline-block; width: 30px; text-align: right; margin-right: 10px; color: #9ca3af; } /* Grau */
#traceroute-output .hop-ip { color: #60a5fa; } /* Blau */
#traceroute-output .hop-hostname { color: #a78bfa; } /* Lila */
@@ -61,30 +62,38 @@
#traceroute-output .end-line { color: #a78bfa; font-weight: bold; margin-top: 10px;} /* Lila */
/* Navigations-Styling */
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } /* flex-wrap hinzugefügt */
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; } /* nowrap hinzugefügt */
nav a:hover { color: #a78bfa; /* purple-400 */ text-decoration: underline; }
header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; justify-content: space-between; align-items: center; }
header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Flex direction geändert */
@media (min-width: 768px) { /* md breakpoint */
header { flex-direction: row; justify-content: space-between; }
}
header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
/* Hilfsklasse zum Verstecken */
.hidden { display: none; }
</style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
<header>
<h1>uTools</h1>
<h1>uTools Network Suite</h1> <!-- Name angepasst -->
<nav>
<ul>
<li><a href="index.html">IP Info</a></li>
<li><a href="index.html">IP Info & Tools</a></li> <!-- Angepasst -->
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
<!-- Weitere Menüpunkte hier hinzufügen -->
<li><a href="dns-lookup.html">DNS Lookup</a></li>
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
<li><a href="mac-lookup.html">MAC Lookup</a></li>
</ul>
</nav>
</header>
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
<h1 class="text-3xl font-bold mb-6 text-purple-400 glitch-text text-center">IP Information & Diagnostics</h1>
<h1 class="text-3xl font-bold mb-6 text-purple-400 glitch-text text-center">IP Information & Network Tools</h1> <!-- Titel angepasst -->
<!-- Bereich für EIGENE IP-Infos -->
<div id="info-section" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
@@ -150,7 +159,7 @@
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
<button id="lookup-button"
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
Lookup
Lookup IP
</button>
</div>
<div id="lookup-error" class="text-red-400 mb-4 hidden"></div>
@@ -211,7 +220,6 @@
</div>
</div>
<!-- Bereich für Traceroute -->
<div id="traceroute-section" class="mt-8 p-4 bg-gray-700 rounded hidden">
<h2 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-1 mb-4">Traceroute Results</h2>
@@ -227,7 +235,7 @@
<!-- Footer für Version -->
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
<p>&copy; 2025 <a href="https://johanneskr.de">Johannes Krüger</a></p>
<p>&copy; 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
</footer>
@@ -240,6 +248,5 @@
crossorigin=""></script>
<!-- Eigene JS-Logik -->
<script src="script.js"></script>
<!-- Kein subnet-calculator.js hier, da es nur auf der Subnetz-Seite benötigt wird -->
</body>
</html>

85
frontend/mac-lookup.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAC Address Lookup - uTools</title>
<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Eigene Styles -->
<style>
/* Einfacher Lade-Spinner */
.loader {
border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
border-left-color: #a855f7; /* Lila */
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Navigations-Styling */
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
nav a:hover { color: #a78bfa; text-decoration: underline; }
header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
.hidden { display: none; }
</style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
<header>
<h1>uTools Network Suite</h1>
<nav>
<ul>
<li><a href="index.html">IP Info & Tools</a></li>
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
<li><a href="dns-lookup.html">DNS Lookup</a></li>
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
<li><a href="mac-lookup.html">MAC Lookup</a></li>
</ul>
</nav>
</header>
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
<h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">MAC Address Lookup (OUI)</h1>
<!-- Bereich für MAC Address Lookup -->
<div class="mt-8 p-4 bg-gray-700 rounded">
<div class="flex flex-col sm:flex-row gap-2 mb-4">
<input type="text" id="mac-input" placeholder="Enter MAC address (e.g., 00:1A:2B:3C:4D:5E)"
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
<button id="mac-lookup-button"
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
Lookup MAC Vendor
</button>
</div>
<div id="mac-lookup-error" class="text-red-400 mb-4 hidden"></div>
<div id="mac-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
<h3 class="text-lg font-semibold text-purple-300 mb-2">MAC Vendor for: <span id="mac-lookup-query" class="font-mono text-purple-400"></span></h3>
<div id="mac-lookup-loader" class="loader hidden mb-2"></div>
<p id="mac-lookup-output" class="text-lg"></p> <!-- Ergebnisbereich (einfacher Text) -->
<p id="mac-lookup-notfound" class="text-gray-400 hidden">Vendor not found for this MAC address prefix.</p>
</div>
</div>
<!-- Globaler Fehlerbereich -->
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
<!-- Footer für Version -->
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
<p>&copy; 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
</footer>
</div>
<!-- Eigene JS-Logik für diese Seite -->
<script src="mac-lookup.js"></script>
</body>
</html>

135
frontend/mac-lookup.js Normal file
View File

@@ -0,0 +1,135 @@
// frontend/mac-lookup.js
document.addEventListener('DOMContentLoaded', () => {
// --- DOM Elements (MAC Lookup) ---
const macInput = document.getElementById('mac-input');
const macLookupButton = document.getElementById('mac-lookup-button');
const macLookupErrorEl = document.getElementById('mac-lookup-error');
const macLookupResultsSection = document.getElementById('mac-lookup-results-section');
const macLookupQueryEl = document.getElementById('mac-lookup-query');
const macLookupLoader = document.getElementById('mac-lookup-loader');
const macLookupOutputEl = document.getElementById('mac-lookup-output');
const macLookupNotFoundEl = document.getElementById('mac-lookup-notfound');
// --- DOM Elements (Common) ---
const globalErrorEl = document.getElementById('global-error');
const commitShaEl = document.getElementById('commit-sha');
// --- Configuration ---
const API_BASE_URL = '/api'; // Anpassen, falls nötig
// --- Helper Functions ---
/** Zeigt globale Fehler an */
function showGlobalError(message) {
if (!globalErrorEl) return;
globalErrorEl.textContent = `Error: ${message}`;
globalErrorEl.classList.remove('hidden');
}
/** Versteckt globale Fehler */
function hideGlobalError() {
if (!globalErrorEl) return;
globalErrorEl.classList.add('hidden');
}
/**
* Generische Funktion zum Abrufen und Anzeigen von Lookup-Ergebnissen.
* @param {string} endpoint - Der API-Endpunkt (z.B. '/mac-lookup').
* @param {object} params - Query-Parameter als Objekt (z.B. { mac: '...' }).
* @param {HTMLElement} resultsSection - Der Container für die Ergebnisse.
* @param {HTMLElement} loaderElement - Das Loader-Element.
* @param {HTMLElement} errorElement - Das Fehleranzeige-Element für diesen Lookup.
* @param {HTMLElement} queryElement - Das Element zur Anzeige der Suchanfrage.
* @param {HTMLElement} outputElement - Das Element zur Anzeige der Ergebnisse (<pre> oder <p>).
* @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
*/
async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
resultsSection.classList.remove('hidden');
loaderElement.classList.remove('hidden');
errorElement.classList.add('hidden');
outputElement.textContent = ''; // Clear previous results
if (macLookupNotFoundEl) macLookupNotFoundEl.classList.add('hidden'); // Hide 'not found' specifically for MAC
if (queryElement) queryElement.textContent = Object.values(params).join(', '); // Display query
hideGlobalError(); // Hide global errors before new request
const urlParams = new URLSearchParams(params);
const url = `${API_BASE_URL}${endpoint}?${urlParams.toString()}`;
try {
const response = await fetch(url);
const data = await response.json();
if (!response.ok || !data.success) {
throw new Error(data.error || `Request failed with status ${response.status}`);
}
console.log(`Received ${endpoint} data:`, data);
displayFn(data, outputElement); // Call the specific display function
} catch (error) {
console.error(`Failed to fetch ${endpoint}:`, error);
errorElement.textContent = `Error: ${error.message}`;
errorElement.classList.remove('hidden');
outputElement.textContent = ''; // Clear output on error
} finally {
loaderElement.classList.add('hidden');
}
}
/** Ruft die Versionsinformationen (Commit SHA) ab */
async function fetchVersionInfo() {
if (!commitShaEl) return; // Don't fetch if element doesn't exist
try {
const response = await fetch(`${API_BASE_URL}/version`);
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
const data = await response.json();
commitShaEl.textContent = data.commitSha || 'unknown';
} catch (error) {
console.error('Failed to fetch version info:', error);
commitShaEl.textContent = 'error';
// Optionally show global error
// showGlobalError(`Could not load version info: ${error.message}`);
}
}
// --- MAC Lookup Specific Functions ---
function displayMacResults(data, outputEl) {
macLookupNotFoundEl.classList.add('hidden'); // Hide not found message first
if (data.vendor) {
outputEl.textContent = data.vendor;
} else {
outputEl.textContent = ''; // Clear vendor text
macLookupNotFoundEl.classList.remove('hidden'); // Show not found message
}
}
function handleMacLookupClick() {
const mac = macInput.value.trim();
if (!mac) {
macLookupErrorEl.textContent = 'Please enter a MAC address.';
macLookupErrorEl.classList.remove('hidden');
return;
}
// Clear previous 'not found' message
macLookupNotFoundEl.classList.add('hidden');
fetchAndDisplay(
'/mac-lookup',
{ mac },
macLookupResultsSection,
macLookupLoader,
macLookupErrorEl,
macLookupQueryEl,
macLookupOutputEl, // Pass the <p> element
displayMacResults
);
}
// --- Initial Load & Event Listeners ---
fetchVersionInfo(); // Lade Versionsinfo für Footer
macLookupButton.addEventListener('click', handleMacLookupClick);
macInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') handleMacLookupClick();
});
}); // End DOMContentLoaded

116
frontend/script.js
View File

@@ -1,4 +1,4 @@
// script.js
// 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');
@@ -23,7 +23,6 @@ document.addEventListener('DOMContentLoaded', () => {
const geoErrorEl = document.getElementById('geo-error');
const asnErrorEl = document.getElementById('asn-error');
const rdnsErrorEl = document.getElementById('rdns-error');
// Get references to the info containers themselves
const geoInfo = document.getElementById('geo-info');
const asnInfo = document.getElementById('asn-info');
const rdnsInfo = document.getElementById('rdns-info');
@@ -83,12 +82,14 @@ document.addEventListener('DOMContentLoaded', () => {
/** Zeigt globale Fehler an */
function showGlobalError(message) {
if (!globalErrorEl) return;
globalErrorEl.textContent = `Error: ${message}`;
globalErrorEl.classList.remove('hidden');
}
/** Versteckt globale Fehler */
function hideGlobalError() {
if (!globalErrorEl) return;
globalErrorEl.classList.add('hidden');
}
@@ -105,7 +106,6 @@ document.addEventListener('DOMContentLoaded', () => {
if (errorElement) errorElement.textContent = ''; // Clear previous error
// Zeige das Elternelement des valueElements, falls es vorher versteckt war (für initiale Ladeanzeige)
// This should be the data container div (e.g., the div inside #geo-info)
const dataContainer = valueElement?.closest('div:not(.loader)'); // Find closest parent div that isn't a loader
if (dataContainer?.classList.contains('hidden')) {
dataContainer.classList.remove('hidden');
@@ -148,7 +148,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (listElement) listElement.appendChild(li);
});
} else {
if (listElement) listElement.innerHTML = '<li>-</li>';
if (listElement) listElement.innerHTML = '<li>No rDNS records found.</li>'; // Klarere Meldung
}
} else if (rdnsData && rdnsData.error) {
if (listElement) listElement.innerHTML = '<li>-</li>';
@@ -169,6 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
* @returns {L.Map | null} Die Karteninstanz oder null bei Fehler.
*/
function initOrUpdateMap(mapId, lat, lon, mapElement, loaderElement, messageElement) {
if (!mapElement || !loaderElement || !messageElement) return null; // Exit if elements are missing
loaderElement.classList.add('hidden'); // Hide loader first
// Use a unique variable name for the map instance based on mapId
@@ -185,13 +186,21 @@ document.addEventListener('DOMContentLoaded', () => {
});
L.marker([lat, lon]).addTo(mapInstance).bindPopup(`Approximate Location`).openPopup();
} else {
mapInstance = L.map(mapId).setView([lat, lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mapInstance);
L.marker([lat, lon]).addTo(mapInstance).bindPopup(`Approximate Location`).openPopup();
window[mapId + '_instance'] = mapInstance; // Store instance
try {
mapInstance = L.map(mapId).setView([lat, lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mapInstance);
L.marker([lat, lon]).addTo(mapInstance).bindPopup(`Approximate Location`).openPopup();
window[mapId + '_instance'] = mapInstance; // Store instance
} catch (e) {
console.error(`Leaflet map initialization failed for ${mapId}:`, e);
mapElement.classList.add('hidden');
messageElement.classList.remove('hidden');
messageElement.textContent = 'Error initializing map.';
return null;
}
}
// Invalidate size after showing/updating to prevent grey tiles
setTimeout(() => {
@@ -218,10 +227,10 @@ 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)
ipAddressEl.classList.add('hidden');
mapEl.classList.add('hidden');
if (ipAddressEl) ipAddressEl.classList.add('hidden');
if (mapEl) mapEl.classList.add('hidden');
// Ensure map message is hidden initially
mapMessageEl.classList.add('hidden');
if (mapMessageEl) mapMessageEl.classList.add('hidden');
try {
@@ -232,8 +241,10 @@ document.addEventListener('DOMContentLoaded', () => {
currentIp = data.ip;
updateField(ipAddressEl, data.ip, ipLoader);
ipAddressEl.classList.remove('hidden'); // Show IP element
if (data.ip) ipAddressEl.addEventListener('click', handleIpClick);
if (ipAddressEl) {
ipAddressEl.classList.remove('hidden'); // Show IP element
if (data.ip) ipAddressEl.addEventListener('click', handleIpClick);
}
updateField(countryEl, data.geo?.countryName ? `${data.geo.countryName} (${data.geo.country})` : null, null, geoErrorEl);
updateField(regionEl, data.geo?.region);
@@ -258,24 +269,26 @@ document.addEventListener('DOMContentLoaded', () => {
const dataDiv = container?.querySelector('div:not(.loader)'); // Select the data div, not the loader
if (dataDiv) dataDiv.classList.remove('hidden');
});
mapMessageEl.textContent = 'Map could not be loaded due to an error.';
mapMessageEl.classList.remove('hidden');
if (mapMessageEl) {
mapMessageEl.textContent = 'Map could not be loaded due to an error.';
mapMessageEl.classList.remove('hidden');
}
}
}
/** Ruft die Versionsinformationen (Commit SHA) ab */
async function fetchVersionInfo() {
if (!commitShaEl) return; // Don't fetch if element doesn't exist
try {
const response = await fetch(`${API_BASE_URL}/version`);
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
const data = await response.json();
console.log('Received Version Info:', data);
if (commitShaEl) {
commitShaEl.textContent = data.commitSha || 'unknown';
}
commitShaEl.textContent = data.commitSha || 'unknown';
} catch (error) {
console.error('Failed to fetch version info:', error);
if (commitShaEl) commitShaEl.textContent = 'error';
commitShaEl.textContent = 'error';
// Optionally show global error
// showGlobalError(`Could not load version info: ${error.message}`);
}
}
@@ -283,26 +296,29 @@ document.addEventListener('DOMContentLoaded', () => {
/** Zeigt Fehler im Lookup-Bereich an */
function showLookupError(message) {
if (!lookupErrorEl) return;
lookupErrorEl.textContent = `Error: ${message}`;
lookupErrorEl.classList.remove('hidden');
}
/** Versteckt Fehler im Lookup-Bereich */
function hideLookupError() {
if (!lookupErrorEl) return;
lookupErrorEl.classList.add('hidden');
}
/** Setzt den Lookup-Ergebnisbereich zurück */
function resetLookupResults() {
if (!lookupResultsSection) return;
lookupResultsSection.classList.add('hidden');
lookupResultLoader.classList.add('hidden');
lookupMapLoader.classList.add('hidden');
lookupMapEl.classList.add('hidden');
lookupMapMessageEl.classList.add('hidden');
lookupPingResultsEl.classList.add('hidden'); // Hide ping results too
lookupPingLoader.classList.add('hidden');
lookupPingOutputEl.textContent = '';
lookupPingErrorEl.textContent = '';
if (lookupResultLoader) lookupResultLoader.classList.add('hidden');
if (lookupMapLoader) lookupMapLoader.classList.add('hidden');
if (lookupMapEl) lookupMapEl.classList.add('hidden');
if (lookupMapMessageEl) lookupMapMessageEl.classList.add('hidden');
if (lookupPingResultsEl) lookupPingResultsEl.classList.add('hidden'); // Hide ping results too
if (lookupPingLoader) lookupPingLoader.classList.add('hidden');
if (lookupPingOutputEl) lookupPingOutputEl.textContent = '';
if (lookupPingErrorEl) lookupPingErrorEl.textContent = '';
const fieldsToClear = [
lookupIpAddressEl, lookupCountryEl, lookupRegionEl, lookupCityEl,
@@ -312,8 +328,8 @@ document.addEventListener('DOMContentLoaded', () => {
fieldsToClear.forEach(el => { if (el) el.textContent = ''; });
if (lookupRdnsListEl) lookupRdnsListEl.innerHTML = '<li>-</li>';
lookupPingButton.disabled = true;
lookupTraceButton.disabled = true;
if (lookupPingButton) lookupPingButton.disabled = true;
if (lookupTraceButton) lookupTraceButton.disabled = true;
currentLookupIp = null;
// Remove lookup map instance if it exists
@@ -328,6 +344,8 @@ document.addEventListener('DOMContentLoaded', () => {
resetLookupResults();
hideLookupError();
hideGlobalError();
if (!lookupResultsSection || !lookupResultLoader || !lookupMapLoader) return; // Exit if elements missing
lookupResultsSection.classList.remove('hidden');
lookupResultLoader.classList.remove('hidden');
lookupMapLoader.classList.remove('hidden'); // Show map loader initially
@@ -358,26 +376,28 @@ document.addEventListener('DOMContentLoaded', () => {
lookupMap = initOrUpdateMap('lookup-map', data.geo?.latitude, data.geo?.longitude, lookupMapEl, lookupMapLoader, lookupMapMessageEl);
lookupPingButton.disabled = false;
lookupTraceButton.disabled = false;
if (lookupPingButton) lookupPingButton.disabled = false;
if (lookupTraceButton) lookupTraceButton.disabled = false;
} catch (error) {
console.error(`Failed to fetch lookup info for ${ipToLookup}:`, error);
showLookupError(`${error.message}`);
lookupMapMessageEl.textContent = 'Map could not be loaded due to an error.';
lookupMapMessageEl.classList.remove('hidden');
lookupMapEl.classList.add('hidden');
lookupMapLoader.classList.add('hidden'); // Hide loader on error
if (lookupMapMessageEl) {
lookupMapMessageEl.textContent = 'Map could not be loaded due to an error.';
lookupMapMessageEl.classList.remove('hidden');
}
if (lookupMapEl) lookupMapEl.classList.add('hidden');
if (lookupMapLoader) lookupMapLoader.classList.add('hidden'); // Hide loader on error
} finally {
lookupResultLoader.classList.add('hidden'); // Hide main loader
if (lookupResultLoader) lookupResultLoader.classList.add('hidden'); // Hide main loader
// Map loader is handled by initOrUpdateMap
}
}
// --- Ping Function (for Lookup) ---
async function runLookupPing(ip) {
if (!ip) return;
if (!ip || !lookupPingResultsEl || !lookupPingLoader || !lookupPingOutputEl || !lookupPingErrorEl) return;
lookupPingResultsEl.classList.remove('hidden');
lookupPingLoader.classList.remove('hidden');
@@ -425,6 +445,8 @@ document.addEventListener('DOMContentLoaded', () => {
showGlobalError('Cannot start traceroute: IP address is missing.');
return;
}
if (!tracerouteSection || !tracerouteOutputEl || !tracerouteLoader || !tracerouteMessage) return;
if (eventSource) {
eventSource.close();
console.log('Previous EventSource closed.');
@@ -493,6 +515,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
function displayTracerouteLine(text, className = '') {
if (!tracerouteOutputEl) return;
const lineDiv = document.createElement('div');
if (className) lineDiv.classList.add(className);
lineDiv.textContent = text;
@@ -501,6 +524,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
function displayTracerouteHop(hopData) {
if (!tracerouteOutputEl) return;
const lineDiv = document.createElement('div');
lineDiv.classList.add('hop-line');
@@ -556,6 +580,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
function handleLookupClick() {
if (!lookupIpInput) return;
const ipToLookup = lookupIpInput.value.trim();
if (!ipToLookup) {
showLookupError('Please enter an IP address.');
@@ -583,11 +608,12 @@ document.addEventListener('DOMContentLoaded', () => {
fetchIpInfo(); // Lade Infos zur eigenen IP
fetchVersionInfo(); // Lade Versionsinfo für Footer
lookupButton.addEventListener('click', handleLookupClick);
lookupIpInput.addEventListener('keypress', (event) => {
// IP Lookup Listeners (nur wenn Elemente existieren)
if (lookupButton) lookupButton.addEventListener('click', handleLookupClick);
if (lookupIpInput) lookupIpInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') handleLookupClick();
});
lookupPingButton.addEventListener('click', handleLookupPingClick);
lookupTraceButton.addEventListener('click', handleLookupTraceClick);
if (lookupPingButton) lookupPingButton.addEventListener('click', handleLookupPingClick);
if (lookupTraceButton) lookupTraceButton.addEventListener('click', handleLookupTraceClick);
}); // End DOMContentLoaded

55
frontend/subnet-calculator.html
View File

@@ -3,16 +3,19 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP Subnetz Rechner - Netzwerk Tools</title>
<title>IP Subnetz Rechner - uTools</title> <!-- Titel angepasst -->
<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Eigene Styles (für Navigation etc., wie in index.html) -->
<style>
/* Navigations-Styling */
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } /* flex-wrap hinzugefügt */
nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; } /* nowrap hinzugefügt */
nav a:hover { color: #a78bfa; /* purple-400 */ text-decoration: underline; }
header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; justify-content: space-between; align-items: center; }
header { background-color: #374151; /* gray-700 */ padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; /* rounded-lg */ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Flex direction geändert */
@media (min-width: 768px) { /* md breakpoint */
header { flex-direction: row; justify-content: space-between; }
}
header h1 { font-size: 1.5rem; /* text-2xl */ font-weight: bold; color: #e5e7eb; /* gray-200 */ }
/* Styling für Formular und Ergebnisse */
@@ -103,18 +106,21 @@
#examples .example-link:hover {
color: #c4b5fd; /* purple-300 */
}
.hidden { display: none; }
</style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
<header>
<h1>uTools</h1>
<h1>uTools Network Suite</h1> <!-- Titel angepasst -->
<nav>
<ul>
<li><a href="index.html">IP Info</a></li>
<li><a href="index.html">IP Info & Tools</a></li> <!-- Angepasst -->
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
<!-- Weitere Menüpunkte hier hinzufügen -->
<li><a href="dns-lookup.html">DNS Lookup</a></li> <!-- Neu -->
<li><a href="whois-lookup.html">WHOIS Lookup</a></li> <!-- Neu -->
<li><a href="mac-lookup.html">MAC Lookup</a></li> <!-- Neu -->
</ul>
</nav>
</header>
@@ -143,7 +149,7 @@
</button>
</form>
<div id="results" class="bg-gray-700 rounded p-6">
<div id="results" class="bg-gray-700 rounded p-6 hidden"> <!-- Ergebnisse initial verstecken -->
<h3 class="text-xl font-semibold text-purple-300 border-b border-purple-500 pb-2 mb-4">Ergebnisse:</h3>
<div class="space-y-2 text-sm">
<p><strong>Netzwerkadresse:</strong> <span id="network-address" class="font-mono text-purple-400">-</span></p>
@@ -197,17 +203,22 @@
<p class="mt-4 text-xs text-gray-400">Klicken Sie auf "Beispiel", um die Felder oben auszufüllen und die Berechnung zu starten.</p>
</div>
<!-- Globaler Fehlerbereich -->
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
</div>
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
<p>&copy; 2025 <a href="https://johanneskr.de">Johannes Krüger</a></p>
<p>&copy; 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p> <!-- Footer mit Version hinzugefügt -->
</footer>
<!-- Nur das Skript für den Rechner laden -->
<script src="subnet-calculator.js"></script>
<script>
// Kleine Ergänzung, um die Beispiel-Links klickbar zu machen
// Kleine Ergänzung, um die Beispiel-Links klickbar zu machen und Version zu laden
document.addEventListener('DOMContentLoaded', () => {
// Beispiel-Links
document.querySelectorAll('.example-link').forEach(link => {
link.addEventListener('click', (event) => {
const ip = event.target.getAttribute('data-ip');
@@ -219,6 +230,30 @@
window.scrollTo({ top: 0, behavior: 'smooth' }); // Nach oben scrollen
});
});
// Version laden (gemeinsame Funktion)
const commitShaEl = document.getElementById('commit-sha');
const globalErrorEl = document.getElementById('global-error');
const API_BASE_URL = '/api'; // Muss hier definiert sein, wenn nicht global
async function fetchVersionInfo() {
try {
const response = await fetch(`${API_BASE_URL}/version`);
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
const data = await response.json();
if (commitShaEl) {
commitShaEl.textContent = data.commitSha || 'unknown';
}
} catch (error) {
console.error('Failed to fetch version info:', error);
if (commitShaEl) commitShaEl.textContent = 'error';
if (globalErrorEl) { // Zeige Fehler global an, wenn Element existiert
globalErrorEl.textContent = `Error loading version: ${error.message}`;
globalErrorEl.classList.remove('hidden');
}
}
}
fetchVersionInfo();
});
</script>
</body>

97
frontend/whois-lookup.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WHOIS Lookup - uTools</title>
<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Eigene Styles -->
<style>
/* Einfacher Lade-Spinner */
.loader {
border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
border-left-color: #a855f7; /* Lila */
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Ergebnis-Pre-Formatierung */
.result-pre {
white-space: pre-wrap;
word-break: break-all;
font-family: monospace;
background-color: #1f2937; /* Dunkelgrau */
color: #d1d5db; /* Hellgrau */
padding: 1rem;
border-radius: 0.375rem; /* rounded-md */
max-height: 600px; /* Mehr Höhe für WHOIS */
overflow-y: auto;
font-size: 0.875rem; /* text-sm */
}
/* Navigations-Styling */
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
nav a { color: #c4b5fd; text-decoration: none; white-space: nowrap; }
nav a:hover { color: #a78bfa; text-decoration: underline; }
header { background-color: #374151; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { header { flex-direction: row; justify-content: space-between; } }
header h1 { font-size: 1.5rem; font-weight: bold; color: #e5e7eb; }
.hidden { display: none; }
</style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
<header>
<h1>uTools Network Suite</h1>
<nav>
<ul>
<li><a href="index.html">IP Info & Tools</a></li>
<li><a href="subnet-calculator.html">Subnetz Rechner</a></li>
<li><a href="dns-lookup.html">DNS Lookup</a></li>
<li><a href="whois-lookup.html">WHOIS Lookup</a></li>
<li><a href="mac-lookup.html">MAC Lookup</a></li>
</ul>
</nav>
</header>
<div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
<h1 class="text-3xl font-bold mb-6 text-purple-400 text-center">WHOIS Lookup</h1>
<!-- Bereich für WHOIS Lookup -->
<div class="mt-8 p-4 bg-gray-700 rounded">
<div class="flex flex-col sm:flex-row gap-2 mb-4">
<input type="text" id="whois-query-input" placeholder="Enter domain or IP (e.g., google.com or 8.8.8.8)"
class="flex-grow px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
<button id="whois-lookup-button"
class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">
Lookup WHOIS
</button>
</div>
<div id="whois-lookup-error" class="text-red-400 mb-4 hidden"></div>
<div id="whois-lookup-results-section" class="hidden mt-4 border-t border-gray-600 pt-4">
<h3 class="text-lg font-semibold text-purple-300 mb-2">WHOIS Results for: <span id="whois-lookup-query" class="font-mono text-purple-400"></span></h3>
<div id="whois-lookup-loader" class="loader hidden mb-2"></div>
<pre id="whois-lookup-output" class="result-pre"></pre> <!-- Ergebnisbereich -->
</div>
</div>
<!-- Globaler Fehlerbereich -->
<div id="global-error" class="mt-6 p-4 bg-red-800 text-red-100 rounded hidden"></div>
<!-- Footer für Version -->
<footer class="mt-8 pt-4 border-t border-gray-600 text-center text-xs text-gray-500">
<p>&copy; 2025 <a href="https://johanneskr.de" class="text-purple-400 hover:underline">Johannes Krüger</a></p>
<p>Version: <span id="commit-sha" class="font-mono">loading...</span></p>
</footer>
</div>
<!-- Eigene JS-Logik für diese Seite -->
<script src="whois-lookup.js"></script>
</body>
</html>

131
frontend/whois-lookup.js Normal file
View File

@@ -0,0 +1,131 @@
// frontend/whois-lookup.js
document.addEventListener('DOMContentLoaded', () => {
// --- DOM Elements (WHOIS Lookup) ---
const whoisQueryInput = document.getElementById('whois-query-input');
const whoisLookupButton = document.getElementById('whois-lookup-button');
const whoisLookupErrorEl = document.getElementById('whois-lookup-error');
const whoisLookupResultsSection = document.getElementById('whois-lookup-results-section');
const whoisLookupQueryEl = document.getElementById('whois-lookup-query');
const whoisLookupLoader = document.getElementById('whois-lookup-loader');
const whoisLookupOutputEl = document.getElementById('whois-lookup-output');
// --- DOM Elements (Common) ---
const globalErrorEl = document.getElementById('global-error');
const commitShaEl = document.getElementById('commit-sha');
// --- Configuration ---
const API_BASE_URL = '/api'; // Anpassen, falls nötig
// --- Helper Functions ---
/** Zeigt globale Fehler an */
function showGlobalError(message) {
if (!globalErrorEl) return;
globalErrorEl.textContent = `Error: ${message}`;
globalErrorEl.classList.remove('hidden');
}
/** Versteckt globale Fehler */
function hideGlobalError() {
if (!globalErrorEl) return;
globalErrorEl.classList.add('hidden');
}
/**
* Generische Funktion zum Abrufen und Anzeigen von Lookup-Ergebnissen.
* @param {string} endpoint - Der API-Endpunkt (z.B. '/whois-lookup').
* @param {object} params - Query-Parameter als Objekt (z.B. { query: '...' }).
* @param {HTMLElement} resultsSection - Der Container für die Ergebnisse.
* @param {HTMLElement} loaderElement - Das Loader-Element.
* @param {HTMLElement} errorElement - Das Fehleranzeige-Element für diesen Lookup.
* @param {HTMLElement} queryElement - Das Element zur Anzeige der Suchanfrage.
* @param {HTMLElement} outputElement - Das Element zur Anzeige der Ergebnisse (<pre> oder <p>).
* @param {function} displayFn - Funktion zur Formatierung und Anzeige der Daten im outputElement.
*/
async function fetchAndDisplay(endpoint, params, resultsSection, loaderElement, errorElement, queryElement, outputElement, displayFn) {
resultsSection.classList.remove('hidden');
loaderElement.classList.remove('hidden');
errorElement.classList.add('hidden');
outputElement.textContent = ''; // Clear previous results
if (queryElement) queryElement.textContent = Object.values(params).join(', '); // Display query
hideGlobalError(); // Hide global errors before new request
const urlParams = new URLSearchParams(params);
const url = `${API_BASE_URL}${endpoint}?${urlParams.toString()}`;
try {
const response = await fetch(url);
const data = await response.json();
if (!response.ok || !data.success) {
throw new Error(data.error || `Request failed with status ${response.status}`);
}
console.log(`Received ${endpoint} data:`, data);
displayFn(data, outputElement); // Call the specific display function
} catch (error) {
console.error(`Failed to fetch ${endpoint}:`, error);
errorElement.textContent = `Error: ${error.message}`;
errorElement.classList.remove('hidden');
outputElement.textContent = ''; // Clear output on error
} finally {
loaderElement.classList.add('hidden');
}
}
/** Ruft die Versionsinformationen (Commit SHA) ab */
async function fetchVersionInfo() {
if (!commitShaEl) return; // Don't fetch if element doesn't exist
try {
const response = await fetch(`${API_BASE_URL}/version`);
if (!response.ok) throw new Error(`Network response: ${response.statusText} (${response.status})`);
const data = await response.json();
commitShaEl.textContent = data.commitSha || 'unknown';
} catch (error) {
console.error('Failed to fetch version info:', error);
commitShaEl.textContent = 'error';
// Optionally show global error
// showGlobalError(`Could not load version info: ${error.message}`);
}
}
// --- 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
if (typeof data.result === 'string') {
outputEl.textContent = data.result; // Display raw text if it's a string
} else {
outputEl.textContent = JSON.stringify(data.result, null, 2); // Display JSON otherwise
}
}
function handleWhoisLookupClick() {
const query = whoisQueryInput.value.trim();
if (!query) {
whoisLookupErrorEl.textContent = 'Please enter a domain or IP address.';
whoisLookupErrorEl.classList.remove('hidden');
return;
}
fetchAndDisplay(
'/whois-lookup',
{ query },
whoisLookupResultsSection,
whoisLookupLoader,
whoisLookupErrorEl,
whoisLookupQueryEl,
whoisLookupOutputEl,
displayWhoisResults
);
}
// --- Initial Load & Event Listeners ---
fetchVersionInfo(); // Lade Versionsinfo für Footer
whoisLookupButton.addEventListener('click', handleWhoisLookupClick);
whoisQueryInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') handleWhoisLookupClick();
});
}); // End DOMContentLoaded