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 }