Ionic 3 Login & Register

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RestProvider } from '../providers/rest/rest';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    LoginPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    LoginPage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestProvider,
  ]
})
export class AppModule {}

login.ts

import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
// import { RegisterPage } from '../register/register';
import { RestProvider } from '../../providers/rest/rest';
/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

	loginData:any;
	data:any;
	@ViewChild('email') email;
	@ViewChild('password') password; 

	constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, public restProvider: RestProvider) {
	}

	ionViewDidLoad() {
		console.log('ionViewDidLoad LoginPage');
	}

  	presentAlert(title,subTitle) {
	let alert = this.alertCtrl.create({
			title: title,
			subTitle: subTitle,
			buttons: ['Dismiss']
		})
		alert.present();
	}


	tryLogin(){
		if(this.email.value !== "" && this.password.value !== "")
		{
			this.loginData = {
				email: this.email.value,
				password: this.password.value
			};
		    this.restProvider.login(this.loginData);
		}
		else
		{
			this.presentAlert('Error','Please fill all the inputbox');
		}

	}

// 	tryRegister(){
// 		console.log('test');
// 		this.navCtrl.push(RegisterPage);
// 	}

}

register.ts

ssds

rest.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { App,LoadingController, AlertController, Loading } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

import { TabsPage } from '../../pages/tabs/tabs';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {
	loading: Loading;
	token:any;
	data:any = {};
  	apiUrl = 'http://127.0.0.1:8000/api';

  	constructor(
		public app: App,
		public http: Http,
		private loadingCtrl: LoadingController,
		private alertCtrl: AlertController,
		private storage: Storage) {
    	console.log('Hello RestProvider Provider');
  }

  	showLoading(title) {
		this.loading = this.loadingCtrl.create({
			content: title,
			dismissOnPageChange: true
			});
		this.loading.present();
	}

  	presentAlert(title,subTitle) {
	let alert = this.alertCtrl.create({
			title: title,
			subTitle: subTitle,
			buttons: ['Dismiss']
		})
		alert.present();
	}

	setToken(token){
        this.token = token;
	}

	login(loginData){
		this.showLoading('Logging')
		return new Promise((resolve, reject) => {
			this.http.post(this.apiUrl+'/auth', loginData)
			.toPromise()
			.then((response) =>
			{
			// console.log('API Response : ', response.json());
				resolve(response.json());
				this.storage.set('token', 'Bearer '+response.json().token);
				this.app.getActiveNav().setRoot(TabsPage);
			})
			.catch((error) =>
			{
				// console.error('API Error : ', error.status);
				// console.error('API Error : ', error.json());
				this.loading.dismiss();
				this.presentAlert('Error', error.json().message);
			});
		});
  }

	register(registerData){
		this.showLoading('registering')
		return new Promise((resolve, reject) => {
			this.http.post(this.apiUrl+'/register', registerData)
			.toPromise()
			.then((response) =>
			{
			    // console.log('API Response : ', response.json());
			    resolve(response.json());
			    this.login(registerData);
			})
			.catch((error) =>
			{
			// console.error('API Error : ', error.status);
			// console.error('API Error : ', error.json());
			console.log(error.json());
			this.loading.dismiss();
			this.presentAlert('Error', error.json());
			});
		});
	}

	getPost(){
		this.showLoading('please wait');
        let headers = new Headers();
		headers.append('Accept', 'application/json');
		headers.append('Authorization', this.token);
		let options = new RequestOptions({ headers: headers });

		return new Promise((resolve, reject) => {
			this.http.get(this.apiUrl+'/post', options)
			.toPromise()
			.then((response) =>
			{
				resolve(response.json());
			    this.loading.dismiss();
			})
			.catch((error) =>
			{
				this.loading.dismiss();
				this.presentAlert('Error', error.json().message);
			});
		});
	}

}