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, Params, 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     private notifier: Notifier,
  41     private abuseService: AbuseService,
  42     private blocklistService: BlocklistService,
  43     private commentService: VideoCommentService,
  44     private videoService: VideoService,
  45     private videoBlocklistService: VideoBlockService,
  46     private confirmService: ConfirmService,
  47     private markdownRenderer: MarkdownService,
  48     private sanitizer: DomSanitizer,
  49     private route: ActivatedRoute,
  50     private router: Router
  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
  70     this.route.queryParams
  71       .subscribe(params => {
  72         this.search = params.search || ''
  73
  74         logger('On URL change (search: %s).', this.search)
  75
  76         this.setTableFilter(this.search)
  77         this.loadData()
  78       })
  79   }
  80
  81   ngAfterViewInit () {
  82     if (this.search) this.setTableFilter(this.search)
  83   }
  84
  85   isAdminView () {
  86     return this.viewType === 'admin'
  87   }
  88
  89   getIdentifier () {
  90     return 'AbuseListTableComponent'
  91   }
  92
  93   openModerationCommentModal (abuse: AdminAbuse) {
  94     this.moderationCommentModal.openModal(abuse)
  95   }
  96
  97   onModerationCommentUpdated () {
  98     this.loadData()
  99   }
 100
 101   /* Table filter functions */
 102   onAbuseSearch (event: Event) {
 103     this.onSearch(event)
 104     this.setQueryParams((event.target as HTMLInputElement).value)
 105   }
 106
 107   setQueryParams (search: string) {
 108     const queryParams: Params = {}
 109     if (search) Object.assign(queryParams, { search })
 110
 111     this.router.navigate([ this.baseRoute ], { queryParams })
 112   }
 113
 114   resetTableFilter () {
 115     this.setTableFilter('')
 116     this.setQueryParams('')
 117     this.resetSearch()
 118   }
 119   /* END Table filter functions */
 120
 121   isAbuseAccepted (abuse: AdminAbuse) {
 122     return abuse.state.id === AbuseState.ACCEPTED
 123   }
 124
 125   isAbuseRejected (abuse: AdminAbuse) {
 126     return abuse.state.id === AbuseState.REJECTED
 127   }
 128
 129   getVideoUrl (abuse: AdminAbuse) {
 130     return Video.buildClientUrl(abuse.video.uuid)
 131   }
 132
 133   getCommentUrl (abuse: AdminAbuse) {
 134     return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
 135   }
 136
 137   getAccountUrl (abuse: ProcessedAbuse) {
 138     return '/accounts/' + abuse.flaggedAccount.nameWithHost
 139   }
 140
 141   getVideoEmbed (abuse: AdminAbuse) {
 142     return buildVideoOrPlaylistEmbed(
 143       buildVideoLink({
 144         baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
 145         title: false,
 146         warningTitle: false,
 147         startTime: abuse.startAt,
 148         stopTime: abuse.endAt
 149       })
 150     )
 151   }
 152
 153   switchToDefaultAvatar ($event: Event) {
 154     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
 155   }
 156
 157   async removeAbuse (abuse: AdminAbuse) {
 158     const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
 159     if (res === false) return
 160
 161     this.abuseService.removeAbuse(abuse).subscribe(
 162       () => {
 163         this.notifier.success($localize`Abuse deleted.`)
 164         this.loadData()
 165       },
 166
 167       err => this.notifier.error(err.message)
 168     )
 169   }
 170
 171   updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
 172     this.abuseService.updateAbuse(abuse, { state })
 173       .subscribe(
 174         () => this.loadData(),
 175
 176         err => this.notifier.error(err.message)
 177       )
 178   }
 179
 180   onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
 181     const abuse = this.abuses.find(a => a.id === event.abuseId)
 182
 183     if (!abuse) {
 184       console.error('Cannot find abuse %d.', event.abuseId)
 185       return
 186     }
 187
 188     abuse.countMessages = event.countMessages
 189   }
 190
 191   openAbuseMessagesModal (abuse: AdminAbuse) {
 192     this.abuseMessagesModal.openModal(abuse)
 193   }
 194
 195   isLocalAbuse (abuse: AdminAbuse) {
 196     if (this.viewType === 'user') return true
 197
 198     return Actor.IS_LOCAL(abuse.reporterAccount.host)
 199   }
 200
 201   protected loadData () {
 202     logger('Loading data.')
 203
 204     const options = {
 205       pagination: this.pagination,
 206       sort: this.sort,
 207       search: this.search
 208     }
 209
 210     const observable = this.viewType === 'admin'
 211       ? this.abuseService.getAdminAbuses(options)
 212       : this.abuseService.getUserAbuses(options)
 213
 214     return observable.subscribe(
 215         async resultList => {
 216           this.totalRecords = resultList.total
 217
 218           this.abuses = []
 219
 220           for (const a of resultList.data) {
 221             const abuse = a as ProcessedAbuse
 222
 223             abuse.reasonHtml = await this.toHtml(abuse.reason)
 224
 225             if (abuse.moderationComment) {
 226               abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
 227             }
 228
 229             if (abuse.video) {
 230               abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
 231
 232               if (abuse.video.channel?.ownerAccount) {
 233                 abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
 234               }
 235             }
 236
 237             if (abuse.comment) {
 238               if (abuse.comment.deleted) {
 239                 abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment`
 240               } else {
 241                 const truncated = truncate(abuse.comment.text, { length: 100 })
 242                 abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
 243                 abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
 244               }
 245             }
 246
 247             if (abuse.reporterAccount) {
 248               abuse.reporterAccount = new Account(abuse.reporterAccount)
 249             }
 250
 251             if (abuse.flaggedAccount) {
 252               abuse.flaggedAccount = new Account(abuse.flaggedAccount)
 253             }
 254
 255             if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
 256
 257             this.abuses.push(abuse)
 258           }
 259         },
 260
 261         err => this.notifier.error(err.message)
 262       )
 263   }
 264
 265   private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
 266     return [
 267       {
 268         label: $localize`Internal actions`,
 269         isHeader: true
 270       },
 271       {
 272         label: this.isAdminView()
 273           ? $localize`Messages with reporter`
 274           : $localize`Messages with moderators`,
 275         handler: abuse => this.openAbuseMessagesModal(abuse),
 276         isDisplayed: abuse => this.isLocalAbuse(abuse)
 277       },
 278       {
 279         label: $localize`Update internal note`,
 280         handler: abuse => this.openModerationCommentModal(abuse),
 281         isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment
 282       },
 283       {
 284         label: $localize`Mark as accepted`,
 285         handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
 286         isDisplayed: abuse => this.isAdminView() && !this.isAbuseAccepted(abuse)
 287       },
 288       {
 289         label: $localize`Mark as rejected`,
 290         handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
 291         isDisplayed: abuse => this.isAdminView() && !this.isAbuseRejected(abuse)
 292       },
 293       {
 294         label: $localize`Add internal note`,
 295         handler: abuse => this.openModerationCommentModal(abuse),
 296         isDisplayed: abuse => this.isAdminView() && !abuse.moderationComment
 297       },
 298       {
 299         label: $localize`Delete report`,
 300         handler: abuse => this.isAdminView() && this.removeAbuse(abuse)
 301       }
 302     ]
 303   }
 304
 305   private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
 306     if (!this.isAdminView()) return []
 307
 308     return [
 309       {
 310         label: $localize`Actions for the flagged account`,
 311         isHeader: true,
 312         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
 313       },
 314
 315       {
 316         label: $localize`Mute account`,
 317         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 318         handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
 319       },
 320
 321       {
 322         label: $localize`Mute server account`,
 323         isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
 324         handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
 325       }
 326     ]
 327   }
 328
 329   private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
 330     if (!this.isAdminView()) return []
 331
 332     return [
 333       {
 334         label: $localize`Actions for the reporter`,
 335         isHeader: true,
 336         isDisplayed: abuse => !!abuse.reporterAccount
 337       },
 338
 339       {
 340         label: $localize`Mute reporter`,
 341         isDisplayed: abuse => !!abuse.reporterAccount,
 342         handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
 343       },
 344
 345       {
 346         label: $localize`Mute server`,
 347         isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
 348         handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
 349       }
 350     ]
 351   }
 352
 353   private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
 354     if (!this.isAdminView()) return []
 355
 356     return [
 357       {
 358         label: $localize`Actions for the video`,
 359         isHeader: true,
 360         isDisplayed: abuse => abuse.video && !abuse.video.deleted
 361       },
 362       {
 363         label: $localize`Block video`,
 364         isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
 365         handler: abuse => {
 366           this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true)
 367             .subscribe(
 368               () => {
 369                 this.notifier.success($localize`Video blocked.`)
 370
 371                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 372               },
 373
 374               err => this.notifier.error(err.message)
 375             )
 376         }
 377       },
 378       {
 379         label: $localize`Unblock video`,
 380         isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
 381         handler: abuse => {
 382           this.videoBlocklistService.unblockVideo(abuse.video.id)
 383             .subscribe(
 384               () => {
 385                 this.notifier.success($localize`Video unblocked.`)
 386
 387                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 388               },
 389
 390               err => this.notifier.error(err.message)
 391             )
 392         }
 393       },
 394       {
 395         label: $localize`Delete video`,
 396         isDisplayed: abuse => abuse.video && !abuse.video.deleted,
 397         handler: async abuse => {
 398           const res = await this.confirmService.confirm(
 399             $localize`Do you really want to delete this video?`,
 400             $localize`Delete`
 401           )
 402           if (res === false) return
 403
 404           this.videoService.removeVideo(abuse.video.id)
 405             .subscribe(
 406               () => {
 407                 this.notifier.success($localize`Video deleted.`)
 408
 409                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 410               },
 411
 412               err => this.notifier.error(err.message)
 413             )
 414         }
 415       }
 416     ]
 417   }
 418
 419   private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
 420     if (!this.isAdminView()) return []
 421
 422     return [
 423       {
 424         label: $localize`Actions for the comment`,
 425         isHeader: true,
 426         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
 427       },
 428
 429       {
 430         label: $localize`Delete comment`,
 431         isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
 432         handler: async abuse => {
 433           const res = await this.confirmService.confirm(
 434             $localize`Do you really want to delete this comment?`,
 435             $localize`Delete`
 436           )
 437           if (res === false) return
 438
 439           this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
 440             .subscribe(
 441               () => {
 442                 this.notifier.success($localize`Comment deleted.`)
 443
 444                 this.updateAbuseState(abuse, AbuseState.ACCEPTED)
 445               },
 446
 447               err => this.notifier.error(err.message)
 448             )
 449         }
 450       }
 451     ]
 452   }
 453
 454   private muteAccountHelper (account: Account) {
 455     this.blocklistService.blockAccountByInstance(account)
 456       .subscribe(
 457         () => {
 458           this.notifier.success($localize`Account ${account.nameWithHost} muted by the instance.`)
 459           account.mutedByInstance = true
 460         },
 461
 462         err => this.notifier.error(err.message)
 463       )
 464   }
 465
 466   private muteServerHelper (host: string) {
 467     this.blocklistService.blockServerByInstance(host)
 468       .subscribe(
 469         () => {
 470           this.notifier.success($localize`Server ${host} muted by the instance.`)
 471         },
 472
 473         err => this.notifier.error(err.message)
 474       )
 475   }
 476
 477   private toHtml (text: string) {
 478     return this.markdownRenderer.textMarkdownToHTML(text)
 479   }
 480 }