diff options
Diffstat (limited to 'client/src/app/core')
-rw-r--r-- | client/src/app/core/confirm/confirm.component.html | 7 | ||||
-rw-r--r-- | client/src/app/core/confirm/confirm.component.scss | 17 | ||||
-rw-r--r-- | client/src/app/core/confirm/confirm.component.ts | 23 | ||||
-rw-r--r-- | client/src/app/core/confirm/confirm.service.ts | 13 | ||||
-rw-r--r-- | client/src/app/core/core.module.ts | 2 |
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 @@ | |||
10 | <div class="modal-body" > | 10 | <div class="modal-body" > |
11 | <div [innerHtml]="message"></div> | 11 | <div [innerHtml]="message"></div> |
12 | 12 | ||
13 | <div *ngIf="inputLabel && expectedInputValue" class="form-group"> | ||
14 | <label for="confirmInput">{{ inputLabel }}</label> | ||
15 | <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" /> | ||
16 | </div> | ||
17 | |||
13 | <div class="form-group inputs"> | 18 | <div class="form-group inputs"> |
14 | <span class="action-button action-button-cancel" (click)="cancel()"> | 19 | <span class="action-button action-button-cancel" (click)="cancel()"> |
15 | Cancel | 20 | Cancel |
16 | </span> | 21 | </span> |
17 | 22 | ||
18 | <input | 23 | <input |
19 | type="submit" value="Confirm" class="action-button-submit" | 24 | type="submit" value="Confirm" class="action-button-submit" [disabled]="isConfirmationDisabled()" |
20 | (click)="confirm()" | 25 | (click)="confirm()" |
21 | > | 26 | > |
22 | </div> | 27 | </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 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .button { | ||
5 | padding: 0 13px; | ||
6 | } | ||
7 | |||
8 | input[type=text] { | ||
9 | @include peertube-input-text(100%); | ||
10 | display: block; | ||
11 | } | ||
12 | |||
13 | .form-group { | ||
14 | margin: 20px 0; | ||
15 | } | ||
16 | |||
17 | |||
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' | |||
4 | 4 | ||
5 | import { ConfirmService } from './confirm.service' | 5 | import { ConfirmService } from './confirm.service' |
6 | 6 | ||
7 | export interface ConfigChangedEvent { | ||
8 | columns: { [id: string]: { isDisplayed: boolean } } | ||
9 | config: { resultsPerPage: number } | ||
10 | } | ||
11 | |||
12 | @Component({ | 7 | @Component({ |
13 | selector: 'my-confirm', | 8 | selector: 'my-confirm', |
14 | templateUrl: './confirm.component.html', | 9 | templateUrl: './confirm.component.html', |
15 | styles: [ '.button { padding: 0 13px; }' ] | 10 | styleUrls: [ './confirm.component.scss' ] |
16 | }) | 11 | }) |
17 | export class ConfirmComponent implements OnInit { | 12 | export class ConfirmComponent implements OnInit { |
18 | @ViewChild('confirmModal') confirmModal: ModalDirective | 13 | @ViewChild('confirmModal') confirmModal: ModalDirective |
19 | 14 | ||
20 | title = '' | 15 | title = '' |
21 | message = '' | 16 | message = '' |
17 | expectedInputValue = '' | ||
18 | inputLabel = '' | ||
19 | |||
20 | inputValue = '' | ||
22 | 21 | ||
23 | constructor (private confirmService: ConfirmService) { | 22 | constructor (private confirmService: ConfirmService) { |
24 | // Empty | 23 | // Empty |
@@ -31,10 +30,13 @@ export class ConfirmComponent implements OnInit { | |||
31 | } | 30 | } |
32 | 31 | ||
33 | this.confirmService.showConfirm.subscribe( | 32 | this.confirmService.showConfirm.subscribe( |
34 | ({ title, message }) => { | 33 | ({ title, message, expectedInputValue, inputLabel }) => { |
35 | this.title = title | 34 | this.title = title |
36 | this.message = message | 35 | this.message = message |
37 | 36 | ||
37 | this.inputLabel = inputLabel | ||
38 | this.expectedInputValue = expectedInputValue | ||
39 | |||
38 | this.showModal() | 40 | this.showModal() |
39 | } | 41 | } |
40 | ) | 42 | ) |
@@ -52,6 +54,13 @@ export class ConfirmComponent implements OnInit { | |||
52 | this.hideModal() | 54 | this.hideModal() |
53 | } | 55 | } |
54 | 56 | ||
57 | isConfirmationDisabled () { | ||
58 | // No input validation | ||
59 | if (!this.inputLabel || !this.expectedInputValue) return false | ||
60 | |||
61 | return this.expectedInputValue !== this.inputValue | ||
62 | } | ||
63 | |||
55 | showModal () { | 64 | showModal () { |
56 | this.confirmModal.show() | 65 | this.confirmModal.show() |
57 | } | 66 | } |
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 @@ | |||
1 | import { Injectable } from '@angular/core' | 1 | import { Injectable } from '@angular/core' |
2 | import { Subject } from 'rxjs/Subject' | 2 | import { Subject } from 'rxjs/Subject' |
3 | import 'rxjs/add/operator/first' | 3 | import 'rxjs/add/operator/first' |
4 | import 'rxjs/add/operator/toPromise' | ||
4 | 5 | ||
5 | @Injectable() | 6 | @Injectable() |
6 | export class ConfirmService { | 7 | export class ConfirmService { |
7 | showConfirm = new Subject<{ title, message }>() | 8 | showConfirm = new Subject<{ title: string, message: string, inputLabel?: string, expectedInputValue?: string }>() |
8 | confirmResponse = new Subject<boolean>() | 9 | confirmResponse = new Subject<boolean>() |
9 | 10 | ||
10 | confirm (message = '', title = '') { | 11 | confirm (message: string, title = '') { |
11 | this.showConfirm.next({ title, message }) | 12 | this.showConfirm.next({ title, message }) |
12 | 13 | ||
13 | return this.confirmResponse.asObservable().first() | 14 | return this.confirmResponse.asObservable().first().toPromise() |
15 | } | ||
16 | |||
17 | confirmWithInput (message: string, inputLabel: string, expectedInputValue: string, title = '') { | ||
18 | this.showConfirm.next({ title, message, inputLabel, expectedInputValue }) | ||
19 | |||
20 | return this.confirmResponse.asObservable().first().toPromise() | ||
14 | } | 21 | } |
15 | } | 22 | } |
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 @@ | |||
1 | import { CommonModule } from '@angular/common' | 1 | import { CommonModule } from '@angular/common' |
2 | import { NgModule, Optional, SkipSelf } from '@angular/core' | 2 | import { NgModule, Optional, SkipSelf } from '@angular/core' |
3 | import { FormsModule } from '@angular/forms' | ||
3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations' | 4 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations' |
4 | import { RouterModule } from '@angular/router' | 5 | import { RouterModule } from '@angular/router' |
5 | import { LoadingBarModule } from '@ngx-loading-bar/core' | 6 | import { LoadingBarModule } from '@ngx-loading-bar/core' |
@@ -18,6 +19,7 @@ import { ServerService } from './server' | |||
18 | imports: [ | 19 | imports: [ |
19 | CommonModule, | 20 | CommonModule, |
20 | RouterModule, | 21 | RouterModule, |
22 | FormsModule, | ||
21 | BrowserAnimationsModule, | 23 | BrowserAnimationsModule, |
22 | 24 | ||
23 | ModalModule, | 25 | ModalModule, |