<!--
* Copyright (c) 2020-Now http://www.j2eefast.com All rights reserved.
* No deletion without permission
* @author ZhouZhou
* @version 2020-09-28
-->
<#include "/common/defaultEngine.html">
<@pageTheme mark="true">
<!DOCTYPE html>
<html lang="zh-CN" class="" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<#import "/common/springctx.ftl" as ctx>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录 - J2eeFAST J2eefast.com</title>
    <link href="${ctxStatic}/static/img/favicon.ico" rel="shortcut icon">
    <meta name="keywords" content="PoweredByJ2eeFast"/>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <#-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="${ctxStatic}/static/css/bootstrap.min.css">
    <#-- Font Awesome -->
    <link rel="stylesheet" href="${ctxStatic}/static/css/font-awesome.min.css">
    <#--animate 样式-->
    <link rel="stylesheet" href="${ctxStatic}/static/css/animate.min.css"/>
    <link rel="stylesheet" href="${ctxStatic}/static/css/style.min.css?V=${config.getDvVersion()}">
    <link rel="stylesheet" href="${ctxStatic}/static/css/index.min.css?V=${config.getDvVersion()}">
    <link href="${ctxStatic}/static/css/login2.min.css" media="screen" rel="stylesheet">
    <#-- iCheck -->
    <link rel="stylesheet" href="${ctxStatic}/static/css/iCheck/all.css">
    <#if verification>
    <link rel="stylesheet" href="${ctxStatic}/static/plugins/captcha/css/verify.min.css">
    </#if>
    <style>[v-cloak]{display:none !important;}
        <#--.login-body {-->
        <#--    background-image: url(${ctxStatic}/static/img/login/bg4.jpg);-->
        <#--    background-repeat: no-repeat;-->
        <#--    background-size:100% 100%;-->
        <#--}-->
        .footer-item, .footer-item a{
            color: #000;
        }
        .footer-item a:hover{
            color:#00a0e9;
        }
    </style>
    </head>
<body class="login-body">
<#include "/common/notice.html">
<#include "/common/upgrade.html"><!-- 如果客户浏览器版本过低，则显示浏览器升级提示-->
<#--<div id="canvas" style="position: absolute; z-index: -100; top: 0px;width: 100%; height: 98%">-->
<#--</div>-->
<!-- /content -->
<div id="verfyImg">
</div>
<div class="login-content">
    <div class="login-wrapper animated fadeInLeft" id="app" v-cloak>
        <div class="ui container">
            <div class="login__body">
                <div class="login-sidebox">
                    <div class="login-sidebox__container">
                        <div class="login-sidebox__header">
                            <div class="login-sidebox__logo">
                            </div>
                            <h1 class="login-sidebox__title">
                            </h1>
                            <h2 class="login-sidebox__subtitle">
                                ${config.getTitle()}
                            </h2>
                        </div>
                        <div class="login-sidebox__content">
                            <div class="login-sidebox-content__container">
                                <div class="login-sidebox-comments__header"> <span class="login-sidebox-comments__title">当前版本:</span>
                                    <span class="login-sidebox-comments__position">V${config.getVersion()}</span>
                                </div>
                                <div class="login-sidebox-comments__content">
                                    J2eeFAST是一个Java EE企业级快速开发平台，<strong>致力于打造中小企业最好用的开源免费的后台框架平台</strong>。
                                    系统基于(Spring Boot、Spring MVC、Apache Shiro、MyBatis-Plus、Freemarker、Bootstrap、AdminLTE)经典技术开发，
                                    系统内置核心模块包含众多常用基础功能(在线代码生成功能、组织机构、角色用户、菜单及按钮授权、数据权限、系统参数、license认证、BPM工作流等)，
                                    <strong>让你用最低的成本、最高的效率，开发项目，她也适合新手朋友练手</strong>。同时具备，<strong>界面简洁美观、高效、安全、源码可控、版本迭代快、免费技术交流群</strong>等特点。她适用于所有Web应用，她会成为你快速开发项目的好帮手。
                                </div>
                            </div>
                        </div>
                        <div class="login-sidebox__footer">
                            <a href="https://www.yuque.com/u1174484/j2eefast/tv3kee" target="_blank"><strong class="login-sidebox__icon-hot">帮助文档</strong>
                                <span class="login-sidebox__divider">-</span>
                                语雀 文档
                                <i class="iconfont icon-arrow-circle-right "></i>
                            </a>
                        </div>
                    </div>

                </div>
                <div class="login-form">
                    <div class="login-form__container is-login">
                        <header class="login-form__header">
                            <h2 class="login-form__title">
                                <span><@ctx.i18n text = "欢迎登录"/></span>
                            </h2>
                            <span class="pull-right">
