import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { trigger, style, animate, transition } from '@angular/animations';
import { AuthProvider } from '../../providers/auth';
//import { Validators, FormBuilder } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
animations: [
trigger(
'login', [
transition(':enter', [
style({
opacity: 0
}),
animate("1s ease-in-out", style({
opacity: 1
}))
]),
transition(':leave', [
style({
opacity: 0
})
])
],
),
trigger(
'registro', [
transition(':enter', [
style({
opacity: 0
}),
animate("1s ease-in-out", style({
opacity: 1
}))
]),
transition(':leave', [
style({
opacity: 0
})
])
],
),
]
})
export class LoginPage {
login = true;
register = false;
loginForm = {
email: '',
password: ''
};
registerForm = {
email: '',
password: '',
name: ''
}
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private loadingCtrl: LoadingController,
private authProvider: AuthProvider
//public formBuilder: FormBuilder
) {
}
//Exibir form de registro ao click
exibirRegistrar(){
this.login = false;
this.register = true;
}
//Exibir form de login ao click
exibirLogin(){
this.login = true;
this.register = false;
}
//Login
fazerLogin(){
this.authProvider.login(this.loginForm)
.then((res) => {
})
.catch((err) => {
})
}
//Registro
CriarNovaConta(){
this.authProvider.register(this.registerForm)
.then((res) => {
})
.catch((err) => {
})
}
ionViewDidLoad() {
}
}
login.html Welcome to the Vaccine in DIA! Log in to continue
</p>
</div>
<!--Forms CTA-->
<div class="padding-40">
<ion-item class="bg-transparent no-padding mg-top-30">
<ion-label stacked class="snow bold">E-mail</ion-label>
<ion-input type="email" class="snow" [(ngModel)]="loginForm.email"></ion-input>
</ion-item>
<ion-item class="bg-transparent no-padding mg-top-20">
<ion-label stacked class="snow bold">Senha</ion-label>
<ion-input type="password" class="snow" [(ngModel)]="loginForm.password"></ion-input>
</ion-item>
<div class="ctaLogin center bold mg-top-30"(click)="fazerLogin()">
Entrar
</div>
<!--Nova Conta-->
<div class="txtRegistrar bold mg-top-30 center" (click)= "exibirRegistrar()">
Quero cadastrar uma conta
</div>
</div>
</div>
</div>
</div>
<!--Register-->
OK! Come on. Create your access credentials
</p>
</div>
<!--Forms CTA-->
<div class="padding-40">
<ion-item class="bg-transparent no-padding mg-top-10">
<ion-label stacked class="snow bold">Como você se chama?</ion-label>
<ion-input type="text" class="snow" [(ngModel)]="registerForm.name"></ion-input>
</ion-item>
<ion-item class="bg-transparent no-padding mg-top-5">
<ion-label stacked class="snow bold">Qual é o seu e-mail?</ion-label>
<ion-input type="email" class="snow" [(ngModel)]="registerForm.email"></ion-input>
</ion-item>
<ion-item class="bg-transparent no-padding mg-top-5">
<ion-label stacked class="snow bold">Escolha uma senha.</ion-label>
<ion-input type="password" class="snow" [(ngModel)]="registerForm.password"></ion-input>
</ion-item>
<div class="ctaRegister center bold mg-top-50"(click)="CriarNovaConta()">
Cadastrar
</div>
<!--JÁ TENHO UMA CONTA-->
<div class="txtLogin bold snow mg-top-40 center" (click)="exibirLogin()">
Já tenho uma conta
</div>
</div>
</div>
</div>
</div>