added download certificate and key in zip format

api/frontend/js/certs.js

@@ -34,9 +34,9 @@ const renderCards = () => {
               >
                   Cert
               </button>
-              <button class="btn btn-primary" style="width: 100%">
+              <a class="btn btn-primary" style="width: 100%" href="${window.location.origin + "/api/certs/download/?domain=" + cert.certinfo.DNSNames[0]}" download="${cert.certinfo.DNSNames[0]}.zip">
                   Download
-              </button>
+              </a>
               <button class="btn btn-danger delcert" id="${cert.id}" style="width: 100%">
                   Delete
               </button>

api/frontend/js/create_cert.js

@@ -3,42 +3,45 @@ 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");
+const create_certificate_form = document.querySelector(
+  "#create_certificate_form",
+);
 
-createcert.addEventListener("click", () => {
-    const domainValue = domain.value;
-    const commonnameValue = commonname.value;
-    const organizationnameValue = organizationname.value;
-    const passwordValue = password.value;
-    const organizationunitValue = organizationunit.value;
+create_certificate_form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  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,
-        }),
+  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);
+      }
     })
-        .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);
-        });
+    .catch((error) => {
+      alert("An error occurred:", error);
+    });
 });

api/frontend/js/rootcrt.js

@@ -1,7 +1,9 @@
 const createRootCertificateModal = bootstrap.Modal.getOrCreateInstance(
   document.querySelector("#createRootCertificate"),
 );
-const createRootCrtButton = document.querySelector("#createRootCrt");
+const createRootCertificateForm = document.querySelector(
+  "#createRootCertificateForm",
+);
 
 const rootcommonnameinput = document.querySelector("#rootcommonname");
 const rootorganizationinput = document.querySelector("#rootorganizationname");
@@ -29,7 +31,8 @@ const getRootCrt = () => {
 
 getRootCrt();
 
-createRootCrtButton.addEventListener("click", () => {
+createRootCertificateForm.addEventListener("submit", (event) => {
+  event.preventDefault();
   const newRootCertificate = {
     CommonName: rootcommonnameinput.value,
     Organization: [rootorganizationinput.value],