import { Observable } from 'rxjs/Observable';
import { AuthService } from './../services/auth.service';
import { Component, Inject } from "@angular/core";
import { FormGroup, FormControl, FormBuilder, Validators } from
'@angular/forms';
import { Router } from "@angular/router";


@Component({
selector: "login",
templateUrl: "./login.component.html",
//styleUrls: ['./login.component.less']
})
export class LoginComponent {
title: string;
form: FormGroup;
constructor(private router: Router,
private fb: FormBuilder,
private authService: AuthService,
@Inject('BASE_URL') private baseUrl: string) {

this.title = "User Login";
// initialize the form
this.createForm();
 }
createForm() {
 this.form = this.fb.group({
  Username: ['', Validators.required],
  Password: ['', Validators.required]
});
}
onSubmit() {
var url = this.baseUrl + "api/token/auth";
var username = this.form.value.Username;
var password = this.form.value.Password;

this.authService.login(username, password)
  .subscribe(res => {
    // login successful
    // outputs the login info through a JS alert.
    // IMPORTANT: remove this when test is done.
    alert("Login successful! "
      + "USERNAME: "
      + username
      + " TOKEN: "
      + this.authService.getAuth()!.token
    );
    this.router.navigate(["home"]);
  },
  err => {
    // login failed
    console.log(err)
    this.form.setErrors({
      "auth": "Incorrect username or password"
    });
  });
 }