Adds error notice when creating a user role with invalid name.

src/views/admin/js/store/modules/capability/actions.js

@@ -68,8 +68,9 @@ export const createRole = ({ commit }, role) => {
                 commit('setRole', role);
                 resolve(role);
             })
-            .catch(error => {
-                reject(error);
+            .catch((error) => {
+                if (error.response)
+                    reject(error.response.data);
             });
     });
 };
@@ -85,7 +86,8 @@ export const updateRole = ({ commit }, role) => {
                 resolve(updatedRole);
             })
             .catch(error => {
-                reject(error);
+                if (error.response)
+                    reject(error.response.data);
             });
     });
 };

src/views/roles/js/roles-main.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import store from '../../admin/js/store/store';
 import router from './roles-router';
 import VTooltip from 'v-tooltip';
+import { Snackbar, Modal } from 'buefy';
 
 // Vue Dev Tools!
 Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@@ -12,6 +13,8 @@ import RolesPage from '../roles.vue';
 
 Vue.use(I18NPlugin);
 Vue.use(VTooltip);
+Vue.use(Snackbar);
+Vue.use(Modal);
 
 // Changing title of pages
 router.beforeEach((to, from, next) => {

src/views/roles/pages/role-edition-form.vue

@@ -16,6 +16,11 @@
                     class="notice notice-success notice-alt">
                 <p>{{ $i18n.get('User Role Saved') }}</p>
             </div>
+            <div 
+                    v-if="showErrorNotice"
+                    class="notice notice-error notice-alt">
+                <p>{{ errorMessage }}</p>
+            </div>
         </transition>
         <hr class="wp-header-end">
         <br>
@@ -234,7 +239,9 @@
                     capabilities: {}
                 },
                 capabilitiesTab: 'repository',
-                showNotice: false
+                showNotice: false,
+                showErrorNotice: false,
+                errorMessage: ''
             }
         },
         computed: {
@@ -354,18 +361,26 @@
                             this.$router.push('/roles/' + this.roleSlug);
                             this.isUpdatingRole = false;
                             this.showNotice = true;
+                            this.showErrorNotice = false;
+                            this.errorMessage = '';
                         })
-                        .catch(() => {
+                        .catch((error) => {
                             this.isUpdatingRole = false;
+                            this.errorMessage = error.error_message;
+                            this.showErrorNotice = true;
                         });
                 } else {
                     this.updateRole(this.role)
                         .then(() => {
                             this.isUpdatingRole = false;
                             this.showNotice = true;
+                            this.showErrorNotice = false;
+                            this.errorMessage = '';
                         })
-                        .catch(() => {
+                        .catch((error) => {
                             this.isUpdatingRole = false;
+                            this.errorMessage = error.error_message;
+                            this.showErrorNotice = true;
                         });
                 }
             },