Skip to content

Instantly share code, notes, and snippets.

@geykel

geykel/signin-formbuilder.html Secret

Last active Jul 25, 2017
Embed
What would you like to do?
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Iniciar Sesión</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form [formGroup]="signInForm">
<ion-list>
<ion-item>
<ion-label stacked>Correo electrónico</ion-label>
<ion-input type="email" formControlName="email" autocorrect="off" autocapitalize="none"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Contraseña</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Nombre</ion-label>
<ion-input type="text" formControlName="firstName" autocorrect="off"></ion-input>
</ion-item>
<div padding-left padding-right padding-top>
<button ion-button [disabled]="!signInForm.valid" (click)="signIn()" block>Entrar</button>
</div>
</ion-list>
</form>
</ion-content>
import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from '../../providers/auth-service';
import { UserModel } from '../../models/user-model';
import { SignUpPage } from '../signup/signup';
import { HomePage } from '../home/home';
@Component({
selector: 'page-signin',
templateUrl: 'signin.html'
})
export class SignInPage {
private signInForm: FormGroup;
constructor(
public navCtrl: NavController,
public loadingCtrl: LoadingController,
public alertCtrl: AlertController,
public authService: AuthService,
private formBuilder: FormBuilder) {
this.signInForm = this.formBuilder.group({
email: ['', Validators.compose([Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')])],
password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
firstName: ['', Validators.required]
});
}
signIn() {
let loading = this.loadingCtrl.create({
content: 'Iniciando sesión. Por favor, espere...'
});
loading.present();
let userModel = new UserModel();
userModel.email = this.signInForm.value.email;
userModel.password = this.signInForm.value.email;
userModel.firtName = this.signInForm.value.firtName;
this.authService.signInWithEmailAndPassword(userModel).then(result => {
loading.dismiss();
this.navCtrl.setRoot(HomePage);
}).catch(error => {
loading.dismiss();
console.log(error);
this.alert('Error', 'Ha ocurrido un error inesperado. Por favor intente nuevamente.');
});
}
signUp() {
this.navCtrl.push(SignUpPage);
}
alert(title: string, message: string) {
let alert = this.alertCtrl.create({
title: title,
subTitle: message,
buttons: ['OK']
});
alert.present();
}
}
export class UserModel {
email: string;
password: string;
firtName: string;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment