client/src/app/login/login.component.ts

   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 }