Untitled

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" itemscope itemtype="http://schema.org/Article">

<head>
    <title>MyCinema</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/stylesheets/Login.css}">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- BEGIN Pre-requisites -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
    </script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id"
          content="568733693778-dsdcs602d8va4b7u9p5fv0rn2rppddl4.apps.googleusercontent.com">

</head>


<body>

<div class="image-container"></div>

<div class="flex-white-container"></div>
<div class="white-contanier">


    <div class="title-container"> My Cinema</div>
    <div class="subtitle-container">Welcome back! Please login to your account.</div>
    <div class="login-container">

        <form action="#" id="myform" name="myform" th:object="${LoginInput}" method="post" th:action="@{/goToHome}">
            <div class="alert" id="feedback" style="display: none">

                <div class="pair">
                    <h4 id="error_login">
                        Error:Invalid credentials
                    </h4>
                    <i class="fas fa-times" id="symbol"></i>

                </div>
            </div>
            <div class="alert" id="feedback2" style="display: none">

                <div class="pair">
                    <h4 id="error_login2">
                        Error:Email is not verified.Plese go email and verify your email<!doctype html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport"
                                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                            <meta http-equiv="X-UA-Compatible" content="ie=edge">
                            <title>Document</title>
                        </head>
                        <body>

                        </body>
                        </html>
                    </h4>
                    <i class="fas fa-times" id="symbol2"></i>

                </div>
            </div>
            <input id="username" placeholder="Username" required th:field="*{username}" type="text"/>
            <input id="password" placeholder="Password" required th:field="*{password}" type="password">

            <div class="checkbox-forgpass-container">
                <div class="checkbox-container">
                    <input form="myform" id="RememberMe" th:field="*{remainConnected}" type="checkbox">
                    <label for="RememberMe"> Remember Me</label>

                </div>

                <a class="forgot-password-container" href="/ForgotPassword"> Forgot Password</a>


            </div>

            <div class="button-container">
                <input class="button" id="btn-login" type="submit" value="Login">
                <input class="button" type="button" value="SignUp" onclick="location.href='signUp'">

            </div>

        </form>
        <!--        <form action="/connect/google" method="POST">-->
        <!--            <input type="hidden" name="scope" value="profile" />-->
        <!--            <div class="formInfo">-->
        <!--                <p>You aren't connected to Google yet. Click the button to connect this application with your  account.</p>-->
        <!--            </div>-->
        <!--            <p><button type="submit">Connect to Google</button></p>-->
        <!--        </form>-->


    </div>


</div>
<div class="flex-white-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script>
    var input = document.getElementById('username');
    input.onclick = function deleteInput() {
        // var inputPass=document.getElementById("username");
        // var inputPass=document.getElementById("password");
        var feedback = $('#feedback');
        feedback.textContent = "";
    }
</script>
<script>
    function close() {
        $("#feedback").css('display', 'none');
    }

</script>
<script>
    $("#myform").submit(function (event) {


        //stop submit the form event.
        event.preventDefault();

        var loginForm = {}
        loginForm["username"] = $("#username").val();
        loginForm["password"] = $("#password").val();

        $("#btn-login").prop("disabled", true);

        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/api/login",
            data: JSON.stringify(loginForm),
            dataType: 'json',
            cache: false,
            timeout: 600000,
            success: function (data) {
                console.log(data);
                if (data.msg == 'Corect') {
                    $("#myform").unbind('submit');
                    document.myform.submit();

                } else {
                    if (data.msg == 'email') {
                        var x = document.getElementById("feedback2");
                        if (x.style.display === "none") {
                            x.style.display = "block";
                        }
                    } else {
                        var x = document.getElementById("feedback");
                        if (x.style.display === "none") {
                            x.style.display = "block";
                        }

                    }
                }
                // JSON.stringify(data, null, 4);


                $("#btn-login").prop("disabled", false);

            },
            error: function (e) {

                var json = "<h4>Ajax Response Error</h4><pre>"
                    + e.responseText + "</pre>";
                $('#feedback').html(json);

                console.log("ERROR : ", e);
                $("#btn-login").prop("disabled", false);

            }
        });

    });

    $("#symbol").click(function () {
        $("#feedback").css('display', 'none');
    });
    $("#symbol2").click(function () {
        $("#feedback2").css('display', 'none');
    });


    $("#password").click(function () {
        if ($("#feedback").css('display') == 'block') {
            $("#feedback").css('display', 'none');
        }
        if ($("#feedback2").css('display') == 'block') {
            $("#feedback2").css('display', 'none');
        }
    });
    $("#username").click(function () {
        if ($("#feedback").css('display') == 'block') {
            $("#feedback").css('display', 'none');
        }
        if ($("#feedback2").css('display') == 'block') {
            $("#feedback2").css('display', 'none');
        }
    });

</script>
<script th:src="@{/scripts/alert.js}"></script>
</body>
</html>