New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
user login from tables in my mySql database
I would like to authenticate the user login from the databases stored in mySql database on my server.
would like to know how I can get that done when using the Datatables in your example shown.
using the html version of Metronic
Replies (3)
Hi,
You can customize src/js/custom/authentication/sign-in/general.js script and remove the demo form submit function and use the below one which uses ajax submit using Axios Ajax library:
var handleSubmit = 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;
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:
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:
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 recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Thanks Sean,
so the /your/ajax/login/url is my php program that collects the email and pwd, checks for them in the mysqldb.
and what do I return from the php file to axios?
Hi,
This post can be useful.
Regards.
