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