Refine configure modal

Signed-off-by: Ryan Wang <[email protected]>

console/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue

@@ -4,7 +4,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { Toast, VButton, VModal } from "@halo-dev/components";
 import { computed } from "vue";
-import { ref } from "vue";
 import type { TotpRequest } from "@halo-dev/api-client";
 
 const queryClient = useQueryClient();
@@ -25,17 +24,11 @@ const { data } = useQuery({
 
 const qrcode = useQRCode(computed(() => data.value?.authLink || ""));
 
-const formState = ref<TotpRequest>({
-  password: "",
-  code: "",
-  secret: "",
-});
-
 const { mutate, isLoading } = useMutation({
   mutationKey: ["configure-totp"],
-  mutationFn: async () => {
+  mutationFn: async ({ totpRequest }: { totpRequest: TotpRequest }) => {
     await apiClient.twoFactor.configurerTotp({
-      totpRequest: formState.value,
+      totpRequest: totpRequest,
     });
   },
   onSuccess() {
@@ -44,6 +37,10 @@ const { mutate, isLoading } = useMutation({
     queryClient.invalidateQueries({ queryKey: ["two-factor-settings"] });
   },
 });
+
+function onSubmit(data: TotpRequest) {
+  mutate({ totpRequest: data });
+}
 </script>
 
 <template>
@@ -76,13 +73,7 @@ const { mutate, isLoading } = useMutation({
           </div>
         </details>
       </div>
-      <FormKit
-        id="totp-form"
-        v-model="formState"
-        type="form"
-        name="totp-form"
-        @submit="mutate()"
-      >
+      <FormKit id="totp-form" type="form" name="totp-form" @submit="onSubmit">
         <FormKit
           type="number"
           name="code"