sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'pending-approvals' into 'develop'

Browse source 
Admin manage pending accounts

See merge request pleroma/admin-fe!147
This commit is contained in:
Angelina Filippova 2020-08-05 22:53:24 +00:00
commit 28eabbea4a
12 changed files with 200 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/api/__mocks__/users.js
View file

@ -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 }

10
src/api/users.js
View file

@ -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),

11
src/lang/en.js
View file

@ -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: {

14
src/store/modules/users.js
View file

@ -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 }

30
src/views/users/components/ModerationDropdown.vue
View file

@ -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 })
},

29
src/views/users/components/MultipleUsersMenu.vue
View file

@ -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(

9
src/views/users/components/UsersFilter.vue
View file

@ -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>

24
src/views/users/index.vue
View file

@ -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) {

13
src/views/users/show.vue
View file

@ -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 {

10
test/views/users/index.test.js
View file

@ -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()
})

51
test/views/users/multipleUsersMenu.test.js
View file

@ -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()
})
})

16
test/views/users/usersFilters.test.js
View file

@ -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()
})