wip: Prepare CertificateEditor for submitting a certificate

frontend/src/components/CertificateEditor.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, useId, useTemplateRef } from "vue";
+import { ref, useId, useTemplateRef } from "vue";
 import CountryListItem from "./CountryListItem.vue";
 import { type Country, getAvailableCountries, userCountry } from "../utils/countries.ts";
+import { fetchClient, type Schemas } from "../plugins/client.ts";
 
 const formModel = ref(false);
 const formRef = useTemplateRef("form");
@@ -77,11 +78,11 @@ async function submitNewCertificate() {
       ? (country.value as Country).alpha2
       : country.value;
 
-    // TODO: Implement certificate request submission
-    console.log({
+    // Prepare certificate request data
+    const certificateData: Schemas["CertificateInfo"] = {
       type: "STANDALONE_CERTIFICATE",
       requestedKeyLength: keyLength.value,
-      requestedValidityDays: noExpiry.value ? null : validityDays.value,
+      requestedValidityDays: noExpiry.value ? undefined : validityDays.value,
       subject: {
         commonName: commonName.value,
         emailAddress: emailAddress.value,
@@ -94,7 +95,23 @@ async function submitNewCertificate() {
       extension: {
         alternativeDnsNames: domains.value
       }
+    };
+
+    // Submit certificate request to the backend
+    const response = await fetchClient.POST("/api/certificates", {
+      body: certificateData
     });
+
+    if (response.error) {
+      console.error("Error submitting certificate:", response.error);
+      // You might want to show an error message to the user here
+      alert("Failed to submit certificate request. Please try again.");
+    } else {
+      console.log("Certificate created successfully:", response.data);
+      // You might want to show a success message or redirect the user
+      alert("Certificate created successfully!");
+      // Reset form or redirect user as needed
+    }
   } finally {
     isSubmitting.value = false;
   }