feat: Add dnssec validation and cleanup index

templates/assets/js/index.js

@@ -13,6 +13,20 @@ document.getElementById("domain").addEventListener("keyup", function (event) {
 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())
@@ -20,30 +34,110 @@ function getSSL() {
             // 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 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"><strong>Certificate Names:</strong> ${data.cert.domains.join(", ")} ${data.cert.domain ? '<span class="badge bg-success">Match</span>' : '<span class="badge bg-danger">No Match</span>'}</li>
-            <li class="list-group-item"><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>'}</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 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>