I have app containing register and login page
this register.is
import { Component } from '@angular/core';
import { NavController ,ToastController,AlertController ,LoadingController } from 'ionic-angular';
import { FirebaseService } from '../../services/firebase.service';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import { LoginPage } from '../login/login';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
home:HomePage;
simple_form: FormGroup;
constructor(public navCtrl: NavController , public loadingCtrl: LoadingController,
public alertCtrl: AlertController,public firebaseService: FirebaseService, public toastCtrl: ToastController,public formBuilder: FormBuilder) {
this.simple_form = this.formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
pass: ['', Validators.required],
});
}
async createSong() {
const loading = await this.loadingCtrl.create();
const name = this.simple_form.value.name;
const email = this.simple_form.value.email;
const pass = this.simple_form.value.pass;
this.firebaseService
.createSong(name, email, pass)
.then(
() => {
let toast = this.toastCtrl.create({
message: 'User was created successfully',
duration: 3000
});
toast.present();
},
error => {
console.error(error);
}
);
return await loading.present();
}
loginpage(){
this.navCtrl.push(LoginPage);
}
}
this rgister.html
<ion-content padding>
<form [formGroup]="simple_form" (submit)="createSong()" >
<ion-item>
<ion-label floating >Name</ion-label>
<ion-input type="text" formControlName="name" class="form-controll" required></ion-input>
</ion-item>
<ion-item>
<ion-label floating >email</ion-label>
<ion-input type="email" formControlName="email" class="form-controll" required ></ion-input>
</ion-item>
<ion-item>
<ion-label floating >password</ion-label>
<ion-textarea type="password" formControlName="pass" class="form-controll" required ></ion-textarea>
</ion-item>
<button ion-button full [disabled]="!simple_form.valid " type="submit">Add</button>
</form>
<button ion-button full (click)="loginpage()" >login</button>
</ion-content>
this login.html
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="loginForm" (ngSubmit)="login()">
<ion-item>
<ion-label floating >email</ion-label>
<ion-input type="email" formControlName="email" class="form-controll" required ></ion-input>
</ion-item>
<ion-item>
<ion-label floating >password</ion-label>
<ion-textarea type="password" formControlName="pass" class="form-controll" required ></ion-textarea>
</ion-item>
<button ion-button full type="submit" (click)="goback()" >login</button>
</form>
</ion-content>
in the login page, I want to check if email and password exist in the database if exist and correct, let user login to the app.
how do that, please help me