add error handling to the auth page

src/pages/auth/UserAuth.vue

@@ -1,4 +1,12 @@
 <template>
+  <div>
+    <base-dialog :show="!!error" title="An error occured" @close="handleError">
+      <p>{{ error }}</p>
+    </base-dialog>
+    <base-dialog :show="isLoading" title="Authenticating..." fixed>
+      <base-spinner></base-spinner>
+    </base-dialog>
+
     <base-card>
       <form @submit.prevent="submitForm">
         <div class="form-control">
@@ -18,6 +26,7 @@
         }}</base-button>
       </form>
     </base-card>
+  </div>
 </template>
 
 <script>
@@ -27,7 +36,9 @@ export default {
       email: '',
       password: '',
       formIsValid: true,
-      mode: 'login'
+      mode: 'login',
+      isLoading: false,
+      error: null
     };
   },
   computed: {
@@ -47,7 +58,7 @@ export default {
     }
   },
   methods: {
-    submitForm() {
+    async submitForm() {
       this.formIsValid = true;
       if (
         this.email === '' ||
@@ -57,22 +68,32 @@ export default {
         this.formIsValid = false;
         return;
       }
-
+      this.isLoading = true;
+      try {
         if (this.mode === 'login') {
           //
         } else {
-        this.$store.dispatch('signup', {
+          await this.$store.dispatch('signup', {
             email: this.email,
             password: this.password
           });
         }
+      } catch (error) {
+        this.error = error;
+      }
+      this.isLoading = false;
     },
+
     switchAuthMode() {
       if (this.mode === 'login') {
         this.mode = 'signup';
       } else {
         this.mode = 'login';
       }
+    },
+
+    handleError() {
+      this.error = null;
     }
   }
 };