client/src/app/+admin/users/user-list/user-list.component.ts

   1 import { SortMeta } from 'primeng/api'
   2 import { Component, OnInit, ViewChild } from '@angular/core'
   3 import { ActivatedRoute, Params, Router } from '@angular/router'
   4 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
   5 import { Account, DropdownAction } from '@app/shared/shared-main'
   6 import { UserBanModalComponent } from '@app/shared/shared-moderation'
   7 import { ServerConfig, User, UserRole } from '@shared/models'
   8
   9 type UserForList = User & {
  10   rawVideoQuota: number
  11   rawVideoQuotaUsed: number
  12   rawVideoQuotaDaily: number
  13   rawVideoQuotaUsedDaily: number
  14 }
  15
  16 @Component({
  17   selector: 'my-user-list',
  18   templateUrl: './user-list.component.html',
  19   styleUrls: [ './user-list.component.scss' ]
  20 })
  21 export class UserListComponent extends RestTable implements OnInit {
  22   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
  23
  24   users: User[] = []
  25   totalRecords = 0
  26   sort: SortMeta = { field: 'createdAt', order: 1 }
  27   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  28   highlightBannedUsers = false
  29
  30   selectedUsers: User[] = []
  31   bulkUserActions: DropdownAction<User[]>[][] = []
  32   columns: { id: string, label: string }[]
  33
  34   private _selectedColumns: string[]
  35   private serverConfig: ServerConfig
  36
  37   constructor (
  38     protected route: ActivatedRoute,
  39     protected router: Router,
  40     private notifier: Notifier,
  41     private confirmService: ConfirmService,
  42     private serverService: ServerService,
  43     private auth: AuthService,
  44     private userService: UserService
  45   ) {
  46     super()
  47   }
  48
  49   get authUser () {
  50     return this.auth.getUser()
  51   }
  52
  53   get requiresEmailVerification () {
  54     return this.serverConfig.signup.requiresEmailVerification
  55   }
  56
  57   get selectedColumns () {
  58     return this._selectedColumns
  59   }
  60
  61   set selectedColumns (val: string[]) {
  62     this._selectedColumns = val
  63   }
  64
  65   ngOnInit () {
  66     this.serverConfig = this.serverService.getTmpConfig()
  67     this.serverService.getConfig()
  68         .subscribe(config => this.serverConfig = config)
  69
  70     this.initialize()
  71     this.listenToSearchChange()
  72
  73     this.bulkUserActions = [
  74       [
  75         {
  76           label: $localize`Delete`,
  77           description: $localize`Videos will be deleted, comments will be tombstoned.`,
  78           handler: users => this.removeUsers(users),
  79           isDisplayed: users => users.every(u => this.authUser.canManage(u))
  80         },
  81         {
  82           label: $localize`Ban`,
  83           description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`,
  84           handler: users => this.openBanUserModal(users),
  85           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
  86         },
  87         {
  88           label: $localize`Unban`,
  89           handler: users => this.unbanUsers(users),
  90           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
  91         }
  92       ],
  93       [
  94         {
  95           label: $localize`Set Email as Verified`,
  96           handler: users => this.setEmailsAsVerified(users),
  97           isDisplayed: users => {
  98             return this.requiresEmailVerification &&
  99               users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
 100           }
 101         }
 102       ]
 103     ]
 104
 105     this.columns = [
 106       { id: 'username', label: 'Username' },
 107       { id: 'email', label: 'Email' },
 108       { id: 'quota', label: 'Video quota' },
 109       { id: 'role', label: 'Role' },
 110       { id: 'createdAt', label: 'Created' }
 111     ]
 112
 113     this.selectedColumns = this.columns.map(c => c.id)
 114
 115     this.columns.push({ id: 'quotaDaily', label: 'Daily quota' })
 116     this.columns.push({ id: 'pluginAuth', label: 'Auth plugin' })
 117     this.columns.push({ id: 'lastLoginDate', label: 'Last login' })
 118   }
 119
 120   getIdentifier () {
 121     return 'UserListComponent'
 122   }
 123
 124   getRoleClass (role: UserRole) {
 125     switch (role) {
 126       case UserRole.ADMINISTRATOR:
 127         return 'badge-purple'
 128       case UserRole.MODERATOR:
 129         return 'badge-blue'
 130       default:
 131         return 'badge-yellow'
 132     }
 133   }
 134
 135   isSelected (id: string) {
 136     return this.selectedColumns.find(c => c === id)
 137   }
 138
 139   getColumn (id: string) {
 140     return this.columns.find(c => c.id === id)
 141   }
 142
 143   getUserVideoQuotaPercentage (user: UserForList) {
 144     return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota
 145   }
 146
 147   getUserVideoQuotaDailyPercentage (user: UserForList) {
 148     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
 149   }
 150
 151   openBanUserModal (users: User[]) {
 152     for (const user of users) {
 153       if (user.username === 'root') {
 154         this.notifier.error($localize`You cannot ban root.`)
 155         return
 156       }
 157     }
 158
 159     this.userBanModal.openModal(users)
 160   }
 161
 162   onUserChanged () {
 163     this.loadData()
 164   }
 165
 166   async unbanUsers (users: User[]) {
 167     const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
 168     if (res === false) return
 169
 170     this.userService.unbanUsers(users)
 171         .subscribe(
 172           () => {
 173             this.notifier.success($localize`${users.length} users unbanned.`)
 174             this.loadData()
 175           },
 176
 177           err => this.notifier.error(err.message)
 178         )
 179   }
 180
 181   async removeUsers (users: User[]) {
 182     for (const user of users) {
 183       if (user.username === 'root') {
 184         this.notifier.error($localize`You cannot delete root.`)
 185         return
 186       }
 187     }
 188
 189     const message = $localize`If you remove these users, you will not be able to create others with the same username!`
 190     const res = await this.confirmService.confirm(message, $localize`Delete`)
 191     if (res === false) return
 192
 193     this.userService.removeUser(users).subscribe(
 194       () => {
 195         this.notifier.success($localize`${users.length} users deleted.`)
 196         this.loadData()
 197       },
 198
 199       err => this.notifier.error(err.message)
 200     )
 201   }
 202
 203   async setEmailsAsVerified (users: User[]) {
 204     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
 205       () => {
 206         this.notifier.success($localize`${users.length} users email set as verified.`)
 207         this.loadData()
 208       },
 209
 210       err => this.notifier.error(err.message)
 211     )
 212   }
 213
 214   isInSelectionMode () {
 215     return this.selectedUsers.length !== 0
 216   }
 217
 218   protected loadData () {
 219     this.selectedUsers = []
 220
 221     this.userService.getUsers({
 222       pagination: this.pagination,
 223       sort: this.sort,
 224       search: this.search
 225     }).subscribe(
 226       resultList => {
 227         this.users = resultList.data
 228         this.totalRecords = resultList.total
 229       },
 230
 231       err => this.notifier.error(err.message)
 232     )
 233   }
 234 }