Changes update ResetPassword

components/user/ResetPassword.vue

@@ -33,7 +33,7 @@
       </div>
     </div>
     <div class="mt-5 pt-2">
-      <button :class="`button is-primary has-text-white `" @click="showConfirm">
+      <button :class="`button is-primary has-text-white ${showModal.loading ? 'is-loading' : ''}`" @click="showConfirm">
         {{ isVietnamese ? "Đặt lại mật khẩu" : "Reset password" }}
       </button>
     </div>
@@ -41,7 +41,7 @@
   </div>
 </template>
 <script setup>
-const { $store, $id, $insertapi, $getdata, $getpath, $updateapi, $dialog } = useNuxtApp();
+const { $store, $id, $insertapi, $getdata, $getpath, $updateapi, $dialog, $snackbar } = useNuxtApp();
 const emit = defineEmits(["close"]);
 var props = defineProps({
   row: Object,
@@ -49,12 +49,15 @@ var props = defineProps({
 
 const showModal = ref({
   show: false,
+  loading: false,
 });
 
 const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
 let pass = $id().toLocaleLowerCase();
 
 async function handlerResetPassword() {
+  showModal.value.loading = true;
+
   let user = await $getdata("user", undefined, { filter: { id: props.row.id } }, true);
   const response = await fetch(`${$getpath()}password/${pass}/`);
   let hash = await response.json();
@@ -77,6 +80,8 @@ async function handlerResetPassword() {
       content: content,
     };
     let rs = await $insertapi("sendemail", info, null, false);
+    showModal.value.loading = false;
+    $snackbar("Mật khẩu đã được đặt lại thành công. Thông tin đã được gửi tới địa chỉ email đã đăng ký.", "Thành công", "Success");
     emit("close");
   }
 }