initial commit
This commit is contained in:
@@ -0,0 +1,154 @@
|
||||
"use strict";
|
||||
|
||||
// Class Definition
|
||||
var KTAuthNewPassword = function() {
|
||||
// Elements
|
||||
var form;
|
||||
var submitButton;
|
||||
var validator;
|
||||
var passwordMeter;
|
||||
|
||||
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: {
|
||||
'password': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The password is required'
|
||||
},
|
||||
callback: {
|
||||
message: 'Please enter valid password',
|
||||
callback: function(input) {
|
||||
if (input.value.length > 0) {
|
||||
return validatePassword();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'confirm-password': {
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
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;
|
||||
|
||||
// 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 successfully reset your password!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.querySelector('[name="password"]').value= "";
|
||||
form.querySelector('[name="confirm-password"]').value= "";
|
||||
passwordMeter.reset(); // reset password meter
|
||||
//form.submit();
|
||||
|
||||
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||||
if (redirectUrl) {
|
||||
location.href = redirectUrl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1500);
|
||||
} 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"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
form.querySelector('input[name="password"]').addEventListener('input', function() {
|
||||
if (this.value.length > 0) {
|
||||
validator.updateFieldStatus('password', 'NotValidated');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var validatePassword = function() {
|
||||
return (passwordMeter.getScore() === 100);
|
||||
}
|
||||
|
||||
// Public Functions
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
form = document.querySelector('#kt_new_password_form');
|
||||
submitButton = document.querySelector('#kt_new_password_submit');
|
||||
passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
|
||||
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAuthNewPassword.init();
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
"use strict";
|
||||
|
||||
// Class Definition
|
||||
var KTAuthResetPassword = function() {
|
||||
// Elements
|
||||
var form;
|
||||
var submitButton;
|
||||
var validator;
|
||||
|
||||
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: {
|
||||
'email': {
|
||||
validators: {
|
||||
regexp: {
|
||||
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
||||
message: 'The value is not a valid email address',
|
||||
},
|
||||
notEmpty: {
|
||||
message: 'Email address is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '', // comment to enable invalid state icons
|
||||
eleValidClass: '' // comment to enable valid state icons
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form
|
||||
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;
|
||||
|
||||
// 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: "We have send a password reset link to your email.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.querySelector('[name="email"]').value= "";
|
||||
//form.submit();
|
||||
|
||||
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||||
if (redirectUrl) {
|
||||
location.href = redirectUrl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1500);
|
||||
} 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"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public Functions
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
form = document.querySelector('#kt_password_reset_form');
|
||||
submitButton = document.querySelector('#kt_password_reset_submit');
|
||||
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAuthResetPassword.init();
|
||||
});
|
||||
@@ -0,0 +1,195 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTSigninGeneral = function() {
|
||||
// Elements
|
||||
var form;
|
||||
var submitButton;
|
||||
var validator;
|
||||
|
||||
// Handle form
|
||||
var handleValidation = function(e) {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '', // comment to enable invalid state icons
|
||||
eleValidClass: '' // comment to enable valid state icons
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var handleSubmitDemo = function(e) {
|
||||
// Handle form submit
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
// Prevent button default action
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form
|
||||
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;
|
||||
|
||||
|
||||
// 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 successfully logged in!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.querySelector('[name="email"]').value= "";
|
||||
form.querySelector('[name="password"]').value= "";
|
||||
|
||||
//form.submit(); // submit form
|
||||
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||||
if (redirectUrl) {
|
||||
location.href = redirectUrl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 2000);
|
||||
} 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"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var handleSubmitAjax = function(e) {
|
||||
// Handle form submit
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
// Prevent button default action
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form
|
||||
validator.validate().then(function (status) {
|
||||
if (status == 'Valid') {
|
||||
// Hide loading indication
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Enable button
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Check axios library docs: https://axios-http.com/docs/intro
|
||||
axios.post('/your/ajax/login/url', {
|
||||
email: form.querySelector('[name="email"]').value,
|
||||
password: form.querySelector('[name="password"]').value
|
||||
}).then(function (response) {
|
||||
if (response) {
|
||||
form.querySelector('[name="email"]').value= "";
|
||||
form.querySelector('[name="password"]').value= "";
|
||||
|
||||
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, the email or password is incorrect, 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"
|
||||
}
|
||||
});
|
||||
});
|
||||
} 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"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Public functions
|
||||
return {
|
||||
// Initialization
|
||||
init: function() {
|
||||
form = document.querySelector('#kt_sign_in_form');
|
||||
submitButton = document.querySelector('#kt_sign_in_submit');
|
||||
|
||||
handleValidation();
|
||||
handleSubmitDemo(); // used for demo purposes only, if you use the below ajax version you can uncomment this one
|
||||
//handleSubmitAjax(); // use for ajax submit
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTSigninGeneral.init();
|
||||
});
|
||||
@@ -0,0 +1,433 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAuthI18nDemo = function() {
|
||||
// Elements
|
||||
var menu;
|
||||
|
||||
var menuObj;
|
||||
|
||||
var translationStrings = {
|
||||
// General
|
||||
"general-progress" : {
|
||||
"English" : "Please wait...",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
"general-desc" : {
|
||||
"English" : "Get unlimited access & earn money",
|
||||
"Spanish" : "Obtenga acceso ilimitado y gane dinero",
|
||||
"German" : "Erhalten Sie unbegrenzten Zugriff und verdienen Sie Geld",
|
||||
"Japanese" : "無制限のアクセスを取得してお金を稼ぐ",
|
||||
"French" : "Obtenez un accès illimité et gagnez de l'argent",
|
||||
},
|
||||
|
||||
"general-or" : {
|
||||
"English" : "Or",
|
||||
"Spanish" : "O",
|
||||
"German" : "Oder",
|
||||
"Japanese" : "または",
|
||||
"French" : "Ou",
|
||||
},
|
||||
|
||||
// Sign in
|
||||
"sign-in-head-desc" : {
|
||||
"English" : "Not a Member yet?",
|
||||
"Spanish" : "¿No eres miembro todavía?",
|
||||
"German" : "Noch kein Mitglied?",
|
||||
"Japanese" : "まだメンバーではありませんか？",
|
||||
"French" : "Pas encore membre?",
|
||||
},
|
||||
|
||||
"sign-in-head-link" : {
|
||||
"English" : "Sign Up",
|
||||
"Spanish" : "Inscribirse",
|
||||
"German" : "Anmeldung",
|
||||
"Japanese" : "サインアップ",
|
||||
"French" : "S'S'inscrire",
|
||||
},
|
||||
|
||||
"sign-in-title" : {
|
||||
"English" : "Sign In",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"sign-in-input-email" : {
|
||||
"English" : "Email",
|
||||
"Spanish" : "Correo electrónico",
|
||||
"German" : "Email",
|
||||
"Japanese" : "Eメール",
|
||||
"French" : "E-mail",
|
||||
},
|
||||
|
||||
"sign-in-input-password" : {
|
||||
"English" : "Password",
|
||||
"Spanish" : "Clave",
|
||||
"German" : "Passwort",
|
||||
"Japanese" : "パスワード",
|
||||
"French" : "Mot de passe",
|
||||
},
|
||||
|
||||
"sign-in-forgot-password" : {
|
||||
"English" : "Forgot Password ?",
|
||||
"Spanish" : "Has olvidado tu contraseña ?",
|
||||
"German" : "Passwort vergessen ?",
|
||||
"Japanese" : "パスワードをお忘れですか ？",
|
||||
"French" : "Mot de passe oublié ?",
|
||||
},
|
||||
|
||||
"sign-in-submit" : {
|
||||
"English" : "Sign In",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
// Sing up
|
||||
"sign-up-head-desc" : {
|
||||
"English" : "Already a member ?",
|
||||
"Spanish" : "Ya eres usuario ?",
|
||||
"German" : "Schon ein Mitglied ?",
|
||||
"Japanese" : "すでにメンバーですか？",
|
||||
"French" : "Déjà membre ?",
|
||||
},
|
||||
|
||||
"sign-up-head-link" : {
|
||||
"English" : "Sign In",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"sign-up-title" : {
|
||||
"English" : "Sign Up",
|
||||
"Spanish" : "Inscribirse",
|
||||
"German" : "Anmeldung",
|
||||
"Japanese" : "サインアップ",
|
||||
"French" : "S'S'inscrire",
|
||||
},
|
||||
|
||||
"sign-up-input-first-name" : {
|
||||
"English" : "First Name",
|
||||
"Spanish" : "Primer nombre",
|
||||
"German" : "Vorname",
|
||||
"Japanese" : "ファーストネーム",
|
||||
"French" : "Prénom",
|
||||
},
|
||||
|
||||
"sign-up-input-last-name" : {
|
||||
"English" : "Last Name",
|
||||
"Spanish" : "Apellido",
|
||||
"German" : "Nachname",
|
||||
"Japanese" : "苗字",
|
||||
"French" : "Nom de famille",
|
||||
},
|
||||
|
||||
"sign-up-input-email" : {
|
||||
"English" : "Email",
|
||||
"Spanish" : "Correo electrónico",
|
||||
"German" : "Email",
|
||||
"Japanese" : "Eメール",
|
||||
"French" : "E-mail",
|
||||
},
|
||||
|
||||
"sign-up-input-password" : {
|
||||
"English" : "Password",
|
||||
"Spanish" : "Clave",
|
||||
"German" : "Passwort",
|
||||
"Japanese" : "パスワード",
|
||||
"French" : "Mot de passe",
|
||||
},
|
||||
|
||||
"sign-up-input-confirm-password" : {
|
||||
"English" : "Password",
|
||||
"Spanish" : "Clave",
|
||||
"German" : "Passwort",
|
||||
"Japanese" : "パスワード",
|
||||
"French" : "Mot de passe",
|
||||
},
|
||||
|
||||
"sign-up-submit" : {
|
||||
"English" : "Submit",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"sign-up-hint" : {
|
||||
"English" : "Use 8 or more characters with a mix of letters, numbers & symbols.",
|
||||
"Spanish" : "Utilice 8 o más caracteres con una combinación de letras, números y símbolos.",
|
||||
"German" : "Verwenden Sie 8 oder mehr Zeichen mit einer Mischung aus Buchstaben, Zahlen und Symbolen.",
|
||||
"Japanese" : "文字、数字、記号を組み合わせた8文字以上を使用してください。",
|
||||
"French" : "Utilisez 8 caractères ou plus avec un mélange de lettres, de chiffres et de symboles.",
|
||||
},
|
||||
|
||||
// New password
|
||||
"new-password-head-desc" : {
|
||||
"English" : "Already a member ?",
|
||||
"Spanish" : "Ya eres usuario ?",
|
||||
"German" : "Schon ein Mitglied ?",
|
||||
"Japanese" : "すでにメンバーですか？",
|
||||
"French" : "Déjà membre ?",
|
||||
},
|
||||
|
||||
"new-password-head-link" : {
|
||||
"English" : "Sign In",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"new-password-title" : {
|
||||
"English" : "Setup New Password",
|
||||
"Spanish" : "Configurar nueva contraseña",
|
||||
"German" : "Neues Passwort einrichten",
|
||||
"Japanese" : "新しいパスワードを設定する",
|
||||
"French" : "Configurer un nouveau mot de passe",
|
||||
},
|
||||
|
||||
"new-password-desc" : {
|
||||
"English" : "Have you already reset the password ?",
|
||||
"Spanish" : "¿Ya has restablecido la contraseña?",
|
||||
"German" : "Hast du das Passwort schon zurückgesetzt?",
|
||||
"Japanese" : "すでにパスワードをリセットしましたか？",
|
||||
"French" : "Avez-vous déjà réinitialisé le mot de passe ?",
|
||||
},
|
||||
|
||||
"new-password-input-password" : {
|
||||
"English" : "Password",
|
||||
"Spanish" : "Clave",
|
||||
"German" : "Passwort",
|
||||
"Japanese" : "パスワード",
|
||||
"French" : "Mot de passe",
|
||||
},
|
||||
|
||||
"new-password-hint" : {
|
||||
"English" : "Use 8 or more characters with a mix of letters, numbers & symbols.",
|
||||
"Spanish" : "Utilice 8 o más caracteres con una combinación de letras, números y símbolos.",
|
||||
"German" : "Verwenden Sie 8 oder mehr Zeichen mit einer Mischung aus Buchstaben, Zahlen und Symbolen.",
|
||||
"Japanese" : "文字、数字、記号を組み合わせた8文字以上を使用してください。",
|
||||
"French" : "Utilisez 8 caractères ou plus avec un mélange de lettres, de chiffres et de symboles.",
|
||||
},
|
||||
|
||||
"new-password-confirm-password" : {
|
||||
"English" : "Confirm Password",
|
||||
"Spanish" : "Confirmar contraseña",
|
||||
"German" : "Passwort bestätigen",
|
||||
"Japanese" : "パスワードを認証する",
|
||||
"French" : "Confirmez le mot de passe",
|
||||
},
|
||||
|
||||
"new-password-submit" : {
|
||||
"English" : "Submit",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
// Password reset
|
||||
"password-reset-head-desc" : {
|
||||
"English" : "Already a member ?",
|
||||
"Spanish" : "Ya eres usuario ?",
|
||||
"German" : "Schon ein Mitglied ?",
|
||||
"Japanese" : "すでにメンバーですか？",
|
||||
"French" : "Déjà membre ?",
|
||||
},
|
||||
|
||||
"password-reset-head-link" : {
|
||||
"English" : "Sign In",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"password-reset-title" : {
|
||||
"English" : "Forgot Password ?",
|
||||
"Spanish" : "Has olvidado tu contraseña ?",
|
||||
"German" : "Passwort vergessen ?",
|
||||
"Japanese" : "パスワードをお忘れですか ？",
|
||||
"French" : "Mot de passe oublié ?",
|
||||
},
|
||||
|
||||
"password-reset-desc" : {
|
||||
"English" : "Enter your email to reset your password.",
|
||||
"Spanish" : "Ingrese su correo electrónico para restablecer su contraseña.",
|
||||
"German" : "Geben Sie Ihre E-Mail-Adresse ein, um Ihr Passwort zurückzusetzen.",
|
||||
"Japanese" : "メールアドレスを入力してパスワードをリセットしてください。",
|
||||
"French" : "Entrez votre e-mail pour réinitialiser votre mot de passe.",
|
||||
},
|
||||
|
||||
"password-reset-input-email" : {
|
||||
"English" : "Email",
|
||||
"Spanish" : "Correo electrónico",
|
||||
"German" : "Email",
|
||||
"Japanese" : "Eメール",
|
||||
"French" : "E-mail",
|
||||
},
|
||||
|
||||
"password-reset-submit" : {
|
||||
"English" : "Submit",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"password-reset-cancel" : {
|
||||
"English" : "Cancel",
|
||||
"Spanish" : "Cancelar",
|
||||
"German" : "Absagen",
|
||||
"Japanese" : "キャンセル",
|
||||
"French" : "Annuler",
|
||||
},
|
||||
|
||||
// Two steps
|
||||
"two-step-head-desc" : {
|
||||
"English" : "Didn’t get the code ?",
|
||||
"Spanish" : "¿No recibiste el código?",
|
||||
"German" : "Code nicht erhalten?",
|
||||
"Japanese" : "コードを取得できませんでしたか？",
|
||||
"French" : "Vous n'avez pas reçu le code ?",
|
||||
},
|
||||
|
||||
"two-step-head-resend" : {
|
||||
"English" : "Resend",
|
||||
"Spanish" : "Reenviar",
|
||||
"German" : "Erneut senden",
|
||||
"Japanese" : "再送",
|
||||
"French" : "Renvoyer",
|
||||
},
|
||||
|
||||
"two-step-head-or" : {
|
||||
"English" : "Or",
|
||||
"Spanish" : "O",
|
||||
"German" : "Oder",
|
||||
"Japanese" : "または",
|
||||
"French" : "Ou",
|
||||
},
|
||||
|
||||
"two-step-head-call-us" : {
|
||||
"English" : "Call Us",
|
||||
"Spanish" : "Llámenos",
|
||||
"German" : "Rufen Sie uns an",
|
||||
"Japanese" : "お電話ください",
|
||||
"French" : "Appelez-nous",
|
||||
},
|
||||
|
||||
"two-step-submit" : {
|
||||
"English" : "Submit",
|
||||
"Spanish" : "Iniciar Sesión",
|
||||
"German" : "Registrarse",
|
||||
"Japanese" : "ログイン",
|
||||
"French" : "S'identifier",
|
||||
},
|
||||
|
||||
"two-step-title" : {
|
||||
"English" : "Two Step Verification",
|
||||
"Spanish" : "Verificación de dos pasos",
|
||||
"German" : "Verifizierung in zwei Schritten",
|
||||
"Japanese" : "2段階認証",
|
||||
"French" : "Vérification en deux étapes",
|
||||
},
|
||||
|
||||
"two-step-deck" : {
|
||||
"English" : "Enter the verification code we sent to",
|
||||
"Spanish" : "Ingresa el código de verificación que enviamos a",
|
||||
"German" : "Geben Sie den von uns gesendeten Bestätigungscode ein",
|
||||
"Japanese" : "送信した確認コードを入力してください",
|
||||
"French" : "Entrez le code de vérification que nous avons envoyé à",
|
||||
},
|
||||
|
||||
"two-step-label" : {
|
||||
"English" : "Type your 6 digit security code",
|
||||
"Spanish" : "Escriba su código de seguridad de 6 dígitos",
|
||||
"German" : "Geben Sie Ihren 6-stelligen Sicherheitscode ein",
|
||||
"Japanese" : "6桁のセキュリティコードを入力します",
|
||||
"French" : "Tapez votre code de sécurité à 6 chiffres",
|
||||
}
|
||||
}
|
||||
|
||||
// Handle form
|
||||
var translate = function(lang) {
|
||||
for (var label in translationStrings) {
|
||||
if (translationStrings.hasOwnProperty(label)) {
|
||||
if (translationStrings[label][lang]) {
|
||||
let labelElement = document.querySelector('[data-kt-translate=' + label + ']');
|
||||
|
||||
if (labelElement !== null) {
|
||||
if (labelElement.tagName === "INPUT") {
|
||||
labelElement.setAttribute("placeholder", translationStrings[label][lang]);
|
||||
} else {
|
||||
labelElement.innerHTML = translationStrings[label][lang];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var setLanguage = function(lang) {
|
||||
const selectedLang = menu.querySelector('[data-kt-lang="' + lang + '"]');
|
||||
|
||||
if (selectedLang !== null) {
|
||||
const currentLangName = document.querySelector('[data-kt-element="current-lang-name"]');
|
||||
const currentLangFlag = document.querySelector('[data-kt-element="current-lang-flag"]');
|
||||
|
||||
const selectedLangName = selectedLang.querySelector('[data-kt-element="lang-name"]');
|
||||
const selectedLangFlag = selectedLang.querySelector('[data-kt-element="lang-flag"]');
|
||||
|
||||
currentLangName.innerText = selectedLangName.innerText;
|
||||
currentLangFlag.setAttribute("src", selectedLangFlag.getAttribute("src"));
|
||||
|
||||
localStorage.setItem("kt_auth_lang", lang);
|
||||
}
|
||||
}
|
||||
|
||||
var init = function() {
|
||||
if ( localStorage.getItem("kt_auth_lang") !== null ) {
|
||||
let lang = localStorage.getItem("kt_auth_lang");
|
||||
|
||||
setLanguage(lang);
|
||||
translate(lang);
|
||||
}
|
||||
|
||||
menuObj.on("kt.menu.link.click", function(element) {
|
||||
let lang = element.getAttribute("data-kt-lang");
|
||||
|
||||
setLanguage(lang);
|
||||
translate(lang);
|
||||
});
|
||||
}
|
||||
|
||||
// Public functions
|
||||
return {
|
||||
// Initialization
|
||||
init: function() {
|
||||
menu = document.querySelector('#kt_auth_lang_menu');
|
||||
|
||||
if (menu === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
menuObj = KTMenu.getInstance(menu);
|
||||
|
||||
init();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTAuthI18nDemo.init();
|
||||
});
|
||||
@@ -0,0 +1,140 @@
|
||||
"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();
|
||||
});
|
||||
@@ -0,0 +1,164 @@
|
||||
"use strict";
|
||||
|
||||
// Class Definition
|
||||
var KTSignupComingSoon = function() {
|
||||
// Elements
|
||||
var form;
|
||||
var submitButton;
|
||||
var validator;
|
||||
|
||||
var counterDays;
|
||||
var counterHours;
|
||||
var counterMinutes;
|
||||
var counterSeconds;
|
||||
|
||||
var handleForm = function(e) {
|
||||
var validation;
|
||||
|
||||
if( !form ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'email': {
|
||||
validators: {
|
||||
regexp: {
|
||||
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
||||
message: 'The value is not a valid email address',
|
||||
},
|
||||
notEmpty: {
|
||||
message: 'Email address is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form
|
||||
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;
|
||||
|
||||
// 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: "We have received your request. You will be notified once we go live.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.querySelector('[name="email"]').value= "";
|
||||
//form.submit();
|
||||
|
||||
//form.submit(); // submit form
|
||||
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||||
if (redirectUrl) {
|
||||
location.href = redirectUrl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 2000);
|
||||
} 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"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var initCounter = function() {
|
||||
// Set the date we're counting down to
|
||||
var currentTime = new Date();
|
||||
var countDownDate = new Date(currentTime.getTime() + 1000 * 60 * 60 * 24 * 15 + 1000 * 60 * 60 * 10 + 1000 * 60 * 15).getTime();
|
||||
|
||||
var count = function() {
|
||||
// Get todays date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now an the count down date
|
||||
var distance = countDownDate - now;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// Display the result
|
||||
if(counterDays) counterDays.innerHTML = days;
|
||||
if(counterHours) counterHours.innerHTML = hours;
|
||||
if(counterMinutes) counterMinutes.innerHTML = minutes;
|
||||
if(counterSeconds) counterSeconds.innerHTML = seconds;
|
||||
};
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(count, 1000);
|
||||
|
||||
// Initial count
|
||||
count();
|
||||
}
|
||||
|
||||
// Public Functions
|
||||
return {
|
||||
// public functions
|
||||
init: function() {
|
||||
form = document.querySelector('#kt_coming_soon_form');
|
||||
submitButton = document.querySelector('#kt_coming_soon_submit');
|
||||
|
||||
handleForm();
|
||||
|
||||
counterDays = document.querySelector('#kt_coming_soon_counter_days');
|
||||
if (counterDays) {
|
||||
counterHours = document.querySelector('#kt_coming_soon_counter_hours');
|
||||
counterMinutes = document.querySelector('#kt_coming_soon_counter_minutes');
|
||||
counterSeconds = document.querySelector('#kt_coming_soon_counter_seconds');
|
||||
|
||||
initCounter();
|
||||
}
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTSignupComingSoon.init();
|
||||
});
|
||||
@@ -0,0 +1,169 @@
|
||||
"use strict";
|
||||
|
||||
// Class Definition
|
||||
var KTSignupFreeTrial = 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: {
|
||||
'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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'confirm-password': {
|
||||
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: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
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;
|
||||
|
||||
// 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 successfully registered!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.reset(); // reset form
|
||||
passwordMeter.reset(); // reset password meter
|
||||
|
||||
//form.submit(); // submit form
|
||||
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||||
if (redirectUrl) {
|
||||
location.href = redirectUrl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1500);
|
||||
} 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"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
form.querySelector('input[name="password"]').addEventListener('input', function() {
|
||||
if (this.value.length > 0) {
|
||||
validator.updateFieldStatus('password', 'NotValidated');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Password input validation
|
||||
var validatePassword = function() {
|
||||
return (passwordMeter.getScore() === 100);
|
||||
}
|
||||
|
||||
// Public functions
|
||||
return {
|
||||
// Initialization
|
||||
init: function() {
|
||||
form = document.querySelector('#kt_free_trial_form');
|
||||
submitButton = document.querySelector('#kt_free_trial_submit');
|
||||
passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
|
||||
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTSignupFreeTrial.init();
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
"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: {
|
||||
'first-name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'First Name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'last-name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Last 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'confirm-password': {
|
||||
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;
|
||||
|
||||
// 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 successfully reset your password!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.reset(); // reset form
|
||||
passwordMeter.reset(); // reset password meter
|
||||
//form.submit();
|
||||
|
||||
//form.submit(); // submit form
|
||||
var redirectUrl = form.getAttribute('data-kt-redirect-url');
|
||||
if (redirectUrl) {
|
||||
location.href = redirectUrl;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1500);
|
||||
} 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() {
|
||||
return (passwordMeter.getScore() === 100);
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
Reference in New Issue
Block a user