Add api error handling while creating an account

web/src/components/SignupForm.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-card class="mt-3" header="Signup">
+        <b-card class="mt-3" header="Create an account">
             <b-form @submit.prevent="handleSubmit">
                 <b-form-group
                         id="email-group"
@@ -60,6 +60,14 @@
 
                 <b-button type="submit" variant="primary">Submit</b-button>
             </b-form>
+
+            <b-alert :show="exists" variant="danger" dismissible class="mt-3">
+                A user with that username or email already exists
+            </b-alert>
+            <b-alert :show="error" variant="danger" dismissible class="mt-3">
+                An error occurred while attempting to create your account
+            </b-alert>
+
         </b-card>
     </div>
 </template>
@@ -77,6 +85,8 @@
                     password: '',
                     passwordConfirm: ''
                 },
+                error: false,
+                exists: false,
             }
         },
         computed: {
@@ -96,6 +106,8 @@
         methods: {
             handleSubmit() {
                 if (this.validInput) {
+                    this.error = false
+                    this.exists = false
                     this.signup()
                 }
             },
@@ -104,7 +116,14 @@
                     username: this.form.username,
                     email: this.form.email,
                     password: this.form.password
-                }).then(response => console.log(response.data))
+                })
+                    .then(response => console.log(response.data))
+                    .catch(error => {
+                        if (error.response && error.response.status === 409)
+                            this.exists = true
+                        else
+                            this.error = true
+                    })
             }
         }
     }