login.html 12.1 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>登录</title>
    <link
            href="/metronic_v4.5.4/plugins/font-awesome/css/font-awesome.min.css"
            rel="stylesheet" type="text/css" />
    <!-- Bootstrap style -->
    <link href="/metronic_v4.5.4/plugins/bootstrap/css/bootstrap.min.css"
          rel="stylesheet" type="text/css" />

    <!-- METRONIC style -->
    <link href="/metronic_v4.5.4/css/components.css" rel="stylesheet"
          type="text/css" />

    <style type="text/css">
        body>.wrapper {
            background-image: url(/assets/img/bg_9b9dcb65ff.png);
            background-size: 100px;
            background-repeat: repeat;
            min-height: 800px;
            min-width: 630px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #loginPanel.dialog-shadow {
            width: 450px;
            /* height: 400px; */
            border: 1px solid #dadada;
            border-radius: 10px !important;
            position: absolute;
            box-shadow: 0 9px 30px -6px rgba(0, 0, 0, .2), 0 18px 20px -10px
            rgba(0, 0, 0, .04), 0 18px 20px -10px rgba(0, 0, 0, .04), 0 10px 20px
            -10px rgba(0, 0, 0, .04);
            background: url(/assets/img/dialog-gray-bg_42c40b3eb6.png) #fff bottom
            repeat-x;
            top: 50%;
            left: 50%;
            margin-left: -225px;
            margin-top: -300px;
            text-align: center;
            color: #333;
            opacity: .5;

            padding-bottom: 56px;

            animation: to_center 1s forwards;
            animation-delay: .2s;

            transition: all .3s ease;
        }

        @keyframes to_center
        {
            0%   {margin-top: -300px;opacity: .5;}
            100% {margin-top: -270px;opacity: 1;}
        }


        h3 {
            font-size: 25px;
            font-weight: 600;
            color: #4a4a4a
        }

        .input-icon input {
            height: 48px;
            border-radius: 5px !important;
            transition: all .5s ease;
        }

        .input-icon input:FOCUS {
            border-color: #c2cad8;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
        }

        .input-icon>i {
            margin-top: 16px;
        }

        #loginPanel #loginBtn.btn{
            border-radius: 6px !important;
            width: 378px;
            height: 48px;
            font-size: 20px;
            font-family: 微软雅黑;
            transition: all .3s ease;

            background: #5f7ed7;
            background: linear-gradient(#6f97e5,#527ed9);
            box-shadow: inset 0 1px 2px #7ea1e8 !important;
            color: #fff;
            text-shadow: #4f70b3 0 -1px 0;
            border: none;
        }

        #loginPanel #loginBtn.btn:HOVER {
            box-shadow: inset 0 1px 1px #7696de,inset 0 0 2px #627dca,inset 0 -2px 3px #5a77c7,inset 0 0 100px rgba(48,77,147,.4) !important;
        }


        #loginPanel.show_msg{
            top: calc(50% - 10px);
        }

        #loginPanel .alert{
            display: none;
            padding: 12px;
            margin-top: 21px;
            border-radius: 0 0 10px 10px !important;
            font-size: 13px;

            position: absolute;
            width: 100%;
            border-bottom: 1px solid #dadada;
        }

        #loginPanel .alert.login-success{
            color: #27a4b0;
            background: #abe7ed;
            border-color: #abe7ed;
        }

        #loginPanel .alert i{
            font-size: 16px;
            vertical-align: middle;
            margin: 0 5px 3px;
        }

        #loginPanel.show_msg .alert{
            display: block;
        }

        #captchaWrap{
            display: none;
            text-align: left;
            border-top: 1px solid #f3f2f2;
        }

        img.captcha-img{
            cursor: pointer;
        }

        .login-footer{
            position: fixed;
            width: 100%;
            bottom: 35px;
            text-align: center;
            color: #a6a6a6;
        }

        h3.logo-text{
            font-family: 华文楷体,华文细黑;
            font-size: 28px;
        }

        .warn-note{
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 2;
            text-align: center;
            background: #ff4646;
            color: white;
            padding: 12px;
            display: none;
        }
    </style>
</head>

<body>
<div class="warn-note">警告！系统目前仅在 WebKit 内核下完成兼容性测试，请使用 Google
    Chrome 浏览器进入系统。</div>
<div class="wrapper ng-scope">
    <div id="loginPanel" class="dialog dialog-shadow">
        <br>
        <h3 class="logo-text">集群调度考试系统</h3>
        <hr>
        <form style="padding: 0px 35px;">
            <div class="form-group" style="margin-bottom: 0">
                <label></label>
                <div class="input-icon">
                    <i class="fa fa-user font-gray"></i> <input type="text"
                                                                name="userName" class="form-control" placeholder="输入用户名"
                                                                autofocus="autofocus" autocomplete="off">
                </div>
            </div>

            <div class="form-group">
                <label></label>
                <div class="input-icon">
                    <i class="fa fa-key font-gray"></i> <input type="password"
                                                               name="password" class="form-control" placeholder="输入密码">
                </div>
            </div>

            <div class="form-group" id="captchaWrap">
                <label></label>
                <div class="input-icon">
                    <input type="text" name="captcha" style="width: 153px !important;"
                           class="form-control input-inline input-medium"
                           placeholder="输入验证码"> <span class="help-inline"> <img
                        alt="验证码" class="captcha-img" title="点击刷新验证码">
						</span>
                </div>
            </div>
        </form>
        <br>
        <br>
        <div class="form-actions">
            <button class="btn blue-steel" id="loginBtn" disabled="disabled">登录</button>
        </div>

        <div class="alert alert-danger"></div>
    </div>

    <div class="login-footer">© 2016 上海巴士拓华科技发展有限公司 Some Rights
        Reserved</div>
