Add proper error handling in users and invites modules

src/lang/en.js

@@ -226,7 +226,8 @@ export default {
     emptyNicknameError: 'Please input the username',
     invalidNicknameError: 'Username can include "a-z", "A-Z" and "0-9" characters',
     getPasswordResetToken: 'Get password reset token',
-    passwordResetTokenCreated: 'Password reset token was created'
+    passwordResetTokenCreated: 'Password reset token was created',
+    accountCreated: 'New account was created!'
   },
   userProfile: {
     tags: 'Tags',

src/store/modules/users.js

@@ -24,7 +24,9 @@ const users = {
     },
     SWAP_USER: (state, updatedUser) => {
       const updated = state.fetchedUsers.map(user => user.id === updatedUser.id ? updatedUser : user)
-      state.fetchedUsers = updated.sort((a, b) => a.nickname.localeCompare(b.nickname))
+      state.fetchedUsers = updated
+        .map(user => user.nickname ? user : { ...user, nickname: '' })
+        .sort((a, b) => a.nickname.localeCompare(b.nickname))
     },
     SWAP_USERS: (state, users) => {
       const usersWithoutSwapped = users.reduce((acc, user) => {

src/views/invites/index.vue

@@ -165,15 +165,22 @@ export default {
       this.inviteUserDialogVisible = false
       this.createTokenDialogVisible = false
       this.$store.dispatch('RemoveNewToken')
+      this.$data.inviteUserForm.email = ''
+      this.$data.inviteUserForm.name = ''
     },
     createToken() {
       this.$store.dispatch('GenerateInviteToken', this.$data.newTokenForm)
     },
-    inviteUserViaEmail() {
-      this.$refs['inviteUserForm'].validate((valid) => {
+    async inviteUserViaEmail() {
+      this.$refs['inviteUserForm'].validate(async(valid) => {
         if (valid) {
-          this.$store.dispatch('InviteUserViaEmail', this.$data.inviteUserForm)
-          this.closeDialogWindow()
+          try {
+            await this.$store.dispatch('InviteUserViaEmail', this.$data.inviteUserForm)
+          } catch (_e) {
+            return
+          } finally {
+            this.closeDialogWindow()
+          }
           this.$message({
             type: 'success',
             message: this.$t('invites.emailSent')

src/views/users/components/MultipleUsersMenu.vue

@@ -147,34 +147,125 @@ export default {
   methods: {
     mappers() {
       return {
-        grantRight: (right) => () => this.selectedUsers
-          .filter(user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id)
-          .map(user => this.$store.dispatch('ToggleRight', { user, right })),
-        revokeRight: (right) => () => this.selectedUsers
-          .filter(user => user.local && user.roles[right] && this.$store.state.user.id !== user.id)
-          .map(user => this.$store.dispatch('ToggleRight', { user, right })),
-        activate: () => this.selectedUsers
-          .filter(user => user.deactivated && this.$store.state.user.id !== user.id)
-          .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname)),
-        deactivate: () => this.selectedUsers
-          .filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
-          .map(user => this.$store.dispatch('ToggleUserActivation', user.nickname)),
-        remove: () => this.selectedUsers
-          .filter(user => this.$store.state.user.id !== user.id)
-          .map(user => this.$store.dispatch('DeleteUser', user)),
-        addTag: (tag) => () => {
-          const users = this.selectedUsers
-            .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? user.local && !user.tags.includes(tag)
-              : !user.tags.includes(tag))
-          this.$store.dispatch('AddTag', { users, tag })
+        grantRight: (right) => () => {
+          const filterUsersFn = user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id
+          const toggleRightFn = async(user) => await this.$store.dispatch('ToggleRight', { user, right })
+          const filtered = this.selectedUsers.filter(filterUsersFn)
+
+          Promise.all(filtered.map(toggleRightFn))
+            .then(() => {
+              this.$message({
+                type: 'success',
+                message: this.$t('users.completed')
+              })
+              this.$emit('apply-action')
+            }).catch((err) => {
+              console.log(err)
+              return
+            })
+        },
+        revokeRight: (right) => () => {
+          const filterUsersFn = user => user.local && user.roles[right] && this.$store.state.user.id !== user.id
+          const toggleRightFn = async(user) => await this.$store.dispatch('ToggleRight', { user, right })
+          const filtered = this.selectedUsers.filter(filterUsersFn)
+
+          Promise.all(filtered.map(toggleRightFn))
+            .then(() => {
+              this.$message({
+                type: 'success',
+                message: this.$t('users.completed')
+              })
+              this.$emit('apply-action')
+            }).catch((err) => {
+              console.log(err)
+              return
+            })
+        },
+        activate: () => {
+          const filtered = this.selectedUsers.filter(user => user.deactivated && this.$store.state.user.id !== user.id)
+          const toggleActivationFn = async(user) => await this.$store.dispatch('ToggleUserActivation', user.nickname)
+
+          Promise.all(filtered.map(toggleActivationFn))
+            .then(() => {
+              this.$message({
+                type: 'success',
+                message: this.$t('users.completed')
+              })
+              this.$emit('apply-action')
+            }).catch((err) => {
+              console.log(err)
+              return
+            })
+        },
+        deactivate: () => {
+          const filtered = this.selectedUsers.filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
+          const toggleActivationFn = async(user) => await this.$store.dispatch('ToggleUserActivation', user.nickname)
+
+          Promise.all(filtered.map(toggleActivationFn))
+            .then(() => {
+              this.$message({
+                type: 'success',
+                message: this.$t('users.completed')
+              })
+              this.$emit('apply-action')
+            }).catch((err) => {
+              console.log(err)
+              return
+            })
+        },
+        remove: () => {
+          const filtered = this.selectedUsers.filter(user => this.$store.state.user.id !== user.id)
+          const deleteAccountFn = async(user) => await this.$store.dispatch('DeleteUser', user)
+
+          Promise.all(filtered.map(deleteAccountFn))
+            .then(() => {
+              this.$message({
+                type: 'success',
+                message: this.$t('users.completed')
+              })
+              this.$emit('apply-action')
+            }).catch((err) => {
+              console.log(err)
+              return
+            })
+        },
+        addTag: (tag) => async() => {
+          const filterUsersFn = user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+            ? user.local && !user.tags.includes(tag)
+            : !user.tags.includes(tag)
+          const users = this.selectedUsers.filter(filterUsersFn)
+
+          try {
+            await this.$store.dispatch('AddTag', { users, tag })
+          } catch (err) {
+            console.log(err)
+            return
+          }
+
+          this.$message({
+            type: 'success',
+            message: this.$t('users.completed')
+          })
+          this.$emit('apply-action')
         },
-        removeTag: (tag) => () => {
-          const users = this.selectedUsers
-            .filter(user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? user.local && user.tags.includes(tag)
-              : user.tags.includes(tag))
-          this.$store.dispatch('RemoveTag', { users, tag })
+        removeTag: (tag) => async() => {
+          const filterUsersFn = user => tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
+            ? user.local && user.tags.includes(tag)
+            : user.tags.includes(tag)
+          const users = this.selectedUsers.filter(filterUsersFn)
+
+          try {
+            await this.$store.dispatch('RemoveTag', { users, tag })
+          } catch (err) {
+            console.log(err)
+            return
+          }
+
+          this.$message({
+            type: 'success',
+            message: this.$t('users.completed')
+          })
+          this.$emit('apply-action')
         }
       }
     },
@@ -234,11 +325,6 @@ export default {
         type: 'warning'
       }).then(() => {
         applyAction()
-        this.$emit('apply-action')
-        this.$message({
-          type: 'success',
-          message: this.$t('users.completed')
-        })
       }).catch(() => {
         this.$message({
           type: 'info',

src/views/users/components/NewAccountDialog.vue

@@ -83,11 +83,6 @@ export default {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.$emit('createNewAccount', this.$data.newUserForm)
-          this.closeDialogWindow()
-          this.$message({
-            type: 'success',
-            message: this.$t('users.completed')
-          })
         } else {
           this.$message({
             type: 'error',

src/views/users/index.vue

@@ -234,8 +234,18 @@ export default {
     clearSelection() {
       this.$refs.usersTable.clearSelection()
     },
-    createNewAccount(accountData) {
-      this.$store.dispatch('CreateNewAccount', accountData)
+    async createNewAccount(accountData) {
+      try {
+        await this.$store.dispatch('CreateNewAccount', accountData)
+      } catch (_e) {
+        return
+      } finally {
+        this.dialogFormVisible = false
+      }
+      this.$message({
+        type: 'success',
+        message: this.$t('users.accountCreated')
+      })
     },
     getFirstLetter(str) {
       return str.charAt(0).toUpperCase()