<?php
require_once('template_header.php');
?>

<main role="main" class="container starter-template">
 
    <div class="login_style" style="width:400px;
            margin:0 auto;
            margin-top:10%;">
            <!-- where prompt / messages will appear -->
            <div id="response"></div>

            <h1 style="width: 38%;
                margin: 0 auto;
                padding-bottom: 10px;
                text-align:center;">Connexion</h1>
 
            <div>
            <form id="login_form" style="width:100%;
            padding: 30px;
            border: 1px solid #f1f1f1;
            background: #fff;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);" method="POST">
                <table>
                <tr>
                    <th>Identifiant :</th>
                    <td><input type="text" id ='login' name="login"></td>
                </tr>
                <tr>
                    <th>Mot de passe :</th>
                    <td><input type="password" id='password' name="password"></td>
                </tr>
                <tr>
                    <th></th>
                    <td><input type="submit" value="Se connecter" /></td>
                </tr>
                </table>
             </form>
             </div>
    </div>
</main>

<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- jquery scripts will be here -->


<script type="text/javascript">
$(document).ready(function() {
    // will run if create identite form was submitted
    $(document).on('submit', '#login_form', function(){
        // get form data
        var form_data=JSON.stringify($(this).serializeObject());

        // submit form data to api
        $.ajax({
            url: "https://eden.imt-lille-douai.fr/~liang.wu/API_LOGIN/identite/login.php",
            type : "POST",
            contentType : 'application/json',
            data : form_data,
            success : function(result){
                var ac_log=JSON.parse(form_data);
                sessionStorage.setItem('para', ac_log.login);
                window.location="home.php";

                
            },
            error: function(xhr, resp, text){
            // on error, tell the user login has failed & empty the input boxes
            $('#response').html("<div class='alert alert-danger'>Login failed. login or password is incorrect.</div>");
            login_form.find('input').val('');
            }
        });
    });
});
</script>

</body>

<footer>
<div style="text-align:center">
   <a href="signup.php">S'inscrire</a>
</div>
</footer>
