reset password loading icon

Author: supalarry

frontend/src/views/auth/ResetPassword.vue

@@ -25,7 +25,10 @@
               <input type="password" placeholder="Repeat Password" v-model="formData.passwordRepeat" class="matcha-input mt-4">
               <span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
             </ValidationProvider>
-            <input type="submit" :disabled="invalid" value="Reset password" v-bind:class="{'auth-sub-container-content-submit-button': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+            <input v-if="!submitted" type="submit" :disabled="invalid" value="Reset password" v-bind:class="{'auth-sub-container-content-submit-button': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+            <div v-else class="flex items-center justify-center mt-4">
+              <img class="h-12" src="../../assets/loading.svg">
+            </div>
           </form>
         </ValidationObserver>
       </div>
@@ -56,6 +59,7 @@ export default {
       happened: false,
       message: '',
     },
+    submitted: false,
   }),
   methods: {
     passwordErrorHandler(error) {
@@ -69,11 +73,14 @@ export default {
     },
     async onSubmit() {
       try {
+        this.submitted = true;
         this.clearError();
         await this.resetPassword();
         this.passwordHasBeenReset = true;
+        this.submitted = false;
       } catch (error) {
         this.displayError(this.$errorMessenger(error));
+        this.submitted = false;
       }
     },
     async checkToken() {