add preloader after send query, add some errors messages

src/pages/auth/CheckTheEmail.vue

@@ -4,11 +4,15 @@
     <p class="text-base mb-4 leading-5">
       Вам был выслан код, введите его и вы авторизуетесь, для смены пароля вам необходимо зайти в настройки профиля.
     </p>
-    <VaInput v-model="email" :rules="[(v) => !!v || 'Email обязательное поле']" class="mb-4" label="Введите ваш email"
+    <VaInput v-model="email" :rules="[(v: string) => !!v || 'Email обязательное поле']" class="mb-4" label="Введите ваш email"
       type="email" />
-    <VaInput v-model="code" :rules="[(v) => !!v || 'Код обязательное поле']" class="mb-4" label="Введите код из письма"
+    <VaInput v-model="code" :rules="[(v: string) => !!v || 'Код обязательное поле']" class="mb-4" label="Введите код из письма"
       type="text" />
-    <VaButton class="w-full mb-2" @click="submit">Авторизоваться</VaButton>
+    <VaButton class="w-full mb-2" @click="submit">
+      <span v-if="!inProgress">Авторизоваться</span>
+        <va-progress-circle v-else
+        indeterminate
+        size="small" color="#a1a1a1"></va-progress-circle></VaButton>
   </VaForm>
 </template>
 
