There is a PHP login code but I don't know how to show the error message when the user types wrong datas into the input fields. I used to have a
echo"Wrong username or password!"; But I want to display a DOM element. I don't know how to make it. The HTML element is inside the code, but it has a hidden class so the user can't see it. I want to remove the hidden class from the messagebox but I don't know how to remove it when the data are not correct. Or any other idea how to display error messages?
This is the Login form:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Links -->
<link rel="shortcut icon" href="/images/icon.png">
<title>Pleasure of Industry - Admin</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" type="text/css" href="includes/assets/css/login-index.css">
</head>
<body>
<div class="login">
<h1>Admin</h1>
<form action="authenticate.php" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required autocomplete="off">
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="submit" value="Authenticate">
<?php if(isset($_SESSION['error'])) { echo '
<div class="login-error hidden" id="error-id">
<span class="alert-img">
<img src="/assets/images/svg/rf-alert.svg" width="30px">
</span>
<span class="alert-text">
Incorrect username and/or password!
</span>
</div>';
unset($_SESSION['error']);
}?>
</form>
</div>
</body>
</html>And this is the Validation PHP file Code:
<?php
session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
// Now we check if the data from the login form was submitted, isset() will check if the data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
// Could not get the data that should have been sent.
exit('Please fill both the username and password fields!');
}
// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
// Store the result so we can check if the account exists in the database.
$stmt->store_result();
if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// Account exists, now we verify the password.
// Note: remember to use password_hash in your registration file to store the hashed passwords.
if (password_verify($_POST['password'], $password)) {
// Verification success! User has logged-in!
// Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
header('Location: /admin/h/index.php');
} else {
// Incorrect password
//echo 'Incorrect username and/or password!';
header("location: /admin/index.php?login_attempt=failed");
}
} else {
// Incorrect username
echo 'Incorrect username and/or password!';
}
$stmt->close();
}
?>