qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'feature/allow-moderation-on-user-page' into 'develop'

Browse source 
Add ability to moderate user on the user's page

Closes #59

See merge request pleroma/admin-fe!85
This commit is contained in:
Angelina Filippova 2020-01-29 15:38:01 +00:00
commit 68feb67c52
8 changed files with 300 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Ability to confirm users' emails and resend confirmation emails - Ability to confirm users' emails and resend confirmation emails
- Report notes - Report notes
- Ability to moderate users on the statuses page - Ability to moderate users on the statuses page
- Ability to moderate user on the user's page
### Fixed ### Fixed

2
src/api/users.js
View file

@ -89,7 +89,7 @@ export async function getPasswordResetToken(nickname, authHost, token) {
}) })
} }
export async function requirePasswordReset(nicknames, authHost, token) { export async function forcePasswordReset(nicknames, authHost, token) {
return await request({ return await request({
baseURL: baseName(authHost), baseURL: baseName(authHost),
url: `/api/pleroma/admin/users/force_password_reset`, url: `/api/pleroma/admin/users/force_password_reset`,

1
src/lang/en.js
View file

@ -202,6 +202,7 @@ export default {
disableAnySubscriptionForMultiple: 'Disallow following users at all', disableAnySubscriptionForMultiple: 'Disallow following users at all',
requirePasswordReset: 'Require password reset on next login', requirePasswordReset: 'Require password reset on next login',
selectUsers: 'Select users to apply actions to multiple users', selectUsers: 'Select users to apply actions to multiple users',
moderateUser: 'Moderate user',
moderateUsers: 'Moderate multiple users', moderateUsers: 'Moderate multiple users',
createAccount: 'Create new account', createAccount: 'Create new account',
apply: 'apply', apply: 'apply',

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

@ -12,7 +12,7 @@ import {
searchUsers, searchUsers,
tagUser, tagUser,
untagUser, untagUser,
requirePasswordReset, forcePasswordReset,
confirmUserEmail, confirmUserEmail,
resendConfirmationEmail resendConfirmationEmail
} from '@/api/users' } from '@/api/users'
@ -79,53 +79,46 @@ const users = {
} }
}, },
actions: { actions: {
async ActivateUsers({ commit, dispatch, getters, state }, users) { async ActivateUsers({ dispatch, getters }, users) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return { ...user, deactivated: false } return { ...user, deactivated: false }
}) })
const nicknames = users.map(user => user.nickname)
const callApiFn = async() => await activateUsers(nicknames, getters.authHost, getters.token)
dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
},
async ApplyChanges({ commit, dispatch, state }, { updatedUsers, callApiFn, userId }) {
commit('SWAP_USERS', updatedUsers) commit('SWAP_USERS', updatedUsers)
const usersNicknames = users.map(user => user.nickname)
try { try {
await activateUsers(usersNicknames, getters.authHost, getters.token) await callApiFn()
} catch (_e) { } catch (_e) {
return return
} finally { } finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage }) dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
} }
dispatch('FetchUserProfile', { userId, godmode: false })
dispatch('SuccessMessage') dispatch('SuccessMessage')
}, },
async AddRight({ commit, dispatch, getters, state }, { users, right }) { async AddRight({ dispatch, getters }, { users, right }) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return user.local ? { ...user, roles: { ...user.roles, [right]: true }} : user return user.local ? { ...user, roles: { ...user.roles, [right]: true }} : user
}) })
commit('SWAP_USERS', updatedUsers) const nicknames = users.map(user => user.nickname)
const callApiFn = async() => await addRight(nicknames, right, getters.authHost, getters.token)
const usersNicknames = users.map(user => user.nickname) dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
try {
await addRight(usersNicknames, right, getters.authHost, getters.token)
} catch (_e) {
return
} finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
}
dispatch('SuccessMessage')
}, },
async AddTag({ commit, dispatch, getters, state }, { users, tag }) { async AddTag({ dispatch, getters }, { users, tag }) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return { ...user, tags: [...user.tags, tag] } return { ...user, tags: [...user.tags, tag] }
}) })
commit('SWAP_USERS', updatedUsers)
const nicknames = users.map(user => user.nickname) const nicknames = users.map(user => user.nickname)
try { const callApiFn = async() => await tagUser(nicknames, [tag], getters.authHost, getters.token)
await tagUser(nicknames, [tag], getters.authHost, getters.token)
} catch (_e) { dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
return
} finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
}
dispatch('SuccessMessage')
}, },
async ClearFilters({ commit, dispatch, state }) { async ClearFilters({ commit, dispatch, state }) {
commit('CLEAR_USERS_FILTERS') commit('CLEAR_USERS_FILTERS')
@ -141,37 +134,23 @@ const users = {
} }
dispatch('SuccessMessage') dispatch('SuccessMessage')
}, },
async DeactivateUsers({ commit, dispatch, getters, state }, users) { async DeactivateUsers({ dispatch, getters }, users) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return { ...user, deactivated: true } return { ...user, deactivated: true }
}) })
commit('SWAP_USERS', updatedUsers) const nicknames = users.map(user => user.nickname)
const callApiFn = async() => await deactivateUsers(nicknames, getters.authHost, getters.token)
const usersNicknames = users.map(user => user.nickname) dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
try {
await deactivateUsers(usersNicknames, getters.authHost, getters.token)
} catch (_e) {
return
} finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
}
dispatch('SuccessMessage')
}, },
async ConfirmUsersEmail({ commit, dispatch, getters, state }, users) { async ConfirmUsersEmail({ dispatch, getters }, users) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return { ...user, confirmation_pending: false } return { ...user, confirmation_pending: false }
}) })
commit('SWAP_USERS', updatedUsers) const nicknames = users.map(user => user.nickname)
const callApiFn = async() => await confirmUserEmail(nicknames, getters.authHost, getters.token)
const usersNicknames = users.map(user => user.nickname) dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
try {
await confirmUserEmail(usersNicknames, getters.authHost, getters.token)
} catch (_e) {
return
} finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
}
dispatch('SuccessMessage')
}, },
async ResendConfirmationEmail({ dispatch, getters }, users) { async ResendConfirmationEmail({ dispatch, getters }, users) {
const usersNicknames = users.map(user => user.nickname) const usersNicknames = users.map(user => user.nickname)
@ -182,21 +161,14 @@ const users = {
} }
dispatch('SuccessMessage') dispatch('SuccessMessage')
}, },
async DeleteRight({ commit, dispatch, getters, state }, { users, right }) { async DeleteRight({ dispatch, getters }, { users, right }) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return user.local ? { ...user, roles: { ...user.roles, [right]: false }} : user return user.local ? { ...user, roles: { ...user.roles, [right]: false }} : user
}) })
commit('SWAP_USERS', updatedUsers) const nicknames = users.map(user => user.nickname)
const callApiFn = async() => await deleteRight(nicknames, right, getters.authHost, getters.token)
const usersNicknames = users.map(user => user.nickname) dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
try {
await deleteRight(usersNicknames, right, getters.authHost, getters.token)
} catch (_e) {
return
} finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
}
dispatch('SuccessMessage')
}, },
async DeleteUsers({ commit, dispatch, getters, state }, users) { async DeleteUsers({ commit, dispatch, getters, state }, users) {
const usersNicknames = users.map(user => user.nickname) const usersNicknames = users.map(user => user.nickname)
@ -208,6 +180,8 @@ const users = {
const deletedUsersIds = users.map(deletedUser => deletedUser.id) const deletedUsersIds = users.map(deletedUser => deletedUser.id)
const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id)) const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id))
commit('SET_USERS', updatedUsers) commit('SET_USERS', updatedUsers)
dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
dispatch('SuccessMessage') dispatch('SuccessMessage')
}, },
async FetchUsers({ commit, dispatch, getters, state }, { page }) { async FetchUsers({ commit, dispatch, getters, state }, { page }) {
@ -224,25 +198,19 @@ const users = {
RemovePasswordToken({ commit }) { RemovePasswordToken({ commit }) {
commit('SET_PASSWORD_RESET_TOKEN', { link: '', token: '' }) commit('SET_PASSWORD_RESET_TOKEN', { link: '', token: '' })
}, },
async RemoveTag({ commit, dispatch, getters, state }, { users, tag }) { async RemoveTag({ dispatch, getters }, { users, tag }) {
const updatedUsers = users.map(user => { const updatedUsers = users.map(user => {
return { ...user, tags: user.tags.filter(userTag => userTag !== tag) } return { ...user, tags: user.tags.filter(userTag => userTag !== tag) }
}) })
commit('SWAP_USERS', updatedUsers) const nicknames = users.map(user => user.nickname)
const callApiFn = async() => await untagUser(nicknames, [tag], getters.authHost, getters.token)
dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: users[0].id })
},
async RequirePasswordReset({ dispatch, getters }, users) {
const nicknames = users.map(user => user.nickname) const nicknames = users.map(user => user.nickname)
try { try {
await untagUser(nicknames, [tag], getters.authHost, getters.token) await forcePasswordReset(nicknames, getters.authHost, getters.token)
} catch (_e) {
return
} finally {
dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
}
dispatch('SuccessMessage')
},
async RequirePasswordReset({ dispatch, getters }, { nicknames }) {
try {
await requirePasswordReset(nicknames, getters.authHost, getters.token)
} catch (_e) { } catch (_e) {
return return
} }

182
src/views/users/components/ModerationDropdown.vue Normal file
View file

@ -0,0 +1,182 @@
<template>
<el-dropdown :hide-on-click="false" size="small" trigger="click">
<div>
<span v-if="page === 'users'" class="el-dropdown-link">
{{ $t('users.moderation') }}
<i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
</span>
<el-button v-if="page === 'userPage'" class="moderate-user-button">
<span class="moderate-user-button-container">
<span>
<i class="el-icon-edit" />
{{ $t('users.moderateUser') }}
</span>
<i class="el-icon-arrow-down el-icon--right"/>
</span>
</el-button>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="showAdminAction(user)"
@click.native="toggleUserRight(user, 'admin')">
{{ user.roles.admin ? $t('users.revokeAdmin') : $t('users.grantAdmin') }}
</el-dropdown-item>
<el-dropdown-item
v-if="showAdminAction(user)"
@click.native="toggleUserRight(user, 'moderator')">
{{ user.roles.moderator ? $t('users.revokeModerator') : $t('users.grantModerator') }}
</el-dropdown-item>
<el-dropdown-item
v-if="showDeactivatedButton(user.id)"
:divided="showAdminAction(user)"
@click.native="toggleActivation(user)">
{{ user.deactivated ? $t('users.activateAccount') : $t('users.deactivateAccount') }}
</el-dropdown-item>
<el-dropdown-item
v-if="showDeactivatedButton(user.id)"
@click.native="handleDeletion(user)">
{{ $t('users.deleteAccount') }}
</el-dropdown-item>
<el-dropdown-item
v-if="user.local && user.confirmation_pending"
divided
@click.native="handleEmailConfirmation(user)">
{{ $t('users.confirmAccount') }}
</el-dropdown-item>
<el-dropdown-item
v-if="user.local && user.confirmation_pending"
@click.native="handleConfirmationResend(user)">
{{ $t('users.resendConfirmation') }}
</el-dropdown-item>
<el-dropdown-item
:divided="showAdminAction(user)"
:class="{ 'active-tag': user.tags.includes('force_nsfw') }"
@click.native="toggleTag(user, 'force_nsfw')">
{{ $t('users.forceNsfw') }}
<i v-if="user.tags.includes('force_nsfw')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
:class="{ 'active-tag': user.tags.includes('strip_media') }"
@click.native="toggleTag(user, 'strip_media')">
{{ $t('users.stripMedia') }}
<i v-if="user.tags.includes('strip_media')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
:class="{ 'active-tag': user.tags.includes('force_unlisted') }"
@click.native="toggleTag(user, 'force_unlisted')">
{{ $t('users.forceUnlisted') }}
<i v-if="user.tags.includes('force_unlisted')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
:class="{ 'active-tag': user.tags.includes('sandbox') }"
@click.native="toggleTag(user, 'sandbox')">
{{ $t('users.sandbox') }}
<i v-if="user.tags.includes('sandbox')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
v-if="user.local"
:class="{ 'active-tag': user.tags.includes('disable_remote_subscription') }"
@click.native="toggleTag(user, 'disable_remote_subscription')">
{{ $t('users.disableRemoteSubscription') }}
<i v-if="user.tags.includes('disable_remote_subscription')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
v-if="user.local"
:class="{ 'active-tag': user.tags.includes('disable_any_subscription') }"
@click.native="toggleTag(user, 'disable_any_subscription')">
{{ $t('users.disableAnySubscription') }}
<i v-if="user.tags.includes('disable_any_subscription')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
v-if="user.local"
divided
@click.native="getPasswordResetToken(user.nickname)">
{{ $t('users.getPasswordResetToken') }}
</el-dropdown-item>
<el-dropdown-item
v-if="user.local"
@click.native="requirePasswordReset(user)">
{{ $t('users.requirePasswordReset') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
name: 'ModerationDropdown',
props: {
user: {
type: Object,
default: function() {
return {}
}
},
page: {
type: String,
default: 'users'
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: {
getPasswordResetToken(nickname) {
this.$emit('open-reset-token-dialog')
this.$store.dispatch('GetPasswordResetToken', nickname)
},
handleConfirmationResend(user) {
this.$store.dispatch('ResendConfirmationEmail', [user])
},
handleDeletion(user) {
this.$store.dispatch('DeleteUsers', [user])
},
handleEmailConfirmation(user) {
this.$store.dispatch('ConfirmUsersEmail', [user])
},
requirePasswordReset(user) {
const mailerEnabled = this.$store.state.user.nodeInfo.metadata.mailerEnabled
if (!mailerEnabled) {
this.$alert(this.$t('users.mailerMustBeEnabled'), 'Error', { type: 'error' })
return
}
this.$store.dispatch('RequirePasswordReset', [user])
},
showAdminAction({ local, id }) {
return local && this.showDeactivatedButton(id)
},
showDeactivatedButton(id) {
return this.$store.state.user.id !== id
},
toggleActivation(user) {
user.deactivated
? this.$store.dispatch('ActivateUsers', [user])
: this.$store.dispatch('DeactivateUsers', [user])
},
toggleTag(user, tag) {
user.tags.includes(tag)
? this.$store.dispatch('RemoveTag', { users: [user], tag })
: this.$store.dispatch('AddTag', { users: [user], tag })
},
toggleUserRight(user, right) {
user.roles[right]
? this.$store.dispatch('DeleteRight', { users: [user], right })
: this.$store.dispatch('AddRight', { users: [user], right })
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
.moderate-user-button {
text-align: left;
width: 200px;
padding: 10px;
}
.moderate-user-button-container {
display: flex;
justify-content: space-between;
}
</style>

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

@ -216,9 +216,9 @@ export default {
}, },
requirePasswordReset: () => { requirePasswordReset: () => {
const filtered = this.selectedUsers.filter(user => user.local) const filtered = this.selectedUsers.filter(user => user.local)
const nicknames = filtered.map(u => u.nickname) const requirePasswordResetFn = async(users) => await this.$store.dispatch('RequirePasswordReset', users)
this.$store.dispatch('RequirePasswordReset', { nicknames })
this.$emit('apply-action') applyAction(filtered, requirePasswordResetFn)
}, },
confirmAccounts: () => { confirmAccounts: () => {
const filtered = this.selectedUsers.filter(user => user.local && user.confirmation_pending) const filtered = this.selectedUsers.filter(user => user.local && user.confirmation_pending)

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

@ -66,96 +66,10 @@
</el-table-column> </el-table-column>
<el-table-column :label="$t('users.actions')" fixed="right"> <el-table-column :label="$t('users.actions')" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-dropdown :hide-on-click="false" size="small" trigger="click"> <moderation-dropdown
<span class="el-dropdown-link"> :user="scope.row"
{{ $t('users.moderation') }} :page="'users'"
<i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/> @open-reset-token-dialog="openResetPasswordDialog"/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="showAdminAction(scope.row)"
@click.native="toggleUserRight(scope.row, 'admin')">
{{ scope.row.roles.admin ? $t('users.revokeAdmin') : $t('users.grantAdmin') }}
</el-dropdown-item>
<el-dropdown-item
v-if="showAdminAction(scope.row)"
@click.native="toggleUserRight(scope.row, 'moderator')">
{{ scope.row.roles.moderator ? $t('users.revokeModerator') : $t('users.grantModerator') }}
</el-dropdown-item>
<el-dropdown-item
v-if="showDeactivatedButton(scope.row.id)"
:divided="showAdminAction(scope.row)"
@click.native="toggleActivation(scope.row)">
{{ scope.row.deactivated ? $t('users.activateAccount') : $t('users.deactivateAccount') }}
</el-dropdown-item>
<el-dropdown-item
v-if="showDeactivatedButton(scope.row.id)"
@click.native="handleDeletion(scope.row)">
{{ $t('users.deleteAccount') }}
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.local && scope.row.confirmation_pending"
divided
@click.native="handleEmailConfirmation(scope.row)">
{{ $t('users.confirmAccount') }}
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.local && scope.row.confirmation_pending"
@click.native="handleConfirmationResend(scope.row)">
{{ $t('users.resendConfirmation') }}
</el-dropdown-item>
<el-dropdown-item
:divided="showAdminAction(scope.row)"
:class="{ 'active-tag': scope.row.tags.includes('force_nsfw') }"
@click.native="toggleTag(scope.row, 'force_nsfw')">
{{ $t('users.forceNsfw') }}
<i v-if="scope.row.tags.includes('force_nsfw')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
:class="{ 'active-tag': scope.row.tags.includes('strip_media') }"
@click.native="toggleTag(scope.row, 'strip_media')">
{{ $t('users.stripMedia') }}
<i v-if="scope.row.tags.includes('strip_media')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
:class="{ 'active-tag': scope.row.tags.includes('force_unlisted') }"
@click.native="toggleTag(scope.row, 'force_unlisted')">
{{ $t('users.forceUnlisted') }}
<i v-if="scope.row.tags.includes('force_unlisted')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
:class="{ 'active-tag': scope.row.tags.includes('sandbox') }"
@click.native="toggleTag(scope.row, 'sandbox')">
{{ $t('users.sandbox') }}
<i v-if="scope.row.tags.includes('sandbox')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.local"
:class="{ 'active-tag': scope.row.tags.includes('disable_remote_subscription') }"
@click.native="toggleTag(scope.row, 'disable_remote_subscription')">
{{ $t('users.disableRemoteSubscription') }}
<i v-if="scope.row.tags.includes('disable_remote_subscription')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.local"
:class="{ 'active-tag': scope.row.tags.includes('disable_any_subscription') }"
@click.native="toggleTag(scope.row, 'disable_any_subscription')">
{{ $t('users.disableAnySubscription') }}
<i v-if="scope.row.tags.includes('disable_any_subscription')" class="el-icon-check"/>
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.local"
divided
@click.native="getPasswordResetToken(scope.row.nickname)">
{{ $t('users.getPasswordResetToken') }}
</el-dropdown-item>
<el-dropdown-item
v-if="scope.row.local"
@click.native="requirePasswordReset(scope.row.nickname)">
{{ $t('users.requirePasswordReset') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -191,13 +105,15 @@ import numeral from 'numeral'
import UsersFilter from './components/UsersFilter' import UsersFilter from './components/UsersFilter'
import MultipleUsersMenu from './components/MultipleUsersMenu' import MultipleUsersMenu from './components/MultipleUsersMenu'
import NewAccountDialog from './components/NewAccountDialog' import NewAccountDialog from './components/NewAccountDialog'
import ModerationDropdown from './components/ModerationDropdown'
export default { export default {
name: 'Users', name: 'Users',
components: { components: {
UsersFilter, NewAccountDialog,
ModerationDropdown,
MultipleUsersMenu, MultipleUsersMenu,
NewAccountDialog UsersFilter
}, },
data() { data() {
return { return {
@ -257,6 +173,10 @@ export default {
clearSelection() { clearSelection() {
this.$refs.usersTable.clearSelection() this.$refs.usersTable.clearSelection()
}, },
closeResetPasswordDialog() {
this.resetPasswordDialogOpen = false
this.$store.dispatch('RemovePasswordToken')
},
async createNewAccount(accountData) { async createNewAccount(accountData) {
await this.$store.dispatch('CreateNewAccount', accountData) await this.$store.dispatch('CreateNewAccount', accountData)
this.createAccountDialogOpen = false this.createAccountDialogOpen = false
@ -264,29 +184,6 @@ export default {
getFirstLetter(str) { getFirstLetter(str) {
return str.charAt(0).toUpperCase() return str.charAt(0).toUpperCase()
}, },
getPasswordResetToken(nickname) {
this.resetPasswordDialogOpen = true
this.$store.dispatch('GetPasswordResetToken', nickname)
},
requirePasswordReset(nickname) {
const mailerEnabled = this.$store.state.user.nodeInfo.metadata.mailerEnabled
if (!mailerEnabled) {
this.$alert(this.$t('users.mailerMustBeEnabled'), 'Error', { type: 'error' })
return
}
this.$store.dispatch('RequirePasswordReset', { nicknames: [nickname] })
},
toggleActivation(user) {
user.deactivated
? this.$store.dispatch('ActivateUsers', [user])
: this.$store.dispatch('DeactivateUsers', [user])
},
handleDeletion(user) {
this.$store.dispatch('DeleteUsers', [user])
},
handlePageChange(page) { handlePageChange(page) {
const searchQuery = this.$store.state.users.searchQuery const searchQuery = this.$store.state.users.searchQuery
if (searchQuery === '') { if (searchQuery === '') {
@ -298,31 +195,11 @@ export default {
handleSelectionChange(value) { handleSelectionChange(value) {
this.$data.selectedUsers = value this.$data.selectedUsers = value
}, },
closeResetPasswordDialog() { openResetPasswordDialog() {
this.resetPasswordDialogOpen = false this.resetPasswordDialogOpen = true
this.$store.dispatch('RemovePasswordToken')
},
showAdminAction({ local, id }) {
return local && this.showDeactivatedButton(id)
}, },
showDeactivatedButton(id) { showDeactivatedButton(id) {
return this.$store.state.user.id !== id return this.$store.state.user.id !== id
},
toggleTag(user, tag) {
user.tags.includes(tag)
? this.$store.dispatch('RemoveTag', { users: [user], tag })
: this.$store.dispatch('AddTag', { users: [user], tag })
},
toggleUserRight(user, right) {
user.roles[right]
? this.$store.dispatch('DeleteRight', { users: [user], right })
: this.$store.dispatch('AddRight', { users: [user], right })
},
handleEmailConfirmation(user) {
this.$store.dispatch('ConfirmUsersEmail', [user])
},
handleConfirmationResend(user) {
this.$store.dispatch('ResendConfirmationEmail', [user])
} }
} }
} }

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

@ -1,9 +1,28 @@
<template> <template>
<main v-if="!userProfileLoading"> <main v-if="!userProfileLoading">
<header> <header class="user-page-header">
<el-avatar :src="user.avatar" size="large" /> <div class="avatar-name-container">
<h1>{{ user.display_name }}</h1> <el-avatar :src="user.avatar" size="large" />
<h1>{{ user.display_name }}</h1>
</div>
<moderation-dropdown
:user="user"
:page="'userPage'"
@open-reset-token-dialog="openResetPasswordDialog"/>
</header> </header>
<el-dialog
v-loading="loading"
:visible.sync="resetPasswordDialogOpen"
:title="$t('users.passwordResetTokenCreated')"
custom-class="password-reset-token-dialog"
@close="closeResetPasswordDialog">
<div>
<p class="password-reset-token">Password reset token was generated: {{ passwordResetToken }}</p>
<p>You can also use this link to reset password:
<a :href="passwordResetLink" target="_blank" class="reset-password-link">{{ passwordResetLink }}</a>
</p>
</div>
</el-dialog>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-card class="user-profile-card"> <el-card class="user-profile-card">
@ -84,16 +103,27 @@
<script> <script>
import Status from '@/components/Status' import Status from '@/components/Status'
import ModerationDropdown from './components/ModerationDropdown'
export default { export default {
name: 'UsersShow', name: 'UsersShow',
components: { Status }, components: { ModerationDropdown, Status },
data() { data() {
return { return {
showPrivate: false showPrivate: false,
resetPasswordDialogOpen: false
} }
}, },
computed: { computed: {
loading() {
return this.$store.state.users.loading
},
passwordResetLink() {
return this.$store.state.users.passwordResetToken.link
},
passwordResetToken() {
return this.$store.state.users.passwordResetToken.token
},
statuses() { statuses() {
return this.$store.state.userProfile.statuses return this.$store.state.userProfile.statuses
}, },
@ -111,14 +141,25 @@ export default {
this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: false }) this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: false })
}, },
methods: { methods: {
closeResetPasswordDialog() {
this.resetPasswordDialogOpen = false
this.$store.dispatch('RemovePasswordToken')
},
onTogglePrivate() { onTogglePrivate() {
this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate }) this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate })
},
openResetPasswordDialog() {
this.resetPasswordDialogOpen = true
} }
} }
} }
</script> </script>
<style rel='stylesheet/scss' lang='scss' scoped> <style rel='stylesheet/scss' lang='scss' scoped>
.avatar-name-container {
display: flex;
align-items: center;
}
header { header {
align-items: center; align-items: center;
display: flex; display: flex;
@ -151,7 +192,6 @@ table {
.no-statuses { .no-statuses {
margin-left: 28px; margin-left: 28px;
color: #606266; color: #606266;
} }
.recent-statuses-header { .recent-statuses-header {
margin-top: 10px; margin-top: 10px;
@ -160,16 +200,24 @@ table {
padding: 0 20px 0 0; padding: 0 20px 0 0;
} }
.show-private { .show-private {
text-align: right; width: 200px;
text-align: left;
line-height: 67px; line-height: 67px;
padding-right: 20px; margin-right: 20px;
} }
.recent-statuses { .recent-statuses {
margin-left: 28px; margin-left: 28px;
} }
.user-page-header {
display: flex;
justify-content: space-between;
padding: 0 20px;
h1 {
display: inline
}
}
.user-profile-card { .user-profile-card {
margin-left: 15px; margin: 0 20px;
margin-right: 20px;
} }
.user-profile-table { .user-profile-table {
margin: 0; margin: 0;