<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录-Quinn</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/backgroud.css}">
</head>
<body class="text-center">
<div class="container">
    <div class="row">
        <div class="col-md-4" >
        </div>
        <div class="col-md-4 mt-5" id='login_box'>
            <form id="loginForm" class="form-horizontal" method="post" th:action="@{/login}" novalidate>
                <div class="justify-content-center">
                    <h1>登录<small style="font-size: small">Quinn</small></h1>
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input id="username" name="username" class="form-control" placeholder="用户名" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input id="password" type="password" name="password" class="form-control" placeholder="密码" required>
                </div>
                <div class="checkbox float-left mb-3">
                    <label>
                        <input type="checkbox" name="remember-me"> 记住密码
                    </label>
                </div>
                <button class="btn btn-dark btn-block" type="button" onclick="loginSubmit()">登 录</button>
                <p class="mt-1 clearfix">
                    <a style="color: white" th:href="@{/register}" class="float-right text-decoration-none">没有账号？去注册</a>
                </p>
            </form>
        </div>
        <div class="col-md-4" >
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/layer/mobile/layer.js}"></script>
<script type="text/javascript">
    function loginSubmit(){
        let username = $('#username').val();
        let password = $('#password').val();
        if (!username){
            layer.open({ content: '用户名不能为空', skin: 'msg', time: 2 });
            return;
        }
        if (!password){
            layer.open({ content: '密码不能为空', skin: 'msg', time: 2 });
            return;
        }
        if (username && password){
            $.ajax({
                url: "/checkLogin",
                async: false,
                type: "post",
                data: {"username":username,"password":password},
                success: function (data) {
                    if(data == 'ok') {
                        this.disabled = true;
                        $('#loginForm').submit();
                    }else {
                        layer.open({ content: '用户名不存在或密码有误', skin: 'msg', time: 2 });
                    }
                },
                fail: function (error){
                    layer.open({ content: error, skin: 'msg', time: 2 });
                }
            })
        }
    }
</script>
</body>
</html>
