auto sms android IOS

sultan-q3
Sultan Khan 4 years ago
parent e765d81711
commit de93db93d5

@ -1,70 +1,142 @@
<app-generic-header
showBack="true"
[headerText]="'verificationcode,verificationcode' | translate">
showBack="true"
[headerText]="'verificationcode,verificationcode' | translate">
</app-generic-header>
<ion-content padding>
<ion-grid>
<!-- <ion-row>
<ion-col [size]="4">
<img [src]="logo" class="logo" />
<ion-img class="centerDiv" src="../assets/imgs/CS.png"></ion-img>
</ion-col>
</ion-row> -->
<br/>
<br/>
<ion-row>
<ion-col>
<p class="headerTxt" > {{'verificationcode,verificationcode' | translate}}</p>
<br/>
<p class="leftDiv">{{'verificationcode,title' | translate}}
<span class="boldTxtNav">{{'verificationcode,verificationcode' | translate}}</span>
{{'verificationcode,by' | translate}}
<span *ngIf="loginType == 1 || activeType == 1" class="boldTxtNav">{{'verificationcode , sms' | translate}}, </span>
<span *ngIf="loginType == 4 || activeType == 4" class="boldTxtNav">{{'verificationcode , whatsapp' | translate}}, </span>
{{'verificationcode,instruct' | translate}}
<span class="boldTxtNav">{{'general,submit' | translate}}</span
></p>
<!-- <p class="leftDiv">{{'verificationcode,title' | translate}}<span class="boldTxtNav">{{'verificationcode,verificationcode' | translate}}</span> {{'verificationcode,by' | translate}}<span class="boldTxtNav">{{'verificationcode,sms' | translate}}</span>{{'verificationcode,instruct' | translate}}<span class="boldTxtNav">{{'general,submit' | translate}}</span></p> -->
</ion-col>
</ion-row>
</ion-grid>
<br/><br/>
<!-- <p style="color: #c0c0c0; margin-left: 32%">{{'verificationcode.verificationcode' | translate}}</p> -->
<div>
<h1 text-center>{{displayTime}}</h1>
<br/><br/>
<!-- <ion-item>
//<ion-label>{{'verificationcode,verificationcode' | translate}}</ion-label>
// <img class="item-icon" src="assets/imgs/password.png" item-start />
<ion-input required type="tel" maxlength="4" (keyup)="checkOTPLength()" placeholder="{{translate.trPK('verificationcode','verificationcode')}}" [(ngModel)]="activationCode"></ion-input>
</ion-item> -->
<ion-row class="sms_code" dir="ltr">
<ion-col [size]="12">
<ion-input type="tel" [(ngModel)]="smc_code[0]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
</ion-input>
<ion-input type="tel" [(ngModel)]="smc_code[1]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" [(ngModel)]="smc_code[2]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" [(ngModel)]="smc_code[3]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-grid>
<!-- <ion-row>
<ion-col [size]="4">
<img [src]="logo" class="logo" />
<ion-img class="centerDiv" src="../assets/imgs/CS.png"></ion-img>
</ion-col>
</ion-row> -->
<br/>
<br/>
<ion-row>
<ion-col>
<p class="headerTxt" > {{'verificationcode,verificationcode' | translate}}</p>
<br/>
<p class="leftDiv">{{'verificationcode,title' | translate}}
<span class="boldTxtNav">{{'verificationcode,verificationcode' | translate}}</span>
{{'verificationcode,by' | translate}}
<span *ngIf="loginType == 1 || activeType == 1" class="boldTxtNav">{{'verificationcode , sms' | translate}}, </span>
<span *ngIf="loginType == 4 || activeType == 4" class="boldTxtNav">{{'verificationcode , whatsapp' | translate}}, </span>
{{'verificationcode,instruct' | translate}}
<span class="boldTxtNav">{{'general,submit' | translate}}</span
></p>
<!-- <p class="leftDiv">{{'verificationcode,title' | translate}}<span class="boldTxtNav">{{'verificationcode,verificationcode' | translate}}</span> {{'verificationcode,by' | translate}}<span class="boldTxtNav">{{'verificationcode,sms' | translate}}</span>{{'verificationcode,instruct' | translate}}<span class="boldTxtNav">{{'general,submit' | translate}}</span></p> -->
</ion-col>
</ion-row>
</ion-grid>
<br/><br/>
<!-- <p style="color: #c0c0c0; margin-left: 32%">{{'verificationcode.verificationcode' | translate}}</p> -->
<div>
<h1 text-center>{{displayTime}}</h1>
<br/><br/>
<!-- <ion-item>
//<ion-label>{{'verificationcode,verificationcode' | translate}}</ion-label>
// <img class="item-icon" src="assets/imgs/password.png" item-start />
<ion-input required type="tel" maxlength="4" (keyup)="checkOTPLength()" placeholder="{{translate.trPK('verificationcode','verificationcode')}}" [(ngModel)]="activationCode"></ion-input>
</ion-item> -->
<ion-row class="sms_code" dir="ltr">
<ion-col [size]="12">
<ion-input type="tel" [(ngModel)]="smc_code[0]" maxLength="4" size="4" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
</ion-input>
<ion-input type="tel" [(ngModel)]="smc_code[1]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" [(ngModel)]="smc_code[2]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" [(ngModel)]="smc_code[3]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
</ion-col>
</ion-row>
<div *ngIf="showErrorMessage"><p style="color: red; font-weight: bold; font-size: 14px; text-align: center;">{{messageValue}}</p></div>
</div>
</ion-content>
<ion-footer>
<div class="centerDiv">
<ion-button class="button-login" ion-button (click)="checkVerificationCode()">{{'general,submit' | translate}}</ion-button>
</div>
</ion-footer>
<div class="centerDiv">
<ion-button class="button-login" ion-button (click)="checkVerificationCode()">{{'general,submit' | translate}}</ion-button>
</div>
</ion-footer>

