initial commit
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountAPIKeys = function () {
|
||||
// Private functions
|
||||
var initLicenceCopy = function() {
|
||||
KTUtil.each(document.querySelectorAll('#kt_api_keys_table [data-action="copy"]'), function(button) {
|
||||
var tr = button.closest('tr');
|
||||
var license = KTUtil.find(tr, '[data-bs-target="license"]');
|
||||
|
||||
var clipboard = new ClipboardJS(button, {
|
||||
target: license,
|
||||
text: function() {
|
||||
return license.innerHTML;
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
// Icons
|
||||
var svgIcon = button.querySelector('.svg-icon');
|
||||
var checkIcon = button.querySelector('.bi.bi-check');
|
||||
|
||||
// exit if check icon is already shown
|
||||
if (checkIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create check icon
|
||||
checkIcon = document.createElement('i');
|
||||
checkIcon.classList.add('bi');
|
||||
checkIcon.classList.add('bi-check');
|
||||
checkIcon.classList.add('fs-2x');
|
||||
|
||||
// Append check icon
|
||||
button.appendChild(checkIcon);
|
||||
|
||||
// Highlight target
|
||||
license.classList.add('text-success');
|
||||
|
||||
// Hide copy icon
|
||||
svgIcon.classList.add('d-none');
|
||||
|
||||
// Set 3 seconds timeout to hide the check icon and show copy icon back
|
||||
setTimeout(function() {
|
||||
// Remove check icon
|
||||
svgIcon.classList.remove('d-none');
|
||||
// Show check icon back
|
||||
button.removeChild(checkIcon);
|
||||
|
||||
// Remove highlight
|
||||
license.classList.remove('text-success');
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initLicenceCopy();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountAPIKeys.init();
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountBillingGeneral = function () {
|
||||
// Private variables
|
||||
var cancelSubscriptionButton;
|
||||
|
||||
// Private functions
|
||||
var handlePlan = function () {
|
||||
cancelSubscriptionButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
swal.fire({
|
||||
text: "Are you sure you would like to cancel your subscription ?",
|
||||
icon: "warning",
|
||||
buttonsStyling: false,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: "Yes",
|
||||
denyButtonText: 'No',
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
denyButton: "btn btn-light-danger"
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
Swal.fire({
|
||||
text: 'Your subscription has been canceled.',
|
||||
icon: 'success',
|
||||
confirmButtonText: "Ok",
|
||||
buttonsStyling: false,
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light-primary"
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var handleCardDelete = function() {
|
||||
KTUtil.on(document.body, '[data-kt-billing-action="card-delete"]', 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var el = this;
|
||||
|
||||
swal.fire({
|
||||
text: "Are you sure you would like to delete selected card ?",
|
||||
icon: "warning",
|
||||
buttonsStyling: false,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: "Yes",
|
||||
denyButtonText: 'No',
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
denyButton: "btn btn-light-danger"
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
el.setAttribute('data-kt-indicator', 'on');
|
||||
el.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
Swal.fire({
|
||||
text: 'Your selected card has been successfully deleted',
|
||||
icon: 'success',
|
||||
confirmButtonText: "Ok",
|
||||
buttonsStyling: false,
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light-primary"
|
||||
}
|
||||
}).then((result) => {
|
||||
el.closest('[data-kt-billing-element="card"]').remove();
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var handleAddressDelete = function() {
|
||||
KTUtil.on(document.body, '[data-kt-billing-action="address-delete"]', 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var el = this;
|
||||
|
||||
swal.fire({
|
||||
text: "Are you sure you would like to delete selected address ?",
|
||||
icon: "warning",
|
||||
buttonsStyling: false,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: "Yes",
|
||||
denyButtonText: 'No',
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
denyButton: "btn btn-light-danger"
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
el.setAttribute('data-kt-indicator', 'on');
|
||||
el.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
Swal.fire({
|
||||
text: 'Your selected address has been successfully deleted',
|
||||
icon: 'success',
|
||||
confirmButtonText: "Ok",
|
||||
buttonsStyling: false,
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light-primary"
|
||||
}
|
||||
}).then((result) => {
|
||||
el.closest('[data-kt-billing-element="address"]').remove();
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
cancelSubscriptionButton = document.querySelector('#kt_account_billing_cancel_subscription_btn');
|
||||
|
||||
if ( cancelSubscriptionButton ) {
|
||||
handlePlan();
|
||||
}
|
||||
|
||||
handleCardDelete();
|
||||
handleAddressDelete();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountBillingGeneral.init();
|
||||
});
|
||||
@@ -0,0 +1,108 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTDatatablesClassic = function () {
|
||||
// Private functions
|
||||
|
||||
var initClassic = function () {
|
||||
|
||||
// Set date data order
|
||||
const table = document.getElementById('kt_orders_classic');
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format('x');
|
||||
dateRow[1].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
const datatable = $(table).DataTable({
|
||||
"info": false,
|
||||
'order': []
|
||||
});
|
||||
|
||||
// Filter dropdown elements
|
||||
const filterOrders = document.getElementById('kt_filter_orders');
|
||||
const filterYear = document.getElementById('kt_filter_year');
|
||||
|
||||
// Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
|
||||
filterOrders.addEventListener('change', function (e) {
|
||||
datatable.column(3).search(e.target.value).draw();
|
||||
});
|
||||
|
||||
// Filter by date --- official docs reference: https://momentjs.com/docs/
|
||||
var minDate;
|
||||
var maxDate;
|
||||
filterYear.addEventListener('change', function (e) {
|
||||
const value = e.target.value;
|
||||
switch (value) {
|
||||
case 'thisyear': {
|
||||
minDate = moment().startOf('year').format('x');
|
||||
maxDate = moment().endOf('year').format('x');
|
||||
datatable.draw();
|
||||
break;
|
||||
}
|
||||
case 'thismonth': {
|
||||
minDate = moment().startOf('month').format('x');
|
||||
maxDate = moment().endOf('month').format('x');
|
||||
datatable.draw();
|
||||
break;
|
||||
}
|
||||
case 'lastmonth': {
|
||||
minDate = moment().subtract(1, 'months').startOf('month').format('x');
|
||||
maxDate = moment().subtract(1, 'months').endOf('month').format('x');
|
||||
datatable.draw();
|
||||
break;
|
||||
}
|
||||
case 'last90days': {
|
||||
minDate = moment().subtract(30, 'days').format('x');
|
||||
maxDate = moment().format('x');
|
||||
datatable.draw();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
minDate = moment().subtract(100, 'years').startOf('month').format('x');
|
||||
maxDate = moment().add(1, 'months').endOf('month').format('x');
|
||||
datatable.draw();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
|
||||
$.fn.dataTable.ext.search.push(
|
||||
function (settings, data, dataIndex) {
|
||||
var min = minDate;
|
||||
var max = maxDate;
|
||||
var date = parseFloat(moment(data[1]).format('x')) || 0; // use data for the age column
|
||||
|
||||
if ((isNaN(min) && isNaN(max)) ||
|
||||
(isNaN(min) && date <= max) ||
|
||||
(min <= date && isNaN(max)) ||
|
||||
(min <= date && date <= max)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
);
|
||||
|
||||
// Search --- official docs reference: https://datatables.net/reference/api/search()
|
||||
var filterSearch = document.getElementById('kt_filter_search');
|
||||
filterSearch.addEventListener('keyup', function (e) {
|
||||
datatable.search(e.target.value).draw();
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initClassic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTDatatablesClassic.init();
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountReferralsReferralProgram = function () {
|
||||
// Private functions
|
||||
|
||||
var initReferralProgrammClipboard = function() {
|
||||
var button = document.querySelector('#kt_referral_program_link_copy_btn');
|
||||
var input = document.querySelector('#kt_referral_link_input');
|
||||
var clipboard = new ClipboardJS(button);
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
var buttonCaption = button.innerHTML;
|
||||
//Add bgcolor
|
||||
input.classList.add('bg-success');
|
||||
input.classList.add('text-inverse-success');
|
||||
|
||||
button.innerHTML = 'Copied!';
|
||||
|
||||
setTimeout(function() {
|
||||
button.innerHTML = buttonCaption;
|
||||
|
||||
// Remove bgcolor
|
||||
input.classList.remove('bg-success');
|
||||
input.classList.remove('text-inverse-success');
|
||||
}, 3000); // 3seconds
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initReferralProgrammClipboard();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountReferralsReferralProgram.init();
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountSecurityLicenseUsage = function () {
|
||||
// Private functions
|
||||
var initLicenceCopy = function() {
|
||||
KTUtil.each(document.querySelectorAll('#kt_security_license_usage_table [data-action="copy"]'), function(button) {
|
||||
var tr = button.closest('tr');
|
||||
var license = KTUtil.find(tr, '[data-bs-target="license"]');
|
||||
|
||||
var clipboard = new ClipboardJS(button, {
|
||||
target: license,
|
||||
text: function() {
|
||||
return license.innerHTML;
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
// Icons
|
||||
var svgIcon = button.querySelector('.svg-icon');
|
||||
var checkIcon = button.querySelector('.bi.bi-check');
|
||||
|
||||
// exit if check icon is already shown
|
||||
if (checkIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create check icon
|
||||
checkIcon = document.createElement('i');
|
||||
checkIcon.classList.add('bi');
|
||||
checkIcon.classList.add('bi-check');
|
||||
checkIcon.classList.add('fs-2x');
|
||||
|
||||
// Append check icon
|
||||
button.appendChild(checkIcon);
|
||||
|
||||
// Highlight target
|
||||
license.classList.add('text-success');
|
||||
|
||||
// Hide copy icon
|
||||
svgIcon.classList.add('d-none');
|
||||
|
||||
// Set 3 seconds timeout to hide the check icon and show copy icon back
|
||||
setTimeout(function() {
|
||||
// Remove check icon
|
||||
svgIcon.classList.remove('d-none');
|
||||
// Show check icon back
|
||||
button.removeChild(checkIcon);
|
||||
|
||||
// Remove highlight
|
||||
license.classList.remove('text-success');
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initLicenceCopy();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountSecurityLicenseUsage.init();
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountSecuritySummary = function () {
|
||||
// Private functions
|
||||
var initChart = function(tabSelector, chartSelector, data1, data2, initByDefault) {
|
||||
var element = document.querySelector(chartSelector);
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: data1
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: data2
|
||||
}],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: ['35%'],
|
||||
borderRadius: 6
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: KTUtil.getCssVariableValue('--bs-gray-400'),
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: KTUtil.getCssVariableValue('--bs-gray-400'),
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-gray-200')],
|
||||
grid: {
|
||||
borderColor: KTUtil.getCssVariableValue('--bs-gray-200'),
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
|
||||
var init = false;
|
||||
var tab = document.querySelector(tabSelector);
|
||||
|
||||
if (initByDefault === true) {
|
||||
setTimeout(function() {
|
||||
chart.render();
|
||||
init = true;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
tab.addEventListener('shown.bs.tab', function (event) {
|
||||
if (init == false) {
|
||||
chart.render();
|
||||
init = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initChart('#kt_security_summary_tab_hours_agents', '#kt_security_summary_chart_hours_agents', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 70, 90, 115, 95, 70, 84], true);
|
||||
initChart('#kt_security_summary_tab_hours_clients', '#kt_security_summary_chart_hours_clients', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
|
||||
|
||||
initChart('#kt_security_summary_tab_day', '#kt_security_summary_chart_day_agents', [50, 70, 80, 100, 90, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 60, 65, 80, 90, 100, 95, 70, 84], false);
|
||||
initChart('#kt_security_summary_tab_day_clients', '#kt_security_summary_chart_day_clients', [50, 70, 100, 90, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 115, 80, 65, 80, 90, 115, 95, 70, 84], false);
|
||||
|
||||
initChart('#kt_security_summary_tab_week', '#kt_security_summary_chart_week_agents', [50, 70, 75, 117, 80, 65, 80, 90, 115, 95, 50, 84], [50, 60, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
|
||||
initChart('#kt_security_summary_tab_week_clients', '#kt_security_summary_chart_week_clients', [50, 70, 90, 117, 80, 65, 80, 90, 100, 80, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 100, 95, 70, 84], false);
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountSecuritySummary.init();
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountSettingsDeactivateAccount = function () {
|
||||
// Private variables
|
||||
var form;
|
||||
var validation;
|
||||
var submitButton;
|
||||
|
||||
// Private functions
|
||||
var initValidation = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validation = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
deactivate: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please check the box to deactivate your account'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var handleForm = function () {
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
validation.validate().then(function (status) {
|
||||
if (status == 'Valid') {
|
||||
|
||||
swal.fire({
|
||||
text: "Are you sure you would like to deactivate your account?",
|
||||
icon: "warning",
|
||||
buttonsStyling: false,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: "Yes",
|
||||
denyButtonText: 'No',
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light-primary",
|
||||
denyButton: "btn btn-danger"
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
Swal.fire({
|
||||
text: 'Your account has been deactivated.',
|
||||
icon: 'success',
|
||||
confirmButtonText: "Ok",
|
||||
buttonsStyling: false,
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light-primary"
|
||||
}
|
||||
})
|
||||
} else if (result.isDenied) {
|
||||
Swal.fire({
|
||||
text: 'Account not deactivated.',
|
||||
icon: 'info',
|
||||
confirmButtonText: "Ok",
|
||||
buttonsStyling: false,
|
||||
customClass: {
|
||||
confirmButton: "btn btn-light-primary"
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
} 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-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
form = document.querySelector('#kt_account_deactivate_form');
|
||||
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton = document.querySelector('#kt_account_deactivate_account_submit');
|
||||
|
||||
initValidation();
|
||||
handleForm();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountSettingsDeactivateAccount.init();
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountSettingsOverview = function () {
|
||||
// Private functions
|
||||
var initSettings = function() {
|
||||
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initSettings();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountSettingsOverview.init();
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountSettingsProfileDetails = function () {
|
||||
// Private variables
|
||||
var form;
|
||||
var submitButton;
|
||||
var validation;
|
||||
|
||||
// Private functions
|
||||
var initValidation = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validation = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
fname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'First name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
lname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Last name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
company: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Company name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
phone: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Contact phone number is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
country: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select a country'
|
||||
}
|
||||
}
|
||||
},
|
||||
timezone: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select a timezone'
|
||||
}
|
||||
}
|
||||
},
|
||||
'communication[]': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select at least one communication method'
|
||||
}
|
||||
}
|
||||
},
|
||||
language: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select a language'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Select2 validation integration
|
||||
$(form.querySelector('[name="country"]')).on('change', function() {
|
||||
// Revalidate the color field when an option is chosen
|
||||
validation.revalidateField('country');
|
||||
});
|
||||
|
||||
$(form.querySelector('[name="language"]')).on('change', function() {
|
||||
// Revalidate the color field when an option is chosen
|
||||
validation.revalidateField('language');
|
||||
});
|
||||
|
||||
$(form.querySelector('[name="timezone"]')).on('change', function() {
|
||||
// Revalidate the color field when an option is chosen
|
||||
validation.revalidateField('timezone');
|
||||
});
|
||||
}
|
||||
|
||||
var handleForm = function () {
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
validation.validate().then(function (status) {
|
||||
if (status == 'Valid') {
|
||||
|
||||
swal.fire({
|
||||
text: "Thank you! You've updated your basic info",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-light-primary"
|
||||
}
|
||||
});
|
||||
|
||||
} 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 fw-bold btn-light-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
form = document.getElementById('kt_account_profile_details_form');
|
||||
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton = form.querySelector('#kt_account_profile_details_submit');
|
||||
|
||||
initValidation();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountSettingsProfileDetails.init();
|
||||
});
|
||||
@@ -0,0 +1,236 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAccountSettingsSigninMethods = function () {
|
||||
var signInForm;
|
||||
var signInMainEl;
|
||||
var signInEditEl;
|
||||
var passwordMainEl;
|
||||
var passwordEditEl;
|
||||
var signInChangeEmail;
|
||||
var signInCancelEmail;
|
||||
var passwordChange;
|
||||
var passwordCancel;
|
||||
|
||||
var toggleChangeEmail = function () {
|
||||
signInMainEl.classList.toggle('d-none');
|
||||
signInChangeEmail.classList.toggle('d-none');
|
||||
signInEditEl.classList.toggle('d-none');
|
||||
}
|
||||
|
||||
var toggleChangePassword = function () {
|
||||
passwordMainEl.classList.toggle('d-none');
|
||||
passwordChange.classList.toggle('d-none');
|
||||
passwordEditEl.classList.toggle('d-none');
|
||||
}
|
||||
|
||||
// Private functions
|
||||
var initSettings = function () {
|
||||
if (!signInMainEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
// toggle UI
|
||||
signInChangeEmail.querySelector('button').addEventListener('click', function () {
|
||||
toggleChangeEmail();
|
||||
});
|
||||
|
||||
signInCancelEmail.addEventListener('click', function () {
|
||||
toggleChangeEmail();
|
||||
});
|
||||
|
||||
passwordChange.querySelector('button').addEventListener('click', function () {
|
||||
toggleChangePassword();
|
||||
});
|
||||
|
||||
passwordCancel.addEventListener('click', function () {
|
||||
toggleChangePassword();
|
||||
});
|
||||
}
|
||||
|
||||
var handleChangeEmail = function (e) {
|
||||
var validation;
|
||||
|
||||
if (!signInForm) {
|
||||
return;
|
||||
}
|
||||
|
||||
validation = FormValidation.formValidation(
|
||||
signInForm,
|
||||
{
|
||||
fields: {
|
||||
emailaddress: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Email is required'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
confirmemailpassword: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Password is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: { //Learn more: https://formvalidation.io/guide/plugins
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row'
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
signInForm.querySelector('#kt_signin_submit').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
console.log('click');
|
||||
|
||||
validation.validate().then(function (status) {
|
||||
if (status == 'Valid') {
|
||||
swal.fire({
|
||||
text: "Sent password reset. Please check your email",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn font-weight-bold btn-light-primary"
|
||||
}
|
||||
}).then(function(){
|
||||
signInForm.reset();
|
||||
validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
|
||||
toggleChangeEmail();
|
||||
});
|
||||
} 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 font-weight-bold btn-light-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var handleChangePassword = function (e) {
|
||||
var validation;
|
||||
|
||||
// form elements
|
||||
var passwordForm = document.getElementById('kt_signin_change_password');
|
||||
|
||||
if (!passwordForm) {
|
||||
return;
|
||||
}
|
||||
|
||||
validation = FormValidation.formValidation(
|
||||
passwordForm,
|
||||
{
|
||||
fields: {
|
||||
currentpassword: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Current Password is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
newpassword: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'New Password is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
confirmpassword: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Confirm Password is required'
|
||||
},
|
||||
identical: {
|
||||
compare: function() {
|
||||
return passwordForm.querySelector('[name="newpassword"]').value;
|
||||
},
|
||||
message: 'The password and its confirm are not the same'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
plugins: { //Learn more: https://formvalidation.io/guide/plugins
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row'
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
passwordForm.querySelector('#kt_password_submit').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
console.log('click');
|
||||
|
||||
validation.validate().then(function (status) {
|
||||
if (status == 'Valid') {
|
||||
swal.fire({
|
||||
text: "Sent password reset. Please check your email",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn font-weight-bold btn-light-primary"
|
||||
}
|
||||
}).then(function(){
|
||||
passwordForm.reset();
|
||||
validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
|
||||
toggleChangePassword();
|
||||
});
|
||||
} 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 font-weight-bold btn-light-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
signInForm = document.getElementById('kt_signin_change_email');
|
||||
signInMainEl = document.getElementById('kt_signin_email');
|
||||
signInEditEl = document.getElementById('kt_signin_email_edit');
|
||||
passwordMainEl = document.getElementById('kt_signin_password');
|
||||
passwordEditEl = document.getElementById('kt_signin_password_edit');
|
||||
signInChangeEmail = document.getElementById('kt_signin_email_button');
|
||||
signInCancelEmail = document.getElementById('kt_signin_cancel');
|
||||
passwordChange = document.getElementById('kt_signin_password_button');
|
||||
passwordCancel = document.getElementById('kt_password_cancel');
|
||||
|
||||
initSettings();
|
||||
handleChangeEmail();
|
||||
handleChangePassword();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAccountSettingsSigninMethods.init();
|
||||
});
|
||||
Reference in New Issue
Block a user