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 })
  12
  13 export class LoginComponent extends FormReactive implements OnInit {
  14   error: string = null
  15
  16   form: FormGroup
  17   formErrors = {
  18     'username': '',
  19     'password': ''
  20   }
  21   validationMessages = {
  22     'username': {
  23       'required': 'Username is required.'
  24     },
  25     'password': {
  26       'required': 'Password is required.'
  27     }
  28   }
  29
  30   constructor (
  31     private authService: AuthService,
  32     private formBuilder: FormBuilder,
  33     private router: Router
  34   ) {
  35     super()
  36   }
  37
  38   buildForm () {
  39     this.form = this.formBuilder.group({
  40       username: [ '', Validators.required ],
  41       password: [ '', Validators.required ]
  42     })
  43
  44     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  45   }
  46
  47   ngOnInit () {
  48     this.buildForm()
  49   }
  50
  51   login () {
  52     this.error = null
  53
  54     const { username, password } = this.form.value
  55
  56     this.authService.login(username, password).subscribe(
  57       result => this.router.navigate(['/videos/list']),
  58
  59       error => {
  60         console.error(error.json)
  61
  62         if (error.json.error === 'invalid_grant') {
  63           this.error = 'Credentials are invalid.'
  64         } else {
  65           this.error = `${error.json.error}: ${error.json.error_description}`
  66         }
  67       }
  68     )
  69   }
  70 }