<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid" >
         <span class="navbar-brand mb-0 h1" style="padding-left: 45%;">Counter Login</span>
        </div>
      </nav>
    <div id="alert">
    
    </div>
    <div style="padding-left:35%; padding-right: 35%;">
        
    <form>
        {% csrf_token %}
        <br>
    <label>Username</label>
        <input class="form-control" type="text" name="username" id="username" placeholder="Username">
        <br>
        <label for="password">Password</label>
        <input class="form-control" type="password" name="password" id="password" placeholder="Password">
    </form>
    <br>
    <center><button onclick="obj.login();" class="w-100 btn btn-lg btn-primary">Login</button></center>
</div>
    <script>
        class Login{
            constructor(){
                this.params=[]
            }
            login(){
               this.AjaxCall();
            }
            AjaxCall(){
                let form= new FormData();
                form.append("username",document.getElementById("username").value);
                form.append("password",document.getElementById("password").value);
                form.append("csrfmiddlewaretoken","{{ csrf_token }}");
                $.ajax(
                {
                    url:document.url,
                    type:"post",
                    contentType: false,
                    processData: false,
                    data:form,
                    success:function(data){
                        if(data["Status"]=="Success")
                        {  
                            location.reload();
                        }
                        else{
                            let div=document.createElement("div");
                            div.setAttribute("class",'alert alert-danger');
                            div.setAttribute("role",'alert');
                            div.innerText="Username or Password is incorrect.";
                            document.getElementById("alert").append(div);
                            setTimeout(function(){
                                document.getElementById("alert").innerHTML=""
                            },5000);
                        }
                          
                    },
                    error:function(){
                        console.log("Error");
                    }
                });
            }
        };
        var obj = new Login();
    </script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>