@@ -29,12 +33,17 @@ const { init } = useToast();
 
 const submit = () => {
   if (form.validate()) {
+    if (inProgress.value) {
+      return;
+    }
+    inProgress.value = true;
     axiosAuth
       .post(`/api/v0/profiles/passwords/confirm/recover`, {
         email: email.value,
         code: code.value,
       })
       .then((response: AxiosResponse) => {
+        resetProgress();
 
         localStorage.setItem('token', response.data.token);
         localStorage.setItem('profile', JSON.stringify(response.data.profile));
@@ -43,6 +52,7 @@ const submit = () => {
 
         router.push({ name: "dashboard" }).catch((error) => { });
       }).catch((error: any) => {
+        resetProgress();
         if (error.response.data.detail.code_string == "ObjectNotFound") {
           init({
             message: "Неверный код",
@@ -53,5 +63,9 @@ const submit = () => {
   }
 };
 
+let inProgress = ref<boolean>();
+const resetProgress = () => {
+  inProgress.value = false;
+};
 
 </script>

src/pages/auth/Login.vue

@@ -13,12 +13,14 @@
       class="mb-4"
       label="Email"
       type="email"
+      @change="resetProgress"
     />
     <VaValue v-slot="isPasswordVisible" :default-value="false">
       <VaInput
         v-model="formData.password"
         :rules="[validators.required]"
         :type="isPasswordVisible.value ? 'text' : 'password'"
+       @change="resetProgress"
         class="mb-4"
         label="Пароль"
         @clickAppendInner.stop="
@@ -49,13 +51,20 @@
     </div>
 
     <div class="flex justify-center mt-4">
-      <VaButton class="w-full" @click="submit"> Вход</VaButton>
+      <VaButton class="w-full" @click="submit"> 
+        
+        <span v-if="!inProgress">Вход</span>
+        <va-progress-circle v-else
+        indeterminate
+        size="small" color="#a1a1a1"></va-progress-circle>
+
+      </VaButton>
     </div>
   </VaForm>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 import axios from "axios";
 import { reactive } from "vue";
@@ -72,20 +81,29 @@ const formData = reactive({
   password: "",
   keepLoggedIn: false,
 });
-
 const token = localStorage.getItem("token");
 if (token != undefined && token.length > 0) {
         push({ name: "dashboard" }).catch((error) => {});
 }
 
+let inProgress = ref<boolean>();
+const resetProgress = () => {
+  inProgress.value = false;
+};
+
 const submit = () => {
   if (validate()) {
+    if (inProgress.value) {
+      return;
+    }
+    inProgress.value = true;
     axios
       .post(`/api/v0/signin`, {
         login: formData.email,
         password: formData.password,
       })
       .then((response) => {
+        resetProgress();
         localStorage.setItem('token', response.data.token);
         localStorage.setItem('profile', JSON.stringify(response.data.profile));
         localStorage.setItem('user', JSON.stringify(response.data.user));
@@ -95,7 +113,7 @@ const submit = () => {
         push({ name: "dashboard" });
       })
       .catch((error) => {
-        
+          resetProgress();
           init({
             message: "Неверный логин или пароль",
             color: "error",

src/pages/auth/RecoverPassword.vue

@@ -8,12 +8,16 @@
     </p>
     <VaInput
       v-model="email"
-      :rules="[(v) => !!v || 'Email обязательное поле']"
+      :rules="[(v: string) => !!v || 'Email обязательное поле']"
       class="mb-4"
       label="Введите ваш email"
       type="email"
     />
-    <VaButton class="w-full mb-2" @click="submit">Отправить пароль</VaButton>
+    <VaButton class="w-full mb-2" @click="submit">
+      <span v-if="!inProgress">Отправить пароль</span>
+        <va-progress-circle v-else
+        indeterminate
+        size="small" color="#a1a1a1"></va-progress-circle></VaButton>
     <VaButton
       :to="{ name: 'login' }"
       class="w-full"
@@ -26,23 +30,55 @@
 
 <script lang="ts" setup>
 import axios from "axios";
+import {AxiosError, AxiosResponse} from "axios";
 import { ref } from "vue";
-import { useForm } from "vuestic-ui";
+import { useForm, useToast } from "vuestic-ui";
 import { useRouter } from "vue-router";
 
 const email = ref("");
 const form = useForm("passwordForm");
 const router = useRouter();
+const { init } = useToast();
+
 
 const submit = () => {
   if (form.validate()) {
+    if (inProgress.value) {
+      return;
+    }
+    inProgress.value = true;
     axios
       .post(`/api/v0/profiles/passwords/require/recover`, {
         email: email.value,
       })
-      .then((response) => {
+      .then((_response: AxiosResponse) => {
+        resetProgress();
+        init({
+          message: "Успешно",
+          color: "success",
+        });
         router.push({ name: "recover-password-email", query: { email: email.value }  });
+      })
+      .catch((error: AxiosError) => {
+        resetProgress();
+          if (error.status == 400) {
+          init({
+              message: "Неверный email",
+              color: "error",
+            });
+            return
+          }
+          init({
+            message: "Что-то пошло не так",
+            color: "error",
+          });
+
       });
   }
 };
+
+let inProgress = ref<boolean>();
+const resetProgress = () => {
+  inProgress.value = false;
+};
 </script>

src/pages/auth/Signup.vue

@@ -10,8 +10,8 @@
     <VaInput
       v-model="formData.email"
       :rules="[
-        (v) => !!v || 'Email обязателен',
+        (v: string) => !!v || 'Email обязателен',
-        (v) => /.+@.+\..+/.test(v) || 'Email должен быть валидным',
+        (v: string) => /.+@.+\..+/.test(v) || 'Email должен быть валидным',
       ]"
       class="mb-4"
       label="Email"
@@ -44,8 +44,8 @@
         ref="password2"
         v-model="formData.repeatPassword"
         :rules="[
-          (v) => !!v || 'Поле повторите пароль обязательное',
+          (v: string) => !!v || 'Поле повторите пароль обязательное',
-          (v) => v === formData.password || 'Пароли не совпадают',
+          (v: string) => v === formData.password || 'Пароли не совпадают',
         ]"
         :type="isPasswordVisible.value ? 'text' : 'password'"
         class="mb-4"
@@ -67,14 +67,18 @@
     </VaValue>
 
     <div class="flex justify-center mt-4">
-      <VaButton class="w-full" @click="submit"> Создать аккуант</VaButton>
+      <VaButton class="w-full" @click="submit"> 
+        <span v-if="!inProgress">Создать аккаунт</span>
+        <va-progress-circle v-else
+        indeterminate
+        size="small" color="#a1a1a1"></va-progress-circle></VaButton>
     </div>
   </VaForm>
 </template>
 
 <script lang="ts" setup>
 import axios from "axios";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useForm, useToast } from "vuestic-ui";
 
@@ -95,12 +99,17 @@ if (token != undefined && token.length > 0) {
 
 const submit = () => {
   if (validate()) {
+    if (inProgress.value) {
+      return;
+    }
+    inProgress.value = true;
     axios
       .post(`/api/v0/signup`, {
         email: formData.email,
         password: formData.password,
       })
       .then((response) => {
+        resetProgress();
         localStorage.setItem('token', response.data.token);
         localStorage.setItem('profile', JSON.stringify(response.data.profile));
         localStorage.setItem('user', JSON.stringify(response.data.user));
@@ -110,6 +119,14 @@ const submit = () => {
           color: "success",
         });
         push({ name: "dashboard" }).catch((error) => {});
+      })
+      .catch((error) => {
+          resetProgress();
+          init({
+            message: "Что-то пошло не так",
+            color: "error",
+          });
+
       });
   }
 };
@@ -118,4 +135,10 @@ const passwordRules: ((v: string) => boolean | string)[] = [
   (v) => !!v || "Поле пароль обязательное",
   (v) => (v && v.length >= 5) || "Пароль должен быть длинее 5-ти символов",
 ];
+
+let inProgress = ref<boolean>();
+const resetProgress = () => {
+  inProgress.value = false;
+};
+
 </script>