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, LocalStorageService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
   5 import { prepareIcu, getAPIHost } from '@app/helpers'
   6 import { AdvancedInputFilter } from '@app/shared/shared-forms'
   7 import { Actor, DropdownAction } from '@app/shared/shared-main'
   8 import { AccountMutedStatus, BlocklistService, UserBanModalComponent, UserModerationDisplayType } from '@app/shared/shared-moderation'
   9 import { UserAdminService } from '@app/shared/shared-users'
  10 import { User, UserRole } from '@shared/models'
  11
  12 type UserForList = User & {
  13   rawVideoQuota: number
  14   rawVideoQuotaUsed: number
  15   rawVideoQuotaDaily: number
  16   rawVideoQuotaUsedDaily: number
  17 }
  18
  19 @Component({
  20   selector: 'my-user-list',
  21   templateUrl: './user-list.component.html',
  22   styleUrls: [ './user-list.component.scss' ]
  23 })
  24 export class UserListComponent extends RestTable implements OnInit {
  25   private static readonly LOCAL_STORAGE_SELECTED_COLUMNS_KEY = 'admin-user-list-selected-columns'
  26
  27   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
  28
  29   users: (User & { accountMutedStatus: AccountMutedStatus })[] = []
  30
  31   totalRecords = 0
  32   sort: SortMeta = { field: 'createdAt', order: 1 }
  33   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  34
  35   highlightBannedUsers = false
  36
  37   selectedUsers: User[] = []
  38   bulkUserActions: DropdownAction<User[]>[][] = []
  39   columns: { id: string, label: string }[]
  40
  41   inputFilters: AdvancedInputFilter[] = [
  42     {
  43       title: $localize`Advanced filters`,
  44       children: [
  45         {
  46           value: 'banned:true',
  47           label: $localize`Banned users`
  48         }
  49       ]
  50     }
  51   ]
  52
  53   userModerationDisplayOptions: UserModerationDisplayType = {
  54     instanceAccount: true,
  55     instanceUser: true,
  56     myAccount: false
  57   }
  58
  59   requiresEmailVerification = false
  60
  61   private _selectedColumns: string[] = []
  62
  63   constructor (
  64     protected route: ActivatedRoute,
  65     protected router: Router,
  66     private notifier: Notifier,
  67     private confirmService: ConfirmService,
  68     private serverService: ServerService,
  69     private auth: AuthService,
  70     private blocklist: BlocklistService,
  71     private userAdminService: UserAdminService,
  72     private peertubeLocalStorage: LocalStorageService
  73   ) {
  74     super()
  75   }
  76
  77   get authUser () {
  78     return this.auth.getUser()
  79   }
  80
  81   get selectedColumns () {
  82     return this._selectedColumns || []
  83   }
  84
  85   set selectedColumns (val: string[]) {
  86     this._selectedColumns = val
  87
  88     this.saveSelectedColumns()
  89   }
  90
  91   ngOnInit () {
  92     this.serverService.getConfig()
  93         .subscribe(config => this.requiresEmailVerification = config.signup.requiresEmailVerification)
  94
  95     this.initialize()
  96
  97     this.bulkUserActions = [
  98       [
  99         {
 100           label: $localize`Delete`,
 101           description: $localize`Videos will be deleted, comments will be tombstoned.`,
 102           handler: users => this.removeUsers(users),
 103           isDisplayed: users => users.every(u => this.authUser.canManage(u))
 104         },
 105         {
 106           label: $localize`Ban`,
 107           description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`,
 108           handler: users => this.openBanUserModal(users),
 109           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
 110         },
 111         {
 112           label: $localize`Unban`,
 113           handler: users => this.unbanUsers(users),
 114           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
 115         }
 116       ],
 117       [
 118         {
 119           label: $localize`Set Email as Verified`,
 120           handler: users => this.setEmailsAsVerified(users),
 121           isDisplayed: users => {
 122             return this.requiresEmailVerification &&
 123               users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
 124           }
 125         }
 126       ]
 127     ]
 128
 129     this.columns = [
 130       { id: 'username', label: $localize`Username` },
 131       { id: 'role', label: $localize`Role` },
 132       { id: 'email', label: $localize`Email` },
 133       { id: 'quota', label: $localize`Video quota` },
 134       { id: 'createdAt', label: $localize`Created` },
 135       { id: 'lastLoginDate', label: $localize`Last login` },
 136
 137       { id: 'quotaDaily', label: $localize`Daily quota` },
 138       { id: 'pluginAuth', label: $localize`Auth plugin` }
 139     ]
 140
 141     this.loadSelectedColumns()
 142   }
 143
 144   loadSelectedColumns () {
 145     const result = this.peertubeLocalStorage.getItem(UserListComponent.LOCAL_STORAGE_SELECTED_COLUMNS_KEY)
 146
 147     if (result) {
 148       try {
 149         this.selectedColumns = JSON.parse(result)
 150         return
 151       } catch (err) {
 152         console.error('Cannot load selected columns.', err)
 153       }
 154     }
 155
 156     // Default behaviour
 157     this.selectedColumns = [ 'username', 'role', 'email', 'quota', 'createdAt', 'lastLoginDate' ]
 158     return
 159   }
 160
 161   saveSelectedColumns () {
 162     this.peertubeLocalStorage.setItem(UserListComponent.LOCAL_STORAGE_SELECTED_COLUMNS_KEY, JSON.stringify(this.selectedColumns))
 163   }
 164
 165   getIdentifier () {
 166     return 'UserListComponent'
 167   }
 168
 169   getRoleClass (role: UserRole) {
 170     switch (role) {
 171       case UserRole.ADMINISTRATOR:
 172         return 'badge-purple'
 173       case UserRole.MODERATOR:
 174         return 'badge-blue'
 175       default:
 176         return 'badge-yellow'
 177     }
 178   }
 179
 180   isSelected (id: string) {
 181     return this.selectedColumns.find(c => c === id)
 182   }
 183
 184   getColumn (id: string) {
 185     return this.columns.find(c => c.id === id)
 186   }
 187
 188   getUserVideoQuotaPercentage (user: UserForList) {
 189     return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota
 190   }
 191
 192   getUserVideoQuotaDailyPercentage (user: UserForList) {
 193     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
 194   }
 195
 196   openBanUserModal (users: User[]) {
 197     for (const user of users) {
 198       if (user.username === 'root') {
 199         this.notifier.error($localize`You cannot ban root.`)
 200         return
 201       }
 202     }
 203
 204     this.userBanModal.openModal(users)
 205   }
 206
 207   onUserChanged () {
 208     this.reloadData()
 209   }
 210
 211   async unbanUsers (users: User[]) {
 212     const res = await this.confirmService.confirm(
 213       prepareIcu($localize`Do you really want to unban {count, plural, =1 {1 user} other {{count} users}}?`)(
 214         { count: users.length },
 215         $localize`Do you really want to unban ${users.length} users?`
 216       ),
 217       $localize`Unban`
 218     )
 219
 220     if (res === false) return
 221
 222     this.userAdminService.unbanUsers(users)
 223         .subscribe({
 224           next: () => {
 225             this.notifier.success(
 226               prepareIcu($localize`{count, plural, =1 {1 user} other {{count} users}} unbanned.`)(
 227                 { count: users.length },
 228                 $localize`${users.length} users unbanned.`
 229               )
 230             )
 231             this.reloadData()
 232           },
 233
 234           error: err => this.notifier.error(err.message)
 235         })
 236   }
 237
 238   async removeUsers (users: User[]) {
 239     if (users.some(u => u.username === 'root')) {
 240       this.notifier.error($localize`You cannot delete root.`)
 241       return
 242     }
 243
 244     const message = $localize`<p>You can't create users or channels with a username that already used by a deleted user/channel.</p>` +
 245       $localize`It means the following usernames will be permanently deleted and cannot be recovered:` +
 246       '<ul>' + users.map(u => '<li>' + u.username + '</li>').join('') + '</ul>'
 247
 248     const res = await this.confirmService.confirm(message, $localize`Delete`)
 249     if (res === false) return
 250
 251     this.userAdminService.removeUser(users)
 252       .subscribe({
 253         next: () => {
 254           this.notifier.success(
 255             prepareIcu($localize`{count, plural, =1 {1 user} other {{count} users}} deleted.`)(
 256               { count: users.length },
 257               $localize`${users.length} users deleted.`
 258             )
 259           )
 260
 261           this.reloadData()
 262         },
 263
 264         error: err => this.notifier.error(err.message)
 265       })
 266   }
 267
 268   setEmailsAsVerified (users: User[]) {
 269     this.userAdminService.updateUsers(users, { emailVerified: true })
 270       .subscribe({
 271         next: () => {
 272           this.notifier.success(
 273             prepareIcu($localize`{count, plural, =1 {1 user} other {{count} users}} email set as verified.`)(
 274               { count: users.length },
 275               $localize`${users.length} users email set as verified.`
 276             )
 277           )
 278
 279           this.reloadData()
 280         },
 281
 282         error: err => this.notifier.error(err.message)
 283       })
 284   }
 285
 286   isInSelectionMode () {
 287     return this.selectedUsers.length !== 0
 288   }
 289
 290   protected reloadData () {
 291     this.selectedUsers = []
 292
 293     this.userAdminService.getUsers({
 294       pagination: this.pagination,
 295       sort: this.sort,
 296       search: this.search
 297     }).subscribe({
 298       next: resultList => {
 299         this.users = resultList.data.map(u => ({
 300           ...u,
 301
 302           accountMutedStatus: {
 303             ...u.account,
 304
 305             nameWithHost: Actor.CREATE_BY_STRING(u.account.name, u.account.host),
 306
 307             mutedByInstance: false,
 308             mutedByUser: false,
 309             mutedServerByInstance: false,
 310             mutedServerByUser: false
 311           }
 312         }))
 313         this.totalRecords = resultList.total
 314
 315         this.loadMutedStatus()
 316       },
 317
 318       error: err => this.notifier.error(err.message)
 319     })
 320   }
 321
 322   private loadMutedStatus () {
 323     this.blocklist.getStatus({ accounts: this.users.map(u => u.username + '@' + getAPIHost()) })
 324       .subscribe(blockStatus => {
 325         for (const user of this.users) {
 326           user.accountMutedStatus.mutedByInstance = blockStatus.accounts[user.username + '@' + getAPIHost()].blockedByServer
 327         }
 328       })
 329   }
 330 }