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;
    // 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 = `<h2>SSL Certificate Details</h2>
                // <p>IP Address: ${data.ip}</p>
                // <p>Webserver TLSA: <code>${data.tlsa.server}</code></p>
                // <p>Nameserver TLSA: <code>${data.tlsa.nameserver}</code> ${data.tlsa.match ? "(Match)" : "(No Match)"}</p>
                // <p>Certificate Names: ${data.cert.domains.join(", ")}</p>
                // <p>Expiry Date: ${data.cert.expiry_date} UTC</p>
                // <p>Valid: ${data.cert.valid ? "Yes" : "No"}</p>`;
                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"><strong>Webserver TLSA:</strong> <code>${data.tlsa.server}</code></li>
            <li class="list-group-item"><strong>Nameserver TLSA:</strong> <code>${data.tlsa.nameserver}</code> 
                ${data.tlsa.match ? '<span class="badge bg-success">Match</span>' : '<span class="badge bg-danger">No Match</span>'}
            </li>
            <li class="list-group-item"><strong>Certificate Names:</strong> ${data.cert.domains.join(", ")}</li>
            <li class="list-group-item"><strong>Expiry Date:</strong> ${data.cert.expiry_date} UTC</li>
            <li class="list-group-item"><strong>Valid:</strong> 
                ${data.valid ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-danger">No</span>'}
            </li>
        </ul>
    </div>`;

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

}