Add ability to report account

7 files changed, 502 insertions, 0 deletions

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/report-modals/comment-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
new file mode 100644
index 000000000..00d7b8d34
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/comment-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 { 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'
+
+@Component({
+  selector: 'my-comment-report',
+  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 }[] = []
+
+  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.comment.account.host
+    }
+
+    return ''
+  }
+
+  ngOnInit () {
+    this.modalTitle = this.i18n('Report comment')
+
+    this.buildForm({
+      reason: this.abuseValidatorsService.ABUSE_REASON,
+      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
+    })
+
+    this.predefinedReasons = this.abuseService.getPrefefinedReasons('comment')
+  }
+
+  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,
+      comment: {
+        id: this.comment.id
+      }
+    }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Comment reported.'))
+        this.hide()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  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/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
new file mode 100644
index 000000000..bda62312f
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -0,0 +1,62 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ modalTitle }}</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <form novalidate [formGroup]="form" (ngSubmit)="report()">
+
+    <div class="row">
+      <div class="col-5 form-group">
+
+          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+
+          <div class="ml-2 mt-2 d-flex flex-column">
+            <ng-container formGroupName="predefinedReasons">
+
+              <div class="form-group" *ngFor="let reason of predefinedReasons">
+                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                  <ng-template *ngIf="reason.help" ptTemplate="help">
+                    <div [innerHTML]="reason.help"></div>
+                  </ng-template>
+
+                  <ng-container *ngIf="reason.description" ngProjectAs="description">
+                    <div [innerHTML]="reason.description"></div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+
+            </ng-container>
+          </div>
+
+      </div>
+
+      <div class="col-7">
+        <div i18n class="information">
+          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">
+          <textarea
+            i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus
+            [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+          ></textarea>
+          <div *ngIf="formErrors.reason" class="form-error">
+            {{ formErrors.reason }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="hide()" (key.enter)="hide()"
+      >
+      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+    </div>
+
+    </form>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
new file mode 100644
index 000000000..b2606cbd8
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -0,0 +1,27 @@
+@import 'variables';
+@import 'mixins';
+
+.information {
+  margin-bottom: 20px;
+}
+
+textarea {
+  @include peertube-textarea(100%, 100px);
+}
+
+.start-at,
+.stop-at {
+  width: 300px;
+  display: flex;
+  align-items: center;
+
+  my-timestamp-input {
+    margin-left: 10px;
+  }
+}
+
+.screenratio {
+  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+    left: 0;
+  };
+}
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
new file mode 100644
index 000000000..4947088d1
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -0,0 +1,100 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Report video "{{ video.name }}"</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <form novalidate [formGroup]="form" (ngSubmit)="report()">
+
+    <div class="row">
+      <div class="col-5 form-group">
+
+          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+
+          <div class="ml-2 mt-2 d-flex flex-column">
+            <ng-container formGroupName="predefinedReasons">
+
+              <div class="form-group" *ngFor="let reason of predefinedReasons">
+                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                  <ng-template *ngIf="reason.help" ptTemplate="help">
+                    <div [innerHTML]="reason.help"></div>
+                  </ng-template>
+
+                  <ng-container *ngIf="reason.description" ngProjectAs="description">
+                    <div [innerHTML]="reason.description"></div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+
+            </ng-container>
+          </div>
+
+      </div>
+
+      <div class="col-7">
+        <div class="row justify-content-center">
+          <div class="col-12 col-lg-9 mb-2">
+            <div class="screenratio">
+              <div [innerHTML]="embedHtml"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-1 start-at" formGroupName="timestamp">
+          <my-peertube-checkbox
+            formControlName="hasStart"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestamp.startAt"
+            [maxTimestamp]="video.duration"
+            formControlName="startAt"
+            inputName="startAt"
+          >
+          </my-timestamp-input>
+        </div>
+
+        <div class="mb-3 stop-at"  formGroupName="timestamp" *ngIf="timestamp.hasStart">
+          <my-peertube-checkbox
+            formControlName="hasEnd"
+            i18n-labelText labelText="Stop at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestamp.endAt"
+            [maxTimestamp]="video.duration"
+            formControlName="endAt"
+            inputName="endAt"
+          >
+          </my-timestamp-input>
+        </div>
+
+        <div i18n class="information">
+          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">
+          <textarea
+            i18n-placeholder placeholder="Please describe the issue..." formControlName="reason" ngbAutofocus
+            [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+          ></textarea>
+          <div *ngIf="formErrors.reason" class="form-error">
+            {{ formErrors.reason }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group inputs">
+      <input
+        type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+        (click)="hide()" (key.enter)="hide()"
+      >
+      <input type="submit" i18n-value value="Submit" class="action-button-submit" [disabled]="!form.valid">
+    </div>
+
+    </form>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
new file mode 100644
index 000000000..7d53ea3c9
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -0,0 +1,122 @@
+import { mapValues, pickBy } from 'lodash-es'
+import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { Notifier } from '@app/core'
+import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+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'
+
+@Component({
+  selector: 'my-video-report',
+  templateUrl: './video-report.component.html',
+  styleUrls: [ './report.component.scss' ]
+})
+export class VideoReportComponent extends FormReactive implements OnInit {
+  @Input() video: Video = null
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  error: string = null
+  predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
+  embedHtml: SafeHtml
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private abuseService: AbuseService,
+    private notifier: Notifier,
+    private sanitizer: DomSanitizer,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get currentHost () {
+    return window.location.host
+  }
+
+  get originHost () {
+    if (this.isRemote()) {
+      return this.video.account.host
+    }
+
+    return ''
+  }
+
+  get timestamp () {
+    return this.form.get('timestamp').value
+  }
+
+  getVideoEmbed () {
+    return this.sanitizer.bypassSecurityTrustHtml(
+      buildVideoEmbed(
+        buildVideoLink({
+          baseUrl: this.video.embedUrl,
+          title: false,
+          warningTitle: false
+        })
+      )
+    )
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      reason: this.abuseValidatorsService.ABUSE_REASON,
+      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null),
+      timestamp: {
+        hasStart: null,
+        startAt: null,
+        hasEnd: null,
+        endAt: null
+      }
+    })
+
+    this.predefinedReasons = this.abuseService.getPrefefinedReasons('video')
+
+    this.embedHtml = this.getVideoEmbed()
+  }
+
+  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[]
+    const { hasStart, startAt, hasEnd, endAt } = this.form.get('timestamp').value
+
+    this.abuseService.reportVideo({
+      reason,
+      predefinedReasons,
+      video: {
+        id: this.video.id,
+        startAt: hasStart && startAt ? startAt : undefined,
+        endAt: hasEnd && endAt ? endAt : undefined
+      }
+    }).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video reported.'))
+        this.hide()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  isRemote () {
+    return !this.video.isLocal
+  }
+}