{{extends "/admin/common/base"}}

{{block title()}}登录 - Doak CMS{{end}}

{{block body()}}
<style>
.login-captcha img {
    width: 100%;
    cursor: pointer;
}
</style>

<div class="container-fluid">
    <div class="row h-100 align-items-center justify-content-center" style="min-height: 100vh;">
        <div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
            <div class="bg-light rounded p-4 p-sm-5 my-4 mx-3">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <a href="javascript:;" class="">
                        <h3 class="text-primary">DoakCMS</h3>
                    </a>
                    <h3>登录</h3>
                </div>
                
                <div class="form-floating mb-3">
                    <input type="text" 
                        class="form-control" 
                        id="floatingUsername" 
                        placeholder="账号">
                    <label for="floatingUsername">账号</label>
                </div>
                
                <div class="form-floating mb-4">
                    <input type="password" 
                        class="form-control" 
                        id="floatingPassword" 
                        placeholder="密码">
                    <label for="floatingPassword">密码</label>
                </div>
                
                <div class="form-floating mb-4">
                    <input type="text" 
                        name="captcha" 
                        class="form-control" 
                        id="floatingCaptcha" 
                        placeholder="验证码">
                    <label for="floatingCaptcha">验证码</label>
                </div>
                
                <div class="form-floating mb-4 login-captcha">
                    <img src='{{ adminUrl("captcha") }}'
                        class="js-captcha-refresh"
                        data-src='{{ adminUrl("captcha") }}'
                        alt="验证码" 
                        title="刷新验证码">
                </div>
                
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div class="form-check">
                        <input type="checkbox" 
                            name="rememberme" 
                            class="form-check-input" 
                            id="rememberme">
                        <label class="form-check-label" for="rememberme">记住密码</label>
                    </div>
                </div>
                
                <button type="submit" 
                    class="btn btn-primary py-3 w-100 mb-4 js-login-button">登录</button>
            </div>
        </div>
    </div>
</div>
{{end}}

{{block script()}}
<script src="/static/admin/js/bootstrap.bundle.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/jquery-3.4.1.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/easing.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/waypoints.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/owl.carousel.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/moment.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/moment-timezone.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/tempusdominus-bootstrap-4.min.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/layer/layer.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>

<script src="/static/admin/js/main.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src="/static/admin/js/rocket-loader.min.js" data-cf-settings="3029259e35d7bc1c98cd40a8-|49" defer=""></script>

<script type="3029259e35d7bc1c98cd40a8-text/javascript">
(function($) {
    "use strict";
    
    // 刷新验证码
    $(".js-captcha-refresh").click(function(e) {
        e.stopPropagation;
        e.preventDefault;
        
        var url = $(this).data("src") + "?t=" + Math.random();
        $(this).attr("src", url);
    });
    
    // 登录
    $(".js-login-button").click(function(e) {
        e.stopPropagation;
        e.preventDefault;

        var username = $("#floatingUsername").val();
        var password = $("#floatingPassword").val();
        var captcha = $("#floatingCaptcha").val();
        var rememberme = $("#rememberme").is(":checked") ? 1 : 0;

        var url = '{{ adminUrl("login") }}';
        $.post(url, {
            username: username,
            password: password,
            captcha: captcha,
            rememberme: rememberme,
        }, function(data) {
            if (data.code == 0) {
                layer.msg("登录成功");
                
                setTimeout(function() {
                    window.location.href = '{{ adminUrl("") }}';
                }, 1500);
            } else {
                layer.msg(data.message);
            }
        }).fail(function (xhr, status, info) {
            layer.msg("请求失败");
        });
    });
})(jQuery);
</script>
{{end}}