diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-08-23 14:37:49 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-08-23 14:37:49 +0200 |
commit | 0f6da32b148c0f4146b2ae9ad1add9a9f00cc339 (patch) | |
tree | 1272a5892e357aa0a0d370545effa6800092d568 /client/src/app/account | |
parent | 39f87cb21689a912559d0498641db7d2de4a784d (diff) | |
download | PeerTube-0f6da32b148c0f4146b2ae9ad1add9a9f00cc339.tar.gz PeerTube-0f6da32b148c0f4146b2ae9ad1add9a9f00cc339.tar.zst PeerTube-0f6da32b148c0f4146b2ae9ad1add9a9f00cc339.zip |
Client: update to new form api
Diffstat (limited to 'client/src/app/account')
-rw-r--r-- | client/src/app/account/account.component.html | 8 | ||||
-rw-r--r-- | client/src/app/account/account.component.ts | 22 |
2 files changed, 17 insertions, 13 deletions
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html index ad8f690bd..4797fa914 100644 --- a/client/src/app/account/account.component.html +++ b/client/src/app/account/account.component.html | |||
@@ -3,14 +3,14 @@ | |||
3 | <div *ngIf="information" class="alert alert-success">{{ information }}</div> | 3 | <div *ngIf="information" class="alert alert-success">{{ information }}</div> |
4 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | 4 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
5 | 5 | ||
6 | <form role="form" (ngSubmit)="changePassword(newPassword.value, newConfirmedPassword.value)" [ngFormModel]="changePasswordForm"> | 6 | <form role="form" (ngSubmit)="changePassword()" [formGroup]="changePasswordForm"> |
7 | <div class="form-group"> | 7 | <div class="form-group"> |
8 | <label for="new-password">New password</label> | 8 | <label for="new-password">New password</label> |
9 | <input | 9 | <input |
10 | type="password" class="form-control" name="new-password" id="new-password" | 10 | type="password" class="form-control" name="new-password" id="new-password" |
11 | ngControl="newPassword" #newPassword="ngForm" | 11 | [(ngModel)]="newPassword" #newPasswordInput="ngModel" |
12 | > | 12 | > |
13 | <div [hidden]="newPassword.valid || newPassword.pristine" class="alert alert-warning"> | 13 | <div [hidden]="changePasswordForm.controls['new-password'].valid || changePasswordForm.controls['new-password'].pristine" class="alert alert-warning"> |
14 | The password should have more than 5 characters | 14 | The password should have more than 5 characters |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
@@ -19,7 +19,7 @@ | |||
19 | <label for="name">Confirm new password</label> | 19 | <label for="name">Confirm new password</label> |
20 | <input | 20 | <input |
21 | type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password" | 21 | type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password" |
22 | ngControl="newConfirmedPassword" #newConfirmedPassword="ngForm" | 22 | [(ngModel)]="newConfirmedPassword" #newConfirmedPasswordInput="ngModel" |
23 | > | 23 | > |
24 | </div> | 24 | </div> |
25 | 25 | ||
diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts index 5c42103f8..54939f43b 100644 --- a/client/src/app/account/account.component.ts +++ b/client/src/app/account/account.component.ts | |||
@@ -1,5 +1,6 @@ | |||
1 | import { Control, ControlGroup, Validators } from '@angular/common'; | 1 | import { Validators } from '@angular/common'; |
2 | import { Component, OnInit } from '@angular/core'; | 2 | import { Component, OnInit } from '@angular/core'; |
3 | import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; | ||
3 | import { Router } from '@angular/router'; | 4 | import { Router } from '@angular/router'; |
4 | 5 | ||
5 | import { AccountService } from './account.service'; | 6 | import { AccountService } from './account.service'; |
@@ -7,11 +8,14 @@ import { AccountService } from './account.service'; | |||
7 | @Component({ | 8 | @Component({ |
8 | selector: 'my-account', | 9 | selector: 'my-account', |
9 | template: require('./account.component.html'), | 10 | template: require('./account.component.html'), |
10 | providers: [ AccountService ] | 11 | providers: [ AccountService ], |
12 | directives: [ REACTIVE_FORM_DIRECTIVES ] | ||
11 | }) | 13 | }) |
12 | 14 | ||
13 | export class AccountComponent implements OnInit { | 15 | export class AccountComponent implements OnInit { |
14 | changePasswordForm: ControlGroup; | 16 | newPassword = ''; |
17 | newConfirmedPassword = ''; | ||
18 | changePasswordForm: FormGroup; | ||
15 | information: string = null; | 19 | information: string = null; |
16 | error: string = null; | 20 | error: string = null; |
17 | 21 | ||
@@ -21,22 +25,22 @@ export class AccountComponent implements OnInit { | |||
21 | ) {} | 25 | ) {} |
22 | 26 | ||
23 | ngOnInit() { | 27 | ngOnInit() { |
24 | this.changePasswordForm = new ControlGroup({ | 28 | this.changePasswordForm = new FormGroup({ |
25 | newPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), | 29 | 'new-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]), |
26 | newConfirmedPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), | 30 | 'new-confirmed-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]), |
27 | }); | 31 | }); |
28 | } | 32 | } |
29 | 33 | ||
30 | changePassword(newPassword: string, newConfirmedPassword: string) { | 34 | changePassword() { |
31 | this.information = null; | 35 | this.information = null; |
32 | this.error = null; | 36 | this.error = null; |
33 | 37 | ||
34 | if (newPassword !== newConfirmedPassword) { | 38 | if (this.newPassword !== this.newConfirmedPassword) { |
35 | this.error = 'The new password and the confirmed password do not correspond.'; | 39 | this.error = 'The new password and the confirmed password do not correspond.'; |
36 | return; | 40 | return; |
37 | } | 41 | } |
38 | 42 | ||
39 | this.accountService.changePassword(newPassword).subscribe( | 43 | this.accountService.changePassword(this.newPassword).subscribe( |
40 | ok => this.information = 'Password updated.', | 44 | ok => this.information = 'Password updated.', |
41 | 45 | ||
42 | err => this.error = err | 46 | err => this.error = err |