189 lines
7.3 KiB
JavaScript
189 lines
7.3 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
// Class definition
|
||
|
var KTSignupGeneral = function() {
|
||
|
// Elements
|
||
|
var form;
|
||
|
var submitButton;
|
||
|
var validator;
|
||
|
var passwordMeter;
|
||
|
|
||
|
// Handle form
|
||
|
var handleForm = function(e) {
|
||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||
|
validator = FormValidation.formValidation(
|
||
|
form,
|
||
|
{
|
||
|
fields: {
|
||
|
'name': {
|
||
|
validators: {
|
||
|
notEmpty: {
|
||
|
message: 'Name is required'
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
'email': {
|
||
|
validators: {
|
||
|
regexp: {
|
||
|
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
||
|
message: 'The value is not a valid email address',
|
||
|
},
|
||
|
notEmpty: {
|
||
|
message: 'Email address is required'
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
'password': {
|
||
|
validators: {
|
||
|
notEmpty: {
|
||
|
message: 'The password is required'
|
||
|
},
|
||
|
callback: {
|
||
|
message: 'Please enter valid password',
|
||
|
callback: function(input) {
|
||
|
if (input.value.length > 0) {
|
||
|
return validatePassword();
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
'password_confirmation': {
|
||
|
validators: {
|
||
|
notEmpty: {
|
||
|
message: 'The password confirmation is required'
|
||
|
},
|
||
|
identical: {
|
||
|
compare: function() {
|
||
|
return form.querySelector('[name="password"]').value;
|
||
|
},
|
||
|
message: 'The password and its confirm are not the same'
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
'toc': {
|
||
|
validators: {
|
||
|
notEmpty: {
|
||
|
message: 'You must accept the terms and conditions'
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
plugins: {
|
||
|
trigger: new FormValidation.plugins.Trigger({
|
||
|
event: {
|
||
|
password: false
|
||
|
}
|
||
|
}),
|
||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||
|
rowSelector: '.fv-row',
|
||
|
eleInvalidClass: '', // comment to enable invalid state icons
|
||
|
eleValidClass: '' // comment to enable valid state icons
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
);
|
||
|
|
||
|
// Handle form submit
|
||
|
submitButton.addEventListener('click', function (e) {
|
||
|
e.preventDefault();
|
||
|
|
||
|
validator.revalidateField('password');
|
||
|
|
||
|
validator.validate().then(function(status) {
|
||
|
if (status == 'Valid') {
|
||
|
// Show loading indication
|
||
|
submitButton.setAttribute('data-kt-indicator', 'on');
|
||
|
|
||
|
// Disable button to avoid multiple click
|
||
|
submitButton.disabled = true;
|
||
|
|
||
|
|
||
|
// Check axios library docs: https://axios-http.com/docs/intro
|
||
|
axios.post(submitButton.closest('form').getAttribute('action'), new FormData(form)).then(function (response) {
|
||
|
if (response) {
|
||
|
form.reset();
|
||
|
|
||
|
const redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||
|
|
||
|
if (redirectUrl) {
|
||
|
location.href = redirectUrl;
|
||
|
}
|
||
|
} else {
|
||
|
// Show error 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-primary"
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
}).catch(function (error) {
|
||
|
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"
|
||
|
}
|
||
|
});
|
||
|
}).then(() => {
|
||
|
// Hide loading indication
|
||
|
submitButton.removeAttribute('data-kt-indicator');
|
||
|
|
||
|
// Enable button
|
||
|
submitButton.disabled = false;
|
||
|
});
|
||
|
|
||
|
} else {
|
||
|
// Show error 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-primary"
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
|
||
|
// Handle password input
|
||
|
form.querySelector('input[name="password"]').addEventListener('input', function() {
|
||
|
if (this.value.length > 0) {
|
||
|
validator.updateFieldStatus('password', 'NotValidated');
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// Password input validation
|
||
|
var validatePassword = function() {
|
||
|
console.log('Password score: ' + passwordMeter.getScore())
|
||
|
return (passwordMeter.getScore() > 30);
|
||
|
}
|
||
|
|
||
|
// Public functions
|
||
|
return {
|
||
|
// Initialization
|
||
|
init: function() {
|
||
|
// Elements
|
||
|
form = document.querySelector('#kt_sign_up_form');
|
||
|
submitButton = document.querySelector('#kt_sign_up_submit');
|
||
|
passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
|
||
|
|
||
|
handleForm ();
|
||
|
}
|
||
|
};
|
||
|
}();
|
||
|
|
||
|
// On document ready
|
||
|
KTUtil.onDOMContentLoaded(function() {
|
||
|
KTSignupGeneral.init();
|
||
|
});
|