aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/account')
-rw-r--r--client/src/app/account/account.component.html16
-rw-r--r--client/src/app/account/account.component.ts44
2 files changed, 40 insertions, 20 deletions
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index 4797fa914..5a8847acd 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -3,25 +3,25 @@
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()" [formGroup]="changePasswordForm"> 6<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
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" id="new-password"
11 [(ngModel)]="newPassword" #newPasswordInput="ngModel" 11 formControlName="new-password"
12 > 12 >
13 <div [hidden]="changePasswordForm.controls['new-password'].valid || changePasswordForm.controls['new-password'].pristine" class="alert alert-warning"> 13 <div *ngIf="formErrors['new-password']" class="alert alert-danger">
14 The password should have more than 5 characters 14 {{ formErrors['new-password'] }}
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="form-group"> 18 <div class="form-group">
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" id="new-confirmed-password"
22 [(ngModel)]="newConfirmedPassword" #newConfirmedPasswordInput="ngModel" 22 formControlName="new-confirmed-password"
23 > 23 >
24 </div> 24 </div>
25 25
26 <input type="submit" value="Change password" class="btn btn-default" [disabled]="!changePasswordForm.valid"> 26 <input type="submit" value="Change password" class="btn btn-default" [disabled]="!form.valid">
27</form> 27</form>
diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts
index a22738d3f..b503406c9 100644
--- a/client/src/app/account/account.component.ts
+++ b/client/src/app/account/account.component.ts
@@ -1,44 +1,64 @@
1import { } from '@angular/common'; 1import { } from '@angular/common';
2import { Component, OnInit } from '@angular/core'; 2import { Component, OnInit } from '@angular/core';
3import { FormControl, FormGroup, Validators } from '@angular/forms'; 3import { FormBuilder, FormGroup } from '@angular/forms';
4import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
5 5
6import { AccountService } from './account.service'; 6import { AccountService } from './account.service';
7import { FormReactive, USER_PASSWORD } from '../shared';
7 8
8@Component({ 9@Component({
9 selector: 'my-account', 10 selector: 'my-account',
10 template: require('./account.component.html') 11 template: require('./account.component.html')
11}) 12})
12 13
13export class AccountComponent implements OnInit { 14export class AccountComponent extends FormReactive implements OnInit {
14 newPassword = '';
15 newConfirmedPassword = '';
16 changePasswordForm: FormGroup;
17 information: string = null; 15 information: string = null;
18 error: string = null; 16 error: string = null;
19 17
18 form: FormGroup;
19 formErrors = {
20 'new-password': '',
21 'new-confirmed-password': ''
22 };
23 validationMessages = {
24 'new-password': USER_PASSWORD.MESSAGES,
25 'new-confirmed-password': USER_PASSWORD.MESSAGES
26 };
27
20 constructor( 28 constructor(
21 private accountService: AccountService, 29 private accountService: AccountService,
30 private formBuilder: FormBuilder,
22 private router: Router 31 private router: Router
23 ) {} 32 ) {
33 super();
34 }
24 35
25 ngOnInit() { 36 buildForm() {
26 this.changePasswordForm = new FormGroup({ 37 this.form = this.formBuilder.group({
27 'new-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]), 38 'new-password': [ '', USER_PASSWORD.VALIDATORS ],
28 'new-confirmed-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]), 39 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ],
29 }); 40 });
41
42 this.form.valueChanges.subscribe(data => this.onValueChanged(data));
43 }
44
45 ngOnInit() {
46 this.buildForm();
30 } 47 }
31 48
32 changePassword() { 49 changePassword() {
50 const newPassword = this.form.value['new-password'];
51 const newConfirmedPassword = this.form.value['new-confirmed-password'];
52
33 this.information = null; 53 this.information = null;
34 this.error = null; 54 this.error = null;
35 55
36 if (this.newPassword !== this.newConfirmedPassword) { 56 if (newPassword !== newConfirmedPassword) {
37 this.error = 'The new password and the confirmed password do not correspond.'; 57 this.error = 'The new password and the confirmed password do not correspond.';
38 return; 58 return;
39 } 59 }
40 60
41 this.accountService.changePassword(this.newPassword).subscribe( 61 this.accountService.changePassword(newPassword).subscribe(
42 ok => this.information = 'Password updated.', 62 ok => this.information = 'Password updated.',
43 63
44 err => this.error = err 64 err => this.error = err