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

   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       result => this.router.navigate(['/videos/list']),
  59
  60       err => {
  61         if (err.message === 'invalid_grant') {
  62           this.error = 'Credentials are invalid.'
  63         } else {
  64           this.error = `${err.body.error_description}`
  65         }
  66       }
  67     )
  68   }
  69 }