aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-01-27 16:54:44 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-01-27 16:59:56 +0100
commit5769e1db8d3d5a1e3baa8dff23090cfe93d48a50 (patch)
treeacbb14fda82b7517734f22d4ca57fb5e1ff9ef04
parent7ddd02c9b8c1e088f6679a2227f105e6439fc992 (diff)
downloadPeerTube-5769e1db8d3d5a1e3baa8dff23090cfe93d48a50.tar.gz
PeerTube-5769e1db8d3d5a1e3baa8dff23090cfe93d48a50.tar.zst
PeerTube-5769e1db8d3d5a1e3baa8dff23090cfe93d48a50.zip
Client: better confirm box for a beautiful world
-rw-r--r--client/src/app/+admin/friends/friend-add/friend-add.component.ts22
-rw-r--r--client/src/app/+admin/friends/friend-list/friend-list.component.ts21
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.ts26
-rw-r--r--client/src/app/app.component.html1
-rw-r--r--client/src/app/core/confirm/confirm.component.html20
-rw-r--r--client/src/app/core/confirm/confirm.component.ts61
-rw-r--r--client/src/app/core/confirm/confirm.service.ts15
-rw-r--r--client/src/app/core/confirm/index.ts2
-rw-r--r--client/src/app/core/core.module.ts13
-rw-r--r--client/src/app/core/index.ts2
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.ts18
-rw-r--r--client/src/app/videos/video-watch/video-report.component.ts14
12 files changed, 176 insertions, 39 deletions
diff --git a/client/src/app/+admin/friends/friend-add/friend-add.component.ts b/client/src/app/+admin/friends/friend-add/friend-add.component.ts
index a271970ae..12c46e5cd 100644
--- a/client/src/app/+admin/friends/friend-add/friend-add.component.ts
+++ b/client/src/app/+admin/friends/friend-add/friend-add.component.ts
@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
4 4
5import { NotificationsService } from 'angular2-notifications'; 5import { NotificationsService } from 'angular2-notifications';
6 6
7import { ConfirmService } from '../../../core';
7import { validateHost } from '../../../shared'; 8import { validateHost } from '../../../shared';
8import { FriendService } from '../shared'; 9import { FriendService } from '../shared';
9 10
@@ -20,6 +21,7 @@ export class FriendAddComponent implements OnInit {
20 constructor( 21 constructor(
21 private router: Router, 22 private router: Router,
22 private notificationsService: NotificationsService, 23 private notificationsService: NotificationsService,
24 private confirmService: ConfirmService,
23 private friendService: FriendService 25 private friendService: FriendService
24 ) {} 26 ) {}
25 27
@@ -84,16 +86,20 @@ export class FriendAddComponent implements OnInit {
84 return; 86 return;
85 } 87 }
86 88
87 const confirmMessage = 'Are you sure to make friends with:\n - ' + notEmptyHosts.join('\n - '); 89 const confirmMessage = 'Are you sure to make friends with:<br /> - ' + notEmptyHosts.join('<br /> - ');
88 if (!confirm(confirmMessage)) return; 90 this.confirmService.confirm(confirmMessage, 'Make friends').subscribe(
91 res => {
92 if (res === false) return;
89 93
90 this.friendService.makeFriends(notEmptyHosts).subscribe( 94 this.friendService.makeFriends(notEmptyHosts).subscribe(
91 status => { 95 status => {
92 this.notificationsService.success('Sucess', 'Make friends request sent!'); 96 this.notificationsService.success('Sucess', 'Make friends request sent!');
93 this.router.navigate([ '/admin/friends/list' ]); 97 this.router.navigate([ '/admin/friends/list' ]);
94 }, 98 },
95 99
96 err => this.notificationsService.error('Error', err.text) 100 err => this.notificationsService.error('Error', err.text)
101 );
102 }
97 ); 103 );
98 } 104 }
99 105
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.ts b/client/src/app/+admin/friends/friend-list/friend-list.component.ts
index 700ea7a69..175ad9cba 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.ts
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
2 2
3import { NotificationsService } from 'angular2-notifications'; 3import { NotificationsService } from 'angular2-notifications';
4 4
5import { ConfirmService } from '../../../core';
5import { Friend, FriendService } from '../shared'; 6import { Friend, FriendService } from '../shared';
6 7
7@Component({ 8@Component({
@@ -14,6 +15,7 @@ export class FriendListComponent implements OnInit {
14 15
15 constructor( 16 constructor(
16 private notificationsService: NotificationsService, 17 private notificationsService: NotificationsService,
18 private confirmService: ConfirmService,
17 private friendService: FriendService 19 private friendService: FriendService
18 ) { } 20 ) { }
19 21
@@ -22,16 +24,21 @@ export class FriendListComponent implements OnInit {
22 } 24 }
23 25
24 quitFriends() { 26 quitFriends() {
25 if (!confirm('Are you sure?')) return; 27 const confirmMessage = 'Do you really want to quit your friends? All their videos will be deleted.';
28 this.confirmService.confirm(confirmMessage, 'Quit friends').subscribe(
29 res => {
30 if (res === false) return;
26 31
27 this.friendService.quitFriends().subscribe( 32 this.friendService.quitFriends().subscribe(
28 status => { 33 status => {
29 this.notificationsService.success('Sucess', 'Friends left!'); 34 this.notificationsService.success('Sucess', 'Friends left!');
30 35
31 this.getFriends(); 36 this.getFriends();
32 }, 37 },
33 38
34 err => this.notificationsService.error('Error', err.text) 39 err => this.notificationsService.error('Error', err.text)
40 );
41 }
35 ); 42 );
36 } 43 }
37 44
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index ca08ed305..baefb7064 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
2 2
3import { NotificationsService } from 'angular2-notifications'; 3import { NotificationsService } from 'angular2-notifications';
4 4
5import { ConfirmService } from '../../../core';
5import { User } from '../../../shared'; 6import { User } from '../../../shared';
6import { UserService } from '../shared'; 7import { UserService } from '../shared';
7 8
@@ -16,6 +17,7 @@ export class UserListComponent implements OnInit {
16 17
17 constructor( 18 constructor(
18 private notificationsService: NotificationsService, 19 private notificationsService: NotificationsService,
20 private confirmService: ConfirmService,
19 private userService: UserService 21 private userService: UserService
20 ) {} 22 ) {}
21 23
@@ -36,15 +38,19 @@ export class UserListComponent implements OnInit {
36 38
37 39
38 removeUser(user: User) { 40 removeUser(user: User) {
39 if (confirm('Are you sure?')) { 41 this.confirmService.confirm('Do you really want to delete this user?', 'Delete').subscribe(
40 this.userService.removeUser(user).subscribe( 42 res => {
41 () => { 43 if (res === false) return;
42 this.notificationsService.success('Success', `User ${user.username} deleted.`); 44
43 this.getUsers(); 45 this.userService.removeUser(user).subscribe(
44 }, 46 () => {
45 47 this.notificationsService.success('Success', `User ${user.username} deleted.`);
46 err => this.notificationsService.error('Error', err.text) 48 this.getUsers();
47 ); 49 },
48 } 50
51 err => this.notificationsService.error('Error', err.text)
52 );
53 }
54 );
49 } 55 }
50} 56}
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 95a025832..9f2661e12 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -23,6 +23,7 @@
23 </div> 23 </div>
24 24
25 <simple-notifications [options]="notificationOptions"></simple-notifications> 25 <simple-notifications [options]="notificationOptions"></simple-notifications>
26 <my-confirm></my-confirm>
26 27
27 <footer> 28 <footer>
28 PeerTube, CopyLeft 2015-2016 29 PeerTube, CopyLeft 2015-2016
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
new file mode 100644
index 000000000..3052526ba
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -0,0 +1,20 @@
1<div bsModal #confirmModal="bs-modal" class="modal" tabindex="-1" role="dialog">
2 <div class="modal-dialog">
3 <div class="modal-content">
4
5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="abort()">
7 <span aria-hidden="true">&times;</span>
8 </button>
9 <h4 class="modal-title">{{ title }}</h4>
10 </div>
11
12 <div class="modal-body" [innerHtml]="message"></div>
13
14 <div class="modal-footer">
15 <button type="button" class="btn btn-default" data-dismiss="modal" (click)="abort()">Annuler</button>
16 <button type="button" class="btn btn-primary" (click)="confirm()">Valider</button>
17 </div>
18 </div>
19 </div>
20</div>
diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts
new file mode 100644
index 000000000..14b4ef324
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.component.ts
@@ -0,0 +1,61 @@
1import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
2
3import { ModalDirective } from 'ng2-bootstrap/modal';
4
5import { ConfirmService } from './confirm.service';
6
7export interface ConfigChangedEvent {
8 columns: { [id: string]: { isDisplayed: boolean }; };
9 config: { resultsPerPage: number };
10}
11
12@Component({
13 selector: 'my-confirm',
14 templateUrl: './confirm.component.html'
15})
16export class ConfirmComponent implements OnInit {
17 @ViewChild('confirmModal') confirmModal: ModalDirective;
18
19 title = '';
20 message = '';
21
22 constructor (private confirmService: ConfirmService) {
23 // Empty
24 }
25
26 ngOnInit() {
27 this.confirmModal.config = {
28 backdrop: 'static',
29 keyboard: false
30 };
31
32 this.confirmService.showConfirm.subscribe(
33 ({ title, message }) => {
34 this.title = title;
35 this.message = message;
36
37 this.showModal();
38 }
39 );
40 }
41
42 @HostListener('keydown.enter')
43 confirm() {
44 this.confirmService.confirmResponse.next(true);
45 this.hideModal();
46 }
47
48 @HostListener('keydown.esc')
49 abort() {
50 this.confirmService.confirmResponse.next(false);
51 this.hideModal();
52 }
53
54 showModal() {
55 this.confirmModal.show();
56 }
57
58 hideModal() {
59 this.confirmModal.hide();
60 }
61}
diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts
new file mode 100644
index 000000000..b97969795
--- /dev/null
+++ b/client/src/app/core/confirm/confirm.service.ts
@@ -0,0 +1,15 @@
1import { Injectable } from '@angular/core';
2import { Subject } from 'rxjs/Subject';
3import 'rxjs/add/operator/first';
4
5@Injectable()
6export class ConfirmService {
7 showConfirm = new Subject<{ title, message }>();
8 confirmResponse = new Subject<boolean>();
9
10 confirm(message: string = '', title: string = '') {
11 this.showConfirm.next({ title, message });
12
13 return this.confirmResponse.asObservable().first();
14 }
15}
diff --git a/client/src/app/core/confirm/index.ts b/client/src/app/core/confirm/index.ts
new file mode 100644
index 000000000..789e7e547
--- /dev/null
+++ b/client/src/app/core/confirm/index.ts
@@ -0,0 +1,2 @@
1export * from './confirm.component';
2export * from './confirm.service';
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 48fec2d43..f02304647 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -4,8 +4,10 @@ import { HttpModule } from '@angular/http';
4import { RouterModule } from '@angular/router'; 4import { RouterModule } from '@angular/router';
5 5
6import { SimpleNotificationsModule } from 'angular2-notifications'; 6import { SimpleNotificationsModule } from 'angular2-notifications';
7import { ModalModule } from 'ng2-bootstrap/modal';
7 8
8import { AuthService } from './auth'; 9import { AuthService } from './auth';
10import { ConfirmComponent, ConfirmService } from './confirm';
9import { MenuComponent, MenuAdminComponent } from './menu'; 11import { MenuComponent, MenuAdminComponent } from './menu';
10import { throwIfAlreadyLoaded } from './module-import-guard'; 12import { throwIfAlreadyLoaded } from './module-import-guard';
11 13
@@ -15,19 +17,28 @@ import { throwIfAlreadyLoaded } from './module-import-guard';
15 HttpModule, 17 HttpModule,
16 RouterModule, 18 RouterModule,
17 19
20 ModalModule,
18 SimpleNotificationsModule 21 SimpleNotificationsModule
19 ], 22 ],
23
20 declarations: [ 24 declarations: [
25 ConfirmComponent,
21 MenuComponent, 26 MenuComponent,
22 MenuAdminComponent 27 MenuAdminComponent
23 ], 28 ],
29
24 exports: [ 30 exports: [
25 SimpleNotificationsModule, 31 SimpleNotificationsModule,
26 32
33 ConfirmComponent,
27 MenuComponent, 34 MenuComponent,
28 MenuAdminComponent 35 MenuAdminComponent
29 ], 36 ],
30 providers: [ AuthService ] 37
38 providers: [
39 AuthService,
40 ConfirmService
41 ]
31}) 42})
32export class CoreModule { 43export class CoreModule {
33 constructor( @Optional() @SkipSelf() parentModule: CoreModule) { 44 constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts
index fa951b215..9b4dd1999 100644
--- a/client/src/app/core/index.ts
+++ b/client/src/app/core/index.ts
@@ -1,2 +1,4 @@
1export * from './auth'; 1export * from './auth';
2export * from './confirm';
3export * from './menu';
2export * from './core.module' 4export * from './core.module'
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index ca4afc451..ba4715597 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
2 2
3import { NotificationsService } from 'angular2-notifications'; 3import { NotificationsService } from 'angular2-notifications';
4 4
5import { ConfirmService } from '../../core';
5import { SortField, Video, VideoService } from '../shared'; 6import { SortField, Video, VideoService } from '../shared';
6import { User } from '../../shared'; 7import { User } from '../../shared';
7 8
@@ -22,6 +23,7 @@ export class VideoMiniatureComponent {
22 23
23 constructor( 24 constructor(
24 private notificationsService: NotificationsService, 25 private notificationsService: NotificationsService,
26 private confirmService: ConfirmService,
25 private videoService: VideoService 27 private videoService: VideoService
26 ) {} 28 ) {}
27 29
@@ -38,12 +40,16 @@ export class VideoMiniatureComponent {
38 } 40 }
39 41
40 removeVideo(id: string) { 42 removeVideo(id: string) {
41 if (confirm('Do you really want to remove this video?')) { 43 this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
42 this.videoService.removeVideo(id).subscribe( 44 res => {
43 status => this.removed.emit(true), 45 if (res === false) return;
44 46
45 error => this.notificationsService.error('Error', error.text) 47 this.videoService.removeVideo(id).subscribe(
46 ); 48 status => this.removed.emit(true),
47 } 49
50 error => this.notificationsService.error('Error', error.text)
51 );
52 }
53 );
48 } 54 }
49} 55}
diff --git a/client/src/app/videos/video-watch/video-report.component.ts b/client/src/app/videos/video-watch/video-report.component.ts
index 19a7af148..7906fdb5c 100644
--- a/client/src/app/videos/video-watch/video-report.component.ts
+++ b/client/src/app/videos/video-watch/video-report.component.ts
@@ -57,13 +57,13 @@ export class VideoReportComponent extends FormReactive implements OnInit {
57 const reason = this.form.value['reason'] 57 const reason = this.form.value['reason']
58 58
59 this.videoAbuseService.reportVideo(this.video.id, reason) 59 this.videoAbuseService.reportVideo(this.video.id, reason)
60 .subscribe( 60 .subscribe(
61 () => { 61 () => {
62 this.notificationsService.success('Success', 'Video reported.'); 62 this.notificationsService.success('Success', 'Video reported.');
63 this.hide(); 63 this.hide();
64 }, 64 },
65 65
66 err => this.notificationsService.error('Error', err.text); 66 err => this.notificationsService.error('Error', err.text)
67 ) 67 );
68 } 68 }
69} 69}