refactor: add support to reset update email form

dzangolab · Jan 7, 2025 · 163c67e · 163c67e
1 parent 5916e7b
commit 163c67e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/vue-form/src/components/Form.vue b/packages/vue-form/src/components/Form.vue
@@ -1,5 +1,5 @@
 <template>
-  <Form class="form" @submit="onSubmit">
+  <Form ref="dzangolabVueForm" class="form" @submit="onSubmit">
     <slot></slot>
   </Form>
 </template>
@@ -12,10 +12,17 @@ export default {
 
 <script setup lang="ts">
 import { Form } from "vee-validate";
+import { ref } from "vue";
 
 const emit = defineEmits(["submit"]);
 
+const dzangolabVueForm = ref();
+
 const onSubmit = (data: object) => {
   emit("submit", data);
 };
+
+defineExpose({
+  resetForm: () => dzangolabVueForm.value?.resetForm(),
+});
 </script>
diff --git a/packages/vue-user/src/components/profile/UpdateEmailForm.vue b/packages/vue-user/src/components/profile/UpdateEmailForm.vue
@@ -1,12 +1,15 @@
 <template>
-  <Form @submit="onSubmit">
+  <Form ref="dzangolabVueUpdateEmail" @submit="onSubmit">
     <Email
       :error-messages="errorMessages"
       :label="t('user.profile.accountInfo.newEmail')"
       name="email"
     />
 
-    <FormActions :loading="loading" />
+    <FormActions
+      :loading="loading"
+      @cancel="dzangolabVueUpdateEmail.resetForm()"
+    />
   </Form>
 </template>
 
@@ -41,6 +44,7 @@ const errorMessages = {
   required: t("user.profile.accountInfo.messages.email"),
 };
 
+const dzangolabVueUpdateEmail = ref();
 const loading = ref<boolean>(false);
 
 const onSubmit = async (data: UpdateEmailFormData) => {
@@ -105,6 +109,7 @@ const onSubmit = async (data: UpdateEmailFormData) => {
       }
     }
 
+    dzangolabVueUpdateEmail.value?.resetForm();
     loading.value = false;
   } catch (error) {
     emitter.emit("notify", {