Skip to content

Instantly share code, notes, and snippets.

/signUp.html

Created Jul 25, 2017
Embed
What would you like to do?
<!--
Generated template for the SignupPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Signup</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [FormGroup]="myForm" (submit)="signUp()">
<ion-list>
<ion-item>
<ion-icon name="mail" item-left></ion-icon>
<ion-label stacked>email</ion-label>
<ion-input [(ngModel)]="userModel.email" type="email" name="email" autocorrect="off" autocapitalize="none"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
</ion-item>
<ion-item>
<ion-icon name="key" item-left></ion-icon>
<ion-label stacked>Password</ion-label>
<ion-input [(ngModel)]="userModel.password" name ="password" type="password" required minlength="6" ></ion-input>
</ion-item>
<div padding-left padding-right padding-top>
<button ion-button block primary [disabled]="!myForm.valid">Registrate</button>
</div>
</ion-list>
</form>
</ion-content>
import { Component } from '@angular/core';
import { NavController, NavParams , LoadingController, AlertController} from 'ionic-angular';
/**
* Generated class for the SignupPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
import { AuthService } from '../../providers/auth-service';
import { UserModel } from '../../models/user-model';
import { SigninPage } from '../signin/signin';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
userModel :UserModel;
//inyectamos los servicios al contructor
constructor(public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public alertCtrl : AlertController,
public authService :AuthService,
public formBuilder : FormBuilder) {
this.userModel =new UserModel();
}
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
}
signUp() {
//mostramos una ventana mientra se registra al usuario
let loading = this.loadingCtrl.create({
content: 'Creando cuenta. Por favor, espere...'
});
loading.present();
//Utilizamos el servicio AuthService que injectamos en el contructor para ejecutar su método createUserWithEmailAndPassword()
//el cual recibe el modelo UserModel el cual ya va a tener los datos del usuario capturados en la vista
this.authService.createUserWithEmailAndPassword(this.userModel).then(result => {
loading.dismiss();
// el metodo devuelve la promesa ,vamos a suponer que el usuario fue registrado por lo que enviamos al usuario
// a la pantalla de inicio de sesión para que pueda utilizar sus nuevas credenciales y entrar
this.navCtrl.push(SigninPage);
}).catch(error => {//si existe un error
loading.dismiss();
console.log(error);
this.alert('Error', 'Ha ocurrido un error inesperado. Por favor intente nuevamente.');
});
}//cierre del metodo signUp
alert(title :string , message :string ){
let alert =this.alertCtrl.create({
title : title,
subTitle: message,
buttons :['OK']
});
alert.present();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.