added createcert and deletecert

api/frontend/index.html

@@ -7,6 +7,7 @@
         <script src="js/bootstrap.min.js" defer></script>
         <script src="js/theme.js" defer></script>
         <script src="js/certs.js" defer></script>
+        <script src="js/create_cert.js" defer></script>
         <title>Scm</title>
     </head>
     <style>
@@ -59,6 +60,15 @@
                                 +
                             </button>
                         </li>
+                        <li class="nav-item">
+                            <button
+                                type="button"
+                                class="btn btn-primary"
+                                id="downloadrootcert"
+                            >
+                                Download Root Certificate
+                            </button>
+                        </li>
                     </ul>
                 </div>
             </div>
@@ -89,6 +99,37 @@
                             />
                             <label for="domain">Domain</label>
                         </div>
+                        <div class="form-floating mb-3">
+                            <input
+                                type="text"
+                                id="commonname"
+                                class="form-control"
+                                placeholder="commonname"
+                            />
+                            <label for="commonname">Common Name</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input
+                                type="text"
+                                id="organizationname"
+                                class="form-control"
+                                placeholder="organizationname"
+                            />
+                            <label for="organizationname"
+                                >Organization Name</label
+                            >
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input
+                                type="text"
+                                id="organizationunit"
+                                class="form-control"
+                                placeholder="organizationunit"
+                            />
+                            <label for="organizationunit"
+                                >Organization Unit</label
+                            >
+                        </div>
                         <div class="form-floating mb-3">
                             <input
                                 type="password"
@@ -107,8 +148,12 @@
                         >
                             Close
                         </button>
-                        <button type="button" class="btn btn-primary">
-                            Save changes
+                        <button
+                            id="createcert"
+                            type="button"
+                            class="btn btn-primary"
+                        >
+                            Create
                         </button>
                     </div>
                 </div>
@@ -127,10 +172,14 @@
                         ></button>
                     </div>
                     <div
-                        class="modal-body d-flex gap-3 align-items-center justify-content-center"
+                        class="modal-body d-flex gap-3 align-items-start justify-content-between"
                         id="preview_ssl_content"
                     >
-                        <div id="certinfo">
+                        <div
+                            id="certinfo"
+                            class="border-right p-3"
+                            style="border-right: 2px solid"
+                        >
                             <h1 id="cert-title">Information</h1>
                             <h2>Issuer</h2>
                             <div class="form-floating mb-3">

api/frontend/js/certs.js

