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

   1 import { Component, OnInit } from '@angular/core';
   2 import { Validators } from '@angular/common';
   3 import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
   4 import { Router } from '@angular/router';
   5
   6 import { AuthService } from '../shared';
   7
   8 @Component({
   9   selector: 'my-login',
  10   template: require('./login.component.html'),
  11   directives: [ REACTIVE_FORM_DIRECTIVES ]
  12 })
  13
  14 export class LoginComponent implements OnInit {
  15   error: string = null;
  16   username = '';
  17   password: '';
  18   loginForm: FormGroup;
  19
  20   constructor(
  21     private authService: AuthService,
  22     private router: Router
  23   ) {}
  24
  25   ngOnInit() {
  26     this.loginForm = new FormGroup({
  27       username: new FormControl('', [ <any>Validators.required ]),
  28       password: new FormControl('', [ <any>Validators.required ]),
  29     });
  30   }
  31
  32   login() {
  33     this.authService.login(this.username, this.password).subscribe(
  34       result => {
  35         this.error = null;
  36
  37         this.router.navigate(['/videos/list']);
  38       },
  39       error => {
  40         console.error(error.json);
  41
  42         if (error.json.error === 'invalid_grant') {
  43           this.error = 'Credentials are invalid.';
  44         } else {
  45           this.error = `${error.json.error}: ${error.json.error_description}`;
  46         }
  47       }
  48     );
  49   }
  50 }