Hi all, I am trying to authenticate through WP REST and a developer’s bootstrap framework. Attached is the code and whenever I try to login it will stuck at “Loading Please Wait”. Any idea? Thanks in advance.
login.ts
import { Component,OnInit,ViewEncapsulation } from '@angular/core';
import { NavController, ModalController, AlertController, LoadingController } from '@ionic/angular';
import { UserService } from '../../providers/user-service';
import { WoocommerceService } from '../../providers/woocommerce-service';
import { SowService } from '../../providers/sow-service';
import { AppConfig } from '../../app-config';
import { Storage } from '@ionic/storage';
import * as CryptoJS from 'crypto-js';
import { TranslateService } from '@ngx-translate/core';
import {RegisterPage} from '../register/register';
/*
Generated class for the Login page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'app-page-login',
templateUrl: 'login.html',
styleUrls: ['login.scss'],
encapsulation: ViewEncapsulation.None
})
export class LoginPage {
userName: string;
password: string;
email: string;
errorModal: any;
constructor(public navCtrl: NavController, public userService: UserService, public wooService: WoocommerceService,
public appConfig: AppConfig, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public sowService: SowService, public storage: Storage
, public translateService: TranslateService,public modalCtrl:ModalController) {
}
doRegister() {
this.navCtrl.navigateForward('register');
this.modalCtrl.dismiss();
}
doLogin() {
this.translateService.get(['Notice', 'Loading', 'NetWork_Error', 'OK', 'Sign_In_Failed', 'Sign_In_No_Email', 'Sign_In_Email_Error', 'No_Email_Or_Password']).
subscribe(async value => {
var loadingModal = await this.loadingCtrl.create({
message: value['Loading']
});
if (this.appConfig.Enable_Login_With_Password) {
if (this.email == null || this.password == null || this.email.trim().length == 0 || this.password.trim().length < 6) {
var alert=await this.alertCtrl.create({
header: value['Notice'],
message: value['No_Email_Or_Password'],
buttons: [value['OK']]
});
alert.present();
return;
}
loadingModal.present();
var password = this.password;
if (this.appConfig.App_Secret != '') {
var key = CryptoJS.enc.Utf8.parse(CryptoJS.MD5(this.appConfig.App_Secret).toString());
var iv = CryptoJS.enc.Utf8.parse(CryptoJS.MD5(this.appConfig.App_Secret).toString().substr(0, 16));
password = CryptoJS.AES.encrypt(password, key, { iv: iv }).toString();
}
this.sowService.login({ email: this.email, password: encodeURIComponent(password) }).then(async (data: any) => {
if (data && data != 'error') {
this.userService.id = data.id;
this.userService.email = data.email;
this.userService.first_name = data.first_name;
this.userService.last_name = data.last_name;
this.userService.name = data.first_name + data.last_name;
this.userService.username = data.username;
this.userService.isAuthenticated = true;
await this.storage.set('oddwolves-user-info', data);
loadingModal.dismiss();
this.modalCtrl.dismiss();
} else {
loadingModal.dismiss();
var alert=await this.alertCtrl.create({
header: value['Notice'],
message: value['Sign_In_Failed'],
buttons: [value['OK']]
});
alert.present();
}
}, (reson) => {
loadingModal.dismiss();
});
}
else {
if (this.email == null || this.email.trim().length == 0) {
var alert=await this.alertCtrl.create({
header: value['Notice'],
message: value['Sign_In_No_Email'],
buttons: [value['OK']]
});
alert.present();
return;
}
loadingModal.present();
this.wooService.getCustomerByEmail({ email: this.email }).then(async (data: Array<any>) => {
if (data.length > 0 && data[0] && data[0].id > 0) {
this.userService.id = data[0].id;
this.userService.email = data[0].email;
this.userService.first_name = data[0].first_name;
this.userService.last_name = data[0].last_name;
this.userService.name = data[0].first_name + data[0].last_name;
this.userService.username = data[0].username;
this.userService.isAuthenticated = true;
loadingModal.dismiss();
this.modalCtrl.dismiss();
} else {
loadingModal.dismiss();
var alert=await this.alertCtrl.create({
header: value['Notice'],
message: value['Sign_In_Email_Error'],
buttons: [value['OK']]
});
alert.present();
}
}, (reson) => {
loadingModal.dismiss();
});
}
});
}
doClose() {
this.modalCtrl.dismiss();
}
}
user-service.ts
import { Injectable } from '@angular/core';
// import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';
import { AppConfig } from '../app-config';
/*
Generated class for the UserService provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable({
providedIn: 'root',
})
export class UserService {
LOCAL_TOKEN_KEY = 'IonWooShop';
id = '';
username = '';
birthday = '';
email = '';
name = '';
first_name = '';
last_name = '';
isAuthenticated = false;
authToken = '';
cachedData: any;
constructor(public storage: Storage, public appConfig: AppConfig) {
this.LOCAL_TOKEN_KEY = appConfig.Shop_Name;
}
loadUserCredentials() {
this.storage.get(this.LOCAL_TOKEN_KEY).then(user => {
if (user) {
this.useCredentials(JSON.parse(user));
}
});
}
useCredentials(user) {
this.id = user.id;
this.username = user.username;
this.birthday = user.birthday;
this.email = user.email;
this.name = user.firstname + ' ' + user.lastname;
this.first_name = user.firstname ;
this.last_name = user.lastname;
this.isAuthenticated = true;
this.authToken = JSON.stringify(user);
}
destroyUserCredentials() {
this.authToken = undefined;
this.id = '';
this.username = '';
this.birthday = '';
this.email = '';
this.name = '';
this.first_name = '';
this.last_name = '';
this.isAuthenticated = false;
this.storage.remove(this.LOCAL_TOKEN_KEY);
}
}