<#--                                没有帐号？<a href="#">点此注册</a>-->
                            </span>
                        </header>
                        <div class="login__flash-error">
                            <div id="msg_error" class="ui message error" style="visibility: hidden">错误提示</div>
                        </div>
                        <form accept-charset="UTF-8" action="${ctxStatic}/login" class="ui custom form login__control login-login__form login-login__with-password "
                            method="post"  autocomplete="off">
                            <div class="login-login__body">
                                <div class="login-form__fields">
                                    <div class="git-login-form-fields">
                                        <div class="field">
                                            <input class="login-password__account-input" id="username" v-model="username" placeholder="<@ctx.i18n text = "账号/邮箱/手机号码"/>" type="text">
                                        </div>
                                        <div class="field">
                                            <input autocomplete="off" id="password" v-model="password" placeholder="<@ctx.i18n text = "密码"/>" type="password">
                                        </div>
                                        <div v-if="loadcode" class="field">
                                            <div class="ui right labeled input captcha-labeled">
                                                <input v-model="captcha" placeholder="<@ctx.i18n text = "验证码"/>" type="text">
                                                <div class="ui basic orange button login__captcha-button" copyright="J2eeFAST" :style="src"  @click="refreshCode">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fields">
                                            <div class="field">
                                                <div class="checkbox">
                                                    <label title="<@ctx.i18n text = "公共场所慎用,下次登录免输账号"/>" data-toggle="tooltip" data-placement="bottom">
                                                        <input type="checkbox" name="rememberUserCode" data-style="minimal-grey" />&nbsp;<@ctx.i18n text = "记住账号"/>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="field">
<#--                                            <a class="login__toggle-button" data-control="phone" href="https://gitee.com/login">短信验证登录</a>-->
                                                <#if rememberMe>
                                                    <div class="checkbox">
                                                        <label title="<@ctx.i18n text = "公共场所慎用,下次登录免输账号、密码"/>">
                                                            <input type="checkbox" name="rememberme" v-model="rememberme" data-style="minimal-grey"> <@ctx.i18n text = "自动登录"/>
                                                        </label>
                                                    </div>
                                                </#if>
                                            </div>
                                        </div>
                                        <div class="field">
                                            <input class="ui fluid orange submit button large" @click="login" data-loading="正在验证登录，请稍后..." type="button" value="<@ctx.i18n text = "登 录"/>">
                                        </div>
