<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/aj-captcha/css/verify.css}">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style th:inline="text">
        .main-body {
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

        .login-main .login-bottom .center .item input {
            display: inline-block;
            width: 227px;
            height: 22px;
            padding: 0;
            position: absolute;
            border: 0;
            outline: 0;
            font-size: 14px;
            letter-spacing: 0;
        }

        .login-main .login-bottom .center .item .icon-1 {
            background: url("[[@{/}]]images/icon-login.png") no-repeat 1px 0;
        }

        .login-main .login-bottom .center .item .icon-2 {
            background: url("[[@{/}]]images/icon-login.png") no-repeat -54px 0;
        }

        .login-main .login-bottom .center .item .icon-3 {
            background: url("[[@{/}]]images/icon-login.png") no-repeat -106px 0;
        }

        .login-main .login-bottom .center .item .icon-4 {
            background: url("[[@{/}]]images/icon-login.png") no-repeat 0 -43px;
            position: absolute;
            right: -10px;
            cursor: pointer;
        }

        .login-main .login-bottom .center .item .icon-5 {
            background: url("[[@{/}]]images/icon-login.png") no-repeat -55px -43px;
        }

        .login-main .login-bottom .center .item .icon-6 {
            background: url("[[@{/}]]images/icon-login.png") no-repeat 0 -93px;
            position: absolute;
            right: -10px;
            margin-top: 8px;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .icon-nocheck {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            border: solid 1px #9abcda;
            position: relative;
            top: 2px;
            margin: 1px 8px 1px 1px;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .icon-checked {
            margin: 0 7px 0 0;
            width: 14px;
            height: 14px;
            border: none;
            background: url("[[@{/}]]images/icon-login.png") no-repeat -111px -48px;
        }

        .login-main .login-bottom .center .item .icon {
            display: inline-block;
            width: 33px;
            height: 22px;
        }

        .login-main .login-bottom .center .item {
            width: 288px;
            height: 35px;
            border-bottom: 1px solid #dae1e6;
            margin-bottom: 35px;
        }

        .login-main {
            width: 428px;
            position: relative;
            float: left;
        }

        .login-main .login-top {
            height: 117px;
            background-color: #148be4;
            border-radius: 12px 12px 0 0;
            font-family: SourceHanSansCN-Regular;
            font-size: 30px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #fff;
            line-height: 117px;
            text-align: center;
            overflow: hidden;
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }

        .login-main .login-top .bg1 {
            display: inline-block;
            width: 74px;
            height: 74px;
            background: #fff;
            opacity: .1;
            border-radius: 0 74px 0 0;
            position: absolute;
            left: 0;
            top: 43px;
        }

        .login-main .login-top .bg2 {
            display: inline-block;
            width: 94px;
            height: 94px;
            background: #fff;
            opacity: .1;
            border-radius: 50%;
            position: absolute;
            right: -16px;
            top: -16px;
        }

        .login-main .login-bottom {
            width: 428px;
            background: #fff;
            border-radius: 0 0 12px 12px;
            padding-bottom: 53px;
        }

        .login-main .login-bottom .center {
            width: 288px;
            margin: 0 auto;
            padding-top: 40px;
            padding-bottom: 15px;
            position: relative;
        }

        .login-main .login-bottom .tip {
            clear: both;
            height: 16px;
            line-height: 16px;
            width: 288px;
            margin: 0 auto;
        }

        body {
            /*background: url("[[@{/}]]images/loginbg.png") 0% 0% / cover no-repeat;*/
            background-color: #252834;
            position: static;
            font-size: 12px;
        }

        input::-webkit-input-placeholder {
            color: #a6aebf;
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #a6aebf;
        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #a6aebf;
        }

        input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #a6aebf;
        }

        input:-webkit-autofill { /* 取消Chrome记住密码的背景颜色 */
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
        }

        html {
            height: 100%;
        }

        .login-main .login-bottom .tip {
            clear: both;
            height: 16px;
            line-height: 16px;
            width: 288px;
            margin: 0 auto;
        }

        .login-main .login-bottom .tip .login-tip {
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #9abcda;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .forget-password {
            font-stretch: normal;
            letter-spacing: 0;
            color: #1391ff;
            text-decoration: none;
            position: absolute;
            right: 62px;
        }

        .login-main .login-bottom .login-btn {
            width: 288px;
            height: 40px;
            background-color: #1E9FFF;
            border-radius: 16px;
            margin: 24px auto 0;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            letter-spacing: 0;
            cursor: pointer;
            border: none;
        }

        .login-main .login-bottom .center .item .validateImg {
            position: absolute;
            right: 1px;
            cursor: pointer;
            height: 36px;
            border: 1px solid #fff;
        }

        .footer {
            left: 0;
            bottom: 0;
            color: #fff;
            width: 100%;
            position: absolute;
            text-align: center;
            line-height: 30px;
            padding-bottom: 10px;
            text-shadow: #000 0.1em 0.1em 0.1em;
            font-size: 14px;
        }

        .padding-5 {
            padding: 5px !important;
        }

        .footer a, .footer span {
            color: #fff;
        }

        @media screen and (max-width: 428px) {
            .login-main {
                width: 360px !important;
            }

            .login-main .login-top {
                width: 360px !important;
            }

            .login-main .login-bottom {
                width: 360px !important;
            }
        }
    </style>

</head>
<body>
<div id="content"></div>
<div id="moniclick"></div>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>后台登录</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入登录账号"
                           maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码"
                           maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>

            </div>
            <div class="tip">
                <span class="icon-nocheck"></span>
                <span class="login-tip">记住密码</span>
                <a href="javascript:" class="forget-password">忘记密码？</a>
            </div>
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button id="btn_login" class="login-btn" lay-submit lay-filter="login">
                    <span id="btn_msg">登 录</span>&nbsp;
                    <i id="btn_load" class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                       style="display: none">&#xe63d;</i>
                </button>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    Copyright© 2020-2021 bluewind-boot 版权所有<span class="padding-5">|</span>
    <a target="_blank" href="https://beian.miit.gov.cn/">鲁ICP备20033216号</a>
</div>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<!-- 滑动验证码验证插件 -->
<script th:src="@{/lib/aj-captcha/js/crypto-js.js}" charset="utf-8"></script>
<script th:src="@{/lib/aj-captcha/js/ase.js}" charset="utf-8"></script>
<script th:src="@{/lib/aj-captcha/js/verify.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/''
    layui.use(['form', 'layNotify'], function () {
        var form = layui.form,
            layNotify = layui.layNotify;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) {
            top.location = self.location;
        }

        // 初始化验证码-弹出式
        $('#content').slideVerify({
            baseUrl: AjaxUtil.ctx,  //服务器请求地址, 默认地址为安吉服务器;
            mode: 'pop',     //展示模式
            containerId: 'moniclick',//pop模式 必填 被点击之后出现行为验证码的元素id
            imgSize: {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
                width: '400px',
                height: '200px',
            },
            barSize: {         //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
                width: '400px',
                height: '40px',
            },
            ready: function () {
            },  //加载完毕的回调
            success: function (params) { //成功的回调
                console.log(params);

                var username = $("input[name='username']").val();
                var password = $("input[name='password']").val();
                // 加密输入的密码
                password = md5.MD5(password);

                let data = {
                    "username": username,
                    "password": password,
                    "captchaVerification": params.captchaVerification
                }
                // 一秒后，再执行登陆操作，用户体验较好
                setTimeout(function () {
                    doLogin(data);
                }, 1000);
            },
            error: function () {
            }        //失败的回调
        });


        // 切换密码显示和隐藏
        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        // 切换记住密码的选择
        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-checked')) {
                $(this).removeClass('icon-checked');
            } else {
                $(this).addClass('icon-checked');
            }
        });

        if (localStorage.getItem("wowosign") == "rememberMe") {
            console.log("设置成勾选");
            // 设置成勾选
            $('.icon-nocheck').addClass('icon-checked');
        }
        if (localStorage.getItem("username") && localStorage.getItem("password")) {
            console.log("浏览器记住，自动填入账号密码，" + localStorage.getItem("username"))
            $("#username").val(localStorage.getItem("username"));
            $("#password").val(localStorage.getItem("password"));
        } else {
            console.log("不存在localStorage");
        }

        // 进行登录操作
        form.on('submit(login)', function (data) {
            let formdata = data.field;
            if (formdata.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (formdata.password == '') {
                layer.msg('密码不能为空');
                return false;
            }

            // 未选中时，formdata.rememberMe的值为undefined
            if ($('.icon-nocheck').hasClass('icon-check')) {
                localStorage.setItem("username", formdata.username, "7d");
                localStorage.setItem("password", formdata.password, "7d");
                localStorage.setItem("wowosign", "rememberMe", "7d");
            } else {
                localStorage.removeItem("username");
                localStorage.removeItem("password");
                localStorage.removeItem("wowosign");
            }

            // 手动触发滑动验证码事件
            document.getElementById("moniclick").click();
            //阻止表单跳转,layui默认是form提交,阻止掉
            return false;
        });


        // 键盘回车登录
        $('body').keydown(function () {
            if (13 == event.keyCode) {
                $('#btn_login').trigger('click');
            }
        });

        // 登陆中
        function logining() {
            document.getElementById("btn_login").setAttribute("disabled", true);//设置不可点击
            document.getElementById("btn_login").style.backgroundColor = '#9abcda';
            document.getElementById("btn_msg").innerText = '登 录 中';
            document.getElementById("btn_load").style.display = "inline-block";
        }

        // 登陆后
        function loginend() {
            document.getElementById("btn_login").removeAttribute("disabled");//去掉不可点击
            document.getElementById("btn_login").style.backgroundColor = '#1E9FFF';
            document.getElementById("btn_msg").innerText = '登 录';
            document.getElementById("btn_load").style.display = "none";
        }

        function doLogin(data) {
            // 设置按钮为登陆中，此时禁止点击
            logining();

            AjaxUtil.post({
                contentType: "application/x-www-form-urlencoded", // 默认就是这个
                url: AjaxUtil.ctx + "admin/doLogin",
                data: data,
                success: function (res) {
                    if (res.code === 0) {
                        layNotify.notice({
                            title: "登录提示",
                            type: "success",
                            message: res.message
                        });
                        setTimeout(function () {
                            window.location.href = AjaxUtil.ctx + "admin/index";
                        }, 1000);
                    } else {
                        loginend();
                        layNotify.notice({
                            title: "登录提示",
                            type: "warning",
                            message: res.message
                        });
                        document.getElementById("ver_btn").click();
                        document.getElementById("captcha").value = '';
                    }
                },
                error: function (error) {
                    loginend();
                    layNotify.notice({
                        title: "登录提示",
                        type: "error",
                        message: "请求失败，请联系系统管理员！"
                    });
                }
            });
        }

    });
</script>

</body>
</html>