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

   1 import { SortMeta } from 'primeng/api'
   2 import { AfterViewInit, 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 { ServerConfig, 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, AfterViewInit {
  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   private _selectedColumns: string[]
  45   private serverConfig: ServerConfig
  46
  47   constructor (
  48     protected route: ActivatedRoute,
  49     protected router: Router,
  50     private notifier: Notifier,
  51     private confirmService: ConfirmService,
  52     private serverService: ServerService,
  53     private auth: AuthService,
  54     private userService: UserService
  55   ) {
  56     super()
  57   }
  58
  59   get authUser () {
  60     return this.auth.getUser()
  61   }
  62
  63   get requiresEmailVerification () {
  64     return this.serverConfig.signup.requiresEmailVerification
  65   }
  66
  67   get selectedColumns () {
  68     return this._selectedColumns
  69   }
  70
  71   set selectedColumns (val: string[]) {
  72     this._selectedColumns = val
  73   }
  74
  75   ngOnInit () {
  76     this.serverConfig = this.serverService.getTmpConfig()
  77     this.serverService.getConfig()
  78         .subscribe(config => this.serverConfig = config)
  79
  80     this.initialize()
  81     this.listenToSearchChange()
  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: 'Username' },
 117       { id: 'email', label: 'Email' },
 118       { id: 'quota', label: 'Video quota' },
 119       { id: 'role', label: 'Role' },
 120       { id: 'createdAt', label: 'Created' }
 121     ]
 122
 123     this.selectedColumns = this.columns.map(c => c.id)
 124
 125     this.columns.push({ id: 'quotaDaily', label: 'Daily quota' })
 126     this.columns.push({ id: 'pluginAuth', label: 'Auth plugin' })
 127     this.columns.push({ id: 'lastLoginDate', label: 'Last login' })
 128   }
 129
 130   ngAfterViewInit () {
 131     if (this.search) this.setTableFilter(this.search, false)
 132   }
 133
 134   getIdentifier () {
 135     return 'UserListComponent'
 136   }
 137
 138   getRoleClass (role: UserRole) {
 139     switch (role) {
 140       case UserRole.ADMINISTRATOR:
 141         return 'badge-purple'
 142       case UserRole.MODERATOR:
 143         return 'badge-blue'
 144       default:
 145         return 'badge-yellow'
 146     }
 147   }
 148
 149   isSelected (id: string) {
 150     return this.selectedColumns.find(c => c === id)
 151   }
 152
 153   getColumn (id: string) {
 154     return this.columns.find(c => c.id === id)
 155   }
 156
 157   getUserVideoQuotaPercentage (user: UserForList) {
 158     return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota
 159   }
 160
 161   getUserVideoQuotaDailyPercentage (user: UserForList) {
 162     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
 163   }
 164
 165   openBanUserModal (users: User[]) {
 166     for (const user of users) {
 167       if (user.username === 'root') {
 168         this.notifier.error($localize`You cannot ban root.`)
 169         return
 170       }
 171     }
 172
 173     this.userBanModal.openModal(users)
 174   }
 175
 176   onUserChanged () {
 177     this.loadData()
 178   }
 179
 180   async unbanUsers (users: User[]) {
 181     const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
 182     if (res === false) return
 183
 184     this.userService.unbanUsers(users)
 185         .subscribe(
 186           () => {
 187             this.notifier.success($localize`${users.length} users unbanned.`)
 188             this.loadData()
 189           },
 190
 191           err => this.notifier.error(err.message)
 192         )
 193   }
 194
 195   async removeUsers (users: User[]) {
 196     for (const user of users) {
 197       if (user.username === 'root') {
 198         this.notifier.error($localize`You cannot delete root.`)
 199         return
 200       }
 201     }
 202
 203     const message = $localize`If you remove these users, you will not be able to create others with the same username!`
 204     const res = await this.confirmService.confirm(message, $localize`Delete`)
 205     if (res === false) return
 206
 207     this.userService.removeUser(users).subscribe(
 208       () => {
 209         this.notifier.success($localize`${users.length} users deleted.`)
 210         this.loadData()
 211       },
 212
 213       err => this.notifier.error(err.message)
 214     )
 215   }
 216
 217   async setEmailsAsVerified (users: User[]) {
 218     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
 219       () => {
 220         this.notifier.success($localize`${users.length} users email set as verified.`)
 221         this.loadData()
 222       },
 223
 224       err => this.notifier.error(err.message)
 225     )
 226   }
 227
 228   isInSelectionMode () {
 229     return this.selectedUsers.length !== 0
 230   }
 231
 232   protected loadData () {
 233     this.selectedUsers = []
 234
 235     this.userService.getUsers({
 236       pagination: this.pagination,
 237       sort: this.sort,
 238       search: this.search
 239     }).subscribe(
 240       resultList => {
 241         this.users = resultList.data
 242         this.totalRecords = resultList.total
 243       },
 244
 245       err => this.notifier.error(err.message)
 246     )
 247   }
 248 }