Creating new Ionic app
I am creating new app with sidemenu and using Ionic generator command to create 2 pages and 1 service.
We need to focus inside the src/app/app.module.ts. So open the file and replace everything with below code.
Now open the src/app/app.component.ts and put rootPage as LoginPage instead of the default home page.
Now creating the Authentication service with name "auth.services.ts" under services folder
If the auth.service returns that the user is allowed to login we set our root navigation to the HomePage which stands for the logged in area of our app.
Now go to pages and open the src/pages/login/login.ts and replace it with:
you resulting login screen will now look like this:
I am hoping that you are enjoying with this post! Please share with you friends. Thank you!!
ionic start myApp sidemenu cd myApp ionic g page signup ionic g page login ionic g provider auth.service
We need to focus inside the src/app/app.module.ts. So open the file and replace everything with below code.
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular'; import { AuthService } from '../Services/auth.services'; import { HttpModule } from '@angular/http'; import { MyApp } from './app.component'; import { WelcomePage } from '../pages/welcome/welcome'; import { LoginPage } from '../pages/login/login'; import { SignupPage } from '../pages/signup/signup'; import { HomePage } from '../pages/home/home'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ MyApp, WelcomePage, LoginPage, SignupPage, HomePage ], imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp), ], bootstrap: [IonicApp], entryComponents: [ MyApp, WelcomePage, LoginPage, SignupPage, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, AuthService ] }) export class AppModule {}
Now open the src/app/app.component.ts and put rootPage as LoginPage instead of the default home page.
import { Component, ViewChild } from '@angular/core'; import { Nav, Platform ,App,MenuController} from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HomePage } from '../pages/home/home'; import { LoginPage } from '../pages/login/login'; import { AuthService } from '../Services/auth.services'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = LoginPage; pages: Array<{title: string, component: any, icon:string}>; constructor(public menuCtrl:MenuController, public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private auth: AuthService) { this.initializeApp(); if(this.auth.isLogged()===true) { this.rootPage=HomePage } else{ this.rootPage=LoginPage } } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. this.statusBar.styleDefault(); this.splashScreen.hide(); }); } openPage(page) { // Reset the content nav to have just this page // we wouldn't want the back button to show in this scenario this.nav.setRoot(page.component); } }
Now creating the Authentication service with name "auth.services.ts" under services folder
import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import 'rxjs/add/operator/map'; let apiUrl = 'http://localhost:5288/api/'; @Injectable() export class AuthService { constructor(public http: Http) {} login(credentials) { return new Promise((resolve, reject) => { let headers = new Headers(); headers.append('Content-Type', 'application/json'); this.http.post(apiUrl+'login', JSON.stringify(credentials), {headers: headers}) .subscribe(res => { resolve(res.json()); }, (err) => { reject(err); }); }); } register(data) { return new Promise((resolve, reject) => { let headers = new Headers(); headers.append('Content-Type', 'application/json'); this.http.post(apiUrl+'guest/signup', JSON.stringify(data), {headers: headers}) .subscribe(res => { resolve(res.json()); }, (err) => { reject(err); }); }); } logout(){ return new Promise((resolve, reject) => { let headers = new Headers(); headers.append('X-Auth-Token', localStorage.getItem('token')); this.http.post(apiUrl+'logout', {}, {headers: headers}) .subscribe(res => { localStorage.clear(); }, (err) => { reject(err); }); }); } isLogged(){ if(window.localStorage.getItem('token')){ return true; }else{ return false; } } }
If the auth.service returns that the user is allowed to login we set our root navigation to the HomePage which stands for the logged in area of our app.
Now go to pages and open the src/pages/login/login.ts and replace it with:
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams,LoadingController ,ToastController,MenuController} from 'ionic-angular'; import { HomePage } from '../home/home'; import { AuthService } from '../../Services/auth.services'; @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { loading: any; data: any; loginData = { username:'', password:'' }; constructor(public navCtrl: NavController,public authService: AuthService, public navParams: NavParams,public loadingCtrl: LoadingController, private toastCtrl: ToastController, private menuCtrl:MenuController) { } login(){ this.showLoader(); this.authService.login(this.loginData).then((result) => { this.loading.dismiss(); this.data = result; localStorage.setItem('token', this.data.access_token); this.navCtrl.setRoot(HomePage); }, (err) => { this.loading.dismiss(); this.presentToast(err); }); } showLoader(){ this.loading = this.loadingCtrl.create({ content: 'Authenticating...' }); this.loading.present(); } presentToast(msg) { let toast = this.toastCtrl.create({ message: msg, duration: 3000, position: 'bottom', dismissOnPageChange: true }); toast.onDidDismiss(() => { console.log('Dismissed toast'); }); toast.present(); } }
The class is ready, now the view. Now, i am going to create
ionic html controls for the login with 2 textbox and a button.
Here is simple code that you need to add in your login page.
<ion-content padding id="login"> <ion-row class="logo-row"> <ion-col> <h3>Welcome to code-view.com </h3> </ion-col> </ion-row> <form (ngSubmit)="login()" #f="ngForm" style="margin-top:50px"> <ion-list inset> <ion-item> <ion-label stacked>Username</ion-label> <ion-input [(ngModel)]="loginData.username" name="username" type="text" placeholder="Username" ></ion-input> </ion-item> <ion-item> <ion-label stacked>Password</ion-label> <ion-input [(ngModel)]="loginData.password" name="password" type="password" placeholder="Password"></ion-input> </ion-item> <button ion-button block type="submit" color="lightsecondary">Login</button> </ion-list> </form> </ion-content>
you resulting login screen will now look like this:
I am hoping that you are enjoying with this post! Please share with you friends. Thank you!!
No comments:
Post a Comment
Note: only a member of this blog may post a comment.