Click here to Skip to main content
15,867,857 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
I'm trying to make a modal login system. When the user enters wrong user/pass, a warning text is appeared on the bottom of the modal. I tried the following codes but it does not work. The first problem is that when I leave user/password fields blank, the warning message should be appeared at the bottom of the modal but it does not happen. Totally, the login button does nothing even when I enter the correct user/pass. Please help me.

What I have tried:

index.php:
<!--Login Modal-->
       <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <h5 class="modal-title" id="exampleModalLabel">Login</h5>
                       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   </div>
                   <div class="modal-body">
                       <form method="POST">
                           <div class="mb-3">
                               <label for="exampleInputText1" class="form-label">User name:</label>
                               <input type="text" name="username" class="form-control" id="uname" aria-describedby="emailHelp">
                           </div>
                           <div class="mb-3">
                               <label for="exampleInputPassword1" class="form-label">Password:</label>
                               <input type="password" name="pass" class="form-control" id="pass">
                           </div>
                           <div class="mb-3 form-check">
                               <input type="checkbox" class="form-check-input" id="exampleCheck1">
                               <label class="form-check-label" for="exampleCheck1">Check me out</label>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                               <button type="button" id="btn_login" name="btn_login" class="btn btn-primary">Login</button>
                           </div>
                       </form>
                       <div class="alert alert-danger" id="loginStatus" role="alert">
                           Invalid username or password!
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <!--end of login modal-->


<script src="../public/assets/js/jquery-3.6.0.min.js"></script>
   <script src="../public/assets/js/bootstrap.bundle.min.js"></script>
   <script src="../public/assets/js/main.js"></script>
   <script>
       $('#loginStatus').hide();
   </script>
   <script>
       $(document).ready(function() {
           $('#btn_login').click(function() {
               var username = $('#uname').val();
               var password = $('#pass').val();
               if (username != '' && password != '') {
                   $.ajax({
                       url: "../app/model/login.php",
                       method = "POST",
                       data: {
                           user: username,
                           pass: password
                       },
                       success: function(data) {
                           if (data == 'No') {
                               $('#loginStatus').show(1000);
                           } else {
                               $('#exampleModal2').hide();
                               location.reload();
                           }
                       }
                   });
               } else {
                   $('#loginStatus').show();
               }
           });
       });
   </script>


login.php:


<?php
session_start();

class User
{
    public function CheckUser()
    {

        require "../app/core/database.php";
        if (isset($_POST['user']) && isset($_POST['pass'])) {

            $user = $_POST['user'];
            $pass = $_POST['pass'];

            $data = $user;
            //Create a template
            $sql = "SELECT * FROM users WHERE username =?;";
            //Create a prepared statement
            $stmt = mysqli_stmt_init($connection);
            //Prepare the prepared statement
            if (!mysqli_stmt_prepare($stmt, $sql)) {

                echo "Statement failed";
                exit();
            } else {

                //Binding parameters to the placeholder
                mysqli_stmt_bind_param($stmt, "s", $data);
                //Run parameters inside database
                mysqli_stmt_execute($stmt);
                $log_result = mysqli_stmt_get_result($stmt);
                $count = mysqli_num_rows($log_result);
            }


            //to prevent sql injection
            if ($count == 1) {
                $row = mysqli_fetch_assoc($log_result);
                $hash = $row['password'];
                $hashed_pass = password_verify($pass, $hash);

                if ($hashed_pass == true) {
                    echo "Yes";
                    $_SESSION['loggedin'] = true;
                    $_SESSION['username'] = $user;
                    $_SESSION['is_admin'] = $row['admin'];
                    header("Location: ../home/index");
                } else {
                    $_SESSION['loggedin'] = false;
                }
            } else {
                echo "No";
            }
        }
    }
}
Posted
Updated 4-Nov-21 23:55pm
v2
Comments
Richard Deeming 5-Nov-21 5:38am    
Congratulations: you've avoided the big mistakes that many people make implementing this kind of system (SQL injection and plain-text password storage). 👍

Unfortunately, you've forgotten to tell us what the problem is. "Not working" is not enough information for anyone to help you. We have no access to your database, and we can't run your code.
Alex Dunlop 5-Nov-21 5:44am    
The first problem is that if I leave username and password fields blank, a warning notification should be appeared at the bottom of the modal (saying "Invalid username or password!"). But when I press the login button, nothing happens.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900