Validate user using modal before updating records

Question

I am doing a web application using PHP, MySQL and Bootstrap. Before I update a Product Record (prod_update.php), I want a modal to popup and ask the User's username and password.

When the username or password is incorrect, there would be another modal saying that the credentials are incorrect. When the credentials are valid, it will redirect to the main form (prod_all.php).

prod_update.php

Authentication Modal

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Too many questions, Too broad and too many ways to achieve all steps

Lets say you have prod_update.php which has the form which user wants to update

When user click Update Prodoucts a modal open, can be done with data attributes data-toggle and data-modal.

so Update Products button can be

<button type="button" data-toggle="modal" data-target="#LoginModal" class="btn btn-info" >Open Modal</button>

Login Modal with data-backdrop="static" data-keyboard="false" so modal won't be closed when click outside the modal window

<div id="LoginModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Login Modal</h4>
      </div>
      <div class="modal-body">
        <form id="LoginForm">
        Login Username & Password Form can come here
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="UserLogin">Authenticate</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Now when user try to login (for Login Form you have choices, want client side validation only, both client side and server side validation or only server side validation, skipping them, leaving up to you)

Ajax method call to login the user

$(document).ready(function(){
    $(document).on("click","#UserLogin",function() {
        //Ajax method call for user to login
        $.ajax({
            type : 'post',
            url : 'userlogin.php', //Here you will check user and login 
            data :  $('#LoginForm').serialize(), //Login Form
            success : function(response){
                if(response.status=='success') {
                        $('#LoginModal').modal('hide'); //Hide login modal if all good
                        window.location.href = 'prod_all.php';
                        //for jQuery redirect check end of the answer 
                }
                if(response.status=='error') {
                        $('#ErrorModal').modal('show');
                        $('#LoginError').html(response.message);
                }
            }
        });
    });
});

userlogin.php

<?php
    header('Content-Type: application/json');
    //Database Connection
    //use isset to check if form posted
    //escape the string
    //run query to check username & password against database
    if((num_rows)>0) {
            $response['status'] = "success";
    } else {
            $response['status'] = "error";
            $response['message'] = "<div class='alert alert-danger'>Invalid Username or Password</div>";
    }
    echo json_encode($response);
?>

And Error Modal can be

<div id="ErrorModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div id="LoginError"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

To redirect the user after successful login, refer to this answer for detail and all possible solutions.

Disclaimer

If you want to validate the login on client side, you may need to change the ajax call and highly suggest to use validation plugin like bootstrapvalidator and handle the ajax call inside submithandler
You may or will experience odd behaviour when login error message modal show, bootstrap doesn't support stacked modal so you may need some work around, this particular issue has been answered on SO many times to search before post another question.

Validate user using modal before updating records

1 Answers1