Add ability to report account

10 files changed, 125 insertions, 34 deletions

diff --git a/client/src/app/shared/shared-moderation/comment-report.component.scss b/client/src/app/shared/shared-moderation/comment-report.component.scss
deleted file mode 100644
index 17a33d3a2..000000000
--- a/client/src/app/shared/shared-moderation/comment-report.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.information {
-  margin-bottom: 20px;
-}
-
-textarea {
-  @include peertube-textarea(100%, 100px);
-}
-
diff --git a/client/src/app/shared/shared-moderation/index.ts b/client/src/app/shared/shared-moderation/index.ts
index d6c4a10be..41c910ffe 100644
--- a/client/src/app/shared/shared-moderation/index.ts
+++ b/client/src/app/shared/shared-moderation/index.ts
@@ -1,3 +1,5 @@
+export * from './report-modals'
+
 export * from './abuse.service'
 export * from './account-block.model'
 export * from './account-blocklist.component'
@@ -9,5 +11,4 @@ export * from './user-ban-modal.component'
 export * from './user-moderation-dropdown.component'
 export * from './video-block.component'
 export * from './video-block.service'
-export * from './video-report.component'
 export * from './shared-moderation.module'
diff --git a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
new file mode 100644
index 000000000..78ca934c7
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
@@ -0,0 +1,94 @@
+import { mapValues, pickBy } from 'lodash-es'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { Account } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
+import { AbuseService } from '../abuse.service'
+
+@Component({
+  selector: 'my-account-report',
+  templateUrl: './report.component.html',
+  styleUrls: [ './report.component.scss' ]
+})
+export class AccountReportComponent extends FormReactive implements OnInit {
+  @Input() account: Account = null
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  error: string = null
+  predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
+  modalTitle: string
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private abuseService: AbuseService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get currentHost () {
+    return window.location.host
+  }
+
+  get originHost () {
+    if (this.isRemote()) {
+      return this.account.host
+    }
+
+    return ''
+  }
+
+  ngOnInit () {
+    this.modalTitle = this.i18n('Report {{displayName}}', { displayName: this.account.displayName })
+
+    this.buildForm({
+      reason: this.abuseValidatorsService.ABUSE_REASON,
+      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
+    })
+
+    this.predefinedReasons = this.abuseService.getPrefefinedReasons('account')
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false, size: 'lg' })
+  }
+
+  hide () {
+    this.openedModal.close()
+    this.openedModal = null
+  }
+
+  report () {
+    const reason = this.form.get('reason').value
+    const predefinedReasons = Object.keys(pickBy(this.form.get('predefinedReasons').value)) as AbusePredefinedReasonsString[]
+
+    this.abuseService.reportVideo({
+      reason,
+      predefinedReasons,
+      account: {
+        id: this.account.id
+      }
+    }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Account reported.'))
+        this.hide()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  isRemote () {
+    return !this.account.isLocal
+  }
+}
diff --git a/client/src/app/shared/shared-moderation/comment-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
index 5db4b2dc1..00d7b8d34 100644
--- a/client/src/app/shared/shared-moderation/comment-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
@@ -1,28 +1,27 @@
 import { mapValues, pickBy } from 'lodash-es'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { SafeHtml } from '@angular/platform-browser'
-import { VideoComment } from '@app/+videos/+video-watch/comment/video-comment.model'
 import { Notifier } from '@app/core'
 import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { VideoComment } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
-import { AbuseService } from './abuse.service'
+import { AbuseService } from '../abuse.service'
 
 @Component({
   selector: 'my-comment-report',
-  templateUrl: './comment-report.component.html',
-  styleUrls: [ './comment-report.component.scss' ]
+  templateUrl: './report.component.html',
+  styleUrls: [ './report.component.scss' ]
 })
 export class CommentReportComponent extends FormReactive implements OnInit {
   @Input() comment: VideoComment = null
 
   @ViewChild('modal', { static: true }) modal: NgbModal
 
+  modalTitle: string
   error: string = null
   predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
-  embedHtml: SafeHtml
 
   private openedModal: NgbModalRef
 
@@ -42,7 +41,7 @@ export class CommentReportComponent extends FormReactive implements OnInit {
   }
 
   get originHost () {
-    if (this.isRemoteComment()) {
+    if (this.isRemote()) {
       return this.comment.account.host
     }
 
@@ -50,6 +49,8 @@ export class CommentReportComponent extends FormReactive implements OnInit {
   }
 
   ngOnInit () {
+    this.modalTitle = this.i18n('Report comment')
+
     this.buildForm({
       reason: this.abuseValidatorsService.ABUSE_REASON,
       predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
@@ -87,7 +88,7 @@ export class CommentReportComponent extends FormReactive implements OnInit {
     )
   }
 
-  isRemoteComment () {
+  isRemote () {
     return !this.comment.isLocal
   }
 }
diff --git a/client/src/app/shared/shared-moderation/report-modals/index.ts b/client/src/app/shared/shared-moderation/report-modals/index.ts
new file mode 100644
index 000000000..f3c4058ae
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/index.ts
@@ -0,0 +1,3 @@
+export * from './account-report.component'
+export * from './comment-report.component'
+export * from './video-report.component'
diff --git a/client/src/app/shared/shared-moderation/comment-report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 1105b3788..bda62312f 100644
--- a/client/src/app/shared/shared-moderation/comment-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -1,6 +1,6 @@
 <ng-template #modal>
   <div class="modal-header">
-    <h4 i18n class="modal-title">Report comment</h4>
+    <h4 class="modal-title">{{ modalTitle }}</h4>
     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
@@ -34,7 +34,7 @@
 
       <div class="col-7">
         <div i18n class="information">
-          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteComment()"> and will be forwarded to the comment origin ({{ originHost }}) too</ng-container>.
+          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemote()"> and will be forwarded to the comment origin ({{ originHost }}) too</ng-container>.
         </div>
 
         <div class="form-group">
diff --git a/client/src/app/shared/shared-moderation/video-report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index b2606cbd8..b2606cbd8 100644
--- a/client/src/app/shared/shared-moderation/video-report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
diff --git a/client/src/app/shared/shared-moderation/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index b724ecb18..4947088d1 100644
--- a/client/src/app/shared/shared-moderation/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -72,7 +72,7 @@
         </div>
 
         <div i18n class="information">
-          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemoteVideo()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
+          Your report will be sent to moderators of {{ currentHost }}<ng-container *ngIf="isRemote()"> and will be forwarded to the video origin ({{ originHost }}) too</ng-container>.
         </div>
 
         <div class="form-group">
diff --git a/client/src/app/shared/shared-moderation/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index 26e7b62ba..7d53ea3c9 100644
--- a/client/src/app/shared/shared-moderation/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -8,13 +8,13 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
-import { Video } from '../shared-main'
-import { AbuseService } from './abuse.service'
+import { Video } from '../../shared-main'
+import { AbuseService } from '../abuse.service'
 
 @Component({
   selector: 'my-video-report',
   templateUrl: './video-report.component.html',
-  styleUrls: [ './video-report.component.scss' ]
+  styleUrls: [ './report.component.scss' ]
 })
 export class VideoReportComponent extends FormReactive implements OnInit {
   @Input() video: Video = null
@@ -44,7 +44,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
   }
 
   get originHost () {
-    if (this.isRemoteVideo()) {
+    if (this.isRemote()) {
       return this.video.account.host
     }
 
@@ -116,7 +116,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
     )
   }
 
-  isRemoteVideo () {
+  isRemote () {
     return !this.video.isLocal
   }
 }
diff --git a/client/src/app/shared/shared-moderation/shared-moderation.module.ts b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
index ff4021a33..8fa9ee794 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -3,22 +3,23 @@ import { NgModule } from '@angular/core'
 import { SharedFormModule } from '../shared-forms/shared-form.module'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SharedVideoCommentModule } from '../shared-video-comment'
+import { AbuseService } from './abuse.service'
 import { BatchDomainsModalComponent } from './batch-domains-modal.component'
 import { BlocklistService } from './blocklist.service'
 import { BulkService } from './bulk.service'
 import { UserBanModalComponent } from './user-ban-modal.component'
 import { UserModerationDropdownComponent } from './user-moderation-dropdown.component'
-import { AbuseService } from './abuse.service'
 import { VideoBlockComponent } from './video-block.component'
 import { VideoBlockService } from './video-block.service'
-import { VideoReportComponent } from './video-report.component'
-import { CommentReportComponent } from './comment-report.component'
+import { VideoReportComponent, AccountReportComponent, CommentReportComponent } from './report-modals'
 
 @NgModule({
   imports: [
     SharedMainModule,
     SharedFormModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedVideoCommentModule
   ],
 
   declarations: [
@@ -27,7 +28,8 @@ import { CommentReportComponent } from './comment-report.component'
     VideoBlockComponent,
     VideoReportComponent,
     BatchDomainsModalComponent,
-    CommentReportComponent
+    CommentReportComponent,
+    AccountReportComponent
   ],
 
   exports: [
@@ -36,7 +38,8 @@ import { CommentReportComponent } from './comment-report.component'
     VideoBlockComponent,
     VideoReportComponent,
     BatchDomainsModalComponent,
-    CommentReportComponent
+    CommentReportComponent,
+    AccountReportComponent
   ],
 
   providers: [