debug-tools/templates/assets/js/index.js

// Add event listener to button
document.getElementById("ssl").addEventListener("click", function () {
    getSSL();
});

// Add enter key listener to input
document.getElementById("domain").addEventListener("keyup", function (event) {
    if (event.key === "Enter") {
        getSSL();
    }
});

function getSSL() {
    // Get the input value
    const domain = document.getElementById("domain").value;
    // Set the domain parameter
    const params = new URLSearchParams();
    params.append("domain", domain);
    // Add the parameters to the URL
    const url = `/?${params.toString()}`;
    // Push the URL to the history
    history.pushState(null, null, url);

    // Add a loading spinner
    document.getElementById("results").innerHTML = `<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>`;


    // Send a GET request to the API
    fetch(`/api/v1/ssl/${domain}`)
        .then(response => response.json())
        .then(data => {
            // Check if the request was successful
            if (data.success) {
                // Display the results
                document.getElementById("results").innerHTML = `
    <div class="card shadow-sm p-4" style="max-width: 950px;margin: auto;">
        <h2 class="mb-3">SSL Certificate Details</h2>
        <ul class="list-group">
            <li class="list-group-item"><strong>IP Address:</strong> ${data.ip}</li>
            
            <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <strong>TLSA Records:</strong> 
                        ${data.tlsa.match ? '<span class="badge bg-success">Match</span>' : '<span class="badge bg-danger">No Match</span>'}
                    </div>
                    <button class="btn btn-sm btn-outline-secondary tlsa-toggle" type="button">
                        Show Details
                    </button>
                </div>
                <div class="tlsa-details mt-2" style="display:none;">
                    <div class="card card-body bg-light">
                        <div><strong>Webserver TLSA:</strong><br><code>${data.tlsa.server}</code></div>
                        <div class="mt-2"><strong>Nameserver TLSA:</strong><br><code>${data.tlsa.nameserver}</code></div>
                    </div>
                </div>
            </li>
            
            <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <strong>Certificate:</strong> 
                        ${!data.cert.expired && data.cert.domain ? '<span class="badge bg-success">Valid</span>' : '<span class="badge bg-danger">Invalid</span>'}
                    </div>
                    <button class="btn btn-sm btn-outline-secondary cert-toggle" type="button">
                        Show Details
                    </button>
                </div>
                <div class="cert-details mt-2" style="display:none;">
                    <div class="card card-body bg-light">
                        <div><strong>Subject Names:</strong> ${data.cert.domains.join(", ")} 
                            ${data.cert.domain ? '<span class="badge bg-success">Match</span>' : '<span class="badge bg-danger">No Match</span>'}
                        </div>
                        <div class="mt-2"><strong>Expiry Date:</strong> ${data.cert.expiry_date} UTC 
                            ${data.cert.expired ? '<span class="badge bg-danger">Expired</span>' : '<span class="badge bg-success">Valid</span>'}
                        </div>
                        <div class="mt-2"><strong>Certificate Content:</strong></div>
                        <pre class="mt-1 mb-0" style="white-space: pre-wrap; font-size: 0.8rem; max-height: 300px; overflow-y: auto;">${data.cert.cert}</pre>
                    </div>
                </div>
            </li>
            
            <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <strong>DNSSEC Chain:</strong> 
                        ${data.dnssec.valid ? '<span class="badge bg-success">Valid</span>' : '<span class="badge bg-danger">Invalid</span>'}
                    </div>
                    <button class="btn btn-sm btn-outline-secondary dnssec-toggle" type="button">
                        Show Details
                    </button>
                </div>
                <div class="dnssec-details mt-2" style="display:none;">
                    <div class="card card-body bg-light"><pre class="mb-0" style="white-space: pre-wrap; text-align: left;">${data.dnssec.errors}${data.dnssec.output}</pre>
                    </div>
                </div>
            </li>
            
            <li class="list-group-item"><strong>Overall Status:</strong> 
                ${data.valid ? '<span class="badge bg-success">Valid</span>' : '<span class="badge bg-danger">Invalid</span>'}
            </li>
        </ul>
    </div>`;

// Add event listeners for all toggle buttons
document.querySelector('.tlsa-toggle').addEventListener('click', function() {
    const detailsDiv = document.querySelector('.tlsa-details');
    if (detailsDiv.style.display === 'none') {
        detailsDiv.style.display = 'block';
        this.textContent = 'Hide Details';
    } else {
        detailsDiv.style.display = 'none';
        this.textContent = 'Show Details';
    }
});

document.querySelector('.cert-toggle').addEventListener('click', function() {
    const certDiv = document.querySelector('.cert-details');
    if (certDiv.style.display === 'none') {
        certDiv.style.display = 'block';
        this.textContent = 'Hide Details';
    } else {
        certDiv.style.display = 'none';
        this.textContent = 'Show Details';
    }
});

document.querySelector('.dnssec-toggle').addEventListener('click', function() {
    const dnssecDiv = document.querySelector('.dnssec-details');
    if (dnssecDiv.style.display === 'none') {
        dnssecDiv.style.display = 'block';
        this.textContent = 'Hide Details';
    } else {
        dnssecDiv.style.display = 'none';
        this.textContent = 'Show Details';
    }
});

            } else {
                // Display an error message
                document.getElementById("results").innerHTML = `<h2>Error</h2>
                <p>${data.message}</p>`;
            }
        })
        .catch(error => {
            // Display an error message
            document.getElementById("results").innerHTML = `<h2>Error</h2>
            <p>${error.message}</p>`;
        });

}

// On load check if params are present
if (window.location.search) {
    const params = new URLSearchParams(window.location.search);
    const domain = params.get('domain');
    if (domain) {
        // Add domain to input
        document.getElementById("domain").value = domain;
        getSSL(domain);
    }
}