<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="description" content="bluewind-boot后台权限管理系统"/>
    <meta http-equiv="keywords" content="蓝风软件,后台管理,权限管理,Java,SpringBoot,后台权限管理"/>
    <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/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/aj-captcha/css/verify.css}">
    <link rel="stylesheet" th:href="@{/css/login_v3.css}" media="all">

    <!--[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]-->

</head>
<body>
<div id="content"></div>
<div id="moniclick"></div>
<div id="app">
    <div id="VIEW-login" lay-title="登录">
        <div class="login-wrap">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 align-center">
                        <div class="layui-logo"><span>blue<b>wind</b>&nbsp;boot</span></div>
                    </div>
                    <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4">
                        <div class="layui-form" lay-filter="login-form">
                            <!--切换模块-->
                            <ul class="login-type-tab">
                                <li login-type="password" class="active">密码登录</li>
                                <li login-type="phonecode">手机登录</li>
                                <li login-type="qrcode" class="float-right layui-hide-xs" lay-tips="扫码登录">
                                <span class="qrcode-icon">
                                    <i class="fa fa-qrcode" aria-hidden="true"></i>
                                </span>
                                </li>
                            </ul>
                            <!--二维码显示模块-->
                            <div class="qrcode-block">
                                <div class="qrcode qrcode-image"></div>
                                <p class="p1">1扫即登录，方便又安全</p>
                                <p class="p2">使用 企业微信 扫码登录</p>
                            </div>
                            <!--常规表单登陆显示模块-->
                            <div class="normal-login-form">
                                <!--用户名div-->
                                <div class="layui-form-item username-block">
                                    <label class="layui-icon label-icon layui-icon-username"></label>
                                    <input type="text" name="username" id="username" value="" placeholder="用户名"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <!--密码div-->
                                <div class="layui-form-item password-block">
                                    <label class="layui-icon label-icon layui-icon-password"></label>
                                    <input type="password" name="password" id="password" value="" placeholder="密码"
                                           autocomplete="off" class="layui-input">
                                </div>

                                <!--手机号div-->
                                <div class="layui-form-item telephone-block">
                                    <label class="layui-icon label-icon layui-icon-cellphone"></label>
                                    <input type="text" name="telephone" value="" placeholder="手机号码" maxlength="11"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <!--图形验证码div-->
                                <div class="layui-form-item verify-block">
                                    <div class="layui-row">
                                        <div class="layui-col-xs8">
                                            <label class="layui-icon label-icon layui-icon-vercode"></label>
                                            <input type="text" name="verifyCode" maxlength="4" placeholder="图形验证码"
                                                   class="layui-input" autocomplete="off">
                                        </div>
                                        <div class="layui-col-xs4">
                                            <img class="codeimg" alt="看不清? 点击刷新" title="看不清? 点击刷新"/>
                                        </div>
                                    </div>
                                </div>
                                <!--手机验证码div-->
                                <div class="layui-form-item phonecode-block">
                                    <label class="layui-icon label-icon layui-icon-cellphone"></label>
                                    <input type="text" name="smsCode" maxlength="4" placeholder="手机验证码"
                                           class="layui-input" autocomplete="off">
                                    <button class="layui-btn layui-btn-danger layui-btn-sm sendsms layui-btn-disabled">
                                        获取验证码
                                    </button>
                                </div>

                                <!--记住密码div-->
                                <div class="layui-form-item rememberme-block">
                                    <input type="checkbox" name="rememberMe" id="rememberMe" title="记住密码"
                                           lay-skin="primary">
                                </div>
                                <!--登陆按钮div-->
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                            lay-filter="login-submit" id="login-submit">
                                        <i style="display: none"
                                           class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                                        <span class="btn-text">立即登录</span>
                                    </button>
                                </div>
                                <!--两个链接div-->
                                <div class="layui-form-item">
                                    <a lay-href="/admin/register" th:href="@{'/admin/register'}">注册账号</a>
                                    &nbsp;&nbsp;
                                    <a style="margin-right:10px;" lay-href="/user/forget">忘记密码？</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="footer">
    <ul class="enterprise">
        <li>
            <a target="_blank" href="javascript:void(0)">服务协议<span class="padding-5">|</span></a>
        </li>
        <li>
            <a target="_blank" href="javascript:void(0)">法律声明<span class="padding-5">|</span></a>
        </li>
        <li>
            <a target="_blank" href="javascript:void(0)">知识产权<span class="padding-5">|</span></a>
        </li>
        <li>
            <a target="_blank" href="javascript:void(0)">客户服务<span class="padding-5">|</span></a>
        </li>
        <li>
            <a target="_blank" href="javascript:void(0)">合作洽谈</a>
        </li>
    </ul>

    <p>
        Copyright© 2021-2022 bluewind 版权所有<span class="padding-5">|</span>
        <a target="_blank" href="https://beian.miit.gov.cn/">鲁ICP备20033216号</a>
    </p>
