Merge branch 'feature/confirm-delete-user' into 'develop'

Add confirmation message when deleting a user

Closes #125

See merge request pleroma/admin-fe!144

CHANGELOG.md

@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add ability to disable multi-factor authentication for a user
 - Ability to configure S3 settings on Upload tab
 - Show number of open reports in Sidebar Menu
+- Add confirmation message when deleting a user
 
 ### Changed
 

src/lang/en.js

@@ -212,6 +212,7 @@ export default {
     revokeRightConfirmation: 'Are you sure you want to revoke {right} rights from all selected users?',
     activateMultipleUsersConfirmation: 'Are you sure you want to activate accounts of all selected users?',
     deactivateMultipleUsersConfirmation: 'Are you sure you want to deactivate accounts of all selected users?',
+    deleteUsersConfirmation: 'Are you sure you want to delete this account? This action cannot be undone.',
     deleteMultipleUsersConfirmation: 'Are you sure you want to delete accounts of all selected users?',
     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?',

src/store/modules/users.js

@@ -193,11 +193,14 @@ const users = {
       } catch (_e) {
         return
       }
-      const deletedUsersIds = users.map(deletedUser => deletedUser.id)
+      const updatedUsers = users.map(user => {
-      const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id))
+        return { ...user, deactivated: true }
-      commit('SET_USERS', updatedUsers)
+      })
+      commit('SWAP_USERS', updatedUsers)
 
-      dispatch('FetchUserProfile', { userId: _userId, godmode: false })
+      if (_userId) {
+        dispatch('FetchUserProfile', { userId: _userId, godmode: false })
+      }
       dispatch('SuccessMessage')
     },
     async FetchUsers({ commit, dispatch, getters, state }, { page }) {

src/views/users/components/ModerationDropdown.vue

@@ -143,7 +143,20 @@ export default {
       this.$store.dispatch('ResendConfirmationEmail', [user])
     },
     handleDeletion(user) {
-      this.$store.dispatch('DeleteUsers', { users: [user], _userId: user.id })
+      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 })

test/views/users/index.test.js

@@ -156,11 +156,13 @@ describe('Users actions', () => {
       stubs: ['router-link']
     })
     await flushPromises()
-    expect(store.state.users.fetchedUsers.length).toEqual(3)
+    expect(store.state.users.fetchedUsers[1].deactivated).toBe(false)
 
     wrapper.find(htmlElement(2, 2)).trigger('click')
+    store.dispatch('DeleteUsers', { users: [{ active: true, deactivated: false, id: '10', nickname: 'bob', local: false, external: true, roles: { admin: false, moderator: false }, tags: ['sandbox'] }] })
+
     await flushPromises()
-    expect(store.state.users.fetchedUsers.length).toEqual(2)
+    expect(store.state.users.fetchedUsers[1].deactivated).toBe(true)
     done()
   })
 

test/views/users/multipleUsersMenu.test.js

@@ -225,11 +225,11 @@ describe('Apply users actions to multiple users', () => {
     expect(wrapper.vm.deleteMultipleUsers).toHaveBeenCalled()
 
     const remove = wrapper.vm.mappers().remove
-    expect(store.state.users.fetchedUsers.length).toEqual(3)
+    expect(store.state.users.fetchedUsers.filter(user => user.deactivated).length).toEqual(1)
     remove()
     await flushPromises()
 
-    expect(store.state.users.fetchedUsers.length).toEqual(0)
+    expect(store.state.users.fetchedUsers.length).toEqual(3)
     done()
   })