how to encrpt password in ionic2 typescript file.I refered the below link and imported pbkdf2 module in to ionic2 app.
enter link description here
but i got error like webpack_require.i(...) is not a function.can anyone help me solving out this...
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { pbkdf2 } from '../../../node_modules/pbkdf2-sha256/lib/pbkdf2.js';
/*
Generated class for the Firstpage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-firstpage',
templateUrl: 'firstpage.html'
})
export class FirstpagePage {
key : any = "passwd";
salt :any ="salt";
res :any ;
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
console.log('ionViewDidLoad FirstpagePage');
}
encrypt(){
console.log("-----");
this.res = pbkdf2(this.key, this.salt, 1, 64);
console.log(this.res.toString('hex'))
}
}
Try to define pbkdf2 in the constructor.
constructor(public navCtrl: NavController, public navParams: NavParams,
public crypt:pbkdf2) {}
Related
I am making ecommerce app in ionic2. While using tabs page I am getting below Runtime error
Uncaught (in promise): invalid link: TabsPage
tabs.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { TranslateService } from '#ngx-translate/core';
import { HomePage } from '../home/home';
import { WishlistPage } from '../wishlist/wishlist';
import { AccountPage } from '../account/account';
#IonicPage({
name: 'TabsPage'
})
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = WishlistPage;
tab3Root: any = AccountPage;
myIndex:number
tab1Title = " ";
tab2Title = " ";
tab3Title = " ";
constructor(public navCtrl: NavController, public translateService: TranslateService) {
}
}
I have been folllowing the ionic tutorial:
10 Minutes with Ionic 2: Calling an API
Typescript Error
Module '"C:/Users/grace/imaginemai/client/apiApp/src/providers/people->service/people-service"' has no exported member 'PeopleSevice'.
C:/Users/grace/imaginemai/client/apiApp/src/pages/home/home.ts
import { NavController } from 'ionic-angular';
import {PeopleSevice} from >'C:\Users\grace\imaginemai\client\apiApp\src\providers\people-> >service\people-service';
I am not sure what I am doing wrong. I noticed that there were possible errors with the original tutorial so I made some amendments as per a correction posted in the comments: https://github.com/ah3243/ionic2ApiExample/blob/master/src/providers/people-search.ts
I am still having issues - I've followed the tutorial but used my own API from a blog I am developing with Django. So although the ionic app is called peopleservice, I am expecting it to produce blog posts. The code is pasted below. Please could someone tell me what I am doing wrong.
Thanks in advance.
people-service.ts:
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the PeopleServiceProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class PeopleService {
data1: any;
constructor(public http: Http) {
console.log('Hello PeopleService Provider');
}
load() {
if (this.data1) {
return Promise.resolve(this.data1);
}
//dont have the data yet
return new Promise(resolve => {
this.http.get('localhost:8000/posts/')
.map(res => res.json())
.subscribe(data => {
this.data1 = data.results;
resolve(this.data1);
});
});
}
}
home.ts:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {PeopleSevice} from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [PeopleSevice]
})
export class HomePage {
public posts: any;
constructor(public navCtrl: NavController, public peopleService: PeopleService) {
this.loadPosts();
}
loadPosts() {
this.PeopleService.load()
.then(data1 => {
this.posts = data1;
})
}
}
app.module.ts:
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
/*import { PeopleService } from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';*/
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
/*StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
PeopleService*/
]
})
export class AppModule {}
app.component.ts:
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
import { PeopleService } from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
home.html:
<ion-header>
<ion-navbar *navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home">
<ion-list>
<ion-item *ngFor="let post of posts">
<h2>{{post.title}}</h2>
<p>{{post.text}}</p>
</ion-item>
</ion-list>
</ion-content>
folder structure:
blog
>client
>apiApp
>src
>app
>app.component.ts
>app.html
>app.module.ts
>app.scss
>main.ts
>pages
>providers
>people-service
>people-service.ts
You have to use relative paths for importing.
import {PeopleSevice} from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';
This kind of absolute path will not work.
Try:
import {PeopleSevice} from '../../providers/people-service/people-service';
This is the relative path from the current file.
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { FormGroup, FormControl} from '#angular/forms';
import { ViewController} from 'ionic-angular';
import { ModalController } from 'ionic-angular';
import { TabsPage } from "../tabs/tabs"
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'listing.html'
})
export class ListingPage {
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Dashboard');
}
//modals started
filterSort() {
let modal = this.modalCtrl.create(SortModal);
modal.present();
}
}
#Component({
selector:"sort-page",
templateUrl:"filter/sort.listing.filter.html",
providers:[ListingPage]
})
export class SortModal {
relationship:string;
filtersStore:Array<string>=[];
public myForm: FormGroup;
constructor(private _filterservice:FilterModalsService,private _v:ViewController,private _sharedservice: SharedService,private listingpage:ListingPage,public navCtrl: NavController){
this.myForm = new FormGroup({
langs: new FormControl()
})
}
doSubmit() {
this.listingpage.onSearch(0,true);
this._v.dismiss();
}
reset(){
this.myForm.reset();
this._sharedservice.deleteData();
}
}
listingpage is parent component in which i open the SortModal component as modal in ionic 2 and child is SortModal but when i open the modal by defualt every element is reset and then i select one from the list and dismiss the modal but when i open the modal again all value again empty. i want retain value the element of radio which i selected before
i'm trying to implement a simple ionic app with login authentification, when the user enter the credentials and hit login i sat the Root for the Nav to be the TabsPage that contains the home,contact and about pages.The problem is when the i hit the logout button in the home page it redirect the home tab(see logout function in home.ts) to the login page(set the Root to loginPage) and the three tabs stays at the bottom, i want fully redirection to the loginPage any suggestions ?
login page
after logout in home page
app.component.ts :
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = LoginPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
login.ts :
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import {TabsPage} from '../tabs/tabs';
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
loading: Loading;
registerCredentials = { email: '', password: '' };
constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }
public login() {
//this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
if (allowed) {
console.log('allowed');
this.nav.setRoot(TabsPage); //move to tabspage
} else {
this.showError("Access Denied");
console.log('denied');
}
},
error => {
this.showError(error);
});
}
showLoading() {
this.loading = this.loadingCtrl.create({
content: 'Please wait...',
dismissOnPageChange: true
});
this.loading.present();
}
showError(text) {
//this.loading.dismiss();
let alert = this.alertCtrl.create({
title: 'Fail',
subTitle: text,
buttons: ['OK']
});
alert.present(prompt);
}
}
home.ts :
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import {LoginPage} from '../login/login';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
username = '';
email = '';
constructor(private nav: NavController, private auth: AuthService) {
let info = this.auth.getUserInfo();
this.username = info['name'];
this.email = info['email'];
}
public logout() {
this.auth.logout().subscribe(succ => {
this.nav.setRoot(LoginPage)
});
}
}
I got around this issue by getting the navcontroller from app.
import {App, NavController, IonicPage } from 'ionic-angular';//import App
Inject the app object.
constructor(private app:App,private nav: NavController, private auth: AuthService) {//...
}
In logout function, use getRootNav().
public logout() {
this.auth.logout().subscribe(succ => {
this.app.getRootNav().setRoot(LoginPage)
});
I am trying to implement a solution where I need to get the current url on exit event of InAppBowser Ionic2.
My Code is
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {InAppBrowser} from 'ionic-native';
#Component({
selector: 'page-list',
templateUrl: 'list.html'
})
export class ListPage {
browser:any;
exit:boolean = false;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
startPayment(){
this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done');
this.browser.on("exit")
.subscribe(
(e) => {
this.checkpaymentStatus(e);
},
err => {
console.log("InAppBrowser loadstart Event Error: " + err);
});
};
checkpaymentStatus(e){
console.log(e);
console.log("in app browser exit")
this.exit = true;
}
};//
The exit event is firing properly but I am unable to get the url in event(e), it just gives Object{type:exit}.
Please tell me , how can I get the url on exit.
Thanks
just use e.url
checkpaymentStatus(e){
console.log(e.url); // you will get url here
// ... ... ...
}