MrUnknownDE/utools
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/utools.git synced 2026-04-22 07:23:45 +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

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
}
}
});