Login Script for Metronic 8
Hello,
Within the sign-up.php and the general.js files, a login form and the corresponding script are stored. But the function behind it is missing.
Is there a small instruction somewhere where a small login system can be stored? It's just a matter of storing a single user with a password and prohibiting access to another .php page if one is not logged in.
Many thanks and best regards
Maurice
Replies (4)
Try it with this ajax Form:
general.js:
var handleownSubmitAjax = 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;
// Reads the user data from the form inputs
var email = $("#email").val();
var password = $("#password").val();
// Ajax request to match the user data with the database
$.ajax({
url: "auth/authlogin.php", // path to the server page that checks the user data
method: "POST",
data: {
email: email,
password: password
}, // user data sent to the server
success: function(response) {
// Successful response received from the server
if (response == "success") {
const redirectUrl = form.getAttribute("data-kt-redirect-url");
email = "";
password = "";
if (redirectUrl) {
location.href = redirectUrl;
}
} else {
Swal.fire({
text: "Username and password are incorrect!",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Understood",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
},
error: function() {
// Error sending the ajax request
alert("Error sending Ajax request");
}
});
} else {
// Show error popup. For more info check the plugin"s official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "An error was detected while submitting the form. Please try again",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Understood",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});
}MySQL Connection:
<pre lang=php>
session_start();
$conn = new mysqli("localhost","root","","test");
if ($conn -> connect_errno) {
echo "Failed to connect to MySQL: " . $conn -> connect_error;
exit();
}
$email = $_POST['email'];
$password = $_POST['password'];
$query = "SELECT * FROM user WHERE email='$email' AND password='$password'";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) == 1) {
echo "success";
$_SESSION['email'] = $email;
}else {
echo "fail";
}
exit();
</pre>
Now you must write down this code on every page to prevents to enter page without login:
<pre lang=php>
session_start();
if(!isset($_SESSION['email'])){
header('location: login.php');
}
</pre>
Hi Luis,
first of all, thank you very much for your answer. The tables and entries have been created and the files adapted. Three short questions:
1) Where do I place the MySQL connection? At the beginning of the login.php it does not work: "fail".
2) In the general.js file, do you mean by "url: 'auth/authlogin.php'" also the login.php file or is that a different one? What should go in there?
3) Is there a way to secure the password? Maybe with SHA?
Many greetings and many thanks,
Maurice
1) Place the MySQL Connection in the "auth/authlogin.php" File.
2) The "auth/authlogin.php" only contains the MySQL Connection
3) You can try it with "MD5" or other Hash methods.
Hi,
You can check this instruction for Ajax based login process.
In general.js you should point the ajax request to your server-side login scripts path.
Securing the password will depend on your app requirements.
Regards.