@@ -4,9 +4,9 @@ const preview = document.querySelector("#preview");
 var certificates = [];
 
 const renderCards = () => {
-  cards.innerHTML = "";
-  certificates.map((cert) => {
-    cards.innerHTML += `<div class="card" style="width: 16rem">
+    cards.innerHTML = "";
+    certificates.map((cert) => {
+        cards.innerHTML += `<div class="card" style="width: 16rem">
         <div class="card-body">
             <h5 class="card-title" style="text-align: center">
                 <a href="${cert.href}">${cert.domain}</a>
@@ -41,77 +41,95 @@ const renderCards = () => {
             </button>
         </div>
     </div>`;
-  });
+    });
 };
 
-const getCerts = async () => {
-  fetch(window.location.origin + "/api/certs")
-    .then((data) => data.json())
-    .then((data) => {
-      certificates = data;
-      renderCards();
-    })
-    .catch((error) => {
-      console.error("Error fetching certificates:", error);
-      alert("Failed to fetch certificates");
-    });
+const getCerts = () => {
+    fetch(window.location.origin + "/api/certs")
+        .then((data) => data.json())
+        .then((data) => {
+            certificates = data;
+            renderCards();
+        })
+        .catch((error) => {
+            console.error("Error fetching certificates:", error);
+            alert("Failed to fetch certificates");
+        });
 };
 
 getCerts();
 
 if (preview) {
-  preview.addEventListener("show.bs.modal", (e) => {
-    const button = e.relatedTarget;
-    const recipient = button.getAttribute("data-bs-whatever");
-    // const modalBodyTextarea = preview.querySelector(".modal-body textarea");
-    const dnsnames = button.getAttribute("data-bs-dnsnames");
-    const notafter = button.getAttribute("data-bs-notafter");
-    const notbefore = button.getAttribute("data-bs-notbefore");
-    const issuerorganizationunit = button.getAttribute(
-      "data-bs-issuer-organizationunit",
-    );
-    const issuerorganization = button.getAttribute(
-      "data-bs-issuer-organization",
-    );
-    const issuercommonname = button.getAttribute("data-bs-issuer-commonname");
-    const subjectorganizationunit = button.getAttribute(
-      "data-bs-subject-organizationunit",
-    );
-    const subjectorganization = button.getAttribute(
-      "data-bs-subject-organization",
-    );
-    const subjectcommonname = button.getAttribute("data-bs-subject-commonname");
-    console.log(
-      dnsnames,
-      notafter,
-      notbefore,
-      issuerorganizationunit,
-      issuerorganization,
-      issuercommonname,
-    );
-    preview.querySelector("#raw").innerHTML = recipient.replace(/\n/g, "<br>");
-    preview.querySelector("#dnsNames").value = dnsnames;
-    preview.querySelector("#notAfter").value = notafter;
-    preview.querySelector("#notBefore").value = notbefore;
-    preview.querySelector("#issuerorganizationunit").value =
-      issuerorganizationunit;
-    preview.querySelector("#issuerorganization").value = issuerorganization;
-    preview.querySelector("#issuercommonname").value = issuercommonname;
-    preview.querySelector("#subjectorganizationunit").value =
-      subjectorganizationunit;
-    preview.querySelector("#subjectorganization").value = subjectorganization;
-    preview.querySelector("#subjectcommonname").value = subjectcommonname;
-  });
+    preview.addEventListener("show.bs.modal", (e) => {
+        const button = e.relatedTarget;
+        const recipient = button.getAttribute("data-bs-whatever");
+        // const modalBodyTextarea = preview.querySelector(".modal-body textarea");
+        const dnsnames = button.getAttribute("data-bs-dnsnames");
+        const notafter = button.getAttribute("data-bs-notafter");
+        const notbefore = button.getAttribute("data-bs-notbefore");
+        const issuerorganizationunit = button.getAttribute(
+            "data-bs-issuer-organizationunit",
+        );
+        const issuerorganization = button.getAttribute(
+            "data-bs-issuer-organization",
+        );
+        const issuercommonname = button.getAttribute(
+            "data-bs-issuer-commonname",
+        );
+        const subjectorganizationunit = button.getAttribute(
+            "data-bs-subject-organizationunit",
+        );
+        const subjectorganization = button.getAttribute(
+            "data-bs-subject-organization",
+        );
+        const subjectcommonname = button.getAttribute(
+            "data-bs-subject-commonname",
+        );
+        preview.querySelector("#raw").innerHTML = recipient.replace(
+            /\n/g,
+            "<br>",
+        );
+        preview.querySelector("#dnsNames").value = dnsnames;
+        preview.querySelector("#notAfter").value = notafter;
+        preview.querySelector("#notBefore").value = notbefore;
+        preview.querySelector("#issuerorganizationunit").value =
+            issuerorganizationunit;
+        preview.querySelector("#issuerorganization").value = issuerorganization;
+        preview.querySelector("#issuercommonname").value = issuercommonname;
+        preview.querySelector("#subjectorganizationunit").value =
+            subjectorganizationunit;
+        preview.querySelector("#subjectorganization").value =
+            subjectorganization;
+        preview.querySelector("#subjectcommonname").value = subjectcommonname;
+    });
 }
 
 cards.addEventListener("click", (e) => {
-  if (e.target.classList.contains("delcert")) {
-    certificates.splice(
-      certificates.indexOf(
-        certificates.find((item) => item.id === parseInt(e.target.id)),
-      ),
-      1,
-    );
-    renderCards();
-  }
+    if (e.target.classList.contains("delcert")) {
+        if (confirm("Are you sure you want to delete this certificate?")) {
+            fetch(window.location.origin + `/api/certs/delete`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    domain: certificates.find((item) => item.id === e.target.id)
+                        .domain,
+                }),
+            })
+                .then((data) => data.json())
+                .then((jsondata) => {
+                    if (jsondata.status === "success") {
+                        getCerts();
+                        alert("Certificate deleted successfully");
+                    } else {
+                        alert("Failed to delete certificate");
+                    }
+                })
+                .catch((error) => {
+                    console.error(error);
+                    alert("An error occurred while deleting the certificate");
+                });
+        }
+    }
 });

api/frontend/js/create_cert.js

@@ -0,0 +1,44 @@
+const domain = document.querySelector("#domain");
+const commonname = document.querySelector("#commonname");
+const organizationname = document.querySelector("#organizationname");
+const password = document.querySelector("#password");
+const organizationunit = document.querySelector("#organizationunit");
+const createcert = document.querySelector("#createcert");
+
+createcert.addEventListener("click", () => {
+    const domainValue = domain.value;
+    const commonnameValue = commonname.value;
+    const organizationnameValue = organizationname.value;
+    const passwordValue = password.value;
+    const organizationunitValue = organizationunit.value;
+
+    fetch(window.location.origin + "/api/certs/create", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            dns: [domainValue],
+            commonname: commonnameValue,
+            organizationname: [organizationnameValue],
+            organizationunit: [organizationunitValue],
+            password: passwordValue,
+        }),
+    })
+        .then((data) => data.json())
+        .then((jsondata) => {
+            if (jsondata.status === "success") {
+                getCerts();
+                var createmodal = bootstrap.Modal.getOrCreateInstance(
+                    document.getElementById("create_certificate"),
+                );
+                createmodal.hide();
+                alert("Certificate created successfully");
+            } else {
+                alert("Failed to create certificate:", jsondata.error);
+            }
+        })
+        .catch((error) => {
+            alert("An error occurred:", error);
+        });
+});