From ea8374adb771e9b4d5c5cce5cdebefcbf5ca79aa Mon Sep 17 00:00:00 2001
From: MK Fain <mk@marykatefain.com>
Date: Wed, 5 Aug 2020 22:53:23 +0000
Subject: [PATCH] Admin manage pending accounts

---
 src/api/__mocks__/users.js                    | 15 ++++--
 src/api/users.js                              | 10 ++++
 src/lang/en.js                                | 11 ++++
 src/store/modules/users.js                    | 14 ++++-
 .../users/components/ModerationDropdown.vue   | 30 +++++++++++
 .../users/components/MultipleUsersMenu.vue    | 29 +++++++++++
 src/views/users/components/UsersFilter.vue    |  9 ++--
 src/views/users/index.vue                     | 24 +++++++++
 src/views/users/show.vue                      | 13 ++++-
 test/views/users/index.test.js                | 10 ++--
 test/views/users/multipleUsersMenu.test.js    | 51 +++++++++++++++----
 test/views/users/usersFilters.test.js         | 16 +++---
 12 files changed, 200 insertions(+), 32 deletions(-)

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 1133c705..b21cac33 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -1,7 +1,8 @@
 export let users = [
-  { active: true, deactivated: false, id: '2', nickname: 'allis', local: true, external: false, roles: { admin: true, moderator: false }, tags: [] },
-  { active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: false }, tags: ['mrf_tag:sandbox'] },
-  { active: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['mrf_tag:media-strip'] }
+  { active: true, approval_pending: false, deactivated: false, id: '2', nickname: 'allis', local: true, external: false, roles: { admin: true, moderator: false }, tags: [] },
+  { active: true, approval_pending: false, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: false }, tags: ['mrf_tag:sandbox'] },
+  { active: false, approval_pending: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['mrf_tag:media-strip'] },
+  { active: true, approval_pending: true, deactivated: false, id: '100', nickname: 'sally', local: true, external: false, roles: { admin: false, moderator: false }, tags: [] }
 ]
 
 const userProfile = { avatar: 'avatar.jpg', nickname: 'allis', id: '2', tags: [], roles: { admin: true, moderator: false }, local: true, external: false }
@@ -85,6 +86,14 @@ export async function deactivateUsers(nicknames, authHost, token) {
   return Promise.resolve({ data: response })
 }
 
