Add custom modal to plugin helpers (#2631)

* Add custom modal component

* Add custom modal to app and plugins helpers

* Fixes custom modal component

* Add doc for custom modal

* Fix newline end of file html and scss files

* Move my-custom-modal component outside component for UserLoggedIn modals

* Move initializeCustomModal to ngAfterViewInit()

* Wrap events and conditionnals

* Replace ng-show with ngIf*

* Add modalRef to open only one modal + onCloseClick

* Refacto + Fix access methods of custom modal

* Fix methods names custom-modal.component

* Fix implement AfterViewInit & no default boolean

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

3 files changed, 133 insertions, 0 deletions

diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
new file mode 100644
index 000000000..06ecc2743
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.html
@@ -0,0 +1,20 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 class="modal-title">{{title}}</h4>
+    <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
+  </div>
+    
+  <div class="modal-body" [innerHTML]="content"></div>
+
+  <div *ngIf="hasCancel() || hasConfirm()" class="modal-footer inputs">
+    <input
+      *ngIf="hasCancel()" type="button" role="button" value="{{cancel.value}}" class="action-button action-button-cancel"
+      (click)="onCancelClick()" (key.enter)="onCancelClick()"
+    >
+
+    <input
+      *ngIf="hasConfirm()" type="button" role="button" value="{{confirm.value}}" class="action-button action-button-confirm"
+      (click)="onConfirmClick()" (key.enter)="onConfirmClick()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
new file mode 100644
index 000000000..a7fa30cf5
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -0,0 +1,20 @@
+@import '_mixins';
+@import '_variables';
+
+.modal-body {
+  font-size: 15px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+.action-button-cancel {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.action-button-confirm {
+  @include peertube-button;
+  @include orange-button;
+}
diff --git a/client/src/app/modal/custom-modal.component.ts b/client/src/app/modal/custom-modal.component.ts
new file mode 100644
index 000000000..a98579085
--- /dev/null
+++ b/client/src/app/modal/custom-modal.component.ts
@@ -0,0 +1,93 @@
+import { Component, ElementRef, ViewChild, Input } from '@angular/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'my-custom-modal',
+  templateUrl: './custom-modal.component.html',
+  styleUrls: [ './custom-modal.component.scss' ]
+})
+export class CustomModalComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  @Input() title: string
+  @Input() content: string
+  @Input() close?: boolean
+  @Input() cancel?: { value: string, action?: () => void }
+  @Input() confirm?: { value: string, action?: () => void }
+
+  private modalRef: NgbModalRef
+
+  constructor (
+    private modalService: NgbModal
+  ) { }
+
+  show (input: {
+    title: string,
+    content: string,
+    close?: boolean,
+    cancel?: { value: string, action?: () => void },
+    confirm?: { value: string, action?: () => void }
+  }) {
+    if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
+      console.error('Cannot open another custom modal, one is already opened.')
+      return
+    }
+
+    const { title, content, close, cancel, confirm } = input
+
+    this.title = title
+    this.content = content
+    this.close = close
+    this.cancel = cancel
+    this.confirm = confirm
+
+    this.modalRef = this.modalService.open(this.modal, {
+      centered: true,
+      backdrop: 'static',
+      keyboard: false,
+      size: 'lg'
+    })
+  }
+
+  onCancelClick () {
+    this.modalRef.close()
+
+    if (typeof this.cancel.action === 'function') {
+      this.cancel.action()
+    }
+
+    this.destroy()
+  }
+
+  onCloseClick () {
+    this.modalRef.close()
+    this.destroy()
+  }
+
+  onConfirmClick () {
+    this.modalRef.close()
+
+    if (typeof this.confirm.action === 'function') {
+      this.confirm.action()
+    }
+
+    this.destroy()
+  }
+
+  hasCancel () {
+    return typeof this.cancel !== 'undefined'
+  }
+
+  hasConfirm () {
+    return typeof this.confirm !== 'undefined'
+  }
+
+  private destroy () {
+    delete this.modalRef
+    delete this.title
+    delete this.content
+    delete this.close
+    delete this.cancel
+    delete this.confirm
+  }
+}