Add alerts for axios errors

client/App.vue

@@ -11,6 +11,17 @@
         <a href="/auth/signout">Signed in as <img class="mini-avatar rounded-circle" v-bind:src="user.avatar_url" v-bind:alt="user.username"/>{{ user.name }} <i class="fa fa-sign-out"></i></a>
       </div>
       <div id="app" class="pt-3 px-3 pb-1 rounded">
+        <transition-group name="fade" mode="out-in" tag="div">
+          <div v-for="(alert, alert_id) in alerts" v-bind:key="alert_id">
+            <div class="alert" :class="'alert-' + alert.class" role="alert">
+              <strong>{{ alert.reason }}</strong>, failed to {{ alert.action }}
+              <button type="button" class="close" aria-label="Close" @click.prevent="alerts.splice(alert_id, 1)">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </diV>
+          </div>
+        </transition-group>
+
         <transition name="fade" mode="out-in" appear>
           <user-creation v-if="showCreationForm" v-on:closed="closeCreator($event)"></user-creation>
           <div class="p-2" v-else>
@@ -63,16 +74,28 @@ export default {
     return {
       showCreationForm: false,
 
+      alerts: [],
       external: [],
       user: { }
     }
   },
 
   created () {
+    Bus.$on('alert', (alert) => { this.alerts.push(alert) });
+
     axios.get('/users')
       .then((response) => {
         this.external = response.data
           .map((id) => this.$model('user', {id: id}));
+      }, (error) => {
+        console.log("Users request failed:");
+        console.log(error);
+
+        Bus.$emit('alert', {
+          class: 'danger',
+          action: "list users",
+          reason: error.response.data.message
+        });
       });
 
     axios.get('/auth')

client/UserCreation.vue

@@ -3,10 +3,6 @@
     <h6 class="pb-2">Create user:</h6>
 
     <form class="container" @submit.prevent="validate() && submit()" novalidate>
-      <div class="alert alert-danger" role="alert" v-if="errors && errors.general">
-        {{ errors.general }}
-      </div>
-
       <div class="row mt-4">
         <div class="col-md-2">
           <label for="inputName">Full Name: </label>
@@ -140,13 +136,13 @@ export default {
       } catch(err) {
         console.log(err);
         if (err.response.status === 401) {
-          this.$set(this.errors, 'general', "Server is malconfigured, not allowed to create users");
+          Bus.$emit('alert', { class: 'danger', action: 'create user', reason: 'Malconfigured server' });
         } else if (err.response.status === 409) {
           var msg = err.response.data.message || 'General error occurred';
           var token = msg.split(' ')[0].toLowerCase()
           this.$set(this.errors, token, msg);
         } else {
-          this.$set(this.errors, 'general', "Something went wrong when processing the request, error " + err.response.status + ";<br/><pre>" + err.response.statusText + "</pre>");
+          Bus.$emit('alert', { class: 'danger', action: 'create user', reason: err.response.data.message });
         }
 
         this.user.username = null;

client/main.js

@@ -20,6 +20,7 @@ VueModel.classes.defaults.http.getDataFromResponse = function(response) {
 };
 
 global.Vue = Vue;
+global.Bus = new Vue();
 global.App = new Vue({
   el: '#app',