import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { IndexPage } from '../../pages/index/index';
import { dataService } from '../../pages/services/dataService';
import { AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { App } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private login : FormGroup;

  backimg : string;

  constructor(
    public appCtrl: App,
    public navCtrl: NavController,
    private dataService : dataService,
    private formBuilder: FormBuilder,
    private alertCtrl: AlertController,
    private storage: Storage) {
    this.login = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.compose([
        Validators.minLength(5),
        Validators.required]
      )]
    });
    this.storage.get('access_token').then((val) => {
      if(val!=null){
          this.navCtrl.push(IndexPage);
      }
    });
  }

  loginForm(){
    const data = {
      "username" : this.login.value.username,
      "email" : this.login.value.username,
      "password" : this.login.value.password,
    }
    this.dataService.loginUser(data).subscribe(
        (data) => {
          let token = data.key;
          this.dataService.checkAccessUserGroup(token).subscribe(
            (data) => {
              if(data[0] == 200){
                this.storage.set('access_token',token).then((val) => {
                  localStorage.setItem("access_token",token);
                  this.navCtrl.setRoot(IndexPage);
                  this.navCtrl.push(IndexPage);
                });

              }
              if(data[0] == 500){
                this.generateAlert("Error",'No tienes permisos adecuados para acceder. Ponte en contacto con el administrador de tu Deck.');
              }
            },
            (err) => {
              if(err.status == 400){
                this.generateAlert("Error",'No hemos podido verificar tus datos. Intentalo de nuevo');
              }
            }
          );
        },
        (err) => {
          if(err.status == 400){
            this.generateAlert("Error",'Usuario o constraseña no válido. Intentalo de nuevo');
          }
        }
      );
    }

    private generateAlert(title,body){
      let alert = this.alertCtrl.create({
        title: title,
        subTitle: body,
        buttons: ['Aceptar']
      });
      alert.present();
    }
}

<ion-content padding id="container-home" style="background-image:

url('assets/img/bg-login.png')">

  <ion-row>
    <ion-img class="logo-md" width="120" height="120" src="assets/img/mydecklogocolor.png"></ion-img>
  </ion-row>

  <ion-row id="auth-login">
    <ion-col col-12 no-padding>
      <ion-row class="header">
        <h3>Ingresa</h3>
      </ion-row>
      <form id="login-container" [formGroup]="login" (ngSubmit)="loginForm()">
      <ion-row>
          <ion-item>
            <ion-input type="text" formControlName="username"
                       class="input-md"placeholder="Correo electrónico / usuario"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input type="password" formControlName="password"
                       class="input-md" placeholder="Contraseña"></ion-input>
          </ion-item>
      </ion-row>
      <ion-row>
        <button ion-button class="auth-btn" type="submit" [disabled]="!login.valid">Ingresar</button>
      </ion-row>
      </form>
      <ion-row>
        <a href="">¿Olvidaste tu contraseña?</a>
      </ion-row>
    </ion-col>
  </ion-row>

</ion-content>

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Storage } from '@ionic/storage';
import 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class dataService {

  private mainUrl : string = "https://****.***/api";

  constructor (
    private http : Http
  ){
  }

  public loginUser(data){
    const body = JSON.stringify(data);
    const noAuthHeaders = new Headers();
    noAuthHeaders.append('Content-Type','application/json');
    return this.http.post(this.mainUrl+'/auth/login/',body, {
      headers: noAuthHeaders,
    }).map((res:Response) => res.json());
  }

  public checkAccessUserGroup(token){
    const body = {};
    const noAuthHeaders = new Headers();
    noAuthHeaders.append('Authorization','Token '+token);
    noAuthHeaders.append('Content-Type','application/json');
    return this.http.post(this.mainUrl+'/check-login-info/',body,{
      headers: noAuthHeaders,
    }).map((res:Response) => res.json());
  }

  public markNotificationAsRead(notificationId){

    const body = {
      "notification_id" : notificationId
    };
    return this.http.post(this.mainUrl+'/read-notification/',body,{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public getAllNotifications(){
    return this.http.get(this.mainUrl+'/get-all-notifications/',{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public getAvailableSchedules(){
    return this.http.get(this.mainUrl+'/available-lesson/',{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public createReservation(scheduleId){
    let body = {
      "schedule_id" : scheduleId
    }
    return this.http.post(this.mainUrl+'/subscribe/',body,{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public getProfile(){
    return this.http.get(this.mainUrl+'/get-profile/',{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());


  }

  public getMembership(){
    return this.http.get(this.mainUrl+'/get-membership/',{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public getAllActiveSubscription(){
    return this.http.get(this.mainUrl+'/get-all-subscriptions/',{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public updateProfile(data){
    return this.http.post(this.mainUrl+'/set-profile/',data,{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public getPlans(){
    return this.http.get(this.mainUrl+'/get-plans/',{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  public cancelReservation(scheduleId){
    let body = {
      "schedule_id" : scheduleId
    }
    return this.http.post(this.mainUrl+'/cancel-subscribe/',body,{
      headers: this.getAuthHeaders(),
    }).map((res:Response) => res.json());
  }

  private getAuthHeaders(){
    const authHeaders = new Headers();
    authHeaders.append('Authorization','Token '+localStorage.getItem("access_token"));
    authHeaders.append('Content-Type','application/json');
    return authHeaders;
  }

}