]>
Commit | Line | Data |
---|---|---|
1 | import { Component, OnInit } from '@angular/core' | |
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms' | |
3 | import { Router } from '@angular/router' | |
4 | ||
5 | import { AuthService } from '../core' | |
6 | import { FormReactive } from '../shared' | |
7 | ||
8 | @Component({ | |
9 | selector: 'my-login', | |
10 | templateUrl: './login.component.html', | |
11 | styleUrls: [ './login.component.scss' ] | |
12 | }) | |
13 | ||
14 | export class LoginComponent extends FormReactive implements OnInit { | |
15 | error: string = null | |
16 | ||
17 | form: FormGroup | |
18 | formErrors = { | |
19 | 'username': '', | |
20 | 'password': '' | |
21 | } | |
22 | validationMessages = { | |
23 | 'username': { | |
24 | 'required': 'Username is required.' | |
25 | }, | |
26 | 'password': { | |
27 | 'required': 'Password is required.' | |
28 | } | |
29 | } | |
30 | ||
31 | constructor ( | |
32 | private authService: AuthService, | |
33 | private formBuilder: FormBuilder, | |
34 | private router: Router | |
35 | ) { | |
36 | super() | |
37 | } | |
38 | ||
39 | buildForm () { | |
40 | this.form = this.formBuilder.group({ | |
41 | username: [ '', Validators.required ], | |
42 | password: [ '', Validators.required ] | |
43 | }) | |
44 | ||
45 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | |
46 | } | |
47 | ||
48 | ngOnInit () { | |
49 | this.buildForm() | |
50 | } | |
51 | ||
52 | login () { | |
53 | this.error = null | |
54 | ||
55 | const { username, password } = this.form.value | |
56 | ||
57 | this.authService.login(username, password).subscribe( | |
58 | () => this.router.navigate(['/videos/list']), | |
59 | ||
60 | err => this.error = err.message | |
61 | ) | |
62 | } | |
63 | } |