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