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 { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
   4 import { Actor, DropdownAction } from '@app/shared/shared-main'
   5 import { UserBanModalComponent } from '@app/shared/shared-moderation'
   6 import { I18n } from '@ngx-translate/i18n-polyfill'
   7 import { ServerConfig, User, UserRole } from '@shared/models'
   8 import { Params, Router, ActivatedRoute } from '@angular/router'
   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   totalRecords = 0
  27   sort: SortMeta = { field: 'createdAt', order: 1 }
  28   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  29   highlightBannedUsers = false
  30
  31   selectedUsers: User[] = []
  32   bulkUserActions: DropdownAction<User[]>[][] = []
  33   columns: { id: string, label: string }[]
  34
  35   private _selectedColumns: string[]
  36   private serverConfig: ServerConfig
  37
  38   constructor (
  39     private notifier: Notifier,
  40     private confirmService: ConfirmService,
  41     private serverService: ServerService,
  42     private userService: UserService,
  43     private auth: AuthService,
  44     private route: ActivatedRoute,
  45     private router: Router,
  46     private i18n: I18n
  47   ) {
  48     super()
  49   }
  50
  51   get authUser () {
  52     return this.auth.getUser()
  53   }
  54
  55   get requiresEmailVerification () {
  56     return this.serverConfig.signup.requiresEmailVerification
  57   }
  58
  59   get selectedColumns () {
  60     return this._selectedColumns
  61   }
  62
  63   set selectedColumns (val: string[]) {
  64     this._selectedColumns = val
  65   }
  66
  67   ngOnInit () {
  68     this.serverConfig = this.serverService.getTmpConfig()
  69     this.serverService.getConfig()
  70         .subscribe(config => this.serverConfig = config)
  71
  72     this.initialize()
  73
  74     this.route.queryParams
  75       .subscribe(params => {
  76         this.search = params.search || ''
  77
  78         this.setTableFilter(this.search)
  79         this.loadData()
  80       })
  81
  82     this.bulkUserActions = [
  83       [
  84         {
  85           label: this.i18n('Delete'),
  86           description: this.i18n('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: this.i18n('Ban'),
  92           description: this.i18n('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: this.i18n('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: this.i18n('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(this.i18n('You cannot ban root.'))
 164         return
 165       }
 166     }
 167
 168     this.userBanModal.openModal(users)
 169   }
 170
 171   onUserChanged () {
 172     this.loadData()
 173   }
 174
 175   /* Table filter functions */
 176   onUserSearch (event: Event) {
 177     this.onSearch(event)
 178     this.setQueryParams((event.target as HTMLInputElement).value)
 179   }
 180
 181   setQueryParams (search: string) {
 182     const queryParams: Params = {}
 183     if (search) Object.assign(queryParams, { search })
 184
 185     this.router.navigate([ '/admin/users/list' ], { queryParams })
 186   }
 187
 188   resetTableFilter () {
 189     this.setTableFilter('')
 190     this.setQueryParams('')
 191     this.resetSearch()
 192   }
 193   /* END Table filter functions */
 194
 195   switchToDefaultAvatar ($event: Event) {
 196     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 197   }
 198
 199   async unbanUsers (users: User[]) {
 200     const message = this.i18n('Do you really want to unban {{num}} users?', { num: users.length })
 201
 202     const res = await this.confirmService.confirm(message, this.i18n('Unban'))
 203     if (res === false) return
 204
 205     this.userService.unbanUsers(users)
 206         .subscribe(
 207           () => {
 208             const message = this.i18n('{{num}} users unbanned.', { num: users.length })
 209
 210             this.notifier.success(message)
 211             this.loadData()
 212           },
 213
 214           err => this.notifier.error(err.message)
 215         )
 216   }
 217
 218   async removeUsers (users: User[]) {
 219     for (const user of users) {
 220       if (user.username === 'root') {
 221         this.notifier.error(this.i18n('You cannot delete root.'))
 222         return
 223       }
 224     }
 225
 226     const message = this.i18n('If you remove these users, you will not be able to create others with the same username!')
 227     const res = await this.confirmService.confirm(message, this.i18n('Delete'))
 228     if (res === false) return
 229
 230     this.userService.removeUser(users).subscribe(
 231       () => {
 232         this.notifier.success(this.i18n('{{num}} users deleted.', { num: users.length }))
 233         this.loadData()
 234       },
 235
 236       err => this.notifier.error(err.message)
 237     )
 238   }
 239
 240   async setEmailsAsVerified (users: User[]) {
 241     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
 242       () => {
 243         this.notifier.success(this.i18n('{{num}} users email set as verified.', { num: users.length }))
 244         this.loadData()
 245       },
 246
 247       err => this.notifier.error(err.message)
 248     )
 249   }
 250
 251   isInSelectionMode () {
 252     return this.selectedUsers.length !== 0
 253   }
 254
 255   protected loadData () {
 256     this.selectedUsers = []
 257
 258     this.userService.getUsers({
 259       pagination: this.pagination,
 260       sort: this.sort,
 261       search: this.search
 262     }).subscribe(
 263       resultList => {
 264         this.users = resultList.data
 265         this.totalRecords = resultList.total
 266       },
 267
 268       err => this.notifier.error(err.message)
 269     )
 270   }
 271 }