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,57 +68,40 @@ 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;
+  // 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"] = {
-      type: "STANDALONE_CERTIFICATE",
-      requestedKeyLength: keyLength.value,
-      requestedValidityDays: noExpiry.value ? undefined : validityDays.value,
-      subject: {
-        commonName: commonName.value,
-        emailAddress: emailAddress.value,
-        organization: organization.value,
-        organizationalUnit: organizationalUnit.value,
-        country: countryCode,
-        state: state.value,
-        locality: locality.value
-      },
-      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
+  // Prepare certificate request data
+  const certificateRequest: Schemas["CertificateInfo"] = {
+    type: "STANDALONE_CERTIFICATE",
+    requestedKeyLength: keyLength.value,
+    requestedValidityDays: noExpiry.value ? undefined : validityDays.value,
+    subject: {
+      commonName: commonName.value,
+      emailAddress: emailAddress.value,
+      organization: organization.value,
+      organizationalUnit: organizationalUnit.value,
+      country: countryCode,
+      state: state.value,
+      locality: locality.value
+    },
+    extension: {
+      alternativeDnsNames: domains.value
     }
-  } finally {
-    isSubmitting.value = false;
-  }
+  };
+
+  emit("submit", {
+    certificateRequest
+  });
 }
 
 </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>