change design on ssl_checker

backend/routes/sslCheck.js

@@ -1,56 +1,85 @@
 const express = require('express');
 const { exec } = require('child_process');
 const router = express.Router();
+const os = require('os'); // Für Timeout-Signal
 
-// Funktion zum Parsen der openssl s_client Ausgabe
+// Funktion zum Parsen der openssl x509 -text Ausgabe
 function parseSslOutput(output) {
     const result = {
         issuer: null,
         subject: null,
         validFrom: null,
         validTo: null,
+        validity: "Could not determine validity", // Standardwert
         error: null,
-        details: output // Rohausgabe für Debugging
+        details: output // Rohausgabe für Debugging/Anzeige
     };
 
     try {
-        const issuerMatch = output.match(/issuer=([^\n]+)/);
+        // Extrahiere Issuer und Subject (robusterer Regex, der Zeilenumbrüche berücksichtigt)
-        if (issuerMatch) result.issuer = issuerMatch[1].trim();
+        const issuerMatch = output.match(/Issuer:([^\n]+(?:\n\s+[^\n]+)*)/);
+        if (issuerMatch) result.issuer = issuerMatch[1].replace(/\n\s+/g, ' ').trim();
 
-        const subjectMatch = output.match(/subject=([^\n]+)/);
+        const subjectMatch = output.match(/Subject:([^\n]+(?:\n\s+[^\n]+)*)/);
-        if (subjectMatch) result.subject = subjectMatch[1].trim();
+        if (subjectMatch) result.subject = subjectMatch[1].replace(/\n\s+/g, ' ').trim();
 
-        // Gültigkeitsdaten extrahieren (Beispielformat: notBefore=..., notAfter=...)
+        // Extrahiere Gültigkeitsdaten (verschiedene Datumsformate berücksichtigen)
-        // openssl Datumsformate können variieren, dies ist ein einfacher Ansatz
+        const validFromMatch = output.match(/Not Before\s*:\s*(.+)/);
-        const validFromMatch = output.match(/notBefore=([^\n]+)/);
+        if (validFromMatch) {
-        if (validFromMatch) result.validFrom = new Date(validFromMatch[1].trim()).toISOString();
+            try {
+                result.validFrom = new Date(validFromMatch[1].trim()).toISOString();
+            } catch (dateError) {
+                console.warn("Could not parse 'Not Before' date:", validFromMatch[1].trim());
+            }
+        }
 
-        const validToMatch = output.match(/notAfter=([^\n]+)/);
+        const validToMatch = output.match(/Not After\s*:\s*(.+)/);
-        if (validToMatch) result.validTo = new Date(validToMatch[1].trim()).toISOString();
+         if (validToMatch) {
+             try {
+                result.validTo = new Date(validToMatch[1].trim()).toISOString();
+             } catch (dateError) {
+                 console.warn("Could not parse 'Not After' date:", validToMatch[1].trim());
+             }
+        }
 
-        // Einfache Bewertung: Ist das Zertifikat noch gültig?
+        // Bewerte Gültigkeit basierend auf geparsten Daten
         if (result.validFrom && result.validTo) {
             const now = new Date();
             const validFromDate = new Date(result.validFrom);
             const validToDate = new Date(result.validTo);
-            if (now < validFromDate || now > validToDate) {
+            if (!isNaN(validFromDate) && !isNaN(validToDate)) { // Prüfen ob Daten gültig sind
-                result.validity = "Invalid (Expired or Not Yet Valid)";
+                 if (now < validFromDate) {
+                    result.validity = "Invalid (Not Yet Valid)";
+                 } else if (now > validToDate) {
+                    result.validity = "Invalid (Expired)";
+                 } else {
+                    result.validity = "Valid";
+                 }
             } else {
-                result.validity = "Valid";
+                 result.validity = "Could not parse validity dates";
             }
         } else {
-             result.validity = "Could not determine validity";
+             result.validity = "Could not extract validity dates";
         }
 
-
     } catch (e) {
         console.error("Error parsing openssl output:", e);
         result.error = "Error parsing certificate details.";
+        result.validity = "Parsing Error"; // Spezifischer Status
     }
 
     return result;
 }
 
+// Einfache Domain-Validierung (grundlegend)
+function isValidDomain(domain) {
+    // Erlaubt Buchstaben, Zahlen, Bindestriche und Punkte. Muss mit Buchstabe/Zahl beginnen/enden.
+    // Nicht perfekt (z.B. IDNs), aber fängt grundlegende Fehler ab.
+    const domainRegex = /^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+    // Zusätzliche Längenprüfung
+    return domain && domain.length <= 253 && domainRegex.test(domain);
+}
+
 
 router.get('/', async (req, res) => {
     const domain = req.query.domain;
@@ -59,68 +88,132 @@ router.get('/', async (req, res) => {
         return res.status(400).json({ error: 'Domain parameter is required' });
     }
 
-    // Verwende Port 443 für HTTPS
+    // Grundlegende Validierung der Domain
-    const command = `echo | openssl s_client -servername ${domain} -connect ${domain}:443 -showcerts 2>/dev/null | openssl x509 -noout -text`;
+    if (!isValidDomain(domain)) {
+         return res.status(400).json({ error: 'Invalid domain format provided' });
+    }
+
+    // Verwende Port 443 für HTTPS. Timeout nach 10 Sekunden.
+    // Leite stderr nicht mehr nach /dev/null um, um Fehler von s_client zu sehen.
+    // Verwende -brief für eine kompaktere Ausgabe, falls -text fehlschlägt
+    const command = `echo "" | openssl s_client -servername ${domain} -connect ${domain}:443 -showcerts 2>&1 | openssl x509 -noout -text`;
+    const timeoutMs = 10000; // 10 Sekunden
+
+    const child = exec(command, { timeout: timeoutMs }, (error, stdout, stderr) => {
+        // WICHTIG: stderr wird hier durch 2>&1 im Befehl in stdout umgeleitet!
+        // Daher prüfen wir stdout auf Fehlermuster und error auf Exit-Code.
+
+        const combinedOutput = stdout || ""; // stdout enthält jetzt auch stderr
 
-    exec(command, (error, stdout, stderr) => {
         if (error) {
-            console.error(`exec error: ${error}`);
+            console.error(`exec error for domain ${domain}:`, error);
-            // Versuche, spezifischere Fehler zu erkennen
+            let errorMessage = 'Failed to execute openssl command.';
-            if (stderr.includes("connect:errno=") || error.message.includes("getaddrinfo ENOTFOUND")) {
+            let errorDetails = combinedOutput || error.message; // Bevorzuge Output, wenn vorhanden
-                 return res.status(500).json({ error: `Could not connect to domain: ${domain}`, details: stderr || error.message });
+
+            // Versuche, spezifischere Fehler aus der Ausgabe zu erkennen
+            if (error.signal === 'SIGTERM' || (error.code === null && error.signal === os.constants.signals.SIGTERM)) { // Expliziter Timeout Check
+                 errorMessage = `Connection timed out after ${timeoutMs / 1000} seconds.`;
+                 errorDetails = `Timeout while trying to connect to ${domain}:443`;
+            } else if (combinedOutput.includes("getaddrinfo: Name or service not known") || combinedOutput.includes("nodename nor servname provided, or not known") || combinedOutput.includes("failed to get server ip address")) {
+                errorMessage = `Could not resolve domain: ${domain}`;
+            } else if (combinedOutput.includes("connect: Connection refused")) {
+                errorMessage = `Connection refused by ${domain}:443. Is the server running and accepting connections?`;
+            } else if (combinedOutput.includes("connect:errno=") || combinedOutput.includes("SSL_connect:failed")) {
+                 errorMessage = `Could not establish SSL connection to ${domain}:443.`;
+            } else if (combinedOutput.includes("unable to load certificate") || combinedOutput.includes("Expecting: TRUSTED CERTIFICATE")) {
+                 errorMessage = `Could not retrieve or parse certificate from ${domain}. Server might not be sending a valid certificate.`;
+            } else if (error.code) {
+                 errorMessage = `OpenSSL command failed with exit code ${error.code}.`;
             }
-             if (stderr.includes("SSL alert number 40")) {
+
-                 return res.status(500).json({ error: `No SSL certificate found or SSL handshake failed for domain: ${domain}`, details: stderr });
+            return res.status(500).json({ error: errorMessage, details: errorDetails });
-            }
-            return res.status(500).json({ error: 'Failed to execute openssl command', details: stderr || error.message });
         }
 
-        if (stderr) {
+        // Wenn kein Fehler aufgetreten ist, aber stdout leer ist (sollte nicht passieren wegen 2>&1, aber sicherheitshalber)
-             console.warn(`openssl stderr: ${stderr}`); // Warnung, aber fahre fort, wenn stdout vorhanden ist
+        if (!combinedOutput.trim()) {
+             console.warn(`Empty output received for domain ${domain}, although no exec error occurred.`);
+             return res.status(500).json({ error: 'Received empty response from openssl command.' });
         }
 
-        if (!stdout) {
+        // Versuche, das Zertifikat zu parsen
-             return res.status(500).json({ error: 'No certificate information received from openssl', details: stderr });
+        const certInfo = parseSslOutput(combinedOutput); // Parse die kombinierte Ausgabe
-        }
 
-        const certInfo = parseSslOutput(stdout);
+        // Wenn das Parsen fehlschlägt ODER keine relevanten Infos gefunden wurden
-        if (certInfo.error) {
+        if (certInfo.error || (!certInfo.issuer && !certInfo.subject && !certInfo.validTo)) {
-             // Wenn beim Parsen ein Fehler aufgetreten ist, aber stdout vorhanden war
+             // Möglicherweise war die Ausgabe nur eine Fehlermeldung von s_client oder x509
-             return res.status(500).json({ error: certInfo.error, raw_output: stdout });
+             console.warn(`Could not parse certificate details for ${domain}. Raw output:`, combinedOutput);
+             // Gib einen spezifischeren Fehler zurück, wenn möglich
+             let parseErrorMsg = certInfo.error || `Could not extract certificate details from the server response.`;
+             if (combinedOutput.includes("connect:errno=")) {
+                 parseErrorMsg = `Could not establish SSL connection to ${domain}:443.`;
+             } else if (combinedOutput.toLowerCase().includes("no certificate")) {
+                  parseErrorMsg = `Server at ${domain}:443 did not present a certificate.`;
+             }
+             return res.status(500).json({ error: parseErrorMsg, details: combinedOutput });
         }
 
 
-        // Einfache Bewertung hinzufügen (Beispiel)
+        // Einfache Bewertung hinzufügen
         let score = 0;
         let evaluation = [];
         if (certInfo.validity === "Valid") {
-            score += 5;
+            score += 5; // Basispunktzahl für Gültigkeit
             evaluation.push("Certificate is currently valid.");
 
              // Prüfe die verbleibende Gültigkeitsdauer
-             const daysRemaining = Math.floor((new Date(certInfo.validTo) - new Date()) / (1000 * 60 * 60 * 24));
+             try {
-             if (daysRemaining < 30) {
+                const daysRemaining = Math.floor((new Date(certInfo.validTo) - new Date()) / (1000 * 60 * 60 * 24));
-                 score -= 2;
+                if (!isNaN(daysRemaining)) {
-                 evaluation.push(`Warning: Certificate expires in ${daysRemaining} days.`);
+                    if (daysRemaining < 14) { // Strengere Warnung
-             } else {
+                        score -= 3;
-                 score += 2;
+                        evaluation.push(`Warning: Certificate expires in ${daysRemaining} days (less than 14 days).`);
-                 evaluation.push(`Certificate expires in ${daysRemaining} days.`);
+                    } else if (daysRemaining < 30) {
+                        score -= 1;
+                        evaluation.push(`Warning: Certificate expires in ${daysRemaining} days (less than 30 days).`);
+                    } else {
+                        score += 2; // Bonus für gute Restlaufzeit
+                        evaluation.push(`Certificate expires in ${daysRemaining} days.`);
+                    }
+                } else {
+                     evaluation.push("Could not calculate remaining days.");
+                }
+             } catch (e) {
+                 console.warn("Could not calculate remaining days:", e);
+                 evaluation.push("Could not calculate remaining days.");
              }
         } else {
-            evaluation.push("Certificate is not valid.");
+            // Keine Punkte für ungültige Zertifikate
+            evaluation.push(`Certificate is not valid (${certInfo.validity}).`);
         }
 
-        // Weitere Prüfungen könnten hier hinzugefügt werden (z.B. auf schwache Signaturalgorithmen, Schlüssellänge etc.)
+        // Weitere Prüfungen könnten hier hinzugefügt werden
 
         res.json({
             domain: domain,
-            certificate: certInfo,
+            certificate: { // Nur relevante Infos senden, nicht die ganze Roh-Ausgabe im Hauptobjekt
+                 issuer: certInfo.issuer,
+                 subject: certInfo.subject,
+                 validFrom: certInfo.validFrom,
+                 validTo: certInfo.validTo,
+                 validity: certInfo.validity,
+                 details: certInfo.details // Roh-Details bleiben für die Anzeige im Frontend
+            },
             evaluation: {
-                score: Math.max(0, Math.min(10, score)), // Score zwischen 0 und 10
+                score: Math.max(0, Math.min(10, score)), // Score zwischen 0 und 10 begrenzen
                 summary: evaluation.join(' ')
             }
          });
     });
+
+     // Timeout-Handling (falls das interne Timeout von exec nicht greift)
+     const timer = setTimeout(() => {
+         console.warn(`Forcing termination of openssl command for ${domain} after ${timeoutMs}ms`);
+         child.kill('SIGTERM'); // Versuche, den Prozess sauber zu beenden
+     }, timeoutMs + 1000); // Gib dem internen Timeout eine kleine Gnadenfrist
+
+     child.on('exit', () => {
+         clearTimeout(timer); // Timer löschen, wenn der Prozess normal endet
+     });
 });
 
 module.exports = router;

frontend/app/ssl-check.html

@@ -1,87 +1,141 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SSL Certificate Check</title>
+    <title>SSL Certificate Check - uTools</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <!-- Tailwind CSS Play CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome (für Icons) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Eigene Styles (ähnlich wie index.html) -->
     <style>
-        body { padding-top: 60px; } /* Adjust based on fixed navbar height */
+        /* Einfacher Lade-Spinner (Tailwind animiert) */
-        .result-box { margin-top: 20px; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; }
+        .loader {
-        .loading-spinner { display: none; }
+            border: 4px solid rgba(168, 85, 247, 0.3); /* Lila transparent */
-        .evaluation-summary { font-weight: bold; }
+            border-left-color: #a855f7; /* Lila */
-        .score-bar { height: 20px; background-color: #e9ecef; border-radius: .25rem; overflow: hidden; }
+            border-radius: 50%;
-        .score-bar-inner { height: 100%; background-color: #dc3545; transition: width 0.5s ease-in-out; } /* Start red */
+            width: 24px;
+            height: 24px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Navigations-Styling (aus index.html übernommen) */
+        nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
+        nav a { color: #c4b5fd; /* purple-300 */ text-decoration: none; white-space: nowrap; }
+        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; flex-direction: column; align-items: center; gap: 0.5rem; }
+        @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 */ }
+        /* Ergebnis-Box */
+        .result-box 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 */
+        }
+        /* Score Bar */
+        .score-bar { height: 20px; background-color: #4b5563; /* gray-600 */ border-radius: 0.25rem; overflow: hidden; }
+        .score-bar-inner { height: 100%; background-color: #ef4444; /* red-500 */ transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; }
+        /* Hilfsklasse zum Verstecken */
+        .hidden { display: none; }
     </style>
 </head>
-<body>
+<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/app/index.html"><i class="fas fa-network-wired"></i> Network Tools</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav">
-                    <li class="nav-item">
-                        <a class="nav-link" href="/app/index.html">IP Info</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/app/dns-lookup.html">DNS Lookup</a>
-                    </li>
-                     <li class="nav-item">
-                        <a class="nav-link" href="/app/whois-lookup.html">WHOIS Lookup</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/app/ssl-check.html">SSL Check</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/app/subnet-calculator.html">Subnet Calculator</a>
-                    </li>
-                    <!-- Add other tools here -->
-                </ul>
-            </div>
-        </div>
-    </nav>
 
-    <div class="container mt-4">
+    <header>
-        <h1><i class="fas fa-shield-alt"></i> SSL Certificate Check</h1>
+        <h1><a href="index.html" class="hover:text-purple-300"><i class="fas fa-network-wired mr-2"></i>uTools Network Suite</a></h1>
-        <p>Enter a domain name to check its SSL/TLS certificate details and validity.</p>
+        <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="ssl-check.html" class="text-purple-400 font-bold">SSL Check</a></li> <!-- Aktive Seite hervorheben -->
+            </ul>
+        </nav>
+    </header>
 
-        <form id="ssl-check-form">
+    <div class="container mx-auto max-w-4xl bg-gray-800 rounded-lg shadow-xl p-6">
-            <div class="input-group mb-3">
+        <h1 class="text-3xl font-bold mb-6 text-purple-400 text-center"><i class="fas fa-shield-alt mr-2"></i>SSL Certificate Check</h1>
-                <input type="text" class="form-control" id="domain-input" placeholder="e.g., google.com" required>
+        <p class="text-center text-gray-400 mb-6">Enter a domain name to check its SSL/TLS certificate details and validity.</p>
-                <button class="btn btn-primary" type="submit" id="submit-button">
+
-                    Check Certificate
+        <form id="ssl-check-form" class="mb-6">
+            <div class="flex flex-col sm:flex-row gap-2">
+                <input type="text" id="domain-input" placeholder="e.g., google.com" required
+                       class="flex-grow px-3 py-2 bg-gray-700 border border-gray-600 rounded text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono">
+                <button type="submit" id="submit-button"
+                        class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out flex items-center justify-center">
+                    <span id="button-text">Check Certificate</span>
+                    <div id="loading-spinner" class="loader ml-2 hidden"></div>
                 </button>
             </div>
-             <div class="loading-spinner text-center mt-2">
-                <div class="spinner-border text-primary" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            </div>
         </form>
 
-        <div id="result" class="result-box bg-light p-3 rounded border" style="display: none;">
+        <!-- Ergebnisbereich -->
-             <h2>Result for <span id="result-domain" class="fw-bold"></span></h2>
+        <div id="result" class="result-box bg-gray-700 p-4 rounded border border-gray-600 hidden">
-             <div id="evaluation" class="mb-3">
+             <h2 class="text-xl font-semibold text-purple-300 mb-4">Result for <span id="result-domain" class="font-bold font-mono"></span></h2>
-                 <h4>Evaluation</h4>
+
+             <!-- Fehleranzeige -->
+             <div id="error-message" class="bg-red-800 text-red-100 p-3 rounded mb-4 hidden"></div>
+
+             <!-- Auswertung (nur bei Erfolg) -->
+             <div id="evaluation" class="mb-4 hidden">
+                 <h4 class="text-lg font-semibold text-purple-300 mb-2">Evaluation</h4>
                  <div class="score-bar mb-2">
                      <div id="score-bar-inner" class="score-bar-inner"></div>
                  </div>
-                 <p>Score: <span id="score-value" class="fw-bold"></span>/10</p>
+                 <p class="text-sm">Score: <span id="score-value" class="font-bold"></span>/10</p>
-                 <p class="evaluation-summary" id="evaluation-summary"></p>
+                 <p class="text-sm font-semibold mt-1" id="evaluation-summary"></p>
              </div>
-             <div id="certificate-details">
+
-                 <h4>Certificate Details</h4>
+             <!-- Zertifikatsdetails (nur bei Erfolg) -->
+             <div id="certificate-details" class="hidden">
+                 <h4 class="text-lg font-semibold text-purple-300 mb-2">Certificate Details</h4>
                  <pre id="cert-output"></pre>
              </div>
-             <div id="error-message" class="alert alert-danger" style="display: none;"></div>
         </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Footer (aus index.html übernommen) -->
+    <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> <!-- ID beibehalten für script.js -->
+    </footer>
+
+    <!-- Eigene JS-Logik -->
     <script src="/app/ssl-check.js"></script>
+    <!-- Gemeinsames Skript für Version etc. (falls benötigt, sonst entfernen) -->
+    <script>
+        // Minimales Skript, um die Version zu laden (aus index.html's script.js extrahiert)
+        async function fetchVersion() {
+            try {
+                const response = await fetch('/api/version');
+                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+                const data = await response.json();
+                const commitShaSpan = document.getElementById('commit-sha');
+                if (commitShaSpan && data.commitSha) {
+                    commitShaSpan.textContent = data.commitSha.substring(0, 7); // Kurze SHA
+                } else if (commitShaSpan) {
+                     commitShaSpan.textContent = 'N/A';
+                }
+            } catch (error) {
+                console.error('Error fetching version:', error);
+                const commitShaSpan = document.getElementById('commit-sha');
+                if (commitShaSpan) commitShaSpan.textContent = 'Error';
+            }
+        }
+        document.addEventListener('DOMContentLoaded', fetchVersion);
+    </script>
 </body>
 </html>

frontend/app/ssl-check.js

@@ -7,10 +7,12 @@ document.addEventListener('DOMContentLoaded', () => {
     const scoreValueSpan = document.getElementById('score-value');
     const scoreBarInner = document.getElementById('score-bar-inner');
     const evaluationSummaryP = document.getElementById('evaluation-summary');
+    const certificateDetailsDiv = document.getElementById('certificate-details');
     const certOutputPre = document.getElementById('cert-output');
     const errorMessageDiv = document.getElementById('error-message');
-    const loadingSpinner = document.querySelector('.loading-spinner');
+    const loadingSpinner = document.getElementById('loading-spinner'); // Geändert
     const submitButton = document.getElementById('submit-button');
+    const buttonTextSpan = document.getElementById('button-text'); // Geändert
 
     form.addEventListener('submit', async (event) => {
         event.preventDefault();
@@ -23,36 +25,51 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // Reset UI
         hideError();
-        resultDiv.style.display = 'none';
+        resultDiv.classList.add('hidden');
-        loadingSpinner.style.display = 'block';
+        evaluationDiv.classList.add('hidden');
+        certificateDetailsDiv.classList.add('hidden');
+        loadingSpinner.classList.remove('hidden'); // Spinner anzeigen
         submitButton.disabled = true;
-        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Checking...';
+        buttonTextSpan.textContent = 'Checking...'; // Text im Button ändern
 
 
         try {
-            const response = await fetch(`/api/ssl-check?domain=${encodeURIComponent(domain)}`);
+            // Verwende /api/ Relative Pfad, da Nginx als Proxy dient
+            const apiUrl = `/api/ssl-check?domain=${encodeURIComponent(domain)}`;
+            console.log(`Fetching: ${apiUrl}`); // Debugging
+            const response = await fetch(apiUrl);
             const data = await response.json();
+            console.log("API Response:", data); // Debugging
 
-            resultDiv.style.display = 'block';
+            resultDiv.classList.remove('hidden'); // Ergebnisbereich anzeigen
             resultDomainSpan.textContent = domain;
 
             if (!response.ok || data.error) {
-                // Handle API errors (including connection errors, no cert found etc.)
+                // API-Fehler oder Fehler in der JSON-Antwort behandeln
-                const errorDetail = data.details ? ` Details: ${data.details}` : '';
+                const errorMsg = data.error || `HTTP error! Status: ${response.status}`;
-                showError(data.error || `HTTP error! status: ${response.status}${errorDetail}`);
+                const errorDetails = data.details ? ` Details: ${data.details}` : (data.raw_output ? ` Raw Output: ${data.raw_output}` : '');
-                evaluationDiv.style.display = 'none'; // Hide evaluation section on error
+                 console.error("API Error:", errorMsg, errorDetails); // Debugging
-                document.getElementById('certificate-details').style.display = 'none'; // Hide details section
+                showError(`${errorMsg}${errorDetails}`);
-            } else {
+                evaluationDiv.classList.add('hidden'); // Auswertung ausblenden bei Fehler
-                // Display successful result
+                certificateDetailsDiv.classList.add('hidden'); // Details ausblenden bei Fehler
-                evaluationDiv.style.display = 'block';
+            } else if (!data.certificate || !data.evaluation) {
-                document.getElementById('certificate-details').style.display = 'block';
+                 // Unerwartete, aber erfolgreiche Antwort
+                 console.error("Unexpected API response structure:", data); // Debugging
+                 showError("Received an unexpected response from the server.");
+                 evaluationDiv.classList.add('hidden');
+                 certificateDetailsDiv.classList.add('hidden');
+            }
+            else {
+                // Erfolgreiches Ergebnis anzeigen
+                evaluationDiv.classList.remove('hidden');
+                certificateDetailsDiv.classList.remove('hidden');
 
-                // Evaluation
+                // Auswertung
                 scoreValueSpan.textContent = data.evaluation.score;
                 evaluationSummaryP.textContent = data.evaluation.summary;
                 updateScoreBar(data.evaluation.score);
 
-                // Certificate Details (Format for readability)
+                // Zertifikatsdetails formatieren
                 let formattedDetails = `Issuer: ${data.certificate.issuer || 'N/A'}\n`;
                 formattedDetails += `Subject: ${data.certificate.subject || 'N/A'}\n`;
                 formattedDetails += `Valid From: ${data.certificate.validFrom ? new Date(data.certificate.validFrom).toLocaleString() : 'N/A'}\n`;
@@ -60,42 +77,41 @@ document.addEventListener('DOMContentLoaded', () => {
                 formattedDetails += `Validity Status: ${data.certificate.validity || 'N/A'}\n\n`;
                 formattedDetails += `--- Raw OpenSSL Output ---\n${data.certificate.details || 'N/A'}`;
                 certOutputPre.textContent = formattedDetails;
-
             }
         } catch (error) {
-            console.error('Fetch error:', error);
+            console.error('Fetch or processing error:', error); // Debugging
-            showError(`An error occurred while fetching the certificate details. Check the browser console. Error: ${error.message}`);
+            showError(`An error occurred: ${error.message}. Check the browser console for more details.`);
-            evaluationDiv.style.display = 'none';
+            evaluationDiv.classList.add('hidden');
-            document.getElementById('certificate-details').style.display = 'none';
+            certificateDetailsDiv.classList.add('hidden');
         } finally {
-            loadingSpinner.style.display = 'none';
+            loadingSpinner.classList.add('hidden'); // Spinner ausblenden
             submitButton.disabled = false;
-            submitButton.innerHTML = 'Check Certificate';
+            buttonTextSpan.textContent = 'Check Certificate'; // Button-Text zurücksetzen
         }
     });
 
     function showError(message) {
         errorMessageDiv.textContent = message;
-        errorMessageDiv.style.display = 'block';
+        errorMessageDiv.classList.remove('hidden');
-        resultDiv.style.display = 'block'; // Show the result box to display the error within it
+        resultDiv.classList.remove('hidden'); // Sicherstellen, dass der Ergebnisbereich sichtbar ist, um den Fehler anzuzeigen
     }
 
     function hideError() {
-        errorMessageDiv.style.display = 'none';
+        errorMessageDiv.classList.add('hidden');
         errorMessageDiv.textContent = '';
     }
 
     function updateScoreBar(score) {
-        const percentage = score * 10; // Score is out of 10
+        const percentage = Math.max(0, Math.min(100, score * 10)); // Sicherstellen, dass der Wert zwischen 0 und 100 liegt
         scoreBarInner.style.width = `${percentage}%`;
 
-        // Change color based on score
+        // Farbwechsel basierend auf dem Score
         if (score >= 8) {
-            scoreBarInner.style.backgroundColor = '#198754'; // Green
+            scoreBarInner.style.backgroundColor = '#22c55e'; // green-500
         } else if (score >= 5) {
-            scoreBarInner.style.backgroundColor = '#ffc107'; // Yellow
+            scoreBarInner.style.backgroundColor = '#facc15'; // yellow-400
         } else {
-            scoreBarInner.style.backgroundColor = '#dc3545'; // Red
+            scoreBarInner.style.backgroundColor = '#ef4444'; // red-500
         }
     }
 });