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