8 files changed, 265 insertions, 11 deletions

diff --git a/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
index 739115e19..5f15963f3 100644
--- a/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
@@ -7,6 +7,7 @@ import { BuildFormValidator } from './form-validator.service'
 export class AbuseValidatorsService {
   readonly ABUSE_REASON: BuildFormValidator
   readonly ABUSE_MODERATION_COMMENT: BuildFormValidator
+  readonly ABUSE_MESSAGE: BuildFormValidator
 
   constructor (private i18n: I18n) {
     this.ABUSE_REASON = {
@@ -26,5 +27,14 @@ export class AbuseValidatorsService {
         'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.')
       }
     }
+
+    this.ABUSE_MESSAGE = {
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
+      MESSAGES: {
+        'required': this.i18n('Abuse message is required.'),
+        'minlength': this.i18n('Abuse message must be at least 2 characters long.'),
+        'maxlength': this.i18n('Abuse message cannot be more than 3000 characters long.')
+      }
+    }
   }
 }
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index c58ef29fa..409681702 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -64,8 +64,7 @@ const icons = {
   'go': require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
   'cross': require('!!raw-loader?!../../../assets/images/feather/x.svg').default,
   'tick': require('!!raw-loader?!../../../assets/images/feather/check.svg').default,
-  'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
-  'columns': require('!!raw-loader?!../../../assets/images/feather/columns.svg').default
+  'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.html b/client/src/app/shared/shared-moderation/abuse-message-modal.component.html
new file mode 100644
index 000000000..67c6a3081
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/abuse-message-modal.component.html
@@ -0,0 +1,40 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Messages</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <div class="messages" #messagesBlock>
+      <div
+        *ngFor="let message of abuseMessages"
+        class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }"
+      >
+
+        <div class="author">{{ message.account.name }}</div>
+
+        <div class="bubble">
+          <div class="content">{{ message.message }}</div>
+          <div class="date">{{ message.createdAt | date }}</div>
+        </div>
+      </div>
+    </div>
+
+    <form novalidate [formGroup]="form" (ngSubmit)="addMessage()">
+      <div class="form-group">
+        <textarea formControlName="message" ngbAutofocus [ngClass]="{ 'input-error': formErrors['message'] }" class="form-control"></textarea>
+
+        <div *ngIf="formErrors.message" class="form-error">
+          {{ formErrors.message }}
+        </div>
+      </div>
+
+      <div class="form-group inputs">
+        <input type="submit" i18n-value value="Add message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
+      </div>
+    </form>
+
+  </div>
+
+</ng-template>
diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss b/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss
new file mode 100644
index 000000000..89d6b88c1
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/abuse-message-modal.component.scss
@@ -0,0 +1,57 @@
+@import 'variables';
+@import 'mixins';
+
+form {
+  margin: 20px 20px 0 0;
+}
+
+textarea {
+  @include peertube-textarea(100%, 70px);
+
+  margin-top: 20px;
+}
+
+.messages {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  margin-right: 5px;
+}
+
+.message-block {
+  margin-bottom: 10px;
+  max-width: 60%;
+
+  .author {
+    color: var(--greyForegroundColor);
+    font-size: 14px;
+  }
+
+  .bubble {
+    color: var(--mainForegroundColor);
+    background-color: var(--greyBackgroundColor);
+    border-radius: 10px;
+    padding: 5px 10px;
+
+    &.by-me {
+      color: var(--mainForegroundColor);
+      background-color: var(--secondaryColor);
+    }
+
+    &.by-moderator {
+      color: #fff;
+      background-color: var(--mainColor);
+
+      align-self: flex-end;
+    }
+
+    .content {
+      font-size: 15px;
+    }
+
+    .date {
+      font-size: 13px;
+      color: var(--greyForegroundColor);
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts b/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts
new file mode 100644
index 000000000..5822dfe1d
--- /dev/null
+++ b/client/src/app/shared/shared-moderation/abuse-message-modal.component.ts
@@ -0,0 +1,115 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild, OnInit } from '@angular/core'
+import { Notifier, AuthService } from '@app/core'
+import { FormReactive, FormValidatorService, AbuseValidatorsService } 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 { AbuseMessage, UserAbuse } from '@shared/models'
+import { AbuseService } from './abuse.service'
+
+@Component({
+  selector: 'my-abuse-message-modal',
+  templateUrl: './abuse-message-modal.component.html',
+  styleUrls: [ './abuse-message-modal.component.scss' ]
+})
+export class AbuseMessageModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef
+
+  @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>()
+
+  abuseMessages: AbuseMessage[] = []
+  textareaMessage: string
+  sendingMessage = false
+
+  private openedModal: NgbModalRef
+  private abuse: UserAbuse
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private modalService: NgbModal,
+    private auth: AuthService,
+    private notifier: Notifier,
+    private i18n: I18n,
+    private abuseService: AbuseService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      message: this.abuseValidatorsService.ABUSE_MESSAGE
+    })
+  }
+
+  openModal (abuse: UserAbuse) {
+    this.abuse = abuse
+
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+
+    this.loadMessages()
+  }
+
+  hide () {
+    this.abuseMessages = []
+    this.openedModal.close()
+  }
+
+  addMessage () {
+    this.sendingMessage = true
+
+    this.abuseService.addAbuseMessage(this.abuse, this.form.value['message'])
+      .subscribe(
+        () => {
+          this.form.reset()
+          this.sendingMessage = false
+          this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length + 1 })
+
+          this.loadMessages()
+        },
+
+        err => {
+          this.sendingMessage = false
+          console.error(err)
+          this.notifier.error('Sorry but you cannot send this message. Please retry later')
+        }
+      )
+  }
+
+  deleteMessage (abuseMessage: AbuseMessage) {
+    this.abuseService.deleteAbuseMessage(this.abuse, abuseMessage)
+      .subscribe(
+        () => {
+          this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length - 1 })
+
+          this.abuseMessages = this.abuseMessages.filter(m => m.id !== abuseMessage.id)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  isMessageByMe (abuseMessage: AbuseMessage) {
+    return this.auth.getUser().account.id === abuseMessage.account.id
+  }
+
+  private loadMessages () {
+    this.abuseService.listAbuseMessages(this.abuse)
+      .subscribe(
+        res => {
+          this.abuseMessages = res.data
+
+          setTimeout(() => {
+            if (!this.messagesBlock) return
+
+            const element = this.messagesBlock.nativeElement as HTMLElement
+            element.scrollIntoView({ block: 'end', inline: 'nearest' })
+          })
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+}
diff --git a/client/src/app/shared/shared-moderation/abuse.service.ts b/client/src/app/shared/shared-moderation/abuse.service.ts
index 95ac16955..652d8370f 100644
--- a/client/src/app/shared/shared-moderation/abuse.service.ts
+++ b/client/src/app/shared/shared-moderation/abuse.service.ts
@@ -5,7 +5,7 @@ import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, RestPagination, RestService } from '@app/core'
-import { Abuse, AbuseCreate, AbuseFilter, AbusePredefinedReasonsString, AbuseState, AbuseUpdate, ResultList } from '@shared/models'
+import { AdminAbuse, AbuseCreate, AbuseFilter, AbusePredefinedReasonsString, AbuseState, AbuseUpdate, ResultList, UserAbuse, AbuseMessage } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
@@ -20,11 +20,11 @@ export class AbuseService {
     private restExtractor: RestExtractor
   ) { }
 
-  getAbuses (options: {
+  getAdminAbuses (options: {
     pagination: RestPagination,
     sort: SortMeta,
     search?: string
-  }): Observable<ResultList<Abuse>> {
+  }): Observable<ResultList<AdminAbuse>> {
     const { pagination, sort, search } = options
     const url = AbuseService.BASE_ABUSE_URL
 
@@ -61,7 +61,7 @@ export class AbuseService {
       params = this.restService.addObjectParams(params, filters)
     }
 
-    return this.authHttp.get<ResultList<Abuse>>(url, { params })
+    return this.authHttp.get<ResultList<AdminAbuse>>(url, { params })
       .pipe(
         catchError(res => this.restExtractor.handleError(res))
       )
@@ -79,7 +79,7 @@ export class AbuseService {
       )
   }
 
-  updateAbuse (abuse: Abuse, abuseUpdate: AbuseUpdate) {
+  updateAbuse (abuse: AdminAbuse, abuseUpdate: AbuseUpdate) {
     const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id
 
     return this.authHttp.put(url, abuseUpdate)
@@ -89,7 +89,7 @@ export class AbuseService {
       )
   }
 
-  removeAbuse (abuse: Abuse) {
+  removeAbuse (abuse: AdminAbuse) {
     const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id
 
     return this.authHttp.delete(url)
@@ -99,6 +99,35 @@ export class AbuseService {
       )
   }
 
+  addAbuseMessage (abuse: UserAbuse, message: string) {
+    const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id + '/messages'
+
+    return this.authHttp.post(url, { message })
+    .pipe(
+      map(this.restExtractor.extractDataBool),
+      catchError(res => this.restExtractor.handleError(res))
+    )
+  }
+
+  listAbuseMessages (abuse: UserAbuse) {
+    const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id + '/messages'
+
+    return this.authHttp.get<ResultList<AbuseMessage>>(url)
+    .pipe(
+      catchError(res => this.restExtractor.handleError(res))
+    )
+  }
+
+  deleteAbuseMessage (abuse: UserAbuse, abuseMessage: AbuseMessage) {
+    const url = AbuseService.BASE_ABUSE_URL + '/' + abuse.id + '/messages/' + abuseMessage.id
+
+    return this.authHttp.delete(url)
+    .pipe(
+      map(this.restExtractor.extractDataBool),
+      catchError(res => this.restExtractor.handleError(res))
+    )
+  }
+
   getPrefefinedReasons (type: AbuseFilter) {
     let reasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = [
       {
diff --git a/client/src/app/shared/shared-moderation/index.ts b/client/src/app/shared/shared-moderation/index.ts
index 41c910ffe..c8082d4b3 100644
--- a/client/src/app/shared/shared-moderation/index.ts
+++ b/client/src/app/shared/shared-moderation/index.ts
@@ -1,5 +1,6 @@
 export * from './report-modals'
 
+export * from './abuse-message-modal.component'
 export * from './abuse.service'
 export * from './account-block.model'
 export * from './account-blocklist.component'
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 8fa9ee794..b5b6daf27 100644
--- a/client/src/app/shared/shared-moderation/shared-moderation.module.ts
+++ b/client/src/app/shared/shared-moderation/shared-moderation.module.ts
@@ -4,15 +4,16 @@ 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 { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { AbuseService } from './abuse.service'
 import { BatchDomainsModalComponent } from './batch-domains-modal.component'
 import { BlocklistService } from './blocklist.service'
 import { BulkService } from './bulk.service'
+import { AccountReportComponent, CommentReportComponent, VideoReportComponent } from './report-modals'
 import { UserBanModalComponent } from './user-ban-modal.component'
 import { UserModerationDropdownComponent } from './user-moderation-dropdown.component'
 import { VideoBlockComponent } from './video-block.component'
 import { VideoBlockService } from './video-block.service'
-import { VideoReportComponent, AccountReportComponent, CommentReportComponent } from './report-modals'
 
 @NgModule({
   imports: [
@@ -29,7 +30,8 @@ import { VideoReportComponent, AccountReportComponent, CommentReportComponent }
     VideoReportComponent,
     BatchDomainsModalComponent,
     CommentReportComponent,
-    AccountReportComponent
+    AccountReportComponent,
+    AbuseMessageModalComponent
   ],
 
   exports: [
@@ -39,7 +41,8 @@ import { VideoReportComponent, AccountReportComponent, CommentReportComponent }
     VideoReportComponent,
     BatchDomainsModalComponent,
     CommentReportComponent,
-    AccountReportComponent
+    AccountReportComponent,
+    AbuseMessageModalComponent
   ],
 
   providers: [