MrUnknownDE/utools
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/utools.git synced 2026-04-18 21:53:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

change design on ssl_checker

Browse Source
This commit is contained in:
MrUnknownDE
2025-03-29 19:41:37 +01:00
parent ea15c7e5b6
commit c698aa9692
3 changed files with 307 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
frontend/app/ssl-check.html
View File

@@ -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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<title>SSL Certificate Check - uTools</title>
<!-- 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 */
.result-box { margin-top: 20px; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; }
.loading-spinner { display: none; }
.evaluation-summary { font-weight: bold; }
.score-bar { height: 20px; background-color: #e9ecef; border-radius: .25rem; overflow: hidden; }
.score-bar-inner { height: 100%; background-color: #dc3545; transition: width 0.5s ease-in-out; } /* Start red */
/* Einfacher Lade-Spinner (Tailwind animiert) */
.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 (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>
<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>
<body class="bg-gray-900 text-gray-200 font-sans p-4 md:p-8">
<div class="container mt-4">
<h1><i class="fas fa-shield-alt"></i> SSL Certificate Check</h1>
<p>Enter a domain name to check its SSL/TLS certificate details and validity.</p>
<header>
<h1><a href="index.html" class="hover:text-purple-300"><i class="fas fa-network-wired mr-2"></i>uTools Network Suite</a></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="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="input-group mb-3">
<input type="text" class="form-control" id="domain-input" placeholder="e.g., google.com" required>
<button class="btn btn-primary" type="submit" id="submit-button">
Check Certificate
<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"><i class="fas fa-shield-alt mr-2"></i>SSL Certificate Check</h1>
<p class="text-center text-gray-400 mb-6">Enter a domain name to check its SSL/TLS certificate details and validity.</p>
<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;">
<h2>Result for <span id="result-domain" class="fw-bold"></span></h2>
<div id="evaluation" class="mb-3">
<h4>Evaluation</h4>
<!-- Ergebnisbereich -->
<div id="result" class="result-box bg-gray-700 p-4 rounded border border-gray-600 hidden">
<h2 class="text-xl font-semibold text-purple-300 mb-4">Result for <span id="result-domain" class="font-bold font-mono"></span></h2>
<!-- 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="evaluation-summary" id="evaluation-summary"></p>
<p class="text-sm">Score: <span id="score-value" class="font-bold"></span>/10</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>

80
frontend/app/ssl-check.js
View File

@@ -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';
loadingSpinner.style.display = 'block';
resultDiv.classList.add('hidden');
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.)
const errorDetail = data.details ? ` Details: ${data.details}` : '';
showError(data.error || `HTTP error! status: ${response.status}${errorDetail}`);
evaluationDiv.style.display = 'none'; // Hide evaluation section on error
document.getElementById('certificate-details').style.display = 'none'; // Hide details section
} else {
// Display successful result
evaluationDiv.style.display = 'block';
document.getElementById('certificate-details').style.display = 'block';
// API-Fehler oder Fehler in der JSON-Antwort behandeln
const errorMsg = data.error || `HTTP error! Status: ${response.status}`;
const errorDetails = data.details ? ` Details: ${data.details}` : (data.raw_output ? ` Raw Output: ${data.raw_output}` : '');
console.error("API Error:", errorMsg, errorDetails); // Debugging
showError(`${errorMsg}${errorDetails}`);
evaluationDiv.classList.add('hidden'); // Auswertung ausblenden bei Fehler
certificateDetailsDiv.classList.add('hidden'); // Details ausblenden bei Fehler
} else if (!data.certificate || !data.evaluation) {
// 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);
showError(`An error occurred while fetching the certificate details. Check the browser console. Error: ${error.message}`);
evaluationDiv.style.display = 'none';
document.getElementById('certificate-details').style.display = 'none';
console.error('Fetch or processing error:', error); // Debugging
showError(`An error occurred: ${error.message}. Check the browser console for more details.`);
evaluationDiv.classList.add('hidden');
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';
resultDiv.style.display = 'block'; // Show the result box to display the error within it
errorMessageDiv.classList.remove('hidden');
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
}
}
});