140 lines
4.4 KiB
JavaScript
140 lines
4.4 KiB
JavaScript
"use strict";
|
|
|
|
// Class Definition
|
|
var KTSigninTwoSteps = function() {
|
|
// Elements
|
|
var form;
|
|
var submitButton;
|
|
|
|
// Handle form
|
|
var handleForm = function(e) {
|
|
// Handle form submit
|
|
submitButton.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
var validated = true;
|
|
|
|
var inputs = [].slice.call(form.querySelectorAll('input[maxlength="1"]'));
|
|
inputs.map(function (input) {
|
|
if (input.value === '' || input.value.length === 0) {
|
|
validated = false;
|
|
}
|
|
});
|
|
|
|
if (validated === true) {
|
|
// Show loading indication
|
|
submitButton.setAttribute('data-kt-indicator', 'on');
|
|
|
|
// Disable button to avoid multiple click
|
|
submitButton.disabled = true;
|
|
|
|
// Simulate ajax request
|
|
setTimeout(function() {
|
|
// Hide loading indication
|
|
submitButton.removeAttribute('data-kt-indicator');
|
|
|
|
// Enable button
|
|
submitButton.disabled = false;
|
|
|
|
// Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
|
Swal.fire({
|
|
text: "You have been successfully verified!",
|
|
icon: "success",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary"
|
|
}
|
|
}).then(function (result) {
|
|
if (result.isConfirmed) {
|
|
inputs.map(function (input) {
|
|
input.value = '';
|
|
});
|
|
|
|
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
|
if (redirectUrl) {
|
|
location.href = redirectUrl;
|
|
}
|
|
}
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
swal.fire({
|
|
text: "Please enter valid securtiy code and try again.",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn fw-bold btn-light-primary"
|
|
}
|
|
}).then(function() {
|
|
KTUtil.scrollTop();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
var handleType = function() {
|
|
var input1 = form.querySelector("[name=code_1]");
|
|
var input2 = form.querySelector("[name=code_2]");
|
|
var input3 = form.querySelector("[name=code_3]");
|
|
var input4 = form.querySelector("[name=code_4]");
|
|
var input5 = form.querySelector("[name=code_5]");
|
|
var input6 = form.querySelector("[name=code_6]");
|
|
|
|
input1.focus();
|
|
|
|
input1.addEventListener("keyup", function() {
|
|
if (this.value.length === 1) {
|
|
input2.focus();
|
|
}
|
|
});
|
|
|
|
input2.addEventListener("keyup", function() {
|
|
if (this.value.length === 1) {
|
|
input3.focus();
|
|
}
|
|
});
|
|
|
|
input3.addEventListener("keyup", function() {
|
|
if (this.value.length === 1) {
|
|
input4.focus();
|
|
}
|
|
});
|
|
|
|
input4.addEventListener("keyup", function() {
|
|
if (this.value.length === 1) {
|
|
input5.focus();
|
|
}
|
|
});
|
|
|
|
input5.addEventListener("keyup", function() {
|
|
if (this.value.length === 1) {
|
|
input6.focus();
|
|
}
|
|
});
|
|
|
|
input6.addEventListener("keyup", function() {
|
|
if (this.value.length === 1) {
|
|
input6.blur();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Public functions
|
|
return {
|
|
// Initialization
|
|
init: function() {
|
|
form = document.querySelector('#kt_sing_in_two_steps_form');
|
|
submitButton = document.querySelector('#kt_sing_in_two_steps_submit');
|
|
|
|
handleForm();
|
|
handleType();
|
|
}
|
|
};
|
|
}();
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function() {
|
|
KTSigninTwoSteps.init();
|
|
}); |