<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>$sys_title </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="$_dstroot/css/login.css" rel="stylesheet" type="text/css">
<script src="$_dstroot/js/login.js" type="text/javascript"></script>  

<!-- BEGIN GLOBAL VARIABLE G -->
$sys_JS_G
<!-- END GLOBAL VARIABLE G -->

<link rel="shortcut icon" href="favicon.ico"/>

</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="login">
<!-- BEGIN TOPBAR -->
<div class="page-header navbar">
					
</div>
<!-- END TOPBAR -->

<!-- BEGIN LOGO -->
<div class="logo ">
	<a href="index.html" class="hidden">
		<img src="$_dstroot/img/logo.png" alt=""/>
	</a>
</div>
<!-- END LOGO -->
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
<div class="menu-toggler sidebar-toggler">
</div>
<!-- END SIDEBAR TOGGLER BUTTON -->
<!-- BEGIN LOGION WRAPPER -->
<div class="login-wrapper">
<!-- BEGIN LOGIN BANNER -->
<div class="banner">
    <i class="icon-lock"></i> @t[Welcome login] $sys_title
</div>
<!-- END LOGIN BANNER -->

<!-- BEGIN LOGIN -->
<div class="content not">
	<!-- BEGIN LOGIN FORM -->
	<form class="login-form" action="$_base" method="post">
        <input type="hidden" name="component" value="$component" >			
        <input type="hidden" name="task" value="login" >
		<input type="hidden" name="pkey" value="$__aeskey" id="param_pkey" />
        <input type="hidden" name="sbt" value="$sbt">	
        <input type="hidden" name="backurl" value="$backurl">	
        
		<div class="alert alert-danger display-hide">
			<button class="close" data-close="alert"></button>
			<span>
			@t[Please enter username and password.]</span>
		</div>
		

		<div class="form-group">
			<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
			<label class="control-label visible-ie8 visible-ie9">@t[Username]</label>
			<div class="input-icon">
				<i class="fa fa-user"></i>
				<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="@t[Username]" name="params[username]" id='param_username'/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">@t[Password]</label>
			<div class="input-icon">
				<i class="fa fa-lock"></i>
				<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="@t[Password]" name="params[password]" id='param_password'/>
			</div>
		</div>
		<!--# if ($enable_captcha) { #-->
		<div class="form-group">
		    <div class="input-icon sec-icon">
		        <label class="control-label visible-ie8 visible-ie9">@t[Captcha]</label>
			    <i class="fa fa-lock"></i>
			    <input class="form-control placeholder-no-fix rccode " type="text" name="params[captcha]" autocomplete="off" required placeholder="@t[Captcha]" value="" style="width:50%;" />
                <img src="$seccodeimg" class="captcha" id="capimg" alt="@t[Captcha]" title="@t[Cannot see the captcha, please click me for reloading]" style="width:45%;"/>
		    </div>
		</div>
		<!--# } #-->
		
		<div class="form-actions">
		
		
			<label class="rememberme mt-checkbox mt-checkbox-outline">
			<!--# if ($savecookie) { #-->
			<input type="checkbox" name="params[remember]" value="1" id='param_save_cookie'/> @t[Remember]
			 <span></span>
			 <!--# } #-->			
			</label>
	    
	    
			<button type="submit" class="btn btn-primary pull-right">
			@t[Login] <i class="m-icon-swapright m-icon-white"></i>
			</button>
			
					
		</div>
		
                
	</form>
	<!-- END LOGIN FORM -->
</div>
<!-- END LOGIN -->
</div>
<!-- END LOGION WRAPPER -->

<!-- BEGIN FOOTER -->
<div class="login-footer page-footer">
	<div class="page-footer-inner pull-right copyright">
		 $sys_current_year &copy; $str_system_copyright_corp $sys_version <a href="#" title="get more info" target="_blank">Home</a>
	</div>
</div>
<!-- END FOOTER -->

<script language="javascript">

jQuery(document).ready(function() {	

	var doLogin = function(form)
	{

		//取 key
		var pkey = $('#param_pkey').val();		
		var formData = $(form).serializeArray();		
	    for (i=0; i<formData.length; i++) {
	  		if (formData[i].name == "params[password]") {
	  			var val = formData[i].value;
	  			var _val = encrypt(val, pkey);
	  			formData[i].value = _val;
	  		}
	   }

       $.post(G.base+'/login', formData).then(function(res) {
           if (res.status == 0) {
                var url = _.isUndefined(res.data.backurl)?G.basename:res.data.backurl;
                rui.redirect(url);                
            } else {
                rui.showStatus(res);
            }
        }).fail(function(res){
			rui.showStatus(res);
		});  
	}
	
	var genSecCode = function() {
	        $("#capimg").attr("src", G.basename+"/seccode/?r="+Math.random());
    }

	var handleLogin = function() {
			$('.login-form').validate({
	            errorElement: 'span', //default input error message container
	            errorClass: 'help-block', // default input error message class
	            focusInvalid: false, // do not focus the last invalid input
	            rules: {
	                'params[username]': {
	                    required: true
	                },
	                'params[password]': {
	                    required: true
	                },

	                'params[captcha]': {
	                    required: true
	                },
	                	                
	                remember: {
	                    required: false
	                }
	            },

	            messages: {
	                'params[username]': {
	                    required: t("Username is required.")
	                },
	                'params[password]': {
	                    required: t("Password is required.")
	                },
	                'params[captcha]': {
	                    required: t("Captcha is required.")
	                }
	            },

	            invalidHandler: function (event, validator) { //display error alert on form submit   
	                $('.alert-danger', $('.login-form')).show();
	            },

	            highlight: function (element) { // hightlight error inputs
	                $(element)
	                    .closest('.form-group').addClass('has-error'); // set error class to the control group
	            },

	            success: function (label) {
	                label.closest('.form-group').removeClass('has-error');
	                label.remove();
	            },

	            errorPlacement: function (error, element) {
	                error.insertAfter(element.closest('.input-icon'));
	            },

	            submitHandler: function (form) {
	            	if (!doLogin(form)){
	            		//$('.alert-danger', $('.login-form')).show();	            		
	            	}
	            }
	        });

	        $('.login-form input').keypress(function (e) {
	            if (e.which == 13) {
	                if ($('.login-form').validate().form()) {
	                    $('.login-form').submit();
	                }
	                return false;
	            }
	        });
	        $("#capimg").on('click', genSecCode);
	        
	}

            if (!_.isUndefined(G._i18ndb)) {
        	    I18N.register(G._i18ndb); 
        	} 
        	
        	if (typeof G_i18ndb != "undefined") {
        		I18N.register(G_i18ndb); 
        	}
        	
        	handleLogin(); 
           
           var bgdb = G._bgdb;

           var bgdir = G._dstroot+'/img/bg/';
           var defaultbg = [
						bgdir + '1.jpg',  
						bgdir + '2.jpg', 
						bgdir + '3.jpg'];
				
           if (!_.isArray(bgdb) || bgdb.length == 0)
                bgdb = defaultbg;
            // init background slide images
            $.backstretch(bgdb, {
			      fade: 1000,
			      duration: 8000
					});
});


</script>    
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>