Add confirm when admin use custom js/css

5 files changed, 51 insertions, 11 deletions

diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index cc2c28de2..90274b248 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -10,13 +10,18 @@
       <div class="modal-body" >
         <div [innerHtml]="message"></div>
 
+        <div *ngIf="inputLabel && expectedInputValue" class="form-group">
+          <label for="confirmInput">{{ inputLabel }}</label>
+          <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
+        </div>
+
         <div class="form-group inputs">
           <span class="action-button action-button-cancel" (click)="cancel()">
             Cancel
           </span>
 
           <input
-            type="submit" value="Confirm" class="action-button-submit"
+            type="submit" value="Confirm" class="action-button-submit" [disabled]="isConfirmationDisabled()"
             (click)="confirm()"
           >
         </div>
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/core/confirm/confirm.component.scss
new file mode 100644
index 000000000..93dd7926b
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.component.scss
@@ -0,0 +1,17 @@
+@import '_variables';
+@import '_mixins';
+
+.button {
+  padding: 0 13px;
+}
+
+input[type=text] {
+  @include peertube-input-text(100%);
+  display: block;
+}
+
+.form-group {
+  margin: 20px 0;
+}
+
+
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
index 0515d969a..8f81b7a98 100644
--- a/client/src/app/core/confirm/confirm.component.ts
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -4,21 +4,20 @@ import { ModalDirective } from 'ngx-bootstrap/modal'
 
 import { ConfirmService } from './confirm.service'
 
-export interface ConfigChangedEvent {
-  columns: { [id: string]: { isDisplayed: boolean } }
-  config: { resultsPerPage: number }
-}
-
 @Component({
   selector: 'my-confirm',
   templateUrl: './confirm.component.html',
-  styles: [ '.button { padding: 0 13px; }' ]
+  styleUrls: [ './confirm.component.scss' ]
 })
 export class ConfirmComponent implements OnInit {
   @ViewChild('confirmModal') confirmModal: ModalDirective
 
   title = ''
   message = ''
+  expectedInputValue = ''
+  inputLabel = ''
+
+  inputValue = ''
 
   constructor (private confirmService: ConfirmService) {
     // Empty
@@ -31,10 +30,13 @@ export class ConfirmComponent implements OnInit {
     }
 
     this.confirmService.showConfirm.subscribe(
-      ({ title, message }) => {
+      ({ title, message, expectedInputValue, inputLabel }) => {
         this.title = title
         this.message = message
 
+        this.inputLabel = inputLabel
+        this.expectedInputValue = expectedInputValue
+
         this.showModal()
       }
     )
@@ -52,6 +54,13 @@ export class ConfirmComponent implements OnInit {
     this.hideModal()
   }
 
+  isConfirmationDisabled () {
+    // No input validation
+    if (!this.inputLabel || !this.expectedInputValue) return false
+
+    return this.expectedInputValue !== this.inputValue
+  }
+
   showModal () {
     this.confirmModal.show()
   }
diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts
index f12ff1848..f30feb9d0 100644
--- a/client/src/app/core/confirm/confirm.service.ts
+++ b/client/src/app/core/confirm/confirm.service.ts
@@ -1,15 +1,22 @@
 import { Injectable } from '@angular/core'
 import { Subject } from 'rxjs/Subject'
 import 'rxjs/add/operator/first'
+import 'rxjs/add/operator/toPromise'
 
 @Injectable()
 export class ConfirmService {
-  showConfirm = new Subject<{ title, message }>()
+  showConfirm = new Subject<{ title: string, message: string, inputLabel?: string, expectedInputValue?: string }>()
   confirmResponse = new Subject<boolean>()
 
-  confirm (message = '', title = '') {
+  confirm (message: string, title = '') {
     this.showConfirm.next({ title, message })
 
-    return this.confirmResponse.asObservable().first()
+    return this.confirmResponse.asObservable().first().toPromise()
+  }
+
+  confirmWithInput (message: string, inputLabel: string, expectedInputValue: string, title = '') {
+    this.showConfirm.next({ title, message, inputLabel, expectedInputValue })
+
+    return this.confirmResponse.asObservable().first().toPromise()
   }
 }
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index eea6f340b..36dbe8b5c 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common'
 import { NgModule, Optional, SkipSelf } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouterModule } from '@angular/router'
 import { LoadingBarModule } from '@ngx-loading-bar/core'
@@ -18,6 +19,7 @@ import { ServerService } from './server'
   imports: [
     CommonModule,
     RouterModule,
+    FormsModule,
     BrowserAnimationsModule,
 
     ModalModule,