303 lines
8.2 KiB
JavaScript
303 lines
8.2 KiB
JavaScript
|
!function($) {
|
||
|
|
||
|
"use strict";
|
||
|
|
||
|
var t = 0;
|
||
|
var interval = 15
|
||
|
var intervalTimer = interval + ":00"
|
||
|
|
||
|
var Otp = function(element, options) {
|
||
|
this.$callback = options ? options.callback : null;
|
||
|
this.$verify = $(element); // this.$otpEmail.siblings().find('[data-trigger="verify"]')
|
||
|
this.$verify.on('click.otp', $.proxy(this.verify, this))
|
||
|
this.$otpType = this.$verify.siblings('[data-provides="otpType"]')
|
||
|
this.$otpTimer = this.$verify.parent().parent().siblings(
|
||
|
'[data-provides="otpTimer"]')
|
||
|
this.$otpTimer.attr('value', intervalTimer)
|
||
|
this.$otpVal = this.$verify.parent().parent().siblings(
|
||
|
'[data-provides="otpVal"]')
|
||
|
|
||
|
this.$otpEmail = this.$verify.parent().siblings(
|
||
|
'[data-provides="otpEmail"]')
|
||
|
this.$otpMobile = this.$verify.parent().siblings(
|
||
|
'[data-provides="otpMobile"]')
|
||
|
|
||
|
this.$errMsg = this.$verify.parent().parent().siblings("p.errors")
|
||
|
this.$reset = this.$otpEmail.siblings().find('[data-trigger="reset"]')
|
||
|
this.$reset.on('click.otp', $.proxy(this.reset, this))
|
||
|
this.$validate = this.$otpEmail.siblings().find(
|
||
|
'[data-trigger="validate"]')
|
||
|
}
|
||
|
|
||
|
Otp.prototype = {
|
||
|
validateEmail: function(email) {
|
||
|
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
|
||
|
return emailReg.test(email);
|
||
|
},
|
||
|
reset: function() {
|
||
|
this.$reset.hide();
|
||
|
this.$verify.show();
|
||
|
this.$validate.hide();
|
||
|
this.$otpEmail.prop("readonly", "");
|
||
|
this.$otpEmail.val('');
|
||
|
this.$otpVal.val('0');
|
||
|
this.$btnValidate.hide(); // OTP validate button hide
|
||
|
this.$otpCode.prop("disabled", true);
|
||
|
this.$btnGen.show();
|
||
|
},
|
||
|
verify: function() {
|
||
|
this.$form = this.$verify.closest("form");
|
||
|
if(this.$form.length > 0) {
|
||
|
if(!this.$form.valid()) {
|
||
|
return;
|
||
|
}
|
||
|
}
|
||
|
if (this.$otpEmail.val() == '') {
|
||
|
this.$errMsg.html(prop.errEmailReq);
|
||
|
} else {
|
||
|
this.$errMsg.html('')
|
||
|
var isEmailValid = this.validateEmail(this.$otpEmail.val());
|
||
|
if (isEmailValid) {
|
||
|
this.$errMsg.html('')
|
||
|
if (this.$otpTimer.val() == "0:00" || this.$otpTimer.val() == '') {
|
||
|
this.$otpTimer.val(intervalTimer)
|
||
|
}
|
||
|
this.modal(this.$otpEmail.val(), this.$otpMobile.val())
|
||
|
if (this.$otpVal.val() == '1') {
|
||
|
this.hideBtnGen()
|
||
|
this.$otpCode.prop('disabled')
|
||
|
} else {
|
||
|
this.showBtnGen()
|
||
|
this.$otpCode.prop('disabled', true)
|
||
|
}
|
||
|
} else {
|
||
|
this.$errMsg.html(prop.errEmailFmt);
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
modal: function(email, mobile) {
|
||
|
var method = "GET";
|
||
|
var inputUrl = contextPath + '/otp';
|
||
|
var dataArr = {};
|
||
|
dataArr.otpId = this.$verify.attr("data-id")
|
||
|
dataArr.email = this.$otpEmail.val();
|
||
|
if (this.$otpMobile) {
|
||
|
dataArr.mobile = this.$otpMobile.val();
|
||
|
}
|
||
|
var data = this.send(method, inputUrl, dataArr);
|
||
|
var content = data;
|
||
|
this.$modal = bootbox.dialog({
|
||
|
closeButton: true,
|
||
|
message: content,
|
||
|
title: prop.otpTitle,
|
||
|
className: "otp-popup"
|
||
|
});
|
||
|
|
||
|
this.$stepperRequest = $(document.querySelector("span#stepperRequest"))
|
||
|
this.$stepperVerify = $(document.querySelector("span#stepperVerify"))
|
||
|
this.$requestPasscode = $(document.querySelector("div#requestPasscode"))
|
||
|
this.$verifyPasscode = $(document.querySelector("div#verifyPasscode"))
|
||
|
this.$otpCode = $(document.querySelector("input#otpCode"))
|
||
|
this.$btnGen = $(document.querySelector("#generateOtp"))
|
||
|
this.$btnGen.on('click.otp', $.proxy(this._generate, this))
|
||
|
this.$btnValidate = $(document.querySelector("#validateOtp"))
|
||
|
this.$btnValidate.on('click.otp', $.proxy(this._validate, this))
|
||
|
this.$errMsgModal = $(document.querySelector("#otpErrorMsg"))
|
||
|
this.$otpTimerDisplay = $(document
|
||
|
.querySelector("#otpTimerDisplay"))
|
||
|
},
|
||
|
_generate: function() {
|
||
|
var method = "GET";
|
||
|
var inputUrl = contextPath + '/otp/generate';
|
||
|
var dataArr = {};
|
||
|
dataArr.otpId = this.$verify.attr("data-id")
|
||
|
dataArr.emailAddress = this.$otpEmail.val();
|
||
|
if (this.$otpMobile) {
|
||
|
dataArr.mobile = this.$otpMobile.val();
|
||
|
}
|
||
|
|
||
|
this.$otpCode.val(''); // Reset to empty
|
||
|
this.$btnGen.prop("disabled", true); // Disable button
|
||
|
|
||
|
if (this.$otpTimer.val() == "0:00" || this.$otpTimer.val() == '') {
|
||
|
this.$otpTimer.val(intervalTimer)
|
||
|
}
|
||
|
|
||
|
var data = this.send(method, inputUrl, dataArr)
|
||
|
if (data) {
|
||
|
var msgs = data.split('*^*');
|
||
|
if (msgs.length > 1) {
|
||
|
if (msgs[1] == 1) {
|
||
|
this.otpAlert(msgs[0])
|
||
|
this.hideBtnGen()
|
||
|
this.$otpTimer.val(intervalTimer);
|
||
|
this.$otpCode.prop("disabled", false);
|
||
|
} else {
|
||
|
this.otpAlert(msgs[0], true)
|
||
|
this.showBtnGen()
|
||
|
this.$otpCode.prop("disabled", true);
|
||
|
}
|
||
|
this.$btnGen.prop("disabled", false);
|
||
|
this.$otpVal.val(msgs[1]);
|
||
|
}
|
||
|
|
||
|
var that = this;
|
||
|
this.startTimer(that);
|
||
|
setTimeout(function() {
|
||
|
that.otpAlert('')
|
||
|
that.showBtnGen()
|
||
|
that.$btnGen.prop("disabled", false);
|
||
|
that.$otpCode.prop("disabled", false);
|
||
|
}, interval * 60 * 1000);
|
||
|
} else {
|
||
|
this.otpAlert(data, true)
|
||
|
this.$btnValidate.hide();
|
||
|
this.$btnGen.show();
|
||
|
this.$btnGen.prop("disabled", false);
|
||
|
this.$otpCode.prop("disabled", true);
|
||
|
}
|
||
|
|
||
|
},
|
||
|
_validate: function() {
|
||
|
var method = "POST";
|
||
|
var otpType = this.$otpType.val();
|
||
|
var otp = this.$otpCode.val();
|
||
|
var otpId = this.$verify.attr("data-id")
|
||
|
|
||
|
var inputUrl = contextPath + '/otp/validate';
|
||
|
|
||
|
this.otpAlert('') // Reset Alert Message
|
||
|
|
||
|
if (otp == '') {
|
||
|
this.otpAlert('OTP is required', true);
|
||
|
return;
|
||
|
}
|
||
|
var dataArr = {
|
||
|
otpCode: otp,
|
||
|
otpId: otpId
|
||
|
};
|
||
|
var data = this.send(method, inputUrl, dataArr)
|
||
|
if (data) {
|
||
|
this.$otpCode.val('');
|
||
|
if (data.isValid && !data.isExpired) {
|
||
|
this.stopTimer();
|
||
|
this.$otpVal.val('0');
|
||
|
this.otpAlert(data.message);
|
||
|
this.$errMsg.html('');
|
||
|
bootbox.hideAll();
|
||
|
if (this.$otpType.val() == 'email') {
|
||
|
this.$verify.hide();
|
||
|
this.$validate.show();
|
||
|
this.$otpEmail.prop("readonly", "readonly");
|
||
|
this.$otpVal.val('1');
|
||
|
this.$reset.show();
|
||
|
} else {
|
||
|
this.$errMsgModal.replaceWith(
|
||
|
'<b class="font-green">' + prop.succVerOTP + '</b>');
|
||
|
if (this.$callback) this.$callback.call();
|
||
|
}
|
||
|
|
||
|
} else {
|
||
|
if (data.isExpired) {
|
||
|
this.$otpVal.val('0');
|
||
|
this.otpAlert(data.message, true)
|
||
|
this.showBtnGen()
|
||
|
} else {
|
||
|
this.otpAlert(data.message, true)
|
||
|
this.hideBtnGen()
|
||
|
}
|
||
|
}
|
||
|
|
||
|
} else {
|
||
|
this.otpAlert(data, true);
|
||
|
this.hideBtnGen()
|
||
|
}
|
||
|
},
|
||
|
send: function(method, inputUrl, dataArr) {
|
||
|
var aaData = null;
|
||
|
$.ajax({
|
||
|
'async': false,
|
||
|
'global': false,
|
||
|
headers: {
|
||
|
'X-CSRF-Token': csrf_token
|
||
|
},
|
||
|
type: method,
|
||
|
action: 'xhttp',
|
||
|
url: inputUrl,
|
||
|
data: dataArr,
|
||
|
success: function(data) {
|
||
|
aaData = data;
|
||
|
}
|
||
|
});
|
||
|
return aaData;
|
||
|
},
|
||
|
showBtnGen: function() {
|
||
|
this.$btnGen.show();
|
||
|
this.$requestPasscode.show();
|
||
|
this.$btnValidate.hide();
|
||
|
this.$verifyPasscode.hide();
|
||
|
this.$stepperRequest.addClass("active");
|
||
|
this.$stepperVerify.removeClass("active");
|
||
|
},
|
||
|
hideBtnGen: function() {
|
||
|
this.$btnGen.hide();
|
||
|
this.$requestPasscode.hide();
|
||
|
this.$btnValidate.show();
|
||
|
this.$verifyPasscode.show();
|
||
|
this.$stepperRequest.removeClass("active");
|
||
|
this.$stepperVerify.addClass("active");
|
||
|
},
|
||
|
otpAlert: function(message, type) {
|
||
|
this.$errMsgModal.html(message);
|
||
|
if (type) {
|
||
|
this.$errMsgModal.attr('style', 'color:red')
|
||
|
} else {
|
||
|
this.$errMsgModal.attr('style', 'color:green')
|
||
|
}
|
||
|
},
|
||
|
startTimer: function(e) {
|
||
|
var presentTime = e.$otpTimer.val();
|
||
|
var timeArray = presentTime.split(/[:]+/);
|
||
|
var m = timeArray[0];
|
||
|
var s = checkSecond((timeArray[1] - 1));
|
||
|
if (s == 59) {
|
||
|
m = m - 1
|
||
|
}
|
||
|
e.$otpTimer.val(m + ":" + s);
|
||
|
e.$otpTimerDisplay.html(m + ":" + s);
|
||
|
if (m > 0 || s > 0) {
|
||
|
t = setTimeout(e.startTimer, 1000, e);
|
||
|
} else {
|
||
|
e.stopTimer(e)
|
||
|
}
|
||
|
},
|
||
|
stopTimer: function() {
|
||
|
clearTimeout(t)
|
||
|
this.$otpTimer.val(intervalTimer);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
$.fn.otp = function(options) {
|
||
|
return this.each(function() {
|
||
|
var $this = $(this), data = $this.data('otp')
|
||
|
if (!data)
|
||
|
$this.data('otp', (data = new Otp(this, options)))
|
||
|
if (typeof options == 'string')
|
||
|
data[options]()
|
||
|
})
|
||
|
}
|
||
|
$.fn.otp.Constructor = Otp
|
||
|
|
||
|
function checkSecond(sec) {
|
||
|
if (sec < 10 && sec >= 0) {
|
||
|
sec = "0" + sec
|
||
|
}
|
||
|
// add zero in front of numbers < 10
|
||
|
if (sec < 0) {
|
||
|
sec = "59"
|
||
|
}
|
||
|
return sec;
|
||
|
}
|
||
|
|
||
|
}(window.jQuery);
|