diff --git a/client/App.vue b/client/App.vue index 608a6d87cf93e9f5efcd9bfc1a455f0407547ef0..22b83170193fb0718542ae87f24fa9b89abd7a5b 100644 --- a/client/App.vue +++ b/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">×</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') diff --git a/client/UserCreation.vue b/client/UserCreation.vue index a22d8a1a6b1302db1c4ea0eb3fdf8e8c469335ab..341949d33a230df0a02c731b3084c15067423f6a 100644 --- a/client/UserCreation.vue +++ b/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; diff --git a/client/main.js b/client/main.js index 599a064b154c30f54acc85a8e5ab41e9bcce9e7d..21f6b7bd39e739e58400c66bfa7931375154966b 100644 --- a/client/main.js +++ b/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',