+export async function approveUserAccount(nicknames, authHost, token) {
+  const response = nicknames.map(nickname => {
+    const currentUser = users.find(user => user.nickname === nickname)
+    return { ...currentUser, approval_pending: false }
+  })
+  return Promise.resolve({ data: response })
+}
+
 export async function deleteRight(nickname, right, authHost, token) {
   return Promise.resolve({ data:
     { [`is_${right}`]: false }
diff --git a/src/api/users.js b/src/api/users.js
index b62df5d7..71028fd7 100644
--- a/src/api/users.js
+++ b/src/api/users.js
@@ -166,6 +166,16 @@ export async function fetchUserStatuses(id, authHost, godmode, token) {
   })
 }
 
+export async function approveUserAccount(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users/approve',
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
 export async function confirmUserEmail(nicknames, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
diff --git a/src/lang/en.js b/src/lang/en.js
index 478a5cc7..d86a3a1e 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -191,6 +191,7 @@ export default {
     external: 'External',
     deactivated: 'Deactivated',
     active: 'Active',
+    unapproved: 'Pending',
     unconfirmed: 'Unconfirmed',
     actions: 'Actions',
     activate: 'Activate',
@@ -233,6 +234,8 @@ export default {
     addTagForMultipleUsersConfirmation: 'Are you sure you want to apply tag to all selected users?',
     removeTagFromMultipleUsersConfirmation: 'Are you sure you want to remove tag from all selected users?',
     requirePasswordResetConfirmation: 'Are you sure you want to require password reset for all selected users?',
+    approveAccountsConfirmation: 'Are you sure you want to approve accounts for all selected users?',
+    rejectAccountsConfirmation: 'Are you sure you want to reject accounts for all selected users?',
     confirmAccountsConfirmation: 'Are you sure you want to confirm emails for all selected users?',
     resendEmailConfirmation: 'Are you sure you want to resend confirmation email for all selected users?',
     mailerMustBeEnabled: 'To require user\'s password reset you must enable mailer.',
@@ -253,9 +256,14 @@ export default {
     getPasswordResetToken: 'Get password reset token',
     passwordResetTokenCreated: 'Password reset token was created',
     accountCreated: 'New account was created!',
+    approveAccount: 'Approve account',
+    approveAccounts: 'Approve accounts',
+    unapprovedAccount: 'User account is pending approval',
     unconfirmedEmail: 'User didn\'t confirm the email',
     confirmAccount: 'Confirm account',
     confirmAccounts: 'Confirm accounts',
+    rejectAccount: 'Reject account',
+    rejectAccounts: 'Reject accounts',
     resendConfirmation: 'Resend confirmation email',
     invalidAccount: 'This account has invalid nickname and can\'t be modified',
     invalidNickname: 'invalid nickname',
@@ -287,7 +295,9 @@ export default {
     roles: 'Roles',
     active: 'Active',
     status: 'Status',
+    reason: 'Registration Reason',
     deactivated: 'Deactivated',
+    pending: 'Pending',
     noStatuses: 'No statuses to show',
     openAccountInInstance: 'Open account in instance',
     securitySettings: {
@@ -313,6 +323,7 @@ export default {
     external: 'External',
     byStatus: 'By status',
     active: 'Active',
+    pending: 'Pending',
     deactivated: 'Deactivated'
   },
   reports: {
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 4db8042f..ccfc10b3 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -14,6 +14,7 @@ import {
   tagUser,
   untagUser,
   forcePasswordReset,
+  approveUserAccount,
   confirmUserEmail,
   resendConfirmationEmail
 } from '@/api/users'
@@ -30,6 +31,7 @@ const users = {
       local: false,
       external: false,
       active: false,
+      needApproval: false,
       deactivated: false
     },
     passwordResetToken: {
@@ -126,7 +128,7 @@ const users = {
     },
     ClearUsersState({ commit }) {
       commit('SET_SEARCH_QUERY', '')
-      commit('SET_USERS_FILTERS', { local: false, external: false, active: false, deactivated: false })
+      commit('SET_USERS_FILTERS', { local: false, external: false, active: false, needApproval: false, deactivated: false })
     },
     async ClearFilters({ commit, dispatch, state }) {
       commit('CLEAR_USERS_FILTERS')
@@ -159,6 +161,15 @@ const users = {
       }
       dispatch('SuccessMessage')
     },
+    async ApproveUsersAccount({ dispatch, getters }, { users, _userId, _statusId }) {
+      const updatedUsers = users.map(user => {
+        return { ...user, approval_pending: false }
+      })
+      const nicknames = users.map(user => user.nickname)
+      const callApiFn = async() => await approveUserAccount(nicknames, getters.authHost, getters.token)
+
+      dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
+    },
     async ConfirmUsersEmail({ dispatch, getters }, { users, _userId, _statusId }) {
       const updatedUsers = users.map(user => {
         return { ...user, confirmation_pending: false }
@@ -260,6 +271,7 @@ const users = {
         local: false,
         external: false,
         active: false,
+        needApproval: false,
         deactivated: false
       }
       const currentFilters = { ...defaultFilters, ...filters }
diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index 8b800c46..b8312b4c 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -37,6 +37,17 @@
         @click.native="handleDeletion(user)">
         {{ $t('users.deleteAccount') }}
       </el-dropdown-item>
+      <el-dropdown-item
+        v-if="user.local && user.approval_pending"
+        divided
+        @click.native="handleAccountApproval(user)">
+        {{ $t('users.approveAccount') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        v-if="user.local && user.approval_pending"
+        @click.native="handleAccountRejection(user)">
+        {{ $t('users.rejectAccount') }}
+      </el-dropdown-item>
       <el-dropdown-item
         v-if="user.local && user.confirmation_pending"
         divided
@@ -158,6 +169,25 @@ export default {
         })
       })
     },
+    handleAccountApproval(user) {
+      this.$store.dispatch('ApproveUsersAccount', { users: [user], _userId: user.id, _statusId: this.statusId })
+    },
+    handleAccountRejection(user) {
+      this.$confirm(
+        this.$t('users.deleteUsersConfirmation'),
+        {
+          confirmButtonText: 'Delete',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+        this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Delete canceled'
+        })
+      })
+    },
     handleEmailConfirmation(user) {
       this.$store.dispatch('ConfirmUsersEmail', { users: [user], _userId: user.id, _statusId: this.statusId })
     },
diff --git a/src/views/users/components/MultipleUsersMenu.vue b/src/views/users/components/MultipleUsersMenu.vue
index a192b8a8..652436a5 100644
--- a/src/views/users/components/MultipleUsersMenu.vue
+++ b/src/views/users/components/MultipleUsersMenu.vue
@@ -26,6 +26,15 @@
         @click.native="revokeRightFromMultipleUsers('moderator')">
         {{ $t('users.revokeModerator') }}
       </el-dropdown-item>
+      <el-dropdown-item
+        divided
+        @click.native="approveAccountsForMultipleUsers">
+        {{ $t('users.approveAccounts') }}
+      </el-dropdown-item>
+      <el-dropdown-item
+        @click.native="rejectAccountsForMultipleUsers">
+        {{ $t('users.rejectAccounts') }}
+      </el-dropdown-item>
       <el-dropdown-item
         divided
         @click.native="confirmAccountsForMultipleUsers">
@@ -219,6 +228,12 @@ export default {
 
           applyAction(filtered, requirePasswordResetFn)
         },
+        approveAccounts: () => {
+          const filtered = this.selectedUsers.filter(user => this.isLocalUser(user) && user.approval_pending)
+          const approveAccountFn = async(users) => await this.$store.dispatch('ApproveUsersAccount', { users })
+
+          applyAction(filtered, approveAccountFn)
+        },
         confirmAccounts: () => {
           const filtered = this.selectedUsers.filter(user => this.isLocalUser(user) && user.confirmation_pending)
           const confirmAccountFn = async(users) => await this.$store.dispatch('ConfirmUsersEmail', { users })
@@ -300,6 +315,20 @@ export default {
         removeTag(tag)
       )
     },
+    approveAccountsForMultipleUsers() {
+      const { approveAccounts } = this.mappers()
+      this.confirmMessage(
+        this.$t('users.approveAccountsConfirmation'),
+        approveAccounts
+      )
+    },
+    rejectAccountsForMultipleUsers() {
+      const { remove } = this.mappers()
+      this.confirmMessage(
+        this.$t('users.deleteMultipleUsersConfirmation'),
+        remove
+      )
+    },
     confirmAccountsForMultipleUsers() {
       const { confirmAccounts } = this.mappers()
       this.confirmMessage(
diff --git a/src/views/users/components/UsersFilter.vue b/src/views/users/components/UsersFilter.vue
index 01bd384e..424b7071 100644
--- a/src/views/users/components/UsersFilter.vue
+++ b/src/views/users/components/UsersFilter.vue
@@ -7,12 +7,13 @@
     class="select-field"
     @change="toggleFilters">
     <el-option-group :label="$t('usersFilter.byAccountType')">
-      <el-option value="local">{{ $t('usersFilter.local') }}</el-option>
-      <el-option value="external">{{ $t('usersFilter.external') }}</el-option>
+      <el-option value="local" label="Local">{{ $t('usersFilter.local') }}</el-option>
+      <el-option value="external" label="External">{{ $t('usersFilter.external') }}</el-option>
     </el-option-group>
     <el-option-group :label="$t('usersFilter.byStatus')">
-      <el-option value="active">{{ $t('usersFilter.active') }}</el-option>
-      <el-option value="deactivated">{{ $t('usersFilter.deactivated') }}</el-option>
+      <el-option value="active" label="Active">{{ $t('usersFilter.active') }}</el-option>
+      <el-option value="needApproval" label="Need Approval">{{ $t('usersFilter.pending') }}</el-option>
+      <el-option value="deactivated" label="Deactivated">{{ $t('usersFilter.deactivated') }}</el-option>
     </el-option-group>
   </el-select>
 </template>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index c8ea487b..3831ba80 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -71,7 +71,16 @@
               {{ isDesktop ? $t('users.unconfirmed') : getFirstLetter($t('users.unconfirmed')) }}
             </el-tag>
           </el-tooltip>
+          <el-tooltip :content="$t('users.unapprovedAccount')" effect="dark">
+            <el-tag v-if="scope.row.approval_pending" type="info">
+              {{ isDesktop ? $t('users.unapproved') : getFirstLetter($t('users.unapproved')) }}
+            </el-tag>
+          </el-tooltip>
+          <div v-if="pendingView && isDesktop" class="reason-text">
+            "{{ scope.row.registration_reason | truncate(100, '...') }}"
+          </div>
         </template>
+
       </el-table-column>
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
@@ -123,6 +132,15 @@ export default {
     ResetPasswordDialog,
     UsersFilter
   },
+  filters: {
+    truncate: function(text, length, suffix) {
+      if (text.length > length) {
+        return text.substring(0, length) + suffix
+      } else {
+        return text
+      }
+    }
+  },
   data() {
     return {
       search: '',
@@ -156,6 +174,9 @@ export default {
     usersCount() {
       return this.$store.state.users.totalUsersCount
     },
+    pendingView() {
+      return this.$store.state.users.filters['needApproval']
+    },
     width() {
       return this.isMobile ? 55 : false
     }
@@ -298,6 +319,9 @@ export default {
     color: gray;
     font-size: 28px;
   }
+  .reason-text {
+    word-break: normal;
+  }
 }
 
 @media only screen and (max-width:480px) {
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index c77c710c..88e18d3a 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -79,12 +79,17 @@
               <tr class="el-table__row">
                 <td>{{ $t('userProfile.status') }}</td>
                 <td>
-                  <el-tag v-if="!user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
+                  <el-tag v-if="user.approval_pending" type="info">{{ $t('userProfile.pending') }}</el-tag>
+                  <el-tag v-if="!user.deactivated & !user.approval_pending" type="success">{{ $t('userProfile.active') }}</el-tag>
                   <el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
                 </td>
               </tr>
             </tbody>
           </table>
+          <div v-if="user.registration_reason">
+            <div class="reason-label">{{ $t('userProfile.reason') }}</div>
+            "{{ user.registration_reason }}"
+          </div>
         </div>
         <el-button v-if="propertyExists(user, 'nickname')" icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
           {{ $t('userProfile.securitySettings.securitySettings') }}
@@ -304,6 +309,7 @@ table {
 .user-profile-card {
   margin: 0 20px;
   width: 30%;
+  min-width: 300px;
   height: fit-content;
 }
 .user-profile-container {
@@ -316,6 +322,11 @@ table {
 .user-profile-tag {
   margin: 0 4px 4px 0;
 }
+.reason-label {
+  color: #878d99;
+  font-weight: bold;
+  margin: 5px 0;
+}
 
 @media only screen and (max-width:480px) {
   .avatar-name-container {
diff --git a/test/views/users/index.test.js b/test/views/users/index.test.js
index 6afd901b..78ce7f06 100644
--- a/test/views/users/index.test.js
+++ b/test/views/users/index.test.js
@@ -34,7 +34,7 @@ describe('Search and filter users', () => {
     })
 
     await flushPromises()
-    expect(wrapper.vm.usersCount).toEqual(3)
+    expect(wrapper.vm.usersCount).toEqual(4)
     done()
   })
 
@@ -51,7 +51,7 @@ describe('Search and filter users', () => {
     }
 
     await flushPromises()
-    expect(wrapper.vm.usersCount).toEqual(3)
+    expect(wrapper.vm.usersCount).toEqual(4)
     const input = wrapper.find('.search input.el-input__inner')
     input.element.value = 'bob'
     input.trigger('input')
@@ -61,7 +61,7 @@ describe('Search and filter users', () => {
     input.element.value = ''
     input.trigger('input')
     await flushPromises()
-    expect(wrapper.vm.usersCount).toEqual(3)
+    expect(wrapper.vm.usersCount).toEqual(4)
 
     done()
   })
@@ -304,7 +304,7 @@ describe('Creates new account', () => {
       stubs: ['router-link']
     })
     await flushPromises()
-    expect(wrapper.vm.usersCount).toEqual(3)
+    expect(wrapper.vm.usersCount).toEqual(4)
 
     const openDialogButton = wrapper.find('button.actions-button')
     openDialogButton.trigger('click')
@@ -326,7 +326,7 @@ describe('Creates new account', () => {
     createButton.trigger('click')
     await flushPromises()
 
-    expect(wrapper.vm.usersCount).toEqual(4)
+    expect(wrapper.vm.usersCount).toEqual(5)
     done()
   })
 
diff --git a/test/views/users/multipleUsersMenu.test.js b/test/views/users/multipleUsersMenu.test.js
index 1408ea56..3cfe53ba 100644
--- a/test/views/users/multipleUsersMenu.test.js
+++ b/test/views/users/multipleUsersMenu.test.js
@@ -163,7 +163,7 @@ describe('Apply users actions to multiple users', () => {
     const activateMultipleUsersStub = jest.fn()
     wrapper.setMethods({ activateMultipleUsers: activateMultipleUsersStub })
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(7)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(9)`).trigger('click')
     expect(wrapper.vm.activateMultipleUsers).toHaveBeenCalled()
 
     const activate = wrapper.vm.mappers().activate
@@ -190,7 +190,7 @@ describe('Apply users actions to multiple users', () => {
     const deactivateMultipleUsersStub = jest.fn()
     wrapper.setMethods({ deactivateMultipleUsers: deactivateMultipleUsersStub })
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(8)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(10)`).trigger('click')
     expect(wrapper.vm.deactivateMultipleUsers).toHaveBeenCalled()
 
     const deactivate = wrapper.vm.mappers().deactivate
@@ -221,7 +221,7 @@ describe('Apply users actions to multiple users', () => {
     const deleteMultipleUsersStub = jest.fn()
     wrapper.setMethods({ deleteMultipleUsers: deleteMultipleUsersStub })
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(9)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(11)`).trigger('click')
     expect(wrapper.vm.deleteMultipleUsers).toHaveBeenCalled()
 
     const remove = wrapper.vm.mappers().remove
@@ -229,7 +229,7 @@ describe('Apply users actions to multiple users', () => {
     remove()
     await flushPromises()
 
-    expect(store.state.users.fetchedUsers.length).toEqual(3)
+    expect(store.state.users.fetchedUsers.length).toEqual(4)
     done()
   })
 
@@ -247,15 +247,15 @@ describe('Apply users actions to multiple users', () => {
     const addTagForMultipleUsersStub = jest.fn()
     wrapper.setMethods({ addTagForMultipleUsers: addTagForMultipleUsersStub })
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(11) button:nth-child(1)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(13) button:nth-child(1)`).trigger('click')
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('mrf_tag:media-force-nsfw')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(13) button:nth-child(1)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(15) button:nth-child(1)`).trigger('click')
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('mrf_tag:force-unlisted')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(15  ) button:nth-child(1)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(17) button:nth-child(1)`).trigger('click')
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.addTagForMultipleUsers).toHaveBeenCalledWith('mrf_tag:disable-remote-subscription')
 
@@ -287,15 +287,15 @@ describe('Apply users actions to multiple users', () => {
     const removeTagFromMultipleUsersStub = jest.fn()
     wrapper.setMethods({ removeTagFromMultipleUsers: removeTagFromMultipleUsersStub })
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(12) button:nth-child(2)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(14) button:nth-child(2)`).trigger('click')
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('mrf_tag:media-strip')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(14) button:nth-child(2)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(16) button:nth-child(2)`).trigger('click')
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('mrf_tag:sandbox')
 
-    wrapper.find(`.el-dropdown-menu__item:nth-child(16) button:nth-child(2)`).trigger('click')
+    wrapper.find(`.el-dropdown-menu__item:nth-child(18) button:nth-child(2)`).trigger('click')
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalled()
     expect(wrapper.vm.removeTagFromMultipleUsers).toHaveBeenCalledWith('mrf_tag:disable-any-subscription')
 
@@ -312,4 +312,35 @@ describe('Apply users actions to multiple users', () => {
     expect(updatedUser2.tags.length).toBe(0)
     done()
   })
+
+  it('approves multiple accounts', async (done) => {
+    const wrapper = mount(MultipleUsersMenu, {
+      store,
+      localVue,
+      sync: false,
+      propsData: {
+        selectedUsers: users
+      }
+    })
+    await flushPromises()
+
+    const approveAccountsForMultipleUsersStub = jest.fn()
+    wrapper.setMethods({ approveAccountsForMultipleUsers: approveAccountsForMultipleUsersStub })
+
+    wrapper.find(`.el-dropdown-menu__item:nth-child(5)`).trigger('click')
+    expect(wrapper.vm.approveAccountsForMultipleUsers).toHaveBeenCalled()
+
+    const approveAccounts = wrapper.vm.mappers().approveAccounts
+    const user1 = store.state.users.fetchedUsers[0]
+    const user2 = store.state.users.fetchedUsers[3]
+    expect(user1.approval_pending).toBe(false)
+    expect(user2.approval_pending).toBe(true)
+    approveAccounts()
+
+    const updatedUser1 = store.state.users.fetchedUsers[0]
+    const updatedUser2 = store.state.users.fetchedUsers[3]
+    expect(updatedUser1.approval_pending).toBe(false)
+    expect(updatedUser2.approval_pending).toBe(false)
+    done()
+  })
 })
diff --git a/test/views/users/usersFilters.test.js b/test/views/users/usersFilters.test.js
index e56822ca..db3c1a4b 100644
--- a/test/views/users/usersFilters.test.js
+++ b/test/views/users/usersFilters.test.js
@@ -31,18 +31,18 @@ describe('Filters users', () => {
       localVue
     })
 
-    expect(store.state.users.totalUsersCount).toEqual(3)
+    expect(store.state.users.totalUsersCount).toEqual(4)
 
     const filter = wrapper.find(`li.el-select-dropdown__item:nth-child(${1})`)
     filter.trigger('click')
     await flushPromises()
-    expect(store.state.users.totalUsersCount).toEqual(2)
+    expect(store.state.users.totalUsersCount).toEqual(3)
 
     done()
   })
 
   it('shows users with applied filter and search query', async (done) => {
-    expect(store.state.users.totalUsersCount).toEqual(3)
+    expect(store.state.users.totalUsersCount).toEqual(4)
 
     store.dispatch('ToggleUsersFilter', { active: true })
     await flushPromises()
@@ -56,17 +56,17 @@ describe('Filters users', () => {
 
     store.dispatch('SearchUsers', { query: '', page: 1 })
     await flushPromises()
-    expect(store.state.users.totalUsersCount).toEqual(2)
+    expect(store.state.users.totalUsersCount).toEqual(3)
 
     done()
   })
 
   it('applies two filters', async (done) => {
-    expect(store.state.users.totalUsersCount).toEqual(3)
+    expect(store.state.users.totalUsersCount).toEqual(4)
 
     store.dispatch('ToggleUsersFilter', { active: true, local: true })
     await flushPromises()
-    expect(store.state.users.totalUsersCount).toEqual(1)
+    expect(store.state.users.totalUsersCount).toEqual(2)
     expect(store.state.users.fetchedUsers[0].nickname).toEqual('allis')
 
     store.dispatch('ToggleUsersFilter', { deactivated: true, external: true })
@@ -77,7 +77,7 @@ describe('Filters users', () => {
   })
 
   it('shows all users after removing filters', async (done) => {
-    expect(store.state.users.totalUsersCount).toEqual(3)
+    expect(store.state.users.totalUsersCount).toEqual(4)
 
     store.dispatch('ToggleUsersFilter', { deactivated: true })
     await flushPromises()
@@ -85,7 +85,7 @@ describe('Filters users', () => {
 
     store.dispatch('ToggleUsersFilter', {})
     await flushPromises()
-    expect(store.state.users.totalUsersCount).toEqual(3)
+    expect(store.state.users.totalUsersCount).toEqual(4)
 
     done()
   })