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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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: 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"
}
});
}
});
});
}

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(