<#--                                        <div class="field text-center">-->
<#--&lt;#&ndash;                                            <a class="forget-password" href="https://gitee.com/password/new">已有帐号，忘记密码？</a>&ndash;&gt;-->
<#--                                        </div>-->
                                        <div class="dropdown pull-right">
                                            <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                                                <i class="fa fa-language"></i>&nbsp;<@ctx.i18n text = "中文(简体)"/>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li class="mt5"></li>
                                                <#list dict.getType('sys_lang_type')>
                                                    <#items as d>
                                                        <#if d.status =='0' >
                                                            <li><a href="${ctxStatic}/login?_lang=${d.dictValue}&view=${loginView}">${d.dictLabel}</a></li>
                                                        </#if>
                                                    </#items>
                                                </#list>
                                                <li class="mt5"></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="login-login-oauth">
                            <div class="login-login__oschina">
                            </div>
                            <#if config.getKey("SYS_IS_OAUTH") == "0">
                            <div class="login-login-oauth__container">
                                <div class="field">
                                    <div class="ui horizontal divider login-login__oauth-title">
                                        <span class="text-muted">
                                            其他方式登录
                                        </span>
                                    </div>
                                </div>
                                <div class="ui horizontal list login-oauth__list">
                                    <div class="item" title="<@ctx.i18n text = "使用 Gitee 账号授权登录"/>" data-toggle="tooltip" data-placement="top">
                                        <a href="${ctxStatic}/auth/gitee">
                                            <img src="${ctxStatic}/static/img/gitee.svg"/>
                                        </a>
                                    </div>
                                    <div class="item" title="<@ctx.i18n text = "使用 GitHub 账号授权登录"/>" data-toggle="tooltip" data-placement="top">
                                        <a href="${ctxStatic}/auth/github">
                                            <img src="${ctxStatic}/static/img/github.svg"/>
                                        </a>
                                    </div>
                                    <div class="item" title="<@ctx.i18n text = "使用 OsChina 账号授权登录"/>" data-toggle="tooltip" data-placement="top">
                                        <a href="${ctxStatic}/auth/oschina">
                                                <img src="${ctxStatic}/static/img/oschina.svg"/>
                                        </a>
                                    </div>
                                    <div class="item" title="<@ctx.i18n text = "功能开发中..."/>" data-toggle="tooltip" data-placement="top">
                                        <a href="#">
                                            <img src="${ctxStatic}/static/img/qq-no.svg"/>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            </#if>
                        </div>
                    </div>


                </div>
            </div>
            <div class="login__footer">
                <span class="footer-item">
                    Copyright &copy; 2018-${config.getCopyrightYear()} ${config.getCompany()}
                </span>
                <span class="footer-item">
                     <a href="https://www.yuque.com/u1174484/j2eefast/tv3kee" target="_blank">帮助文档</a>
                </span>
                <#list dict.getType('sys_login_view')>
                    <#items as d>
                        <#if d.status =='0' >
                            <span class="footer-item">
                                <a href="${ctxStatic}/login?view=${d.dictValue}">${d.dictLabel}</a>
                            </span>
                        </#if>
                    </#items>
                </#list>
            </div>
            <div class="login__footer">
                <span class="login__footer-item">
                    <a href="http://www.beian.miit.gov.cn/" class="text-black" target="_blank">${config.getIPC()}</a>
                </span>
            </div>
        </div>
    </div>
