|
|
@@ -1,78 +1,220 @@
|
|
|
<%@ page contentType="text/html;charset=UTF-8" %>
|
|
|
-<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
|
|
|
-<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
|
|
|
+<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
|
|
|
+<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <title>${fns:getConfig('productName')} 登录</title>
|
|
|
- <meta name="decorator" content="blank"/>
|
|
|
- <style type="text/css">
|
|
|
- html,body,table{background-color:#f5f5f5;width:100%;text-align:center;}.form-signin-heading{font-family:Helvetica, Georgia, Arial, sans-serif, 黑体;font-size:36px;margin-bottom:20px;color:#0663a2;}
|
|
|
- .form-signin{position:relative;text-align:left;width:300px;padding:25px 29px 29px;margin:0 auto 20px;background-color:#fff;border:1px solid #e5e5e5;
|
|
|
- -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05);}
|
|
|
- .form-signin .checkbox{margin-bottom:10px;color:#0663a2;} .form-signin .input-label{font-size:16px;line-height:23px;color:#999;}
|
|
|
- .form-signin .input-block-level{font-size:16px;height:auto;margin-bottom:15px;padding:7px;*width:283px;*padding-bottom:0;_padding:7px 7px 9px 7px;}
|
|
|
- .form-signin .btn.btn-large{font-size:16px;} .form-signin #themeSwitch{position:absolute;right:15px;bottom:10px;}
|
|
|
- .form-signin div.validateCode {padding-bottom:15px;} .mid{vertical-align:middle;}
|
|
|
- .header{height:80px;padding-top:20px;} .alert{position:relative;width:300px;margin:0 auto;*padding-bottom:0px;}
|
|
|
- label.error{background:none;width:270px;font-weight:normal;color:inherit;margin:0;}
|
|
|
+ <title>${fns:getConfig('productName')} 登录</title>
|
|
|
+ <meta name="decorator" content="blank"/>
|
|
|
+ <style type="text/css">
|
|
|
+ html, body, table {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin-heading {
|
|
|
+ font-family: Helvetica, Georgia, Arial, sans-serif, 黑体;
|
|
|
+ font-size: 36px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: #0663a2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin {
|
|
|
+ position: relative;
|
|
|
+ text-align: left;
|
|
|
+ width: 300px;
|
|
|
+ padding: 25px 29px 29px;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ -moz-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
|
|
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
|
|
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin .checkbox {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #0663a2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin .input-label {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 23px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin .input-block-level {
|
|
|
+ font-size: 16px;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 7px;
|
|
|
+ *width: 283px;
|
|
|
+ *padding-bottom: 0;
|
|
|
+ _padding: 7px 7px 9px 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin .btn.btn-large {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin #themeSwitch {
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-signin div.validateCode {
|
|
|
+ padding-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ height: 80px;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert {
|
|
|
+ position: relative;
|
|
|
+ width: 300px;
|
|
|
+ margin: 0 auto;
|
|
|
+ *padding-bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ label.error {
|
|
|
+ background: none;
|
|
|
+ width: 270px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: inherit;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .verify-wrap {
|
|
|
+ width: 240px !important;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fix-tips {
|
|
|
+ background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ -webkit-animation: slidetounlock 3s infinite;
|
|
|
+ color: #787878 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes slidetounlock {
|
|
|
+ 0% {
|
|
|
+ background-position: -100px 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: 100px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .verify-wrap .drag-btn{
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 38px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
</style>
|
|
|
- <script type="text/javascript">
|
|
|
- $(document).ready(function() {
|
|
|
- $("#loginForm").validate({
|
|
|
- rules: {
|
|
|
- validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
|
|
|
- },
|
|
|
- messages: {
|
|
|
- username: {required: "请填写用户名."},password: {required: "请填写密码."},
|
|
|
- validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
|
|
|
- },
|
|
|
- errorLabelContainer: "#messageBox",
|
|
|
- errorPlacement: function(error, element) {
|
|
|
- error.appendTo($("#loginError").parent());
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- // 如果在框架或在对话框中，则弹出提示并跳转到首页
|
|
|
- if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
|
|
|
- alert('未登录或登录超时。请重新登录，谢谢！');
|
|
|
- top.location = "${ctx}";
|
|
|
- }
|
|
|
- </script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ $(document).ready(function () {
|
|
|
+ var isSlideFinishState = false;
|
|
|
+ $('#submitButton').attr('disabled',"true");
|
|
|
+ var SlideVerifyPlug = window.slideVerifyPlug;
|
|
|
+ var slideVerify = new SlideVerifyPlug('#verify-wrap', {
|
|
|
+ wrapWidth: '350',//设置 容器的宽度 ,不设置的话，会设置成100%，需要自己在外层包层div,设置宽度，这是为了适应方便点；
|
|
|
+ initText: '请向右滑动滑块', //设置 初始的 显示文字
|
|
|
+ sucessText: '验证通过',//设置 验证通过 显示的文字
|
|
|
+ getSuccessState: function (res) {
|
|
|
+ //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
|
|
|
+ console.log(res);
|
|
|
+ if (slideVerify.slideFinishState) {
|
|
|
+ $('.value').html(slideVerify.slideFinishState)
|
|
|
+ $('#resetBtn').removeClass('prohibit')
|
|
|
+ $('#submitButton').removeAttr("disabled");
|
|
|
+ isSlideFinishState = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $("#loginForm").validate({
|
|
|
+ rules: {
|
|
|
+ validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
|
|
|
+ },
|
|
|
+ messages: {
|
|
|
+ username: {required: "请填写用户名."}, password: {required: "请填写密码."},
|
|
|
+ validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
|
|
|
+ },
|
|
|
+ errorLabelContainer: "#messageBox",
|
|
|
+ errorPlacement: function (error, element) {
|
|
|
+ error.appendTo($("#loginError").parent());
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 如果在框架或在对话框中，则弹出提示并跳转到首页
|
|
|
+ if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
|
|
|
+ alert('未登录或登录超时。请重新登录，谢谢！');
|
|
|
+ top.location = "${ctx}";
|
|
|
+ }
|
|
|
+ </script>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <!--[if lte IE 6]><br/><div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a><h4>温馨提示：</h4><p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。</p></div><![endif]-->
|
|
|
- <div class="header">
|
|
|
- <div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}"><button data-dismiss="alert" class="close">×</button>
|
|
|
- <label id="loginError" class="error">${message}</label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <h1 class="form-signin-heading">${fns:getConfig('productName')}</h1>
|
|
|
- <form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
|
|
|
- <label class="input-label" for="username">登录名</label>
|
|
|
- <input type="text" id="username" name="username" class="input-block-level required" value="${username}">
|
|
|
- <label class="input-label" for="password">密码</label>
|
|
|
- <input type="password" id="password" name="password" class="input-block-level required">
|
|
|
- <c:if test="${isValidateCodeLogin}">
|
|
|
- <div class="validateCode">
|
|
|
- <label class="input-label mid" for="validateCode">验证码</label>
|
|
|
- <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
|
|
|
- </div>
|
|
|
- </c:if>
|
|
|
- <%--
|
|
|
- <label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
|
|
|
- <input class="btn btn-large btn-primary" type="submit" value="登 录"/>
|
|
|
- <%--<label for="rememberMe" title="下次不需要再登录"><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> 记住我（公共场所慎用）</label>--%>
|
|
|
- <div id="themeSwitch" class="dropdown">
|
|
|
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">${fns:getDictLabel(cookie.theme.value,'theme','默认主题')}<b class="caret"></b></a>
|
|
|
- <ul class="dropdown-menu">
|
|
|
- <c:forEach items="${fns:getDictList('theme')}" var="dict"><li><a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.value}?url='+location.href">${dict.label}</a></li></c:forEach>
|
|
|
- </ul>
|
|
|
- <!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- <div class="footer">
|
|
|
- Copyright © ${fns:getConfig('copyrightYear')} ${fns:getConfig('productName')} ${fns:getConfig('version')}
|
|
|
- </div>
|
|
|
- <script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>
|
|
|
+<!--[if lte IE 6]><br/>
|
|
|
+<div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a>
|
|
|
+ <h4>温馨提示：</h4>
|
|
|
+ <p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的
|
|
|
+ Chrome、Firefox、Safari 等。</p></div><![endif]-->
|
|
|
+<div class="header">
|
|
|
+ <div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
|
|
|
+ <button data-dismiss="alert" class="close">×</button>
|
|
|
+ <label id="loginError" class="error">${message}</label>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<h1 class="form-signin-heading">${fns:getConfig('productName')}</h1>
|
|
|
+<form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
|
|
|
+ <label class="input-label" for="username">登录名</label>
|
|
|
+ <input type="text" id="username" name="username" class="input-block-level required" value="${username}">
|
|
|
+ <label class="input-label" for="password">密码</label>
|
|
|
+ <input type="password" id="password" name="password" class="input-block-level required">
|
|
|
+ <!-- 滑动验证 -->
|
|
|
+ <div class="verify-wrap" id="verify-wrap"></div>
|
|
|
+ <c:if test="${isValidateCodeLogin}">
|
|
|
+ <div class="validateCode">
|
|
|
+ <label class="input-label mid" for="validateCode">验证码</label>
|
|
|
+ <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
|
|
|
+ </div>
|
|
|
+ </c:if>
|
|
|
+ <%--
|
|
|
+ <label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
|
|
|
+ <button class="btn btn-large btn-primary" type="submit" id="submitButton">登录</button>
|
|
|
+ <%--<label for="rememberMe" title="下次不需要再登录"><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> 记住我（公共场所慎用）</label>--%>
|
|
|
+ <div id="themeSwitch" class="dropdown">
|
|
|
+ <a class="dropdown-toggle" data-toggle="dropdown"
|
|
|
+ href="#">${fns:getDictLabel(cookie.theme.value,'theme','默认主题')}<b class="caret"></b></a>
|
|
|
+ <ul class="dropdown-menu">
|
|
|
+ <c:forEach items="${fns:getDictList('theme')}" var="dict">
|
|
|
+ <li><a href="#"
|
|
|
+ onclick="location='${pageContext.request.contextPath}/theme/${dict.value}?url='+location.href">${dict.label}</a>
|
|
|
+ </li>
|
|
|
+ </c:forEach>
|
|
|
+ </ul>
|
|
|
+ <!--[if lte IE 6]>
|
|
|
+ <script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
|
|
|
+ </div>
|
|
|
+</form>
|
|
|
+<div class="footer">
|
|
|
+ Copyright © ${fns:getConfig('copyrightYear')} ${fns:getConfig('productName')} ${fns:getConfig('version')}
|
|
|
+</div>
|
|
|
+<script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>
|
|
|
+<script src="${ctxStatic}/slideVerify/slideVerify.js" type="text/javascript"></script>
|
|
|
</body>
|
|
|
</html>
|
