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 { Actor, 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     private notifier: Notifier,
  39     private confirmService: ConfirmService,
  40     private serverService: ServerService,
  41     private userService: UserService,
  42     private auth: AuthService,
  43     private route: ActivatedRoute,
  44     private router: Router
  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
  72     this.route.queryParams
  73       .subscribe(params => {
  74         this.search = params.search || ''
  75
  76         this.setTableFilter(this.search)
  77         this.loadData()
  78       })
  79
  80     this.bulkUserActions = [
  81       [
  82         {
  83           label: $localize`Delete`,
  84           description: $localize`Videos will be deleted, comments will be tombstoned.`,
  85           handler: users => this.removeUsers(users),
  86           isDisplayed: users => users.every(u => this.authUser.canManage(u))
  87         },
  88         {
  89           label: $localize`Ban`,
  90           description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`,
  91           handler: users => this.openBanUserModal(users),
  92           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
  93         },
  94         {
  95           label: $localize`Unban`,
  96           handler: users => this.unbanUsers(users),
  97           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
  98         }
  99       ],
 100       [
 101         {
 102           label: $localize`Set Email as Verified`,
 103           handler: users => this.setEmailsAsVerified(users),
 104           isDisplayed: users => {
 105             return this.requiresEmailVerification &&
 106               users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
 107           }
 108         }
 109       ]
 110     ]
 111
 112     this.columns = [
 113       { id: 'username', label: 'Username' },
 114       { id: 'email', label: 'Email' },
 115       { id: 'quota', label: 'Video quota' },
 116       { id: 'role', label: 'Role' },
 117       { id: 'createdAt', label: 'Created' }
 118     ]
 119
 120     this.selectedColumns = this.columns.map(c => c.id)
 121
 122     this.columns.push({ id: 'quotaDaily', label: 'Daily quota' })
 123     this.columns.push({ id: 'pluginAuth', label: 'Auth plugin' })
 124     this.columns.push({ id: 'lastLoginDate', label: 'Last login' })
 125   }
 126
 127   getIdentifier () {
 128     return 'UserListComponent'
 129   }
 130
 131   getRoleClass (role: UserRole) {
 132     switch (role) {
 133       case UserRole.ADMINISTRATOR:
 134         return 'badge-purple'
 135       case UserRole.MODERATOR:
 136         return 'badge-blue'
 137       default:
 138         return 'badge-yellow'
 139     }
 140   }
 141
 142   isSelected (id: string) {
 143     return this.selectedColumns.find(c => c === id)
 144   }
 145
 146   getColumn (id: string) {
 147     return this.columns.find(c => c.id === id)
 148   }
 149
 150   getUserVideoQuotaPercentage (user: UserForList) {
 151     return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota
 152   }
 153
 154   getUserVideoQuotaDailyPercentage (user: UserForList) {
 155     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
 156   }
 157
 158   openBanUserModal (users: User[]) {
 159     for (const user of users) {
 160       if (user.username === 'root') {
 161         this.notifier.error($localize`You cannot ban root.`)
 162         return
 163       }
 164     }
 165
 166     this.userBanModal.openModal(users)
 167   }
 168
 169   onUserChanged () {
 170     this.loadData()
 171   }
 172
 173   /* Table filter functions */
 174   onUserSearch (event: Event) {
 175     this.onSearch(event)
 176     this.setQueryParams((event.target as HTMLInputElement).value)
 177   }
 178
 179   setQueryParams (search: string) {
 180     const queryParams: Params = {}
 181     if (search) Object.assign(queryParams, { search })
 182
 183     this.router.navigate([ '/admin/users/list' ], { queryParams })
 184   }
 185
 186   resetTableFilter () {
 187     this.setTableFilter('')
 188     this.setQueryParams('')
 189     this.resetSearch()
 190   }
 191   /* END Table filter functions */
 192
 193   switchToDefaultAvatar ($event: Event) {
 194     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 195   }
 196
 197   async unbanUsers (users: User[]) {
 198     const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
 199     if (res === false) return
 200
 201     this.userService.unbanUsers(users)
 202         .subscribe(
 203           () => {
 204             this.notifier.success($localize`${users.length} users unbanned.`)
 205             this.loadData()
 206           },
 207
 208           err => this.notifier.error(err.message)
 209         )
 210   }
 211
 212   async removeUsers (users: User[]) {
 213     for (const user of users) {
 214       if (user.username === 'root') {
 215         this.notifier.error($localize`You cannot delete root.`)
 216         return
 217       }
 218     }
 219
 220     const message = $localize`If you remove these users, you will not be able to create others with the same username!`
 221     const res = await this.confirmService.confirm(message, $localize`Delete`)
 222     if (res === false) return
 223
 224     this.userService.removeUser(users).subscribe(
 225       () => {
 226         this.notifier.success($localize`${users.length} users deleted.`)
 227         this.loadData()
 228       },
 229
 230       err => this.notifier.error(err.message)
 231     )
 232   }
 233
 234   async setEmailsAsVerified (users: User[]) {
 235     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
 236       () => {
 237         this.notifier.success($localize`${users.length} users email set as verified.`)
 238         this.loadData()
 239       },
 240
 241       err => this.notifier.error(err.message)
 242     )
 243   }
 244
 245   isInSelectionMode () {
 246     return this.selectedUsers.length !== 0
 247   }
 248
 249   protected loadData () {
 250     this.selectedUsers = []
 251
 252     this.userService.getUsers({
 253       pagination: this.pagination,
 254       sort: this.sort,
 255       search: this.search
 256     }).subscribe(
 257       resultList => {
 258         this.users = resultList.data
 259         this.totalRecords = resultList.total
 260       },
 261
 262       err => this.notifier.error(err.message)
 263     )
 264   }
 265 }