client/src/app/+admin/users/user-list/user-list.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core'
   2 import { AuthService, Notifier } from '@app/core'
   3 import { SortMeta } from 'primeng/api'
   4 import { ConfirmService, ServerService } from '../../../core'
   5 import { RestPagination, RestTable, UserService } from '../../../shared'
   6 import { I18n } from '@ngx-translate/i18n-polyfill'
   7 import { ServerConfig, User } from '../../../../../../shared'
   8 import { UserBanModalComponent } from '@app/shared/moderation'
   9 import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
  10 import { Actor } from '@app/shared/actor/actor.model'
  11
  12 @Component({
  13   selector: 'my-user-list',
  14   templateUrl: './user-list.component.html',
  15   styleUrls: [ './user-list.component.scss' ]
  16 })
  17 export class UserListComponent extends RestTable implements OnInit {
  18   @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
  19
  20   users: User[] = []
  21   totalRecords = 0
  22   rowsPerPage = 10
  23   sort: SortMeta = { field: 'createdAt', order: 1 }
  24   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  25
  26   selectedUsers: User[] = []
  27   bulkUserActions: DropdownAction<User[]>[][] = []
  28
  29   private serverConfig: ServerConfig
  30
  31   constructor (
  32     private notifier: Notifier,
  33     private confirmService: ConfirmService,
  34     private serverService: ServerService,
  35     private userService: UserService,
  36     private auth: AuthService,
  37     private i18n: I18n
  38   ) {
  39     super()
  40   }
  41
  42   get authUser () {
  43     return this.auth.getUser()
  44   }
  45
  46   get requiresEmailVerification () {
  47     return this.serverConfig.signup.requiresEmailVerification
  48   }
  49
  50   ngOnInit () {
  51     this.serverConfig = this.serverService.getTmpConfig()
  52     this.serverService.getConfig()
  53         .subscribe(config => this.serverConfig = config)
  54
  55     this.initialize()
  56
  57     this.bulkUserActions = [
  58       [
  59         {
  60           label: this.i18n('Delete'),
  61           description: this.i18n('Videos will be deleted, comments will be tombstoned.'),
  62           handler: users => this.removeUsers(users),
  63           isDisplayed: users => users.every(u => this.authUser.canManage(u))
  64         },
  65         {
  66           label: this.i18n('Ban'),
  67           description: this.i18n('User won\'t be able to login anymore, but videos and comments will be kept as is.'),
  68           handler: users => this.openBanUserModal(users),
  69           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
  70         },
  71         {
  72           label: this.i18n('Unban'),
  73           handler: users => this.unbanUsers(users),
  74           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
  75         }
  76       ],
  77       [
  78         {
  79           label: this.i18n('Set Email as Verified'),
  80           handler: users => this.setEmailsAsVerified(users),
  81           isDisplayed: users => {
  82             return this.requiresEmailVerification &&
  83               users.every(u => this.authUser.canManage(u) && !u.blocked && u.emailVerified === false)
  84           }
  85         }
  86       ]
  87     ]
  88   }
  89
  90   getIdentifier () {
  91     return 'UserListComponent'
  92   }
  93
  94   openBanUserModal (users: User[]) {
  95     for (const user of users) {
  96       if (user.username === 'root') {
  97         this.notifier.error(this.i18n('You cannot ban root.'))
  98         return
  99       }
 100     }
 101
 102     this.userBanModal.openModal(users)
 103   }
 104
 105   onUserChanged () {
 106     this.loadData()
 107   }
 108
 109   switchToDefaultAvatar ($event: Event) {
 110     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 111   }
 112
 113   async unbanUsers (users: User[]) {
 114     const message = this.i18n('Do you really want to unban {{num}} users?', { num: users.length })
 115
 116     const res = await this.confirmService.confirm(message, this.i18n('Unban'))
 117     if (res === false) return
 118
 119     this.userService.unbanUsers(users)
 120         .subscribe(
 121           () => {
 122             const message = this.i18n('{{num}} users unbanned.', { num: users.length })
 123
 124             this.notifier.success(message)
 125             this.loadData()
 126           },
 127
 128           err => this.notifier.error(err.message)
 129         )
 130   }
 131
 132   async removeUsers (users: User[]) {
 133     for (const user of users) {
 134       if (user.username === 'root') {
 135         this.notifier.error(this.i18n('You cannot delete root.'))
 136         return
 137       }
 138     }
 139
 140     const message = this.i18n('If you remove these users, you will not be able to create others with the same username!')
 141     const res = await this.confirmService.confirm(message, this.i18n('Delete'))
 142     if (res === false) return
 143
 144     this.userService.removeUser(users).subscribe(
 145       () => {
 146         this.notifier.success(this.i18n('{{num}} users deleted.', { num: users.length }))
 147         this.loadData()
 148       },
 149
 150       err => this.notifier.error(err.message)
 151     )
 152   }
 153
 154   async setEmailsAsVerified (users: User[]) {
 155     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
 156       () => {
 157         this.notifier.success(this.i18n('{{num}} users email set as verified.', { num: users.length }))
 158         this.loadData()
 159       },
 160
 161       err => this.notifier.error(err.message)
 162     )
 163   }
 164
 165   isInSelectionMode () {
 166     return this.selectedUsers.length !== 0
 167   }
 168
 169   protected loadData () {
 170     this.selectedUsers = []
 171
 172     this.userService.getUsers(this.pagination, this.sort, this.search)
 173         .subscribe(
 174           resultList => {
 175             this.users = resultList.data
 176             this.totalRecords = resultList.total
 177           },
 178
 179           err => this.notifier.error(err.message)
 180         )
 181   }
 182 }