</div>
<#--jQuery 3 -->
<script src="${ctxStatic}/static/libs/jquery.min.js"></script>
<script src="${ctxStatic}/static/libs/jquery-migrate.min.js"></script>
<#-- Bootstrap 3.3.7 -->
<script src="${ctxStatic}/static/libs/bootstrap.min.js"></script>
<script src="${ctxStatic}/static/libs/SM4.min.js?V=${config.getDvVersion()}"></script>
<#-- iCheck -->
<script src="${ctxStatic}/static/libs/icheck.min.js"></script>
<script src="${ctxStatic}/static/libs/vue.min.js"></script>
<#if verification>
<script src="${ctxStatic}/static/plugins/captcha/crypto-js.min.js"></script>
<script src="${ctxStatic}/static/plugins/captcha/ase.min.js"></script>
<script src="${ctxStatic}/static/plugins/captcha/verify.min.js"></script>
<#else>
<script src="${ctxStatic}/static/plugins/blockUI/jquery.blockUI.min.js"></script>
</#if>
<#--<script src="${ctxStatic}/static/libs/jquery.particleground.min.js"></script>-->
<script>var ctx = "${ctxStatic}/", _secretKey = "${_secretKey}";</script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username: '',
            password: '',
            captcha: '',
            /*errorMsg: '',*/
            rememberme : false,
            loadcode : false,
            src: 'captcha.gif'
        },
        beforeCreate: function(){
            if(self != top){
                top.location.href = self.location.href;
            }
        },
        methods: {
            refreshCode: function(){ /*刷新验证码*/
                this.src = 'background: url("'+ctx+"captcha.gif?t=" + $.now()+'") !important';
            },
            _onkeydown : function(e){
                var that = this;
                if(e && e.keyCode==13) { /* enter 键 */
                    that.login();
                }
            },
            login: function (event) {
                var that = this;
                if(this.getCookie("_secretKey") == ""){
                    location.reload();
                    return;
                }
                if(vm.username.length < 3 ||  vm.password.length < 3){
                    return that.errrInfo('<@ctx.i18n text = "账号或者密码输入有误"/>');
                }
                <#if verification>
                $("#verfyImg").find(".mask").css("display","block");
                <#else>
                $(window).block({ message: '<div class="loaderbox"><div class="loading-activity"></div> '
                        + '<@ctx.i18n text = "数据正在认证,请稍后..."/>' + '</div>' });
                var s4=new SM4Util(that.getCookie("_secretKey"));
                var data = {"username":s4.encryptData_ECB(vm.username),
                    "password":s4.encryptData_ECB(vm.password),
                    "captcha":vm.captcha,
                    "rememberMe":vm.rememberme};
                that.postLogin(data,true);
                </#if>
                return;
            },
            errrInfo : function(text){
                var err = $("#msg_error");
                err.html(text);
                err.css('visibility', 'visible');
                err.removeClass('animated bounceOutUp');
                err.addClass('animated bounceInDown');
                setTimeout(
                    function () {
                        err.removeClass('animated bounceInDown');
                        err.addClass('animated bounceOutUp');
                    }
                    , 5000);

            },
            getCookie:function(c_name){
                if (document.cookie.length>0){
                    c_start=document.cookie.indexOf(c_name + "=");
                    if (c_start!=-1){
                        c_start=c_start + c_name.length+1;
                        c_end=document.cookie.indexOf(";",c_start);
                        if (c_end==-1) {
                            c_end=document.cookie.length
                        };
                        return unescape(document.cookie.substring(c_start,c_end))
                    }
                };
                return _secretKey;
            },
            postLogin: function(data,flag){
                $.ajax({
                    type: "POST",
                    url: ctx+"login",
                    data: data,
                    dataType: "json",
                    success: function(result){
                        if(result.code == 0){
                            if($("input[name='rememberUserCode']").is(':checked')){
                                window.localStorage.setItem('rememberUserCode',vm.username);
                            }else{
                                window.localStorage.setItem('rememberUserCode',"");
                            };
                            setTimeout(
                                function () {
                                    location.href = ctx + 'index';
                                }
                                , 100);
                        }else if(result.code == '50004' || result.code == '50006'){
                            if(flag){$(window).unblock()};
                            vm.loadcode = true;
                            vm.errrInfo(result.msg);
                            vm.captcha = '';
                            vm.password = '';
                            vm.refreshCode();
                        }
                        else{
                            if(flag){$(window).unblock()};
                            vm.errrInfo(result.msg);
                            vm.captcha = '';
                            vm.password = '';
                            vm.refreshCode();
                        }
                    }
                });
            }
        },
        mounted :function(){
            var that = this;

            if(window.localStorage.getItem('rememberUserCode') && window.localStorage.getItem('rememberUserCode') != ""){
                $("input[name='rememberUserCode']").iCheck('check');
                this.username = window.localStorage.getItem('rememberUserCode');
            }else{
                $("input[name='rememberUserCode']").iCheck('uncheck');
            }

            /*绑定记住我样式*/
            $("input[type=checkbox]").each(function () {
                $(this).iCheck({
                    checkboxClass: "icheckbox_" + ($(this).data("style") || "square-blue")
                }).on('ifChanged', function(event){
                    if($(this).attr("name") == "rememberme"){
                        if($(this).is(':checked')){
                            vm.rememberme = true;
                        }else{
                            vm.rememberme = false;
                        }
                    }
                });
            });

            /*设置tooltip*/
            $('[data-toggle="tooltip"]').each(function () {
                $(this).tooltip();
            });

            <#if verification>
            /** 初始化验证码  弹出式 */
            $('#verfyImg').slideVerify({
                baseUrl:'${ctxStatic}',
                mode:'pop',
                success : function(params) {
                    var s4=new SM4Util(that.getCookie("_secretKey"));
                    var data = {"username":s4.encryptData_ECB(vm.username),
                        "password":s4.encryptData_ECB(vm.password),
                        "captcha":vm.captcha,
                        "rememberMe":vm.rememberme};
                    data = $.extend(data, params);
                    that.postLogin(data,false);
                },
                error : function() {}
            });
            </#if>

            /*获取页面键盘事件*/
            window.document.onkeydown = that._onkeydown;

            var href= location.href;
            if(href.indexOf("kickout=2")>0){
                that.errrInfo("您被提下线,请重新登陆!");
            };
            if(href.indexOf("kickout=1")>0){
                that.errrInfo("您的账号在另一台设备上登录,如非本人操作，请立即修改密码！");
            };
        }
    });
</script>
</body>
</html>
</@pageTheme>