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, 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   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
  26
  27   users: (User & { accountMutedStatus: AccountMutedStatus })[] = []
  28
  29   totalRecords = 0
  30   sort: SortMeta = { field: 'createdAt', order: 1 }
  31   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  32
  33   highlightBannedUsers = false
  34
  35   selectedUsers: User[] = []
  36   bulkUserActions: DropdownAction<User[]>[][] = []
  37   columns: { id: string, label: string }[]
  38
  39   inputFilters: AdvancedInputFilter[] = [
  40     {
  41       title: $localize`Advanced filters`,
  42       children: [
  43         {
  44           value: 'banned:true',
  45           label: $localize`Banned users`
  46         }
  47       ]
  48     }
  49   ]
  50
  51   userModerationDisplayOptions: UserModerationDisplayType = {
  52     instanceAccount: true,
  53     instanceUser: true,
  54     myAccount: false
  55   }
  56
  57   requiresEmailVerification = false
  58
  59   private _selectedColumns: string[]
  60
  61   constructor (
  62     protected route: ActivatedRoute,
  63     protected router: Router,
  64     private notifier: Notifier,
  65     private confirmService: ConfirmService,
  66     private serverService: ServerService,
  67     private auth: AuthService,
  68     private blocklist: BlocklistService,
  69     private userAdminService: UserAdminService
  70   ) {
  71     super()
  72   }
  73
  74   get authUser () {
  75     return this.auth.getUser()
  76   }
  77
  78   get selectedColumns () {
  79     return this._selectedColumns
  80   }
  81
  82   set selectedColumns (val: string[]) {
  83     this._selectedColumns = val
  84   }
  85
  86   ngOnInit () {
  87     this.serverService.getConfig()
  88         .subscribe(config => this.requiresEmailVerification = config.signup.requiresEmailVerification)
  89
  90     this.initialize()
  91
  92     this.bulkUserActions = [
  93       [
  94         {
  95           label: $localize`Delete`,
  96           description: $localize`Videos will be deleted, comments will be tombstoned.`,
  97           handler: users => this.removeUsers(users),
  98           isDisplayed: users => users.every(u => this.authUser.canManage(u))
  99         },
 100         {
 101           label: $localize`Ban`,
 102           description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`,
 103           handler: users => this.openBanUserModal(users),
 104           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
 105         },
 106         {
 107           label: $localize`Unban`,
 108           handler: users => this.unbanUsers(users),
 109           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
 110         }
 111       ],
 112       [
 113         {
 114           label: $localize`Set Email as Verified`,
 115           handler: users => this.setEmailsAsVerified(users),
 116           isDisplayed: users => {
 117             return this.requiresEmailVerification &&
 118               users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
 119           }
 120         }
 121       ]
 122     ]
 123
 124     this.columns = [
 125       { id: 'username', label: $localize`Username` },
 126       { id: 'role', label: $localize`Role` },
 127       { id: 'email', label: $localize`Email` },
 128       { id: 'quota', label: $localize`Video quota` },
 129       { id: 'createdAt', label: $localize`Created` }
 130     ]
 131
 132     this.selectedColumns = this.columns.map(c => c.id)
 133
 134     this.columns.push({ id: 'quotaDaily', label: $localize`Daily quota` })
 135     this.columns.push({ id: 'pluginAuth', label: $localize`Auth plugin` })
 136     this.columns.push({ id: 'lastLoginDate', label: $localize`Last login` })
 137   }
 138
 139   getIdentifier () {
 140     return 'UserListComponent'
 141   }
 142
 143   getRoleClass (role: UserRole) {
 144     switch (role) {
 145       case UserRole.ADMINISTRATOR:
 146         return 'badge-purple'
 147       case UserRole.MODERATOR:
 148         return 'badge-blue'
 149       default:
 150         return 'badge-yellow'
 151     }
 152   }
 153
 154   isSelected (id: string) {
 155     return this.selectedColumns.find(c => c === id)
 156   }
 157
 158   getColumn (id: string) {
 159     return this.columns.find(c => c.id === id)
 160   }
 161
 162   getUserVideoQuotaPercentage (user: UserForList) {
 163     return user.rawVideoQuotaUsed * 100 / user.rawVideoQuota
 164   }
 165
 166   getUserVideoQuotaDailyPercentage (user: UserForList) {
 167     return user.rawVideoQuotaUsedDaily * 100 / user.rawVideoQuotaDaily
 168   }
 169
 170   openBanUserModal (users: User[]) {
 171     for (const user of users) {
 172       if (user.username === 'root') {
 173         this.notifier.error($localize`You cannot ban root.`)
 174         return
 175       }
 176     }
 177
 178     this.userBanModal.openModal(users)
 179   }
 180
 181   onUserChanged () {
 182     this.reloadData()
 183   }
 184
 185   async unbanUsers (users: User[]) {
 186     const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
 187     if (res === false) return
 188
 189     this.userAdminService.unbanUsers(users)
 190         .subscribe({
 191           next: () => {
 192             this.notifier.success($localize`${users.length} users unbanned.`)
 193             this.reloadData()
 194           },
 195
 196           error: err => this.notifier.error(err.message)
 197         })
 198   }
 199
 200   async removeUsers (users: User[]) {
 201     for (const user of users) {
 202       if (user.username === 'root') {
 203         this.notifier.error($localize`You cannot delete root.`)
 204         return
 205       }
 206     }
 207
 208     const message = $localize`If you remove these users, you will not be able to create others with the same username!`
 209     const res = await this.confirmService.confirm(message, $localize`Delete`)
 210     if (res === false) return
 211
 212     this.userAdminService.removeUser(users)
 213       .subscribe({
 214         next: () => {
 215           this.notifier.success($localize`${users.length} users deleted.`)
 216           this.reloadData()
 217         },
 218
 219         error: err => this.notifier.error(err.message)
 220       })
 221   }
 222
 223   setEmailsAsVerified (users: User[]) {
 224     this.userAdminService.updateUsers(users, { emailVerified: true })
 225       .subscribe({
 226         next: () => {
 227           this.notifier.success($localize`${users.length} users email set as verified.`)
 228           this.reloadData()
 229         },
 230
 231         error: err => this.notifier.error(err.message)
 232       })
 233   }
 234
 235   isInSelectionMode () {
 236     return this.selectedUsers.length !== 0
 237   }
 238
 239   protected reloadData () {
 240     this.selectedUsers = []
 241
 242     this.userAdminService.getUsers({
 243       pagination: this.pagination,
 244       sort: this.sort,
 245       search: this.search
 246     }).subscribe({
 247       next: resultList => {
 248         this.users = resultList.data.map(u => ({
 249           ...u,
 250
 251           accountMutedStatus: {
 252             ...u.account,
 253
 254             nameWithHost: Actor.CREATE_BY_STRING(u.account.name, u.account.host),
 255
 256             mutedByInstance: false,
 257             mutedByUser: false,
 258             mutedServerByInstance: false,
 259             mutedServerByUser: false
 260           }
 261         }))
 262         this.totalRecords = resultList.total
 263
 264         this.loadMutedStatus()
 265       },
 266
 267       error: err => this.notifier.error(err.message)
 268     })
 269   }
 270
 271   private loadMutedStatus () {
 272     this.blocklist.getStatus({ accounts: this.users.map(u => u.username + '@' + getAPIHost()) })
 273       .subscribe(blockStatus => {
 274         for (const user of this.users) {
 275           user.accountMutedStatus.mutedByInstance = blockStatus.accounts[user.username + '@' + getAPIHost()].blockedByServer
 276         }
 277       })
 278   }
 279 }