Client: better confirm box for a beautiful world

client/src/app/+admin/friends/friend-add/friend-add.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 
 import { NotificationsService } from 'angular2-notifications';
 
+import { ConfirmService } from '../../../core';
 import { validateHost } from '../../../shared';
 import { FriendService } from '../shared';
 
@@ -20,6 +21,7 @@ export class FriendAddComponent implements OnInit {
   constructor(
     private router: Router,
     private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
     private friendService: FriendService
   ) {}
 
@@ -84,16 +86,20 @@ export class FriendAddComponent implements OnInit {
       return;
     }
 
-    const confirmMessage = 'Are you sure to make friends with:\n - ' + notEmptyHosts.join('\n - ');
-    if (!confirm(confirmMessage)) return;
+    const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ');
+    this.confirmService.confirm(confirmMessage, 'Make friends').subscribe(
+      res => {
+        if (res === false) return;
 
-    this.friendService.makeFriends(notEmptyHosts).subscribe(
-      status => {
-        this.notificationsService.success('Sucess', 'Make friends request sent!');
-        this.router.navigate([ '/admin/friends/list' ]);
-      },
+        this.friendService.makeFriends(notEmptyHosts).subscribe(
+          status => {
+            this.notificationsService.success('Sucess', 'Make friends request sent!');
+            this.router.navigate([ '/admin/friends/list' ]);
+          },
 
-      err => this.notificationsService.error('Error', err.text)
+          err => this.notificationsService.error('Error', err.text)
+        );
+      }
     );
   }
 

client/src/app/+admin/friends/friend-list/friend-list.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
 
+import { ConfirmService } from '../../../core';
 import { Friend, FriendService } from '../shared';
 
 @Component({
@@ -14,6 +15,7 @@ export class FriendListComponent implements OnInit {
 
   constructor(
     private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
     private friendService: FriendService
   ) {  }
 
@@ -22,16 +24,21 @@ export class FriendListComponent implements OnInit {
   }
 
   quitFriends() {
-    if (!confirm('Are you sure?')) return;
+    const confirmMessage = 'Do you really want to quit your friends? All their videos will be deleted.';
+    this.confirmService.confirm(confirmMessage, 'Quit friends').subscribe(
+      res => {
+        if (res === false) return;
 
-    this.friendService.quitFriends().subscribe(
-      status => {
-        this.notificationsService.success('Sucess', 'Friends left!');
+        this.friendService.quitFriends().subscribe(
+          status => {
+            this.notificationsService.success('Sucess', 'Friends left!');
 
-        this.getFriends();
-      },
+            this.getFriends();
+          },
 
-      err => this.notificationsService.error('Error', err.text)
+          err => this.notificationsService.error('Error', err.text)
+        );
+      }
     );
   }
 

client/src/app/+admin/users/user-list/user-list.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
 
+import { ConfirmService } from '../../../core';
 import { User } from '../../../shared';
 import { UserService } from '../shared';
 
@@ -16,6 +17,7 @@ export class UserListComponent implements OnInit {
 
   constructor(
     private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
     private userService: UserService
   ) {}
 
@@ -36,15 +38,19 @@ export class UserListComponent implements OnInit {
 
 
   removeUser(user: User) {
-    if (confirm('Are you sure?')) {
-      this.userService.removeUser(user).subscribe(
-        () => {
-          this.notificationsService.success('Success', `User ${user.username} deleted.`);
-          this.getUsers();
-        },
+    this.confirmService.confirm('Do you really want to delete this user?', 'Delete').subscribe(
+      res => {
+        if (res === false) return;
 
-        err => this.notificationsService.error('Error', err.text)
-      );
-    }
+        this.userService.removeUser(user).subscribe(
+          () => {
+            this.notificationsService.success('Success', `User ${user.username} deleted.`);
+            this.getUsers();
+          },
+
+          err => this.notificationsService.error('Error', err.text)
+        );
+      }
+    );
   }
 }

client/src/app/app.component.html

@@ -23,6 +23,7 @@
   </div>
 
   <simple-notifications [options]="notificationOptions"></simple-notifications>
+  <my-confirm></my-confirm>
 
   <footer>
     PeerTube, CopyLeft 2015-2016

client/src/app/core/confirm/confirm.component.html

@@ -0,0 +1,20 @@
+<div bsModal #confirmModal="bs-modal" class="modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="abort()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">{{ title }}</h4>
+      </div>
+
+      <div class="modal-body" [innerHtml]="message"></div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="abort()">Annuler</button>
+        <button type="button" class="btn btn-primary" (click)="confirm()">Valider</button>
+      </div>
+    </div>
+  </div>
+</div>

client/src/app/core/confirm/confirm.component.ts

@@ -0,0 +1,61 @@
+import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
+
+import { ModalDirective } from 'ng2-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'
+})
+export class ConfirmComponent implements OnInit {
+  @ViewChild('confirmModal') confirmModal: ModalDirective;
+
+  title = '';
+  message = '';
+
+  constructor (private confirmService: ConfirmService) {
+    // Empty
+  }
+
+  ngOnInit() {
+    this.confirmModal.config = {
+      backdrop: 'static',
+      keyboard: false
+    };
+
+    this.confirmService.showConfirm.subscribe(
+      ({ title, message }) => {
+        this.title = title;
+        this.message = message;
+
+        this.showModal();
+      }
+    );
+  }
+
+  @HostListener('keydown.enter')
+  confirm() {
+    this.confirmService.confirmResponse.next(true);
+    this.hideModal();
+  }
+
+  @HostListener('keydown.esc')
+  abort() {
+    this.confirmService.confirmResponse.next(false);
+    this.hideModal();
+  }
+
+  showModal() {
+    this.confirmModal.show();
+  }
+
+  hideModal() {
+    this.confirmModal.hide();
+  }
+}

client/src/app/core/confirm/confirm.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/first';
+
+@Injectable()
+export class ConfirmService {
+  showConfirm = new Subject<{ title, message }>();
+  confirmResponse = new Subject<boolean>();
+
+  confirm(message: string = '', title: string = '') {
+    this.showConfirm.next({ title, message });
+
+    return this.confirmResponse.asObservable().first();
+  }
+}

client/src/app/core/confirm/index.ts

@@ -0,0 +1,2 @@
+export * from './confirm.component';
+export * from './confirm.service';

client/src/app/core/core.module.ts

@@ -4,8 +4,10 @@ import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
 import { SimpleNotificationsModule } from 'angular2-notifications';
+import { ModalModule } from 'ng2-bootstrap/modal';
 
 import { AuthService } from './auth';
+import { ConfirmComponent, ConfirmService } from './confirm';
 import { MenuComponent, MenuAdminComponent } from './menu';
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
@@ -15,19 +17,28 @@ import { throwIfAlreadyLoaded } from './module-import-guard';
     HttpModule,
     RouterModule,
 
+    ModalModule,
     SimpleNotificationsModule
   ],
+
   declarations: [
+    ConfirmComponent,
     MenuComponent,
     MenuAdminComponent
   ],
+
   exports: [
     SimpleNotificationsModule,
 
+    ConfirmComponent,
     MenuComponent,
     MenuAdminComponent
   ],
-  providers: [ AuthService ]
+
+  providers: [
+    AuthService,
+    ConfirmService
+  ]
 })
 export class CoreModule {
    constructor( @Optional() @SkipSelf() parentModule: CoreModule) {

client/src/app/core/index.ts

@@ -1,2 +1,4 @@
 export * from './auth';
+export * from './confirm';
+export * from './menu';
 export * from './core.module'

client/src/app/videos/video-list/video-miniature.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
 
+import { ConfirmService } from '../../core';
 import { SortField, Video, VideoService } from '../shared';
 import { User } from '../../shared';
 
@@ -22,6 +23,7 @@ export class VideoMiniatureComponent {
 
   constructor(
     private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
     private videoService: VideoService
   ) {}
 
@@ -38,12 +40,16 @@ export class VideoMiniatureComponent {
   }
 
   removeVideo(id: string) {
-    if (confirm('Do you really want to remove this video?')) {
-      this.videoService.removeVideo(id).subscribe(
-        status => this.removed.emit(true),
+    this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
+      res => {
+        if (res === false) return;
 
-        error => this.notificationsService.error('Error', error.text)
-      );
-    }
+        this.videoService.removeVideo(id).subscribe(
+          status => this.removed.emit(true),
+
+          error => this.notificationsService.error('Error', error.text)
+        );
+      }
+    );
   }
 }

client/src/app/videos/video-watch/video-report.component.ts

@@ -57,13 +57,13 @@ export class VideoReportComponent extends FormReactive implements OnInit {
     const reason = this.form.value['reason']
 
     this.videoAbuseService.reportVideo(this.video.id, reason)
-                     .subscribe(
-                       () => {
-                         this.notificationsService.success('Success', 'Video reported.');
-                         this.hide();
-                       },
+                          .subscribe(
+                            () => {
+                              this.notificationsService.success('Success', 'Video reported.');
+                              this.hide();
+                            },
 
-                       err => this.notificationsService.error('Error', err.text);
-                      )
+                            err => this.notificationsService.error('Error', err.text)
+                           );
   }
 }