{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <script src="{% static '/js/jquery.js' %}"></script>
    <script src="{% static '/js/layui/layui.js' %}"></script>
    <script src="{% static '/js/qs.js' %}"></script>
    <script src="{% static '/js/axios.js' %}"></script>
    <title>管理员登陆</title>
</head>

<body>
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>管理员登陆</h2>
                    <form class="layui-form">
                        <div class="inputBox">
                            <input type="text" name="username" placeholder="用户名">

                        </div>
                        <div class="inputBox">
                            <input type="password" name="password" placeholder="密码">

                        </div>
                        <div class="inputBox">
                            <input type="submit" lay-submit lay-filter="login"  value="登录">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>
 <script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form,
            layer = layui.layer;

        // 监听提交
        form.on('submit(login)', function(data){
            axios.post('/admin/', data.field)
            .then(function (response) {
                // 登录成功
                if(response.data.status === 'success'){
                    layer.msg('登录成功', {icon: 1, time: 1000}, function(){
                        window.location.href = 'admin_dashboard/'
                    });
                } else {
                    // 登录失败
                    layer.msg(response.data.message, {icon: 2});
                }
            })
            .catch(function (error) {
                console.error(error);
                layer.msg('登录请求失败', {icon: 2});
            });

            return false; // 阻止表单跳转
        });
    });
    </script>
</html>
