add error message

src/components/user_reporting_modal/user_reporting_modal.js

@@ -12,7 +12,8 @@ const UserReportingModal = {
       comment: '',
       forward: false,
       statusIdsToReport: [],
-      processing: false
+      processing: false,
+      error: false
     }
   },
   computed: {
@@ -45,12 +46,14 @@ const UserReportingModal = {
       this.forward = false
       this.statusIdsToReport = []
       this.processing = false
+      this.error = false
     },
     closeModal () {
       this.$store.dispatch('closeUserReportingModal')
     },
     reportUser () {
       this.processing = true
+      this.error = false
       const params = {
         userId: this.userId,
         comment: this.comment,
@@ -63,6 +66,13 @@ const UserReportingModal = {
           this.resetState()
           this.closeModal()
         })
+        .catch(() => {
+          this.processing = false
+          this.error = true
+        })
+    },
+    clearError () {
+      this.error = false
     },
     isChecked (statusId) {
       return this.statusIdsToReport.indexOf(statusId) !== -1

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -20,6 +20,9 @@
         </div>
         <div>
           <button class="btn btn-default" @click="reportUser" :disabled="processing">Submit</button>
+          <div class="alert error" v-if="error">
+            An error occured processing your request
+          </div>
         </div>
       </div>
       <div class="user-reporting-panel-right">
@@ -84,6 +87,10 @@
       min-width: 10em;
       padding: 0 2em;
     }
+
+    .alert {
+      margin: 1em 0 0 0;
+    }
   }
 
   &-right {