From 0f6da32b148c0f4146b2ae9ad1add9a9f00cc339 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 23 Aug 2016 14:37:49 +0200 Subject: Client: update to new form api --- client/src/app/login/login.component.ts | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) (limited to 'client/src/app/login/login.component.ts') diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index ddd62462e..fe867b7b4 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -1,23 +1,36 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Validators } from '@angular/common'; +import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; import { AuthService } from '../shared'; @Component({ selector: 'my-login', - template: require('./login.component.html') + template: require('./login.component.html'), + directives: [ REACTIVE_FORM_DIRECTIVES ] }) -export class LoginComponent { +export class LoginComponent implements OnInit { error: string = null; + username = ''; + password: ''; + loginForm: FormGroup; constructor( private authService: AuthService, private router: Router ) {} - login(username: string, password: string) { - this.authService.login(username, password).subscribe( + ngOnInit() { + this.loginForm = new FormGroup({ + username: new FormControl('', [ Validators.required ]), + password: new FormControl('', [ Validators.required ]), + }); + } + + login() { + this.authService.login(this.username, this.password).subscribe( result => { this.error = null; -- cgit v1.2.3 From de59c48f5f317018e3f746bbe4a7b7efe00109f2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 23 Aug 2016 16:54:21 +0200 Subject: Client: centralize http res extraction in a service --- client/src/app/login/login.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'client/src/app/login/login.component.ts') diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index fe867b7b4..1e0ba0fe8 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -37,12 +37,12 @@ export class LoginComponent implements OnInit { this.router.navigate(['/videos/list']); }, error => { - console.error(error); + console.error(error.json); - if (error.error === 'invalid_grant') { + if (error.json.error === 'invalid_grant') { this.error = 'Credentials are invalid.'; } else { - this.error = `${error.error}: ${error.error_description}`; + this.error = `${error.json.error}: ${error.json.error_description}`; } } ); -- cgit v1.2.3 From ab32b0fc805b92c5a1d7ac5901cb1a38e94622ca Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 6 Sep 2016 22:40:57 +0200 Subject: Dirty update to Angular RC6 --- client/src/app/login/login.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'client/src/app/login/login.component.ts') diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 1e0ba0fe8..7a4e15c2c 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -1,14 +1,12 @@ import { Component, OnInit } from '@angular/core'; -import { Validators } from '@angular/common'; -import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { AuthService } from '../shared'; @Component({ selector: 'my-login', - template: require('./login.component.html'), - directives: [ REACTIVE_FORM_DIRECTIVES ] + template: require('./login.component.html') }) export class LoginComponent implements OnInit { -- cgit v1.2.3 From 4b2f33f3c6d109365090b08244d7f99ad4e69025 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 9 Sep 2016 22:16:51 +0200 Subject: Client: reactive forms --- client/src/app/login/login.component.ts | 53 +++++++++++++++++++++++---------- 1 file changed, 37 insertions(+), 16 deletions(-) (limited to 'client/src/app/login/login.component.ts') diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 7a4e15c2c..378714ca1 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -1,39 +1,60 @@ import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; -import { AuthService } from '../shared'; +import { AuthService, FormReactive } from '../shared'; @Component({ selector: 'my-login', template: require('./login.component.html') }) -export class LoginComponent implements OnInit { +export class LoginComponent extends FormReactive implements OnInit { error: string = null; - username = ''; - password: ''; - loginForm: FormGroup; + + form: FormGroup; + formErrors = { + 'username': '', + 'password': '' + }; + validationMessages = { + 'username': { + 'required': 'Username is required.', + }, + 'password': { + 'required': 'Password is required.' + } + }; constructor( private authService: AuthService, + private formBuilder: FormBuilder, private router: Router - ) {} + ) { + super(); + } - ngOnInit() { - this.loginForm = new FormGroup({ - username: new FormControl('', [ Validators.required ]), - password: new FormControl('', [ Validators.required ]), + buildForm() { + this.form = this.formBuilder.group({ + username: [ '', Validators.required ], + password: [ '', Validators.required ], }); + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)); + } + + ngOnInit() { + this.buildForm(); } login() { - this.authService.login(this.username, this.password).subscribe( - result => { - this.error = null; + this.error = null; + + const { username, password } = this.form.value; + + this.authService.login(username, password).subscribe( + result => this.router.navigate(['/videos/list']), - this.router.navigate(['/videos/list']); - }, error => { console.error(error.json); -- cgit v1.2.3 From ec8d8440a893ba64075da2e57ea04c7976e0b303 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 19 Sep 2016 22:49:31 +0200 Subject: Client: use templateUrl/styleUrls instead of require --- client/src/app/login/login.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/login/login.component.ts') diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts index 378714ca1..c4ff7050b 100644 --- a/client/src/app/login/login.component.ts +++ b/client/src/app/login/login.component.ts @@ -6,7 +6,7 @@ import { AuthService, FormReactive } from '../shared'; @Component({ selector: 'my-login', - template: require('./login.component.html') + templateUrl: './login.component.html' }) export class LoginComponent extends FormReactive implements OnInit { -- cgit v1.2.3