scrummy 0 Newbie Poster

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();
}
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.