export class LoginPage {
  loading: any;
  tabElement: any;
  SigninForm: FormGroup;
  forbiddenEmails: any;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private authProviders: AuthProvider,
    private alertCtrl: AlertController,
    private loadingCtrl: LoadingController,
    private tokenProvider: TokenProvider,
    private formBuilder: FormBuilder,
  ) {
    this.tabElement = document.querySelector('.tabbar.show-tabbar');
    this.SigninForm = this.formBuilder.group({
      username: [null, [Validators.required]],
      password: [null, [Validators.required, Validators.minLength(4)]],
    });
  }

  ionViewDidLoad() {
    if (this.tabElement) {
      (this.tabElement as HTMLElement).style.display = 'none';
    }
  }

  ionViewWillEnter() {
    if (this.tabElement) {
      (this.tabElement as HTMLElement).style.display = 'none';
    }
  }




  LoginUser() {
    this.ShowLoader();
    this.authProviders.LoginUser(this.SigninForm.value).subscribe(
      data => {
        this.tokenProvider.SetToken(data.token);
        setTimeout(() => {
          this.loading.dismiss();
          this.navCtrl.setRoot('TabsPage');
        }, 2000);
      },
      err => {
        this.loading.dismiss();
        if (err.error.msg) {
          this.SHowErrorAlert(err.error.msg[0].message);
        }

        if (err.error.message) {
          this.SHowErrorAlert(err.error.message);
        }
      }
    );
  }

  RegisterPage() {
    this.navCtrl.push('RegisterPage');
  }

  SHowErrorAlert(message) {
    let alert = this.alertCtrl.create({
      title: 'Login Error',
      subTitle: `${message}`,
      buttons: ['OK'],
      cssClass: 'alertCss'
    });

    alert.present();
  }

  ShowLoader() {
    this.loading = this.loadingCtrl.create({
      content: 'Athenticating...'
    });
    this.loading.present();
  }
}

<ion-content class="sign" padding>
  <div class="layer">
  <div class="appForm" ion-fixed padding margin-bottom style="position: absolute !important; top: 0%; bottom: 0%; left: 0; margin-bottom: 1%;">
      <form [formGroup]="SigninForm">
    <ion-list style="margin-top: 30% !important">
      <ion-item>
          <div class="logo">
              <h2>MyDreamLove</h2>
            </div>
      </ion-item>
      <ion-item>
        <ion-input class="input-field" formControlName="username" name="username" type="text" placeholder="Username"></ion-input>
      </ion-item>
      <div *ngIf="!SigninForm.get('username').valid && SigninForm.get('username').touched"
      class="help-block">Please enter a valid username!</div>

      <ion-item>
        <ion-input class="input-field" formControlname="password" name="password" type="password" placeholder="Password"></ion-input>
      </ion-item>
      <div *ngIf="!SigninForm.get('password').valid && SigninForm.get('password').touched"
      class="help-block">Please enter a valid password!</div>
      <button ion-button block class="login-button" (click)="LoginUser()">Login</button>

      <p class="signin">
        <button class="register-button" ion-button block clear (click)="RegisterPage()">Sign Up</button>
      </p>
    </ion-list>
</form>
  </div>
  </div>
</ion-content>