sysLogin2.jsp 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
  3. <%@ include file="/webpage/include/taglib.jsp"%>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta name="description" content="User login page" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
  10. <script src="${ctxStatic}/jquery/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
  11. <script src="${ctxStatic}/jquery-validation/1.14.0/jquery.validate.js" type="text/javascript"></script>
  12. <script src="${ctxStatic}/jquery-validation/1.14.0/localization/messages_zh.min.js" type="text/javascript"></script>
  13. <link href="${ctxStatic}/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet" />
  14. <script src="${ctxStatic}/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
  15. <link href="${ctxStatic}/awesome/4.4/css/font-awesome.min.css" rel="stylesheet" />
  16. <!-- jeeplus -->
  17. <link href="${ctxStatic}/common/jeeplus.css" type="text/css" rel="stylesheet" />
  18. <script src="${ctxStatic}/common/jeeplus.js" type="text/javascript"></script>
  19. <link rel="shortcut icon" href="images/favicon.png" type="image/png">
  20. <!-- text fonts -->
  21. <link rel="stylesheet" href="${ctxStatic }/common/login/ace-fonts.css" />
  22. <!-- ace styles -->
  23. <link rel="stylesheet" href="${ctxStatic }/common/login/ace.css" />
  24. <!-- 引入layer插件 -->
  25. <script src="${ctxStatic}/layer-v2.3/layer/layer.js"></script>
  26. <script src="${ctxStatic}/layer-v2.3/layer/laydate/laydate.js"></script>
  27. <!--[if lte IE 9]>
  28. <link rel="stylesheet" href="../assets/css/ace-part2.css" />
  29. <![endif]-->
  30. <link rel="stylesheet" href="${ctxStatic }/common/login/ace-rtl.css" />
  31. <title>${fns:getConfig('productName')} 登录</title>
  32. <script>
  33. if (window.top !== window.self) {
  34. window.top.location = window.location;
  35. }
  36. </script>
  37. <script type="text/javascript">
  38. $(document).ready(function() {
  39. $("#loginForm").validate({
  40. rules: {
  41. validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
  42. },
  43. messages: {
  44. username: {required: "请填写用户名."},password: {required: "请填写密码."},
  45. validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
  46. },
  47. errorLabelContainer: "#messageBox",
  48. errorPlacement: function(error, element) {
  49. error.appendTo($("#loginError").parent());
  50. }
  51. });
  52. });
  53. // 如果在框架或在对话框中,则弹出提示并跳转到首页
  54. if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
  55. top.location = "${ctx}";
  56. }
  57. </script>
  58. <script type="text/javascript">
  59. $(document).ready(function() {
  60. $("#inputForm").validate({
  61. rules: {
  62. loginName: {remote: "${ctx}/sys/user/validateLoginName"},
  63. mobile: {remote: "${ctx}/sys/user/validateMobile"},
  64. randomCode: {
  65. remote:{
  66. url:"${ctx}/sys/register/validateMobileCode",
  67. data:{
  68. mobile:function(){
  69. return $("#tel").val();
  70. }
  71. }
  72. }
  73. }
  74. },
  75. messages: {
  76. confirmNewPassword: {equalTo: "输入与上面相同的密码"},
  77. ck1: {required: "必须接受用户协议."},
  78. loginName: {remote: "此用户名已经被注册!", required: "用户名不能为空."},
  79. mobile:{remote: "此手机号已经被注册!", required: "手机号不能为空."},
  80. randomCode:{remote: "验证码不正确!", required: "验证码不能为空."}
  81. },
  82. submitHandler: function(form){
  83. loading('正在提交,请稍等...');
  84. form.submit();
  85. },
  86. errorContainer: "#messageBox",
  87. errorPlacement: function(error, element) {
  88. $("#messageBox").text("输入有误,请先更正。");
  89. if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
  90. error.appendTo(element.parent().parent());
  91. } else {
  92. error.insertAfter(element);
  93. }
  94. }
  95. });
  96. $("#resetForm").validate({
  97. rules: {
  98. mobile: {remote: "${ctx}/sys/user/validateMobileExist"}
  99. },
  100. messages: {
  101. mobile:{remote: "此手机号未注册!", required: "手机号不能为空."}
  102. },
  103. submitHandler: function(form){
  104. loading('正在提交,请稍等...');
  105. form.submit();
  106. },
  107. errorContainer: "#messageBox",
  108. errorPlacement: function(error, element) {
  109. $("#messageBox").text("输入有误,请先更正。");
  110. if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
  111. error.appendTo(element.parent().parent());
  112. } else {
  113. error.insertAfter(element);
  114. }
  115. }
  116. });
  117. // 手机号码验证
  118. jQuery.validator.addMethod("isMobile", function(value, element) {
  119. var length = value.length;
  120. var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
  121. return (length == 11 && mobile.test(value));
  122. }, "请正确填写您的手机号码");
  123. $('#sendPassBtn').click(function () {
  124. if($("#tel_resetpass").val()=="" || $("#tel_resetpass-error").text()!=""){
  125. top.layer.alert("请输入有效的注册手机号码!", {icon: 0});//讨厌的白色字体问题
  126. return;
  127. }
  128. $("#sendPassBtn").attr("disabled", true);
  129. $.get("${ctx}/sys/user/resetPassword?mobile="+$("#tel_resetpass").val(),function(data){
  130. if(data.success == false){
  131. top.layer.alert(data.msg, {icon: 0});//讨厌的白色字体问题
  132. //alert(data.msg);
  133. $("#sendPassBtn").html("重新发送").removeAttr("disabled");
  134. clearInterval(countdown);
  135. }
  136. });
  137. var count = 60;
  138. var countdown = setInterval(CountDown, 1000);
  139. function CountDown() {
  140. $("#sendPassBtn").attr("disabled", true);
  141. $("#sendPassBtn").html("等待 " + count + "秒!");
  142. if (count == 0) {
  143. $("#sendPassBtn").html("重新发送").removeAttr("disabled");
  144. clearInterval(countdown);
  145. }
  146. count--;
  147. }
  148. }) ;
  149. $('#sendCodeBtn').click(function () {
  150. if($("#tel").val()=="" || $("#tel-error").text()!=""){
  151. top.layer.alert("请输入有效的注册手机号码!", {icon: 0});//讨厌的白色字体问题
  152. return;
  153. }
  154. $("#sendCodeBtn").attr("disabled", true);
  155. $.get("${ctx}/sys/register/getRegisterCode?mobile="+$("#tel").val(),function(data){
  156. if(data.success == false){
  157. //top.layer.alert(data.msg, {icon: 0});讨厌的白色字体问题
  158. alert(data.msg);
  159. $("#sendCodeBtn").html("重新发送").removeAttr("disabled");
  160. clearInterval(countdown);
  161. }
  162. });
  163. var count = 60;
  164. var countdown = setInterval(CountDown, 1000);
  165. function CountDown() {
  166. $("#sendCodeBtn").attr("disabled", true);
  167. $("#sendCodeBtn").html("等待 " + count + "秒!");
  168. if (count == 0) {
  169. $("#sendCodeBtn").html("重新发送").removeAttr("disabled");
  170. clearInterval(countdown);
  171. }
  172. count--;
  173. }
  174. }) ;
  175. });
  176. </script>
  177. </head>
  178. <body class="login-layout light-login">
  179. <div class="main-container">
  180. <div class="main-content">
  181. <div class="row">
  182. <div class="col-sm-10 col-sm-offset-1">
  183. <div class="login-container">
  184. <div class="center">
  185. <h1>
  186. <br/>
  187. <img src="${ctxStatic }/common/login/images/logo.png" style="width:380px">
  188. <br>
  189. </h1>
  190. <sys:message content="${message}"/>
  191. </div>
  192. <div class="space-6"></div>
  193. <div class="position-relative">
  194. <div id="login-box" class="login-box visible widget-box no-border">
  195. <div class="widget-body">
  196. <div class="widget-main">
  197. <h4 class="header blue lighter bigger">
  198. <i class="ace-icon fa fa-coffee green"></i>
  199. 用户登录
  200. </h4>
  201. <div class="space-6"></div>
  202. <form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
  203. <fieldset>
  204. <label class="block clearfix">
  205. <span class="block input-icon input-icon-right">
  206. <input type="text" id="username" name="username" class="form-control required" value="${username}" placeholder="用户名" />
  207. <i class="ace-icon fa fa-user"></i>
  208. </span>
  209. </label>
  210. <label class="block clearfix">
  211. <span class="block input-icon input-icon-right">
  212. <input type="password" id="password" name="password" class="form-control required" placeholder="密码" />
  213. <i class="ace-icon fa fa-lock"></i>
  214. </span>
  215. </label>
  216. <c:if test="${isValidateCodeLogin}">
  217. <div class="input-group m-b text-muted validateCode">
  218. <label class="input-label mid" for="validateCode">验证码:</label>
  219. <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:5px;"/>
  220. </div>
  221. </c:if>
  222. <div class="space"></div>
  223. <div class="clearfix">
  224. <label class="inline">
  225. <input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} class="ace" />
  226. <span class="lbl"> 记住我</span>
  227. </label>
  228. <button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
  229. <i class="ace-icon fa fa-key"></i>
  230. <span class="bigger-110">登录</span>
  231. </button>
  232. </div>
  233. <div class="space-4"></div>
  234. <div id="themeSwitch" class="dropdown">
  235. <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">${fns:getDictLabel(cookie.theme.value,'theme','默认主题')}<b class="caret"></b></a>
  236. <ul class="dropdown-menu">
  237. <c:forEach items="${fns:getDictList('theme')}" var="dict"><li><a href="javascript:void(0)" onclick="location='${pageContext.request.contextPath}/theme/${dict.value}?url='+location.href"><font color="black">${dict.label}</font></a></li></c:forEach>
  238. </ul>
  239. <!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
  240. </div>
  241. </fieldset>
  242. </form>
  243. <!--
  244. <div class="social-or-login center">
  245. <span class="bigger-110">Or Login Using</span>
  246. </div>
  247. <div class="space-6"></div>
  248. <div class="social-login center">
  249. <a class="btn btn-primary">
  250. <i class="ace-icon fa fa-facebook"></i>
  251. </a>
  252. <a class="btn btn-info">
  253. <i class="ace-icon fa fa-twitter"></i>
  254. </a>
  255. <a class="btn btn-danger">
  256. <i class="ace-icon fa fa-google-plus"></i>
  257. </a>
  258. </div>
  259. -->
  260. </div><!-- /.widget-main -->
  261. <div class="toolbar clearfix">
  262. <div>
  263. <a href="javascript:void(0)" data-target="#forgot-box" class="forgot-password-link">
  264. <i class="ace-icon fa fa-arrow-left"></i>
  265. 忘记密码
  266. </a>
  267. </div>
  268. <div>
  269. <a href="javascript:void(0)" data-target="#signup-box" class="user-signup-link">
  270. 没有账号?注册
  271. <i class="ace-icon fa fa-arrow-right"></i>
  272. </a>
  273. </div>
  274. </div>
  275. </div><!-- /.widget-body -->
  276. </div><!-- /.login-box -->
  277. <div id="forgot-box" class="forgot-box widget-box no-border">
  278. <div class="widget-body">
  279. <div class="widget-main">
  280. <h4 class="header red lighter bigger">
  281. <i class="ace-icon fa fa-key"></i>
  282. 找回密码
  283. </h4>
  284. <div class="space-6"></div>
  285. <p>
  286. 请输入您的注册手机号,您将会收到新的密码。
  287. </p>
  288. <form id="resetForm">
  289. <fieldset>
  290. <label class="block clearfix">
  291. <span class="block input-icon input-icon-right">
  292. <input id="tel_resetpass" name="mobile" type="tel" class="form-control text-muted required isMobile" placeholder="请输入手机号" />
  293. <i class="ace-icon fa fa-envelope"></i>
  294. </span>
  295. </label>
  296. <div class="clearfix">
  297. <button id="sendPassBtn" type="button" class="width-35 pull-right btn btn-sm btn-danger">
  298. <i class="ace-icon fa fa-lightbulb-o"></i>
  299. <span class="bigger-110">发送!</span>
  300. </button>
  301. </div>
  302. </fieldset>
  303. </form>
  304. </div><!-- /.widget-main -->
  305. <div class="toolbar center">
  306. <a href="javascript:void(0)" data-target="#login-box" class="back-to-login-link">
  307. 返回登录
  308. <i class="ace-icon fa fa-arrow-right"></i>
  309. </a>
  310. </div>
  311. </div><!-- /.widget-body -->
  312. </div><!-- /.forgot-box -->
  313. <div id="signup-box" class="signup-box widget-box no-border">
  314. <div class="widget-body">
  315. <div class="widget-main">
  316. <h4 class="header green lighter bigger">
  317. <i class="ace-icon fa fa-users blue"></i>
  318. 用户注册
  319. </h4>
  320. <div class="space-6"></div>
  321. <form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/register/registerUser" method="post" class="form-group form-horizontal">
  322. <input type="hidden" value="system" name="roleName"><!-- 默认注册用户都是超级管理员 -->
  323. <fieldset>
  324. <label class="block clearfix">
  325. <span class="block input-icon input-icon-right">
  326. <input id="tel" name="mobile" type="text" value="" maxlength="11" minlength="11" class="form-control text-muted required isMobile" placeholder="手机号"/>
  327. <i class="ace-icon fa fa-phone"></i>
  328. </span>
  329. </label>
  330. <label class="block clearfix">
  331. <span class="block input-icon input-icon-right">
  332. <input id="code" name="randomCode" type="text" value="" maxlength="4" minlength="4" class="required" placeholder="验证码"/>
  333. <button class="width-40 pull-right btn btn-sm btn-primary" type="button" id="sendCodeBtn" >
  334. <i class="ace-icon fa fa-lightbulb-o"></i>
  335. <span class="bigger-110">获取验证码!</span>
  336. </button>
  337. <label id="code-error" class="error" for="code" style="display:none"></label>
  338. </span>
  339. </label>
  340. <label class="block clearfix">
  341. <span class="block input-icon input-icon-right">
  342. <input id="userId" name="loginName" type="text" value="${user.loginName }" maxlength="20" minlength="3" class="form-control required" placeholder="用户名" />
  343. <i class="ace-icon fa fa-user"></i>
  344. </span>
  345. </label>
  346. <label class="block clearfix">
  347. <span class="block input-icon input-icon-right">
  348. <input id="newPassword" name="password" type="password" value="" maxlength="20" minlength="3" class="form-control required" placeholder="密码" />
  349. <i class="ace-icon fa fa-lock"></i>
  350. </span>
  351. </label>
  352. <label class="block clearfix">
  353. <span class="block input-icon input-icon-right">
  354. <input id="confirmNewPassword" name="confirmNewPassword" type="password" value="" maxlength="20" minlength="3" class="form-control required" equalTo="#newPassword" placeholder="重复密码" />
  355. <i class="ace-icon fa fa-retweet"></i>
  356. </span>
  357. </label>
  358. <label class="block">
  359. <input name="ck1" type="checkbox" class="required ace" />
  360. <span class="lbl">
  361. 我接受
  362. <a href="javascript:void(0)">《JeePlus用户注册协议》</a>
  363. </span>
  364. <label id="ck1-error" class="error" for="ck1" style="display: none;">必须接受用户协议</label>
  365. </label>
  366. <div class="space-24"></div>
  367. <div class="clearfix">
  368. <button type="reset" class="width-30 pull-left btn btn-sm">
  369. <i class="ace-icon fa fa-refresh"></i>
  370. <span class="bigger-110">重置</span>
  371. </button>
  372. <button type="submit" class="width-65 pull-right btn btn-sm btn-success">
  373. <span class="bigger-110">注册</span>
  374. <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
  375. </button>
  376. </div>
  377. </fieldset>
  378. </form:form>
  379. </div>
  380. <div class="toolbar center">
  381. <a href="javascript:void(0)" data-target="#login-box" class="back-to-login-link">
  382. <i class="ace-icon fa fa-arrow-left"></i>
  383. 返回登录
  384. </a>
  385. </div>
  386. </div><!-- /.widget-body -->
  387. </div><!-- /.signup-box -->
  388. </div><!-- /.position-relative -->
  389. <div class="center"><h4 class="blue" id="id-company-text">&copy; JeePlus</h4></div>
  390. <div class="navbar-fixed-top align-right">
  391. <br />
  392. &nbsp;
  393. <a id="btn-login-dark" href="javascript:void(0)">Dark</a>
  394. &nbsp;
  395. <span class="blue">/</span>
  396. &nbsp;
  397. <a id="btn-login-blur" href="javascript:void(0)">Blur</a>
  398. &nbsp;
  399. <span class="blue">/</span>
  400. &nbsp;
  401. <a id="btn-login-light" href="javascript:void(0)">Light</a>
  402. &nbsp; &nbsp; &nbsp;
  403. </div>
  404. </div>
  405. </div><!-- /.col -->
  406. </div><!-- /.row -->
  407. </div><!-- /.main-content -->
  408. </div><!-- /.main-container -->
  409. <!-- basic scripts -->
  410. <!--[if !IE]> -->
  411. <script type="text/javascript">
  412. window.jQuery || document.write("<script src='../assets/js/jquery.js'>"+"<"+"/script>");
  413. </script>
  414. <!-- <![endif]-->
  415. <!--[if IE]>
  416. <script type="text/javascript">
  417. window.jQuery || document.write("<script src='../assets/js/jquery1x.js'>"+"<"+"/script>");
  418. </script>
  419. <![endif]-->
  420. <script type="text/javascript">
  421. if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
  422. </script>
  423. <style>
  424. /* Validation */
  425. label.error {
  426. color: #cc5965;
  427. display: inline-block;
  428. margin-left: 5px;
  429. }
  430. .form-control.error {
  431. border: 1px dotted #cc5965;
  432. }
  433. </style>
  434. <!-- inline scripts related to this page -->
  435. <script type="text/javascript">
  436. $(document).ready(function() {
  437. $(document).on('click', '.toolbar a[data-target]', function(e) {
  438. e.preventDefault();
  439. var target = $(this).data('target');
  440. $('.widget-box.visible').removeClass('visible');//hide others
  441. $(target).addClass('visible');//show target
  442. });
  443. });
  444. //you don't need this, just used for changing background
  445. $(document).ready(function() {
  446. $('#btn-login-dark').on('click', function(e) {
  447. $('body').attr('class', 'login-layout');
  448. $('#id-text2').attr('class', 'white');
  449. $('#id-company-text').attr('class', 'blue');
  450. e.preventDefault();
  451. });
  452. $('#btn-login-light').on('click', function(e) {
  453. $('body').attr('class', 'login-layout light-login');
  454. $('#id-text2').attr('class', 'grey');
  455. $('#id-company-text').attr('class', 'blue');
  456. e.preventDefault();
  457. });
  458. $('#btn-login-blur').on('click', function(e) {
  459. $('body').attr('class', 'login-layout blur-login');
  460. $('#id-text2').attr('class', 'white');
  461. $('#id-company-text').attr('class', 'light-blue');
  462. e.preventDefault();
  463. });
  464. });
  465. </script>
  466. </body>
  467. </html>