X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Badmin%2Fusers%2Fuser-list%2Fuser-list.component.ts;h=86812f73d1b48126682129f42b13e113fb77038d;hb=66357162f8e1227495f09bd4f68446aad7071c6d;hp=9697ce202e4540e220334913f7509877cb0193c8;hpb=d466dece0a07555b91f01fa35fcc5dcfe79d9e12;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts index 9697ce202..86812f73d 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/users/user-list/user-list.component.ts @@ -1,14 +1,17 @@ +import { SortMeta } from 'primeng/api' import { Component, OnInit, ViewChild } from '@angular/core' -import { NotificationsService } from 'angular2-notifications' -import { SortMeta } from 'primeng/components/common/sortmeta' -import { ConfirmService } from '../../../core' -import { RestPagination, RestTable } from '../../../shared' -import { UserService } from '../shared' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { DropdownAction } from '@app/shared/buttons/action-dropdown.component' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' -import { UserBanModalComponent } from '@app/+admin/users/user-list/user-ban-modal.component' -import { User } from '../../../../../../shared' +import { ActivatedRoute, Params, Router } from '@angular/router' +import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core' +import { Actor, DropdownAction } from '@app/shared/shared-main' +import { UserBanModalComponent } from '@app/shared/shared-moderation' +import { ServerConfig, User, UserRole } from '@shared/models' + +type UserForList = User & { + rawVideoQuota: number + rawVideoQuotaUsed: number + rawVideoQuotaDaily: number + rawVideoQuotaUsedDaily: number +} @Component({ selector: 'my-user-list', @@ -16,125 +19,247 @@ import { User } from '../../../../../../shared' styleUrls: [ './user-list.component.scss' ] }) export class UserListComponent extends RestTable implements OnInit { - @ViewChild('userBanModal') userBanModal: UserBanModalComponent + @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent users: User[] = [] totalRecords = 0 - rowsPerPage = 10 sort: SortMeta = { field: 'createdAt', order: 1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } - userActions: DropdownAction[] = [] + highlightBannedUsers = false - private userToBan: User - private openedModal: NgbModalRef + selectedUsers: User[] = [] + bulkUserActions: DropdownAction[][] = [] + columns: { id: string, label: string }[] + + private _selectedColumns: string[] + private serverConfig: ServerConfig constructor ( - private notificationsService: NotificationsService, + private notifier: Notifier, private confirmService: ConfirmService, + private serverService: ServerService, private userService: UserService, - private i18n: I18n - ) { + private auth: AuthService, + private route: ActivatedRoute, + private router: Router + ) { super() + } - this.userActions = [ - { - label: this.i18n('Edit'), - linkBuilder: this.getRouterUserEditLink - }, - { - label: this.i18n('Delete'), - handler: user => this.removeUser(user) - }, - { - label: this.i18n('Ban'), - handler: user => this.openBanUserModal(user), - isDisplayed: user => !user.blocked - }, - { - label: this.i18n('Unban'), - handler: user => this.unbanUser(user), - isDisplayed: user => user.blocked - } - ] + get authUser () { + return this.auth.getUser() + } + + get requiresEmailVerification () { + return this.serverConfig.signup.requiresEmailVerification + } + + get selectedColumns () { + return this._selectedColumns + } + + set selectedColumns (val: string[]) { + this._selectedColumns = val } ngOnInit () { - this.loadSort() + this.serverConfig = this.serverService.getTmpConfig() + this.serverService.getConfig() + .subscribe(config => this.serverConfig = config) + + this.initialize() + + this.route.queryParams + .subscribe(params => { + this.search = params.search || '' + + this.setTableFilter(this.search) + this.loadData() + }) + + this.bulkUserActions = [ + [ + { + label: $localize`Delete`, + description: $localize`Videos will be deleted, comments will be tombstoned.`, + handler: users => this.removeUsers(users), + isDisplayed: users => users.every(u => this.authUser.canManage(u)) + }, + { + label: $localize`Ban`, + description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`, + handler: users => this.openBanUserModal(users), + isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false) + }, + { + label: $localize`Unban`, + handler: users => this.unbanUsers(users), + isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true) + } + ], + [ + { + label: $localize`Set Email as Verified`, + handler: users => this.setEmailsAsVerified(users), + isDisplayed: users => { + return this.requiresEmailVerification && + users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false) + } + } + ] + ] + + this.columns = [ + { id: 'username', label: 'Username' }, + { id: 'email', label: 'Email' }, + { id: 'quota', label: 'Video quota' }, + { id: 'role', label: 'Role' }, + { id: 'createdAt', label: 'Created' } + ] + + this.selectedColumns = this.columns.map(c => c.id) + + this.columns.push({ id: 'quotaDaily', label: 'Daily quota' }) + this.columns.push({ id: 'pluginAuth', label: 'Auth plugin' }) + this.columns.push({ id: 'lastLoginDate', label: 'Last login' }) } - hideBanUserModal () { - this.userToBan = undefined - this.openedModal.close() + getIdentifier () { + return 'UserListComponent' } - openBanUserModal (user: User) { - if (user.username === 'root') { - this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.')) - return + getRoleClass (role: UserRole) { + switch (role) { + case UserRole.ADMINISTRATOR: + return 'badge-purple' + case UserRole.MODERATOR: + return 'badge-blue' + default: + return 'badge-yellow' } + } + + isSelected (id: string) { + return this.selectedColumns.find(c => c === id) + } + + getColumn (id: string) { + return this.columns.find(c => c.id === id) + } - this.userBanModal.openModal(user) + getUserVideoQuotaPercentage (user: UserForList) { + return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota } - onUserBanned () { + getUserVideoQuotaDailyPercentage (user: UserForList) { + return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily + } + + openBanUserModal (users: User[]) { + for (const user of users) { + if (user.username === 'root') { + this.notifier.error($localize`You cannot ban root.`) + return + } + } + + this.userBanModal.openModal(users) + } + + onUserChanged () { this.loadData() } - async unbanUser (user: User) { - const message = this.i18n('Do you really want to unban {{username}}?', { username: user.username }) - const res = await this.confirmService.confirm(message, this.i18n('Unban')) + /* Table filter functions */ + onUserSearch (event: Event) { + this.onSearch(event) + this.setQueryParams((event.target as HTMLInputElement).value) + } + + setQueryParams (search: string) { + const queryParams: Params = {} + if (search) Object.assign(queryParams, { search }) + + this.router.navigate([ '/admin/users/list' ], { queryParams }) + } + + resetTableFilter () { + this.setTableFilter('') + this.setQueryParams('') + this.resetSearch() + } + /* END Table filter functions */ + + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } + + async unbanUsers (users: User[]) { + const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`) if (res === false) return - this.userService.unbanUser(user) - .subscribe( - () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} unbanned.', { username: user.username }) - ) - this.loadData() - }, + this.userService.unbanUsers(users) + .subscribe( + () => { + this.notifier.success($localize`${users.length} users unbanned.`) + this.loadData() + }, - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + err => this.notifier.error(err.message) + ) } - async removeUser (user: User) { - if (user.username === 'root') { - this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.')) - return + async removeUsers (users: User[]) { + for (const user of users) { + if (user.username === 'root') { + this.notifier.error($localize`You cannot delete root.`) + return + } } - const message = this.i18n('If you remove this user, you will not be able to create another with the same username!') - const res = await this.confirmService.confirm(message, this.i18n('Delete')) + const message = $localize`If you remove these users, you will not be able to create others with the same username!` + const res = await this.confirmService.confirm(message, $localize`Delete`) if (res === false) return - this.userService.removeUser(user).subscribe( + this.userService.removeUser(users).subscribe( () => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('User {{username}} deleted.', { username: user.username }) - ) + this.notifier.success($localize`${users.length} users deleted.`) this.loadData() }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } - getRouterUserEditLink (user: User) { - return [ '/admin', 'users', 'update', user.id ] + async setEmailsAsVerified (users: User[]) { + this.userService.updateUsers(users, { emailVerified: true }).subscribe( + () => { + this.notifier.success($localize`${users.length} users email set as verified.`) + this.loadData() + }, + + err => this.notifier.error(err.message) + ) + } + + isInSelectionMode () { + return this.selectedUsers.length !== 0 } protected loadData () { - this.userService.getUsers(this.pagination, this.sort) - .subscribe( - resultList => { - this.users = resultList.data - this.totalRecords = resultList.total - }, - - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + this.selectedUsers = [] + + this.userService.getUsers({ + pagination: this.pagination, + sort: this.sort, + search: this.search + }).subscribe( + resultList => { + this.users = resultList.data + this.totalRecords = resultList.total + }, + + err => this.notifier.error(err.message) + ) } }