import { Component, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { WalkthroughPage } from '../pages/walkthrough/walkthrough';
import { LoginPage } from '../pages/login/login';
import { UserloginPage } from '../pages/userlogin/userlogin';
import { NetworkconnectionPage } from '../pages/networkconnection/networkconnection';
import { Geolocation } from '@ionic-native/geolocation';

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs';
import { Observable } from 'rxjs/Observable';
import { AlertController } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { Network } from '@ionic-native/network';

import { CustomerlistPage } from '../pages/customerlist/customerlist';
import { ProductPage } from '../pages/product/product';
import { CustomerPage } from '../pages/customer/customer';
import { ProfilePage } from '../pages/profile/profile';
import { WalletPage } from '../pages/wallet/wallet';
import { MydayPage } from '../pages/myday/myday';
import { FaqPage } from '../pages/faq/faq';
import { TargetPage } from '../pages/target/target';
import { KnowledgebasePage } from '../pages/knowledgebase/knowledgebase';
import { SupportPage } from '../pages/support/support';
import { OrderlistPage } from '../pages/orderlist/orderlist';
import { HomePage } from '../pages/home/home';

import { App } from 'ionic-angular';
import { Storage } from '@ionic/storage';
//import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {

  rootPage:any = UserloginPage;
  platform:any;

  constructor(public app: App,  public storage: Storage,  platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private alertCtrl: AlertController, public toastCtrl: ToastController, private network: Network, public geolocation: Geolocation) {

    platform.ready().then(() => {
      statusBar.styleDefault();
      if (splashScreen) {
        setTimeout(() => {
          splashScreen.hide();
        }, 100);
      }
    });
  }

  customerList(){
    this.app.getRootNav().push(CustomerlistPage);
  }

  gotoHome(){
    this.app.getRootNav().push(HomePage);
  }

  productList(){
    console.log("Product List");
    this.app.getRootNav().push(ProductPage);
  }

  orderList(){
    this.app.getRootNav().push(OrderlistPage);
  }

  leadList(){
    this.app.getRootNav().push(TargetPage);
  }

  profile(){
    this.app.getRootNav().push(ProfilePage);
  }

  faq(){
    this.app.getRootNav().push(FaqPage);
  }

  knowledgeBase(){
    this.app.getRootNav().push(KnowledgebasePage);
  }

  myDay(){
    this.app.getRootNav().push(MydayPage);
  }

  team(){
    //this.app.getRootNav().push();
  }

  wallet(){
    this.app.getRootNav().push(WalletPage);
  }

  support(){
    this.app.getRootNav().push(SupportPage);
  }

  signOut(){}
}

<ion-header style="height:55px; background:#63813D" >

    <div style="float:left; margin-top:14px; font-size:26px; padding-left:20px; color:#ffffff;">
      <!-- <span><ion-icon name="menu"></ion-icon></span>&nbsp;&nbsp; -->
      <img src="assets/images/app_tray.png" style="width:20px; height:15px; margin-bottom:5px;"> &nbsp;
      <img src="assets/images/mixbag_logo.png" style="width:100px; height:25px; " (click)="gotoHome()">
    </div>

    <div style="float:right; margin-right:15px; margin-bottom:49px; margin-top:10px;" (click) = "signOut()">
      <div style="float:right; font-size:25px; color:#fff; margin-top:2px;"><b><img src="assets/images/sign_out.png" style="width:30px; height:30px;"></b></div>
    </div>

    <div style="float:right; margin-right:15px; margin-bottom:49px; margin-top:7px;" (click) = "profile()">
      <div style="float:left; margin-top:5px;"><img src="assets/images/profileuser.jpg" style="width:30px; height:30px; "></div>
    </div>

</ion-header>

<div overflow-scroll="false" style="margin-top:48px; background:#fff;"  >
  <div style="background:#fff; padding-bottom:3px; padding-top:10px;">
  <div>
    <p class="pslider">
      <ion-slides autoplay="" speed="50000">
        <ion-slide>

          <table width="100%" border="0">
            <tr>
              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="customerList()"  style="padding-left:5px; padding-right:5px; margin-bottom:-10px;" >
                  <b><img src="assets/images/customer_list.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Customer List</p></b>
                </div>
              </td>

              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="customerform()" style="padding-left:5px; padding-right:5px; margin-bottom:-10px;" >
                  <b><img src="assets/images/add_customer.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Add Customer</p></b>
                </div>
              </td>

              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="productList()" style="padding-left:5px; padding-right:5px; margin-bottom:-10px; " >
                  <b><img src="assets/images/product_list.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Product List</p></b>
                </div>
              </td>

              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="orderList()" style="padding-left:5px; padding-right:5px; margin-bottom:-10px;" >
                  <b><img src="assets/images/order_list.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Order List</p></b>
                </div>
              </td>
            </tr>
          </table>

          </ion-slide>
      </ion-slides>
    </p>
  </div>
  </div>

</div>

<ion-nav [root]="rootPage"></ion-nav>

<div class="pgbg" style="margin-top:150px;" >
  <div style="text-align:center; margin-top: 20px;">
    <img [src]= "register.logoregister" height="140px" width="130px" class="register-logo" />
  </div>

  <div style="width:100%;">

  </div>

  <div style="margin-top:-30px;">
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">

      <div style="margin-left:50px; margin-right:50px; margin-top:20px;">
          <div>
            <div>
              <img src="assets/images/input_user.png">
            </div>
            <div style="color:#64823A">
              <ion-input [(ngModel)]="username" type="text" formControlName="username" placeholder="USER NAME" style="margin-top:-45px;"></ion-input>
            </div>
          </div>

          <div style="margin-top:7px;">
            <div>
              <img src="assets/images/input_password.png">
            </div>
            <div style="color:#64823A">
              <ion-input [(ngModel)]="password" formControlName="password" type="password" placeholder="PASSWORD" style="margin-top:-45px; color:#64823A"></ion-input>
            </div>
          </div>
      </div>

      <div style="text-align:center; margin-top:6px">
        <button ion-button type="submit" (click)="postRequest()" [disabled]="!myForm.valid" style="padding-top:20px; padding-bottom:20px; padding-left:105px; padding-right:105px;background-color:#64823A; color:#fff; border-radius:5px;"><b>Submit</b></button>
      </div>
    </form>

    <div style="margin-left:50px; margin-right:50px; margin-top:-10px;">
      <p [navPush]="forgetpasswordPage">Forget Password</p>
    </div>

    <div style="text-align:center; margin-top:8px;">
      <img src="assets/images/footer_logos.png" style="width:70%">
    </div>

  </div>
</div>

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { TabsPage } from '../tabs/tabs';
import { HomePage } from '../home/home';
import { ForgetpasswordPage } from '../forgetpassword/forgetpassword';
import { Http, Headers, RequestOptions } from '@angular/http';
import { ToastController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

import { GlobalVars } from '../../providers/global-vars/global-vars';

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

  username:any;
  password:any
  items: any;
  uid:any;

  forgetpasswordPage = ForgetpasswordPage;

  register = {
        "logoregister": "assets/images/logo.png"
      };

  constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder, public http: Http, public toastCtrl: ToastController, public storage: Storage, public globalVars:GlobalVars) {

    this.myForm = this.formBuilder.group({
            'username': ['', [Validators.required]],
            'password': ['', [Validators.required]]
    });

  }

  myForm: FormGroup;

    isValid(field: string) {
        let formField = this.myForm.get(field);
        return formField.valid || formField.pristine;
  }

  onSubmit() {
      console.log('submitting form');
  }

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

  postRequest(){}

}