adding files of assets
This commit is contained in:
Arjun Patel
@@ -0,0 +1,363 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCreateAccount = function () {
|
||||
// Elements
|
||||
var modal;
|
||||
var modalEl;
|
||||
|
||||
var stepper;
|
||||
var form;
|
||||
var formSubmitButton;
|
||||
var formContinueButton;
|
||||
|
||||
// Variables
|
||||
var stepperObj;
|
||||
var validations = [];
|
||||
|
||||
// Private Functions
|
||||
var initStepper = function () {
|
||||
// Initialize Stepper
|
||||
stepperObj = new KTStepper(stepper);
|
||||
|
||||
// Stepper change event
|
||||
stepperObj.on('kt.stepper.changed', function (stepper) {
|
||||
if (stepperObj.getCurrentStepIndex() === 4) {
|
||||
formSubmitButton.classList.remove('d-none');
|
||||
formSubmitButton.classList.add('d-inline-block');
|
||||
formContinueButton.classList.add('d-none');
|
||||
} else if (stepperObj.getCurrentStepIndex() === 5) {
|
||||
formSubmitButton.classList.add('d-none');
|
||||
formContinueButton.classList.add('d-none');
|
||||
} else {
|
||||
formSubmitButton.classList.remove('d-inline-block');
|
||||
formSubmitButton.classList.remove('d-none');
|
||||
formContinueButton.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Validation before going to next page
|
||||
stepperObj.on('kt.stepper.next', function (stepper) {
|
||||
console.log('stepper.next');
|
||||
|
||||
// Validate form before change stepper step
|
||||
var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
|
||||
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
stepper.goNext();
|
||||
|
||||
KTUtil.scrollTop();
|
||||
} else {
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light"
|
||||
}
|
||||
}).then(function () {
|
||||
KTUtil.scrollTop();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
stepper.goNext();
|
||||
|
||||
KTUtil.scrollTop();
|
||||
}
|
||||
});
|
||||
|
||||
// Prev event
|
||||
stepperObj.on('kt.stepper.previous', function (stepper) {
|
||||
console.log('stepper.previous');
|
||||
|
||||
stepper.goPrevious();
|
||||
KTUtil.scrollTop();
|
||||
});
|
||||
}
|
||||
|
||||
var handleForm = function() {
|
||||
formSubmitButton.addEventListener('click', function (e) {
|
||||
// Validate form before change stepper step
|
||||
var validator = validations[3]; // get validator for last form
|
||||
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Prevent default button action
|
||||
e.preventDefault();
|
||||
|
||||
// Disable button to avoid multiple click
|
||||
formSubmitButton.disabled = true;
|
||||
|
||||
// Show loading indication
|
||||
formSubmitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(function() {
|
||||
// Hide loading indication
|
||||
formSubmitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Enable button
|
||||
formSubmitButton.disabled = false;
|
||||
|
||||
stepperObj.goNext();
|
||||
//KTUtil.scrollTop();
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light"
|
||||
}
|
||||
}).then(function () {
|
||||
KTUtil.scrollTop();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validations[3].revalidateField('card_expiry_month');
|
||||
});
|
||||
|
||||
// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validations[3].revalidateField('card_expiry_year');
|
||||
});
|
||||
|
||||
// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="business_type"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validations[2].revalidateField('business_type');
|
||||
});
|
||||
}
|
||||
|
||||
var initValidation = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
// Step 1
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
account_type: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Account type is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
// Step 2
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'account_team_size': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Time size is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'account_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Account name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'account_plan': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Account plan is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
// Bootstrap Framework Integration
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
// Step 3
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'business_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Busines name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'business_descriptor': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Busines descriptor is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'business_type': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Busines type is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'business_description': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Busines description is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'business_email': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Busines email is required'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
// Bootstrap Framework Integration
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
// Step 4
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'card_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Name on card is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_number': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Card member is required'
|
||||
},
|
||||
creditCard: {
|
||||
message: 'Card number is not valid'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_expiry_month': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Month is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_expiry_year': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Year is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_cvv': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'CVV is required'
|
||||
},
|
||||
digits: {
|
||||
message: 'CVV must contain only digits'
|
||||
},
|
||||
stringLength: {
|
||||
min: 3,
|
||||
max: 4,
|
||||
message: 'CVV must contain 3 to 4 digits only'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
// Bootstrap Framework Integration
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
var handleFormSubmit = function() {
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
// Elements
|
||||
modalEl = document.querySelector('#kt_modal_create_account');
|
||||
if (modalEl) {
|
||||
modal = new bootstrap.Modal(modalEl);
|
||||
}
|
||||
|
||||
stepper = document.querySelector('#kt_create_account_stepper');
|
||||
form = stepper.querySelector('#kt_create_account_form');
|
||||
formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
|
||||
formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
|
||||
|
||||
initStepper();
|
||||
initValidation();
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTCreateAccount.init();
|
||||
});
|
||||
@@ -0,0 +1,327 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCreateApp = function () {
|
||||
// Elements
|
||||
var modal;
|
||||
var modalEl;
|
||||
|
||||
var stepper;
|
||||
var form;
|
||||
var formSubmitButton;
|
||||
var formContinueButton;
|
||||
|
||||
// Variables
|
||||
var stepperObj;
|
||||
var validations = [];
|
||||
|
||||
// Private Functions
|
||||
var initStepper = function () {
|
||||
// Initialize Stepper
|
||||
stepperObj = new KTStepper(stepper);
|
||||
|
||||
// Stepper change event
|
||||
stepperObj.on('kt.stepper.changed', function (stepper) {
|
||||
if (stepperObj.getCurrentStepIndex() === 4) {
|
||||
formSubmitButton.classList.remove('d-none');
|
||||
formSubmitButton.classList.add('d-inline-block');
|
||||
formContinueButton.classList.add('d-none');
|
||||
} else if (stepperObj.getCurrentStepIndex() === 5) {
|
||||
formSubmitButton.classList.add('d-none');
|
||||
formContinueButton.classList.add('d-none');
|
||||
} else {
|
||||
formSubmitButton.classList.remove('d-inline-block');
|
||||
formSubmitButton.classList.remove('d-none');
|
||||
formContinueButton.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Validation before going to next page
|
||||
stepperObj.on('kt.stepper.next', function (stepper) {
|
||||
console.log('stepper.next');
|
||||
|
||||
// Validate form before change stepper step
|
||||
var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
|
||||
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
stepper.goNext();
|
||||
|
||||
//KTUtil.scrollTop();
|
||||
} else {
|
||||
// Show error message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light"
|
||||
}
|
||||
}).then(function () {
|
||||
//KTUtil.scrollTop();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
stepper.goNext();
|
||||
|
||||
KTUtil.scrollTop();
|
||||
}
|
||||
});
|
||||
|
||||
// Prev event
|
||||
stepperObj.on('kt.stepper.previous', function (stepper) {
|
||||
console.log('stepper.previous');
|
||||
|
||||
stepper.goPrevious();
|
||||
KTUtil.scrollTop();
|
||||
});
|
||||
|
||||
formSubmitButton.addEventListener('click', function (e) {
|
||||
// Validate form before change stepper step
|
||||
var validator = validations[3]; // get validator for last form
|
||||
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Prevent default button action
|
||||
e.preventDefault();
|
||||
|
||||
// Disable button to avoid multiple click
|
||||
formSubmitButton.disabled = true;
|
||||
|
||||
// Show loading indication
|
||||
formSubmitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(function() {
|
||||
// Hide loading indication
|
||||
formSubmitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Enable button
|
||||
formSubmitButton.disabled = false;
|
||||
|
||||
stepperObj.goNext();
|
||||
//KTUtil.scrollTop();
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light"
|
||||
}
|
||||
}).then(function () {
|
||||
KTUtil.scrollTop();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Init form inputs
|
||||
var initForm = function() {
|
||||
// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validations[3].revalidateField('card_expiry_month');
|
||||
});
|
||||
|
||||
// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validations[3].revalidateField('card_expiry_year');
|
||||
});
|
||||
}
|
||||
|
||||
var initValidation = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
// Step 1
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'App name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
category: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Category is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
// Step 2
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
framework: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Framework is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
// Bootstrap Framework Integration
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
// Step 3
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
dbname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Database name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
dbengine: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Database engine is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
// Bootstrap Framework Integration
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
// Step 4
|
||||
validations.push(FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'card_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Name on card is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_number': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Card member is required'
|
||||
},
|
||||
creditCard: {
|
||||
message: 'Card number is not valid'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_expiry_month': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Month is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_expiry_year': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Year is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_cvv': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'CVV is required'
|
||||
},
|
||||
digits: {
|
||||
message: 'CVV must contain only digits'
|
||||
},
|
||||
stringLength: {
|
||||
min: 3,
|
||||
max: 4,
|
||||
message: 'CVV must contain 3 to 4 digits only'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
// Bootstrap Framework Integration
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
// Elements
|
||||
modalEl = document.querySelector('#kt_modal_create_app');
|
||||
|
||||
if (!modalEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
modal = new bootstrap.Modal(modalEl);
|
||||
|
||||
stepper = document.querySelector('#kt_modal_create_app_stepper');
|
||||
form = document.querySelector('#kt_modal_create_app_form');
|
||||
formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
|
||||
formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
|
||||
|
||||
initStepper();
|
||||
initForm();
|
||||
initValidation();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTCreateApp.init();
|
||||
});
|
||||
@@ -0,0 +1,213 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalNewCard = function () {
|
||||
var submitButton;
|
||||
var cancelButton;
|
||||
var validator;
|
||||
var form;
|
||||
var modal;
|
||||
var modalEl;
|
||||
|
||||
// Init form inputs
|
||||
var initForm = function() {
|
||||
// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validator.revalidateField('card_expiry_month');
|
||||
});
|
||||
|
||||
// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validator.revalidateField('card_expiry_year');
|
||||
});
|
||||
}
|
||||
|
||||
// Handle form validation and submittion
|
||||
var handleForm = function() {
|
||||
// Stepper custom navigation
|
||||
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'card_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Name on card is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_number': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Card member is required'
|
||||
},
|
||||
creditCard: {
|
||||
message: 'Card number is not valid'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_expiry_month': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Month is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_expiry_year': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Year is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'card_cvv': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'CVV is required'
|
||||
},
|
||||
digits: {
|
||||
message: 'CVV must contain only digits'
|
||||
},
|
||||
stringLength: {
|
||||
min: 3,
|
||||
max: 4,
|
||||
message: 'CVV must contain 3 to 4 digits only'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Action buttons
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
// Prevent default button action
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Show loading indication
|
||||
submitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable button to avoid multiple click
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||
setTimeout(function() {
|
||||
// Remove loading indication
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Enable button
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Show popup confirmation
|
||||
Swal.fire({
|
||||
text: "Form has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modal.hide();
|
||||
}
|
||||
});
|
||||
|
||||
//form.submit(); // Submit form
|
||||
}, 2000);
|
||||
} else {
|
||||
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
// Show error message.
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public functions
|
||||
init: function () {
|
||||
// Elements
|
||||
modalEl = document.querySelector('#kt_modal_new_card');
|
||||
|
||||
if (!modalEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
modal = new bootstrap.Modal(modalEl);
|
||||
|
||||
form = document.querySelector('#kt_modal_new_card_form');
|
||||
submitButton = document.getElementById('kt_modal_new_card_submit');
|
||||
cancelButton = document.getElementById('kt_modal_new_card_cancel');
|
||||
|
||||
initForm();
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTModalNewCard.init();
|
||||
});
|
||||
@@ -0,0 +1,266 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalTwoFactorAuthentication = function () {
|
||||
// Private variables
|
||||
var modal;
|
||||
var modalObject;
|
||||
|
||||
var optionsWrapper;
|
||||
var optionsSelectButton;
|
||||
|
||||
var smsWrapper;
|
||||
var smsForm;
|
||||
var smsSubmitButton;
|
||||
var smsCancelButton;
|
||||
var smsValidator;
|
||||
|
||||
var appsWrapper;
|
||||
var appsForm;
|
||||
var appsSubmitButton;
|
||||
var appsCancelButton;
|
||||
var appsValidator;
|
||||
|
||||
// Private functions
|
||||
var handleOptionsForm = function() {
|
||||
// Handle options selection
|
||||
optionsSelectButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
|
||||
|
||||
optionsWrapper.classList.add('d-none');
|
||||
|
||||
if (option.value == 'sms') {
|
||||
smsWrapper.classList.remove('d-none');
|
||||
} else {
|
||||
appsWrapper.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var showOptionsForm = function() {
|
||||
optionsWrapper.classList.remove('d-none');
|
||||
smsWrapper.classList.add('d-none');
|
||||
appsWrapper.classList.add('d-none');
|
||||
}
|
||||
|
||||
var handleSMSForm = function() {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
smsValidator = FormValidation.formValidation(
|
||||
smsForm,
|
||||
{
|
||||
fields: {
|
||||
'mobile': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Mobile no is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Handle apps submition
|
||||
smsSubmitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (smsValidator) {
|
||||
smsValidator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Show loading indication
|
||||
smsSubmitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable button to avoid multiple click
|
||||
smsSubmitButton.disabled = true;
|
||||
|
||||
// Simulate ajax process
|
||||
setTimeout(function() {
|
||||
// Remove loading indication
|
||||
smsSubmitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Enable button
|
||||
smsSubmitButton.disabled = false;
|
||||
|
||||
// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Mobile number has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modalObject.hide();
|
||||
showOptionsForm();
|
||||
}
|
||||
});
|
||||
|
||||
//smsForm.submit(); // Submit form
|
||||
}, 2000);
|
||||
} else {
|
||||
// Show error message.
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Handle sms cancelation
|
||||
smsCancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
|
||||
|
||||
optionsWrapper.classList.remove('d-none');
|
||||
smsWrapper.classList.add('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
var handleAppsForm = function() {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
appsValidator = FormValidation.formValidation(
|
||||
appsForm,
|
||||
{
|
||||
fields: {
|
||||
'code': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Code is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Handle apps submition
|
||||
appsSubmitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (appsValidator) {
|
||||
appsValidator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
appsSubmitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable button to avoid multiple click
|
||||
appsSubmitButton.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
appsSubmitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Enable button
|
||||
appsSubmitButton.disabled = false;
|
||||
|
||||
// Show success message.
|
||||
Swal.fire({
|
||||
text: "Code has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modalObject.hide();
|
||||
showOptionsForm();
|
||||
}
|
||||
});
|
||||
|
||||
//appsForm.submit(); // Submit form
|
||||
}, 2000);
|
||||
} else {
|
||||
// Show error message.
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Handle apps cancelation
|
||||
appsCancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
|
||||
|
||||
optionsWrapper.classList.remove('d-none');
|
||||
appsWrapper.classList.add('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
// Elements
|
||||
modal = document.querySelector('#kt_modal_two_factor_authentication');
|
||||
|
||||
if (!modal) {
|
||||
return;
|
||||
}
|
||||
|
||||
modalObject = new bootstrap.Modal(modal);
|
||||
|
||||
optionsWrapper = modal.querySelector('[data-kt-element="options"]');
|
||||
optionsSelectButton = modal.querySelector('[data-kt-element="options-select"]');
|
||||
|
||||
smsWrapper = modal.querySelector('[data-kt-element="sms"]');
|
||||
smsForm = modal.querySelector('[data-kt-element="sms-form"]');
|
||||
smsSubmitButton = modal.querySelector('[data-kt-element="sms-submit"]');
|
||||
smsCancelButton = modal.querySelector('[data-kt-element="sms-cancel"]');
|
||||
|
||||
appsWrapper = modal.querySelector('[data-kt-element="apps"]');
|
||||
appsForm = modal.querySelector('[data-kt-element="apps-form"]');
|
||||
appsSubmitButton = modal.querySelector('[data-kt-element="apps-submit"]');
|
||||
appsCancelButton = modal.querySelector('[data-kt-element="apps-cancel"]');
|
||||
|
||||
// Handle forms
|
||||
handleOptionsForm();
|
||||
handleSMSForm();
|
||||
handleAppsForm();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTModalTwoFactorAuthentication.init();
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalUpgradePlan = function () {
|
||||
// Private variables
|
||||
var modal;
|
||||
var planPeriodMonthButton;
|
||||
var planPeriodAnnualButton;
|
||||
|
||||
var changePlanPrices = function(type) {
|
||||
var items = [].slice.call(modal.querySelectorAll('[data-kt-plan-price-month]'));
|
||||
|
||||
items.map(function (item) {
|
||||
var monthPrice = item.getAttribute('data-kt-plan-price-month');
|
||||
var annualPrice = item.getAttribute('data-kt-plan-price-annual');
|
||||
|
||||
if ( type === 'month' ) {
|
||||
item.innerHTML = monthPrice;
|
||||
} else if ( type === 'annual' ) {
|
||||
item.innerHTML = annualPrice;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var handlePlanPeriodSelection = function() {
|
||||
// Handle period change
|
||||
planPeriodMonthButton.addEventListener('click', function (e) {
|
||||
changePlanPrices('month');
|
||||
});
|
||||
|
||||
planPeriodAnnualButton.addEventListener('click', function (e) {
|
||||
changePlanPrices('annual');
|
||||
});
|
||||
}
|
||||
|
||||
var handleTabs = function() {
|
||||
KTUtil.on(modal, '[data-bs-toggle="tab"]', 'click', function(e) {
|
||||
this.querySelector('[type="radio"]').checked = true;
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
// Elements
|
||||
modal = document.querySelector('#kt_modal_upgrade_plan');
|
||||
|
||||
if (!modal) {
|
||||
return;
|
||||
}
|
||||
|
||||
planPeriodMonthButton = modal.querySelector('[data-kt-plan="month"]');
|
||||
planPeriodAnnualButton = modal.querySelector('[data-kt-plan="annual"]');
|
||||
|
||||
// Handlers
|
||||
handlePlanPeriodSelection();
|
||||
handleTabs();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTModalUpgradePlan.init();
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalUserSearch = function() {
|
||||
// Private variables
|
||||
var element;
|
||||
var suggestionsElement;
|
||||
var resultsElement;
|
||||
var wrapperElement;
|
||||
var emptyElement;
|
||||
var searchObject;
|
||||
|
||||
// Private functions
|
||||
var processs = function(search) {
|
||||
var timeout = setTimeout(function() {
|
||||
var number = KTUtil.getRandomInt(1, 3);
|
||||
|
||||
// Hide recently viewed
|
||||
suggestionsElement.classList.add('d-none');
|
||||
|
||||
if (number === 3) {
|
||||
// Hide results
|
||||
resultsElement.classList.add('d-none');
|
||||
// Show empty message
|
||||
emptyElement.classList.remove('d-none');
|
||||
} else {
|
||||
// Show results
|
||||
resultsElement.classList.remove('d-none');
|
||||
// Hide empty message
|
||||
emptyElement.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Complete search
|
||||
search.complete();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
var clear = function(search) {
|
||||
// Show recently viewed
|
||||
suggestionsElement.classList.remove('d-none');
|
||||
// Hide results
|
||||
resultsElement.classList.add('d-none');
|
||||
// Hide empty message
|
||||
emptyElement.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function() {
|
||||
// Elements
|
||||
element = document.querySelector('#kt_modal_users_search_handler');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
|
||||
suggestionsElement = element.querySelector('[data-kt-search-element="suggestions"]');
|
||||
resultsElement = element.querySelector('[data-kt-search-element="results"]');
|
||||
emptyElement = element.querySelector('[data-kt-search-element="empty"]');
|
||||
|
||||
// Initialize search handler
|
||||
searchObject = new KTSearch(element);
|
||||
|
||||
// Search handler
|
||||
searchObject.on('kt.search.process', processs);
|
||||
|
||||
// Clear handler
|
||||
searchObject.on('kt.search.clear', clear);
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTModalUserSearch.init();
|
||||
});
|
||||
Reference in New Issue
Block a user