client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts

   1 import * as debug from 'debug'
   2 import truncate from 'lodash-es/truncate'
   3 import { SortMeta } from 'primeng/api'
   4 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
   5 import { environment } from 'src/environments/environment'
   6 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'
   7 import { DomSanitizer } from '@angular/platform-browser'
   8 import { ActivatedRoute, Router } from '@angular/router'
   9 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
  10 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
  11 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
  12 import { VideoCommentService } from '@app/shared/shared-video-comment'
  13 import { AbuseState, AdminAbuse } from '@shared/models'
  14 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
  15 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
  16 import { ProcessedAbuse } from './processed-abuse.model'
  17
  18 const logger = debug('peertube:moderation:AbuseListTableComponent')
  19
  20 @Component({
  21   selector: 'my-abuse-list-table',
  22   templateUrl: './abuse-list-table.component.html',
  23   styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ]
  24 })
  25 export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
  26   @Input() viewType: 'admin' | 'user'
  27   @Input() baseRoute: string
  28
  29   @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
  30   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
  31
  32   abuses: ProcessedAbuse[] = []
  33   totalRecords = 0
  34   sort: SortMeta = { field: 'createdAt', order: 1 }
  35   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
  36
  37   abuseActions: DropdownAction<ProcessedAbuse>[][] = []
  38
  39   constructor (
  40     protected route: ActivatedRoute,
  41     protected router: Router,
  42     private notifier: Notifier,
  43     private abuseService: AbuseService,
  44     private blocklistService: BlocklistService,
  45     private commentService: VideoCommentService,
  46     private videoService: VideoService,
  47     private videoBlocklistService: VideoBlockService,
  48     private confirmService: ConfirmService,
  49     private markdownRenderer: MarkdownService,
  50     private sanitizer: DomSanitizer
  51   ) {
  52     super()
  53   }
  54
  55   ngOnInit () {
  56     this.abuseActions = [
  57       this.buildInternalActions(),
  58
  59       this.buildFlaggedAccountActions(),
  60
  61       this.buildCommentActions(),
  62
  63       this.buildVideoActions(),
  64
  65       this.buildAccountActions()
  66     ]
  67
  68     this.initialize()
  69     this.listenToSearchChange()
  70   }
  71
  72   ngAfterViewInit () {
  73     if (this.search) this.setTableFilter(this.search, false)
  74   }
  75
  76   isAdminView () {
  77     return this.viewType === 'admin'
  78   }
  79
  80   getIdentifier () {
  81     return 'AbuseListTableComponent'
  82   }
  83
  84   openModerationCommentModal (abuse: AdminAbuse) {
  85     this.moderationCommentModal.openModal(abuse)
  86   }
  87
  88   onModerationCommentUpdated () {
  89     this.loadData()
  90   }
  91
  92   isAbuseAccepted (abuse: AdminAbuse) {
  93     return abuse.state.id === AbuseState.ACCEPTED
  94   }
  95
  96   isAbuseRejected (abuse: AdminAbuse) {
  97     return abuse.state.id === AbuseState.REJECTED
  98   }
  99
 100   getVideoUrl (abuse: AdminAbuse) {
 101     return Video.buildClientUrl(abuse.video.uuid)
 102   }
 103
 104   getCommentUrl (abuse: AdminAbuse) {
 105     return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
 106   }
 107
 108   getAccountUrl (abuse: ProcessedAbuse) {
 109     return '/accounts/' + abuse.flaggedAccount.nameWithHost
 110   }
 111
 112   getVideoEmbed (abuse: AdminAbuse) {
 113     return buildVideoOrPlaylistEmbed(
 114       buildVideoLink({
 115         baseUrl: `${environment.originServerUrl}/videos/embed/${abuse.video.uuid}`,
 116         title: false,
 117         warningTitle: false,
 118         startTime: abuse.video.startAt,
 119         stopTime: abuse.video.endAt
 120       }),
 121       abuse.video.name
 122     )
 123   }
 124
 125   switchToDefaultAvatar ($event: Event) {
 126     ($event.target as HTMLImageElement).src = Account.GET_DEFAULT_AVATAR_URL()
 127   }
 128
 129   async removeAbuse (abuse: AdminAbuse) {
 130     const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
 131     if (res === false) return
 132
 133     this.abuseService.removeAbuse(abuse).subscribe(
 134       () => {
 135         this.notifier.success($localize`Abuse deleted.`)
 136         this.loadData()
 137       },
 138
 139       err => this.notifier.error(err.message)
 140     )
 141   }
 142
 143   updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
 144     this.abuseService.updateAbuse(abuse, { state })
 145       .subscribe(
 146         () => this.loadData(),
 147
 148         err => this.notifier.error(err.message)
 149       )
 150   }
 151
 152   onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
 153     const abuse = this.abuses.find(a => a.id === event.abuseId)
 154
 155     if (!abuse) {
 156       console.error('Cannot find abuse %d.', event.abuseId)
 157       return
 158     }
 159
 160     abuse.countMessages = event.countMessages
 161   }
 162
 163   openAbuseMessagesModal (abuse: AdminAbuse) {
 164     this.abuseMessagesModal.openModal(abuse)
 165   }
 166
 167   isLocalAbuse (abuse: AdminAbuse) {
 168     if (this.viewType === 'user') return true
 169
 170     return Actor.IS_LOCAL(abuse.reporterAccount.host)
 171   }
 172
 173   protected loadData () {
 174     logger('Loading data.')
 175
 176     const options = {
 177       pagination: this.pagination,
 178       sort: this.sort,
 179       search: this.search
 180     }
 181
 182     const observable = this.viewType === 'admin'
 183       ? this.abuseService.getAdminAbuses(options)
 184       : this.abuseService.getUserAbuses(options)
 185
 186     return observable.subscribe(
 187         async resultList => {
 188           this.totalRecords = resultList.total
 189
 190           this.abuses = []
 191
 192           for (const a of resultList.data) {
 193             const abuse = a as ProcessedAbuse
 194
 195             abuse.reasonHtml = await this.toHtml(abuse.reason)
 196
 197             if (abuse.moderationComment) {
 198               abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
 199             }
 200
 201             if (abuse.video) {
 202               abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
 203
 204               if (abuse.video.channel?.ownerAccount) {
 205                 abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
 206               }
 207             }
 208
 209             if (abuse.comment) {
 210               if (abuse.comment.deleted) {
 211                 abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment`
 212               } else {
 213                 const truncated = truncate(abuse.comment.text, { length: 100 })
 214                 abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
 215                 abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
 216               }
 217             }
 218
 219             if (abuse.reporterAccount) {
 220               abuse.reporterAccount = new Account(abuse.reporterAccount)
 221             }
 222
 223             if (abuse.flaggedAccount) {
 224               abuse.flaggedAccount = new Account(abuse.flaggedAccount)
 225             }
 226
 227             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 228
 229             this.abuses.push(abuse)
 230           }
 231         },
 232
 233         err => this.notifier.error(err.message)
 234       )
 235   }
 236
 237   private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
 238     return [
 239       {
 240         label: $localize`Internal actions`,
 241         isHeader: true
 242       },
 243       {
 244         label: this.isAdminView()
 245           ? $localize`Messages with reporter`
 246           : $localize`Messages with moderators`,
 247         handler: abuse => this.openAbuseMessagesModal(abuse),
 248         isDisplayed: abuse => this.isLocalAbuse(abuse)
 249       },
 250       {
 251         label: $localize`Update internal note`,
 252         handler: abuse => this.openModerationCommentModal(abuse),
 253         isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment
 254       },
 255       {
 256         label: $localize`Mark as accepted`,
 257         handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
 258         isDisplayed: abuse => this.isAdminView() && !this.isAbuseAccepted(abuse)
 259       },
 260       {
 261         label: $localize`Mark as rejected`,
 262         handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
 263         isDisplayed: abuse => this.isAdminView() && !this.isAbuseRejected(abuse)
 264       },
 265       {
 266         label: $localize`Add internal note`,
 267         handler: abuse => this.openModerationCommentModal(abuse),
 268         isDisplayed: abuse => this.isAdminView() && !abuse.moderationComment
 269       },
 270       {
 271         label: $localize`Delete report`,
 272         handler: abuse => this.isAdminView() && this.removeAbuse(abuse)
 273       }
 274     ]
 275   }
 276
 277   private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
 278     if (!this.isAdminView()) return []
 279
 280     return [
 281       {
 282         label: $localize`Actions for the flagged account`,
 283         isHeader: true,
 284         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
 285       },
 286
 287       {
 288         label: $localize`Mute account`,
 289         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 290         handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
 291       },
 292
 293       {
 294         label: $localize`Mute server account`,
 295         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 296         handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
 297       }
 298     ]
 299   }
 300
 301   private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
 302     if (!this.isAdminView()) return []
 303
 304     return [
 305       {
 306         label: $localize`Actions for the reporter`,
 307         isHeader: true,
 308         isDisplayed: abuse => !!abuse.reporterAccount
 309       },
 310
 311       {
 312         label: $localize`Mute reporter`,
 313         isDisplayed: abuse => !!abuse.reporterAccount,
 314         handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
 315       },
 316
 317       {
 318         label: $localize`Mute server`,
 319         isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
 320         handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
 321       }
 322     ]
 323   }
 324
 325   private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
 326     if (!this.isAdminView()) return []
 327
 328     return [
 329       {
 330         label: $localize`Actions for the video`,
 331         isHeader: true,
 332         isDisplayed: abuse => abuse.video && !abuse.video.deleted
 333       },
 334       {
 335         label: $localize`Block video`,
 336         isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
 337         handler: abuse => {
 338           this.videoBlocklistService.blockVideo(abuse.video.id, undefined, abuse.video.channel.isLocal)
 339             .subscribe(
 340               () => {
 341                 this.notifier.success($localize`Video blocked.`)
 342
 343                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 344               },
 345
 346               err => this.notifier.error(err.message)
 347             )
 348         }
 349       },
 350       {
 351         label: $localize`Unblock video`,
 352         isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
 353         handler: abuse => {
 354           this.videoBlocklistService.unblockVideo(abuse.video.id)
 355             .subscribe(
 356               () => {
 357                 this.notifier.success($localize`Video unblocked.`)
 358
 359                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 360               },
 361
 362               err => this.notifier.error(err.message)
 363             )
 364         }
 365       },
 366       {
 367         label: $localize`Delete video`,
 368         isDisplayed: abuse => abuse.video && !abuse.video.deleted,
 369         handler: async abuse => {
 370           const res = await this.confirmService.confirm(
 371             $localize`Do you really want to delete this video?`,
 372             $localize`Delete`
 373           )
 374           if (res === false) return
 375
 376           this.videoService.removeVideo(abuse.video.id)
 377             .subscribe(
 378               () => {
 379                 this.notifier.success($localize`Video deleted.`)
 380
 381                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 382               },
 383
 384               err => this.notifier.error(err.message)
 385             )
 386         }
 387       }
 388     ]
 389   }
 390
 391   private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
 392     if (!this.isAdminView()) return []
 393
 394     return [
 395       {
 396         label: $localize`Actions for the comment`,
 397         isHeader: true,
 398         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
 399       },
 400
 401       {
 402         label: $localize`Delete comment`,
 403         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
 404         handler: async abuse => {
 405           const res = await this.confirmService.confirm(
 406             $localize`Do you really want to delete this comment?`,
 407             $localize`Delete`
 408           )
 409           if (res === false) return
 410
 411           this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
 412             .subscribe(
 413               () => {
 414                 this.notifier.success($localize`Comment deleted.`)
 415
 416                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 417               },
 418
 419               err => this.notifier.error(err.message)
 420             )
 421         }
 422       }
 423     ]
 424   }
 425
 426   private muteAccountHelper (account: Account) {
 427     this.blocklistService.blockAccountByInstance(account)
 428       .subscribe(
 429         () => {
 430           this.notifier.success($localize`Account ${account.nameWithHost} muted by the instance.`)
 431           account.mutedByInstance = true
 432         },
 433
 434         err => this.notifier.error(err.message)
 435       )
 436   }
 437
 438   private muteServerHelper (host: string) {
 439     this.blocklistService.blockServerByInstance(host)
 440       .subscribe(
 441         () => {
 442           this.notifier.success($localize`Server ${host} muted by the instance.`)
 443         },
 444
 445         err => this.notifier.error(err.message)
 446       )
 447   }
 448
 449   private toHtml (text: string) {
 450     return this.markdownRenderer.textMarkdownToHTML(text)
 451   }
 452 }