</div>

<script>
    delete window.require;
    delete window.exports;
    delete window.module;
</script>
<!-- jQuery -->
<script src="/metronic_v4.5.4/plugins/jquery.min.js"></script>
<script src="/assets/plugins/jsencrypt.min.js"></script>
<script>
    window.onload=function(){
        var body=document.getElementsByTagName("body")[0];
        if(typeof body.style.WebkitAnimation=="undefined")
            $('.warn-note').fadeIn();
    };
    !function(){
        var form = $('#loginPanel form')
                ,nameInput = $('input[name=userName]', form)
                ,pwdInput = $('input[name=password]', form)
                ,msgAlert = $('#loginPanel .alert-danger');

        $('input', form).on('keyup', checkBtnStatus);

        var keys;
        $.get('/user/login/jCryptionKey?t='+Math.random(), function(data){
            keys = data.publickey;
        });


        function checkBtnStatus(){
            var es = $('input:visible', form);
            for(var i = 0, e; e = es[i++];){
                if($.trim($(e).val()) == ''){
                    $('#loginBtn').attr('disabled', 'disabled');
                    $('#loginPanel').removeClass('show_msg');
                    return;
                }
            }
            $('#loginBtn').removeAttr('disabled');
        }

        nameInput.on('blur', checkStatus);
        //keyup 事件做延迟
        var uNameKeyup;
        nameInput.on('keyup', function(){
            if(uNameKeyup)
                return;
            uNameKeyup = true;
            setTimeout(function(){
                checkStatus();
                uNameKeyup = false;
            }, 200);
        });

        //密码框回车事件
        pwdInput.on('keyup', function(e){
            if (e.keyCode == 13)
                $('#loginBtn').click();
        });
        //验证码框回车事件
        $('input[name=captcha]').on('keyup', function(e){
            if (e.keyCode == 13)
                $('#loginBtn').click();
        });

        $('#loginBtn').on('click', function(){
            if(lock || $(this).attr('disabled')) return;
            var userName = nameInput.val()
                    ,pwd = pwdInput.val();

            //RSA加密
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(keys);
            userName = encrypt.encrypt(userName);
            pwd = encrypt.encrypt(pwd);
            //登录
            login(userName, pwd);
        });

        var lock;
        function login(userName, pwd){
            lock = true;
            $('#loginBtn').attr('disabled', 'disabled');

            var params = {
                userName: userName,
                password: pwd,
                captcha: $('input[name=captcha]').val()
            };
            $.post('/user/login', params
                    ,function(rs){

                        $('#loginPanel').addClass('show_msg');
                        if(error(rs)){
                            lock = false;
                            $('#loginBtn').removeAttr('disabled');

                            msgAlert.html('<i class="fa fa-times-circle"> </i> 登录失败，' + rs.msg);

                            _captcha.refresh();
                            checkStatus();
                        }
                        else{
                            msgAlert.html('<i class="fa fa-check"> </i> 登录成功!');
                            msgAlert.addClass('login-success');
                            window.location.href = '/';
                        }
                    });
        }

        function checkStatus(){
            var t = nameInput.val();
            if(!t){
                hide();
                return;
            }

            $.get('/user/login/captchaStatus', {userName: t}, function(rs){
                if(rs >= 3)
                    _captcha.show();
                else
                    hide();
            });

            function hide(){
                if(!$("#captchaWrap").is(":hidden")){
                    _captcha.hide();
                    //隐藏提示消息
                    msgAlert.html('');
                    $('#loginPanel').removeClass('show_msg');
                }
            }
        }


        var _captcha = {
            show: function(){
                if($("#captchaWrap").is(":hidden")){
                    $('#captchaWrap').fadeIn(500);
                    _captcha.refresh();
                    checkBtnStatus();
                }
            },
            refresh: function(){
                if($("#captchaWrap").is(":hidden"))
                    return;
                $('#captchaWrap img.captcha-img').attr('src', '/captcha.jpg?t=' + Math.random());
            },
            hide: function(){
                $('#captchaWrap').hide();
                $('input[name=captcha]').val('');
            }
        };

        $('#captchaWrap img.captcha-img').on('click', function(){
            $(this).attr('src', '/captcha.jpg?t=' + Math.random());
        });

        function error(rs){
            return rs.status == 'ERROR' || rs.status == 500;
        }
    }();
</script>
</body>
</html>