feat: Add temporary frontend and started on dnssec

templates/assets/css/index.css

@@ -1,20 +1,7 @@
-body {
-    background-color: #000000;
-    color: #ffffff;
-}
-h1 {
-    font-size: 50px;
-    margin: 0;
-    padding: 0;
+.spacer {
+    margin-top: 20px;
 }
 .centre {
-    margin-top: 10%;
+    margin-top: 50px;
     text-align: center;
-}
-a {
-    color: #ffffff;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
 }

templates/assets/js/index.js

@@ -0,0 +1,59 @@
+// 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>`;
+        });
+
+}