Create Login page in Angular - Ionic Hybrid Application (login page in Ionic with validation )
First you generate the login ts file
copay paste these code
import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {AppValidators} from "../../Validators/AppValidators";
import {PageDashboard, PageForgotPassword, PageRegistration} from "../Page";
import { ShareServiceProvider } from '../../providers/share-service/share-service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {AlertController} from 'ionic-angular';
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
[x: string]: any;
myForm: any;
isActiveToggleTextPassword: Boolean = true;
private form: FormGroup;
submitted: boolean= false;
termsAndConditions = 'By Clicking Sign Up, you are agree to our <a href="www.facebook.com">Terms and Conditions and Privacy Policy</a>';
constructor(public navCtrl: NavController,
public navParams: NavParams,
public formBuilder: FormBuilder,
private auth: ShareServiceProvider,
public alertCtrl: AlertController) {
this.buildForm();
// this.initializeForm();
}
public toggleTextPassword(): void {
this.isActiveToggleTextPassword = (this.isActiveToggleTextPassword == true) ? false: true;
}
public isShowPassword(): boolean {
return this.isActiveToggleTextPassword === true;
}
public getType() {
return this.isActiveToggleTextPassword ? 'password' : 'text';
}
forgotPassword() {
this.navCtrl.push(PageForgotPassword);
}
private buildForm() {
this.form = this.formBuilder.group({
password: ['', Validators.compose([Validators.minLength(6), AppValidators.isValidPassword, Validators.maxLength(30), Validators.required])],
email: ['', Validators.compose([
Validators.required,
Validators.pattern("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$")
])]
});
}
login(){
let env = this;
if(this.form.value)
{
this.auth.presentLoadingDefault();
let body={
Email:this.form.value.email,
Password:this.form.value.password
}
this.auth.doLogin(body).then(res => {
console.log(res);
window.localStorage.users_data = JSON.stringify(res);
this.navCtrl.setRoot(PageDashboard);
this.submitted = true;
},
error => {
if (error == "Login Email or Password are incorrect") {
// env.presentAlert(error);
} else if (error == "Unable to login to your account") {
// env.presentAlert(error);
}
else {
// env.presentAlert("Something went wrong");
}
// Set Error In Error Log Table
let date = new Date().toISOString().slice(0, 19).replace('T', ' ');
let req = { 'err_text': JSON.stringify(error) + "Line No 160", 'file_path': 'login.ts', 'method': 'login', 'parent_method': "0", 'error_time': date, 'type': 'mobile' }
this.auth.errorLog(req).subscribe(); //call error log api
}
);
}else{
this.submitted = false;
return false;
}
}
// Alert any Error occured
presentAlert(error: any) {
let alert = this.alert.create({
subTitle: error,
buttons: ["Ok"]
});
alert.present();
}
registrationOnClick() {
this.navCtrl.push(PageRegistration);
}
}
Reviewed by Bugs Solutions
on
December 19, 2022
Rating:
No comments