wip: Start work on submitting the cert

frontend/src/components/CertificateEditor.vue

@@ -2,7 +2,11 @@
 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";
+import { type Schemas } from "../plugins/client.ts";
+
+const { isSubmitting } = defineProps({
+  isSubmitting: Boolean,
+})
 
 const formModel = ref(false);
 const formRef = useTemplateRef("form");
@@ -64,22 +68,20 @@ function addDomain() {
   }
 }
 
-const isSubmitting = ref(false);
+const emit = defineEmits(["submit"]);
 
 async function submitNewCertificate() {
   if (!formRef.value?.validate()) {
     return;
   }
 
-  isSubmitting.value = true;
-  try {
   // Extract country code if country is an object
   const countryCode = typeof country.value === "object" && country.value !== null
     ? (country.value as Country).alpha2
     : country.value;
 
   // Prepare certificate request data
-    const certificateData: Schemas["CertificateInfo"] = {
+  const certificateRequest: Schemas["CertificateInfo"] = {
     type: "STANDALONE_CERTIFICATE",
     requestedKeyLength: keyLength.value,
     requestedValidityDays: noExpiry.value ? undefined : validityDays.value,
@@ -97,24 +99,9 @@ async function submitNewCertificate() {
     }
   };
 
-    // Submit certificate request to the backend
-    const response = await fetchClient.POST("/api/certificates", {
-      body: certificateData
+  emit("submit", {
+    certificateRequest
   });
-
-    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;
-  }
 }
 
 </script>

frontend/src/pages/certificates/new.vue

@@ -1,10 +1,26 @@
 <script setup lang="ts">
 import CertificateEditor from "@/components/CertificateEditor.vue";
+import { useMutation } from "@tanstack/vue-query";
+import { fetchClient } from "@/plugins/client.ts";
+
+const submitNewCert = useMutation({
+  mutationKey: ["submit-new-certificate"],
+  mutationFn: async (certificate) => {
+    fetchClient.POST("/api/certificates", {
+      body: certificate,
+    })
+  },
+})
+
+function submitCertificate({ certificate }) {
+  submitNewCert.mutate(certificate);
+}
+
 </script>
 
 <template>
   <v-container>
-    <CertificateEditor />
+    <CertificateEditor @submit="submitCertificate" :is-submitting="submitNewCert.isPending" />
   </v-container>
 </template>