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 { 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($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
 213     if (res === false) return
 214
 215     this.userAdminService.unbanUsers(users)
 216         .subscribe({
 217           next: () => {
 218             this.notifier.success($localize`${users.length} users unbanned.`)
 219             this.reloadData()
 220           },
 221
 222           error: err => this.notifier.error(err.message)
 223         })
 224   }
 225
 226   async removeUsers (users: User[]) {
 227     for (const user of users) {
 228       if (user.username === 'root') {
 229         this.notifier.error($localize`You cannot delete root.`)
 230         return
 231       }
 232     }
 233
 234     const message = $localize`If you remove these users, you will not be able to create others with the same username!`
 235     const res = await this.confirmService.confirm(message, $localize`Delete`)
 236     if (res === false) return
 237
 238     this.userAdminService.removeUser(users)
 239       .subscribe({
 240         next: () => {
 241           this.notifier.success($localize`${users.length} users deleted.`)
 242           this.reloadData()
 243         },
 244
 245         error: err => this.notifier.error(err.message)
 246       })
 247   }
 248
 249   setEmailsAsVerified (users: User[]) {
 250     this.userAdminService.updateUsers(users, { emailVerified: true })
 251       .subscribe({
 252         next: () => {
 253           this.notifier.success($localize`${users.length} users email set as verified.`)
 254           this.reloadData()
 255         },
 256
 257         error: err => this.notifier.error(err.message)
 258       })
 259   }
 260
 261   isInSelectionMode () {
 262     return this.selectedUsers.length !== 0
 263   }
 264
 265   protected reloadData () {
 266     this.selectedUsers = []
 267
 268     this.userAdminService.getUsers({
 269       pagination: this.pagination,
 270       sort: this.sort,
 271       search: this.search
 272     }).subscribe({
 273       next: resultList => {
 274         this.users = resultList.data.map(u => ({
 275           ...u,
 276
 277           accountMutedStatus: {
 278             ...u.account,
 279
 280             nameWithHost: Actor.CREATE_BY_STRING(u.account.name, u.account.host),
 281
 282             mutedByInstance: false,
 283             mutedByUser: false,
 284             mutedServerByInstance: false,
 285             mutedServerByUser: false
 286           }
 287         }))
 288         this.totalRecords = resultList.total
 289
 290         this.loadMutedStatus()
 291       },
 292
 293       error: err => this.notifier.error(err.message)
 294     })
 295   }
 296
 297   private loadMutedStatus () {
 298     this.blocklist.getStatus({ accounts: this.users.map(u => u.username + '@' + getAPIHost()) })
 299       .subscribe(blockStatus => {
 300         for (const user of this.users) {
 301           user.accountMutedStatus.mutedByInstance = blockStatus.accounts[user.username + '@' + getAPIHost()].blockedByServer
 302         }
 303       })
 304   }
 305 }