]>
Commit | Line | Data |
---|---|---|
1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' | |
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms' | |
3 | import { Router } from '@angular/router' | |
4 | import { UserService } from '@app/shared' | |
5 | import { NotificationsService } from 'angular2-notifications' | |
6 | import { ModalDirective } from 'ngx-bootstrap/modal' | |
7 | import { AuthService } from '../core' | |
8 | import { FormReactive } from '../shared' | |
9 | ||
10 | @Component({ | |
11 | selector: 'my-login', | |
12 | templateUrl: './login.component.html', | |
13 | styleUrls: [ './login.component.scss' ] | |
14 | }) | |
15 | ||
16 | export class LoginComponent extends FormReactive implements OnInit { | |
17 | @ViewChild('forgotPasswordModal') forgotPasswordModal: ModalDirective | |
18 | @ViewChild('forgotPasswordEmailInput') forgotPasswordEmailInput: ElementRef | |
19 | ||
20 | error: string = null | |
21 | ||
22 | form: FormGroup | |
23 | formErrors = { | |
24 | 'username': '', | |
25 | 'password': '' | |
26 | } | |
27 | validationMessages = { | |
28 | 'username': { | |
29 | 'required': 'Username is required.' | |
30 | }, | |
31 | 'password': { | |
32 | 'required': 'Password is required.' | |
33 | } | |
34 | } | |
35 | forgotPasswordEmail = '' | |
36 | ||
37 | constructor ( | |
38 | private authService: AuthService, | |
39 | private userService: UserService, | |
40 | private notificationsService: NotificationsService, | |
41 | private formBuilder: FormBuilder, | |
42 | private router: Router | |
43 | ) { | |
44 | super() | |
45 | } | |
46 | ||
47 | buildForm () { | |
48 | this.form = this.formBuilder.group({ | |
49 | username: [ '', Validators.required ], | |
50 | password: [ '', Validators.required ] | |
51 | }) | |
52 | ||
53 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | |
54 | } | |
55 | ||
56 | ngOnInit () { | |
57 | this.buildForm() | |
58 | } | |
59 | ||
60 | login () { | |
61 | this.error = null | |
62 | ||
63 | const { username, password } = this.form.value | |
64 | ||
65 | this.authService.login(username, password).subscribe( | |
66 | () => this.router.navigate(['/videos/list']), | |
67 | ||
68 | err => this.error = err.message | |
69 | ) | |
70 | } | |
71 | ||
72 | askResetPassword () { | |
73 | this.userService.askResetPassword(this.forgotPasswordEmail) | |
74 | .subscribe( | |
75 | res => { | |
76 | const message = `An email with the reset password instructions will be sent to ${this.forgotPasswordEmail}.` | |
77 | this.notificationsService.success('Success', message) | |
78 | this.hideForgotPasswordModal() | |
79 | }, | |
80 | ||
81 | err => this.notificationsService.error('Error', err.message) | |
82 | ) | |
83 | } | |
84 | ||
85 | onForgotPasswordModalShown () { | |
86 | this.forgotPasswordEmailInput.nativeElement.focus() | |
87 | } | |
88 | ||
89 | openForgotPasswordModal () { | |
90 | this.forgotPasswordModal.show() | |
91 | } | |
92 | ||
93 | hideForgotPasswordModal () { | |
94 | this.forgotPasswordModal.hide() | |
95 | } | |
96 | } |