</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 th:src="@{/lib/jq-module/qrcode/jquery.qrcode.min.js}" charset="utf-8"></script>

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

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

        // 根据localStorage的值判断是否设置了记住密码
        if (localStorage.getItem("bluewindbootsign") == "rememberMe") {
            console.log("设置成勾选");
            // 设置成勾选
            $("#rememberMe").prop("checked", true);
            // 在每一次对layui组件select,checkbox等操作后还得再进行渲染一遍才行，这里太坑了
            form.render();
        }
        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");
        }


        // 标记当前登陆类型
        var currentLoginType = 'password';
        // 发送短信验证码的按钮
        var viewSendsmsBtn = $('.sendsms');
        // 标记发送短信验证码的按钮的状态
        var smsCountdown = false;

        // 注册li切换模块，根据不同的选择显示不同的登陆选项
        var viewTabBtn = $('.login-type-tab li');
        viewTabBtn.click(function () {
            var type = $(this).attr('login-type');
            $(this).addClass('active').siblings().removeClass('active');
            console.log(type)
            var qrcode_block = $('.qrcode-block');
            var normal_login_form = $('.normal-login-form');
            var username_block = $('.username-block');
            var password_block = $('.password-block');
            var telephone_block = $('.telephone-block');
            var verify_block = $('.verify-block');
            var phonecode_block = $('.phonecode-block');
            var rememberme_block = $('.rememberme-block');


            if (type == 'password') {
                currentLoginType = 'password';
                normal_login_form.show();
                qrcode_block.hide();
                username_block.css('display', 'block');
                password_block.css('display', 'block');
                rememberme_block.css('display', 'block');
                verify_block.css('display', 'none');
                telephone_block.css('display', 'none');
                phonecode_block.css('display', 'none');
            } else if (type == 'phonecode') {
                currentLoginType = 'phonecode';
                normal_login_form.show();
                qrcode_block.hide();
                username_block.css('display', 'none');
                password_block.css('display', 'none');
                rememberme_block.css('display', 'none');
                verify_block.css('display', 'block');
                telephone_block.css('display', 'block');
                phonecode_block.css('display', 'block');
            } else if (type == 'qrcode') {
                currentLoginType = 'qrcode';
                qrcode_block.show();
                normal_login_form.hide();
                createQrcode();
            }
        });


        // 根据初始化的登陆类型，主动触发登陆界面的切换
        if (currentLoginType !== 'password') {
            viewTabBtn.each(function (i) {
                var elem = viewTabBtn.eq(i);
                if (elem.attr('login-type') === currentLoginType) {
                    elem.click();
                }
            });
        }

        // 监听手机号和图形验证码的input输入框，校验输入内容格式，然后切换获取验证码按钮的状态（格式正确时，才允许点击）
        var viewPhoneInput = $('input[name="telephone"]');
        var viewImgVerifyInput = $('input[name="verifyCode"]');
        viewPhoneInput.on('keyup', checkSendsmsStatus);
        viewImgVerifyInput.on('keyup', checkSendsmsStatus);

        function checkSendsmsStatus() {
            if (currentLoginType != 'phonecode') {
                return;
            }
            var reg = layui.form.config.verify.phone[0];
            if (smsCountdown == false && reg.test(viewPhoneInput.val()) && viewImgVerifyInput.val().length == 4) {
                viewSendsmsBtn.removeClass('layui-btn-disabled');
            } else {
                viewSendsmsBtn.addClass('layui-btn-disabled');
            }
        }

        // 二维码生成模块，暂时未做具体逻辑实现
        var viewQrcode = $(".qrcode-image");

        function createQrcode() {
            // 重置 viewQrcode这个DIV里的内容，相当于销毁了一次二维码，防止二维码重复生成的bug
            viewQrcode.html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>');
            setTimeout(function () {
                var qrcode = viewQrcode.qrcode({
                    render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                    text: utf16to8("http://www.layui.com"), //二维码的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                    width: "160", //二维码宽度
                    height: "160", //二维码高度
                    background: "#ffffff", //二维码后景色
                    foreground: "#000000", //二维码前景色
                });
                viewQrcode.find('.layui-icon').hide();
            }, 500);
        }


        // 发送短信验证码的按钮的点击事件
        viewSendsmsBtn.click(function () {
            var self = $(this);
            if (self.hasClass('layui-btn-disabled')) {
                return;
            }
            self.addClass('layui-btn-disabled');

            var defHtml = self.html();
            var startTime = new Date().getTime();
            var endTime = startTime + 59000;
            smsCountdown = true;
            util.countdown(endTime, startTime, function (date, time, timer) {
                var second = date[3];
                self.html(second + ' 秒');
                if (second <= 0) {
                    self.removeClass('layui-btn-disabled').html(defHtml);
                    smsCountdown = false;
                    clearInterval(timer);
                }
            });
        });


        // 初始化行为验证码-弹出式
        $('#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 () {
            }        //失败的回调
        });


        // 提交登录表单
        form.on('submit(login-submit)', function (data) {
            // 当模式为密码登陆时
            if (currentLoginType == 'password') {
                let formdata = data.field;
                if (formdata.username == '') {
                    layer.msg('用户名不能为空');
                    return false;
                }
                if (formdata.password == '') {
                    layer.msg('密码不能为空');
                    return false;
                }
                // 判断rememberMe是否选中
                if ($('#rememberMe').prop('checked')) {
                    localStorage.setItem("username", formdata.username, "7d");
                    localStorage.setItem("password", formdata.password, "7d");
                    localStorage.setItem("bluewindbootsign", "rememberMe", "7d");
                } else {
                    localStorage.removeItem("username");
                    localStorage.removeItem("password");
                    localStorage.removeItem("bluewindbootsign");
                }
                // 手动触发滑动验证码事件
                document.getElementById("moniclick").click();
            } else {
                layer.msg('手机号登陆暂未支持，敬请期待');
            }

            return false;
        });


        /**
         * 密码登陆模式的执行操作
         * @param data
         */
        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: "请求失败，请联系系统管理员！"
                    });
                }
            });
        }


        // 登陆中
        function logining() {
            var button = $('.layui-btn-fluid');
            var loading = button.find('.layui-icon');
            var btntext = button.find('.btn-text');
            if (loading.is(":visible")) {
                return;
            }
            if (button.hasClass('layui-btn-disabled')) {
                return;
            }
            // 设置按钮为不可点击状态
            button.addClass('layui-btn-disabled');
            // 改变按钮文字
            btntext.text('正在登录');
            // 设置loading图标为显示状态
            loading.show();
        }

        // 登陆后
        function loginend() {
            var button = $('.layui-btn-fluid');
            var loading = button.find('.layui-icon');
            var btntext = button.find('.btn-text');
            // 恢复登陆按钮状态和loading图标状态
            button.removeClass('layui-btn-disabled');
            btntext.text('立即登录');
            loading.hide();
        }


        // 文字验证码初始化（短信登陆）
        let kaptcha_key = [[${kaptcha_key}]];
        getKaptcha(kaptcha_key);

        // 文字验证码点击事件（短信登陆）
        $(".codeimg").click(function () {
            let kaptcha_key = [[${kaptcha_key}]];
            getKaptcha(kaptcha_key);
        });

        // 获取文字验证码（短信登陆）
        function getKaptcha(kaptcha_key) {
            AjaxUtil.get({
                url: AjaxUtil.ctx + "kaptcha/getImage?kaptcha_key=" + kaptcha_key,
                dataType: "text",
                success: function (result) {
                    $(".codeimg").attr("src", result);
                },
                error: function (error) {
                    layNotify.notice({
                        title: "提示",
                        type: "warning",
                        message: "获取验证码错误，请联系系统管理员!"
                    });
                }
            });
        }


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

    /**
     * 防止二维码内容乱码
     * @param str
     * @returns {string}
     */
    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }
</script>

</body>
</html>