Montada comunicación con API, pero devuelve un objeto undefined

src/app/login/login.page.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { LoginService } from '../login.service';
+import { User } from '../user';
 
 @Component({
   selector: 'app-login',
@@ -8,13 +10,23 @@ import { Router } from '@angular/router';
 })
 export class LoginPage implements OnInit {
 
-  constructor(private router: Router) { }
+  username: string;
+  password: string;
+  user: User;
+
+  constructor(private router: Router, private loginService: LoginService) { }
 
   ngOnInit() {
+    this.user = this.loginService.user;
   }
 
-  login(){
-    this.router.navigate(['/tabs']);
+  async login() {
+
+    this.username = (<HTMLInputElement>document.getElementById("username")).value;
+    this.password = (<HTMLInputElement>document.getElementById("password")).value;
+    this.user = await this.loginService.validateUser(this.username, this.password);
+    console.log(this.user.username);
+
   }
 
 }