@ -1,335 +1,682 @@
import { Component, OnInit } from '@angular/core';
import { ElementRef } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { SMSCheckRequest } from 'src/app/hmg-common/services/authentication/models/smscheck.request';
import { LoginModel } from '../models/LoginModel';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { SMSCheckResponse } from 'src/app/hmg-common/services/authentication/models/smscheck.response';
import { Password } from '../models/password';
import { GetLoginInfoRequest } from 'src/app/hmg-common/services/authentication/models/get-login-info.request';
import * as moment from 'moment';
import { NFC } from "@ionic-native/nfc/ngx";
import { SmsRetriever } from '@ionic-native/sms-retriever/ngx';
@Component({
selector: 'app-sms-page',
templateUrl: './sms-page.page.html',
styleUrls: ['./sms-page.page.scss']
})
export class SmsPageComponent implements OnInit {
public static LOGIN_DATA = 'LOGIN_DATA';
Channel = 0;
activationCode: string;
P_SESSION_ID: number;
P_USER_NAME: string;
timeInSeconds: any;
time: any;
runTimer: any;
hasStarted: any;
hasFinished: any;
remainingTime: any;
displayTime: any;
loginTokenID: string;
public isForgetPwd = false;
public isExpiredPwd = false;
public count = 0;
private loginData = new LoginModel();
public deviceToken: any;
public loginTypeData: any;
public logo = 'assets/icon/login/password.png';
// tslint:disable-next-line: variable-name
public smc_code: any = [];
code: any;
// tslint:disable-next-line: variable-name
user_name: string;
public isPostNoLoad = true;
loginType: any;
activeType: any;
public isNFCAvailable = false;
public showErrorMessage = false;
public messageValue: string;
public businessInfo: object;
public isAutoRead: boolean = false;
constructor(
public navCtrl: NavController,
public translate: TranslatorService,
public common: CommonService,
private elementRef: ElementRef,
public authService: AuthenticationService,
public sharedData: SharedDataService,
public platform: Platform,
private nfc: NFC,
private smsRetriever: SmsRetriever
) { }
ngOnInit() {
this.checkNFCStatus();
this.activeType = this.common.getActiveTypeLogin();
console.log("active " + this.common.sharedService.getSharedData('active-type', true));
console.log("activeType :" + this.activeType);
this.count = 0;
this.initTimer();
this.startTimer();
this.isForgetPwd = this.sharedData.getSharedData(Password.IS_FORGET_PSW) || false;
this.isExpiredPwd = this.sharedData.getSharedData(Password.IS_EXPIRED_PSW) || false;
this.loginData = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false);
this.deviceToken = this.common.sharedService.getSharedData(AuthenticationService.DEVICE_TOKEN, false);
// tslint:disable-next-line: triple-equals
if (this.deviceToken == undefined) {
this.deviceToken = localStorage.getItem('deviceToken');
}
console.log('deviceToken :' + this.deviceToken);
this.loginTypeData = this.common.sharedService.getSharedData(SMSCheckRequest.SHARED_DATA, false);
if (this.loginTypeData) {
this.loginType = this.loginTypeData.loginType;
console.log("loginType :" + this.loginTypeData.loginType);
} else {
this.loginType = 1;
}
this.smsRetriever.startWatching()
.then((res: any) => this.checkActivation(res))
.then((res: any) => this.checkActivation(res, true))
.catch((error: any) => console.error(error));
}
checkActivation(res) {
checkActivation(res, isAndroid) {
this.isAutoRead = true;
var pattern = /\d+/g;
var code = res.Message.match(pattern)[0];
if (isAndroid)
var code = res.Message.match(pattern)[0];
else
var code = res;
this.activationCode = code
this.smc_code = code.split('');
this.checkVerificationCode();
}
initTimer() {
if (!this.timeInSeconds) {
this.timeInSeconds = 120;
}
this.time = this.timeInSeconds;
this.runTimer = false;
this.hasStarted = false;
this.hasFinished = false;
this.remainingTime = this.timeInSeconds;
this.displayTime = this.common.getSecondsAsDigitalClock(this.remainingTime);
}
startTimer() {
this.runTimer = true;
this.hasStarted = true;
this.timerTick();
}
pauseTimer() {
this.runTimer = false;
}
resumeTimer() {
this.startTimer();
}
timerTick() {
setTimeout(() => {
if (!this.runTimer) {
return;
}
this.remainingTime--;
this.displayTime = this.common.getSecondsAsDigitalClock(this.remainingTime);
if (this.remainingTime > 0) {
this.timerTick();
} else {
this.hasFinished = true;
this.pauseTimer();
this.navCtrl.pop();
}
}, 1000);
}
ionViewWillLeave() {
this.pauseTimer();
}
checkOTPLength() {
// tslint:disable-next-line: triple-equals
if (this.activationCode.length == 4) {
this.checkVerificationCode();
}
}
checkVerificationCode() {
this.code = this.smc_code.join('');
if (this.count < 3) {
// tslint:disable-next-line: triple-equals
if (this.code == undefined || this.code == null || this.code == '') {
// this.common.showAlert(this.translate.translate('verificationcode.emptyCode'));
// this.common.showAlert(this.translate.translate('verificationcode.emptyCode'));
} else {
this.count = this.count + 1;
if (this.isForgetPwd || this.isExpiredPwd) {
this.checkForgetPwdSMS();
} else {
this.checkSMS();
}
}
} else {
const msg: string = this.translate.trPK('general', 'noOfTriesLogin');
this.common.JustAlertDialog(this.translate.trPK('general', 'ok'), msg);
}
}
async checkNFCStatus() {
try {
let nfcStatus = await this.nfc.enabled();
console.log("nfc status >>>>>>>>>>" + nfcStatus);
this.isNFCAvailable = true;
} catch (err) {
console.log("Error reading tag", err);
if (err === "NO_NFC") {
this.isNFCAvailable = false;
} else if (err === "NFC_DISABLED") {
this.isNFCAvailable = true;
} else {
this.isNFCAvailable = false;
}
}
}
public checkSMS() {
this.showErrorMessage = false;
const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false);
const request = new SMSCheckRequest();
request.LogInTokenID = data.LogInTokenID;
request.activationCode = this.code; // code;this.activationCode;
request.P_USER_NAME = data.P_USER_NAME;
request.MobileNumber = data.MobileNumber;
request.IsDeviceNFC = this.isNFCAvailable;
this.authService.checkSMS(request, () => { }, this.translate.trPK('general', 'ok'), true).subscribe((result: SMSCheckResponse) => {
if (this.common.validResponse(result)) {
//save business card info
this.businessInfo = {
show_business: result.BusinessCardPrivilege,
name_en: result.MemberInformationList[0].EMPLOYEE_NAME_En,
job_en: result.MemberInformationList[0].JOB_NAME_En,
name_ar: result.MemberInformationList[0].EMPLOYEE_NAME_Ar,
job_ar: result.MemberInformationList[0].JOB_NAME_Ar,
mobile: result.MemberInformationList[0].MobileNumberWithZipCode,
qr: result.MemberInformationList[0].BusinessCardQR,
company_logo: result.BC_Logo ? result.BC_Logo : result.CompanyImageURL,
company_url: result.BC_Domain,
company_type: result.CompanyMainCompany,
email: result.MemberInformationList[0].EMPLOYEE_EMAIL_ADDRESS
}
// Wifi Credientials
CommonService.MOHEMM_WIFI_SSID = result.Mohemm_Wifi_SSID;
CommonService.MOHEMM_WIFI_PASSWORD = result.Mohemm_Wifi_Password;
localStorage.setItem('bussiness-card-info', JSON.stringify(this.businessInfo));
// this.common.sharedService.setSharedData(this.businessInfo,'bussiness-card-info');
AuthenticationService.servicePrivilage = result.Privilege_List;
this.authService.setAuthenticatedUser(result).subscribe(() => {
localStorage.setItem('emp-name', result.MemberInformationList[0].EMPLOYEE_NAME);
this.user_name = result.MemberInformationList[0].EMPLOYEE_NAME;
const currDateTime = moment().format('MMM DD , YYYY HH:mm');
localStorage.setItem('login-at', currDateTime);
if (this.platform.is('cordova')) {
this.insertMobileLogin();
}
this.common.sharedService.setSharedData(result.MemberInformationList[0].PAYROLL_CODE, "projcet-code");
this.activeType = this.common.setActiveTypeLogin(0);
this.common.openHome();
});
} else {
let errorResult: any;
errorResult = result;
this.showErrorMessage = true;
this.messageValue = errorResult.ErrorEndUserMessage;
this.smc_code = [];
(document.activeElement as HTMLElement).blur();
setTimeout(() => {
this.showErrorMessage = false;
}, 5000);
}
});
}
public insertMobileLogin() {
const request = new GetLoginInfoRequest();
this.authService.setPublicFields(request);
request.MobileNumber = this.loginData.MobileNumber;
request.P_USER_NAME = this.loginData.P_USER_NAME;
request.UserName = this.loginData.P_USER_NAME;
request.LogInTokenID = this.loginData.LogInTokenID;
request.CompanyID = 1; // CompanyID
request.DeviceType = this.common.getDeviceType();
request.DeviceToken = this.deviceToken; // "5ca8a69cf1804db55264c349edffb99b9d63acd9fa9b6b18956bcb2ad3f2ba36";//this.deviceToken;
request.LoginType = this.loginTypeData.loginType;
request.EmployeeName = this.user_name;
this.authService.insertMobileLoginInfo(request, () => { }, this.translate.trPK('general', 'ok'), this.isPostNoLoad)
.subscribe((result: any) => {
console.log('successful insertMobileLogin');
});
}
public checkForgetPwdSMS() {
const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false);
const request = new SMSCheckRequest();
request.LogInTokenID = data.LogInTokenID;
request.activationCode = this.code; // this.activationCode;
request.P_USER_NAME = data.P_USER_NAME;
this.authService.checkForgetSMS(request, () => { }, this.translate.trPK('general', 'ok')).subscribe((result: SMSCheckResponse) => {
if (this.common.validResponse(result)) {
this.sharedData.setSharedData(result, 'checkSMSResponse');
if (this.isForgetPwd) {
this.common.openForgotPassword();
}
if (this.isExpiredPwd) {
this.sharedData.setSharedData(true, Password.IS_EXPIRED_PSW);
this.common.openChangePassword();
}
}
});
}
onChange() {
// tslint:disable-next-line: only-arrow-functions
const filtered = this.smc_code.filter(function (el) {
if (el) {
return el;
}
});
if (filtered.length === 4 && !this.isAutoRead) {
this.checkVerificationCode();
}
}
goToNextInput(e) {
const key = e.which;
const t = e.target;
const sib = t.nextElementSibling;
const sibPre = t.previousElementSibling;
if (key === undefined) {
this.checkActivation(e.target.value, false);
}
if (key !== 9 && (key < 48 || key > 57)) {
if (key === 8 || key === 46) {
return true;
} else {
e.preventDefault();
return false;
}
}
if (key === 9) {
return true;
}
if (sib) {
if (e.target.value === '') {
sibPre.setFocus();
} else {
sib.setFocus();
}
}
}
}

@ -73,6 +73,7 @@ select{
border: none !important;
position: relative;
bottom: 5px;
background: transparent;
}
.delete-icon{
position: absolute;

Loading…
Cancel
Save