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