0

Using bootstrap, I have a modal window open for login purposes from the Navbar. If the login credentials fail, the modal disappears the same as it does if the credentials were successful. How, after running through the PHP validation process, can I make the modal reappear for the users to attempt login again? The non-working relevant code is:

PHP Validation code:

<head>
<?php
if(PassHash::check_password($row["password"], $_POST['pwd1']))
 $_SESSION["login"] = 1;
 $_SESSION['btnhs'] = 3; 
} else {
 $_SESSION["login"] = 0;
 $loginErr ="Username or password incorrect.";
?> 
 <script type="text/javascript">
  $(function() {
   $('#myModal').modal('show');
  });
 </script>                          
<?php
}
</head>

HTML:

<!-- Modal -->
  <div class="modal fade" tabindex="-1" id="myModal" role="dialog" data-backdrop="static">
    <div class="modal-dialog" data-backdrop="static">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
            <form method="post"  autocomplete="on" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" required="" name="uname" id="uname" autofocus="" placeholder="Enter username">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="password" class="form-control" required="" name="pwd1" id="pwd1" placeholder="Enter password">
              <span class="error" style="color: red"><?php echo $loginErr;?></span><br>
            </div>
            <div class="form-actions">
              <button type="submit" name="login" class="btn btn-success btn-block"><span class="glyphicon glyphicon-log-in"></span> Login</button>
            </div>
         </form>
        </div>

I'm trying to call the javascript snippet from an unsuccessful password at login, but this isn't working. Can anyone see what is wrong with this and offer a solution? Thanks.

fmc
  • 490
  • 7
  • 24

1 Answers1

4

You are making your request synchronously. If you want to keep modal open, you need to make AJAX request to server and not fully submit the form. For example, with jQuery you can use this: http://api.jquery.com/jquery.post/

Edvinas Stonikas
  • 81
  • 3
  • Thanks Edvinas. I'm really out of my league on this. I've never used jQuery/javascript/AJAX before. I got that code snippet here on SO. What confuses me is how to validate the password (contained in MySQL table) this way, using AJAX. But I'll study the link you offered. Thank you. – fmc Oct 09 '15 at 21:57
  • With jQuery.post() you can make AJAX request to your server with user input, validate it in your backend and then return a response. You can think of it as a background task. When your user clicks the button, browser silently asks server for validation and after you get the answer, you can hide your modal or show some kind of error message. – Edvinas Stonikas Oct 09 '15 at 22:03
  • I like that. So in essence, this will do away with my php validation code because AJAX will now do this for me. Right? – fmc Oct 09 '15 at 22:09
  • Not exactly. Now when you click Login button, page refreshes for you because browser is making POST request(look at
    ). With jQuery.post() you can make POST request in background. IT still makes request, uses PHP but just sends and gets data without page refresh.
     – Edvinas Stonikas Oct 09 '15 at 22:14
  • I found a lot of help on this through a Google search. Thanks for the heads up, Edvinas. Much appreciated. – fmc Oct 09 '15 at 22:16
  • Actually, after reading on this, using this approach to verify user passwords in NOT the way to go. I see it as opening myself and the user to being vulnerable to compromise. So the answer hasn't yielded the help I sought. I'm certainly open to other suggestions. – fmc Oct 10 '15 at 00:38
  • Sometimes it just takes a lot of research, mainly here on SO. I found what I was looking for. Which takes me back to you, Edvinas. You're post is correct. What tipped the scales back to you was [this](http://stackoverflow.com/questions/198462/is-either-get-or-post-more-secure-than-the-other). Read what incognito has to say. And, that said, I do use SSL. – fmc Oct 10 '15 at 14:54