login.ftl 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <#include "layout/header.ftl">
  5. <#include "layout/common.cssjs.ftl">
  6. <style>
  7. .wrapper { position: relative; }
  8. i.fa { position: absolute; top: 5px; left: 5px; font-size: 22px; color: gray;}
  9. .wrapper input { text-indent: 20px;}
  10. </style>
  11. <#if true==isKerberos>
  12. <@browser name="MSIE">
  13. <script type="text/javascript">
  14. /**configuration AD Domain Authentication**/
  15. var WinNetwork = new ActiveXObject("WScript.Network");
  16. var userDomains=${userDomainUrlJson};
  17. for(var iter = 0; iter < userDomains.length; iter++){
  18. if(WinNetwork.UserDomain==userDomains[iter].userDomain){
  19. //alert("Kerberos redirect Uri is "+userDomains[iter].redirectUri);
  20. document.location.href=userDomains[iter].redirectUri;
  21. }
  22. }
  23. </script>
  24. </@browser>
  25. </#if>
  26. <script type="text/javascript">
  27. <#--resend captcha code Interval-->
  28. var captchaCountTimer;
  29. var captchaCount=60;
  30. function getCaptchaCount(){
  31. $("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.obtain.valid"/>("+captchaCount+")<@locale code="login.text.login.twofactor.obtain.valid.unit"/>");
  32. captchaCount--;
  33. if(captchaCount==0){
  34. $("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.obtain"/>");
  35. captchaCount=60;
  36. clearInterval(captchaCountTimer);
  37. }
  38. }
  39. <#--current datetime-->
  40. var currentDate= new Date('${.now}');
  41. var fullYear=currentDate.getFullYear();
  42. var month=currentDate.getMonth()+1;
  43. var date=currentDate.getDate();
  44. var hours=currentDate.getHours();
  45. var minutes=currentDate.getMinutes();
  46. var seconds=currentDate.getSeconds();
  47. var strTime="";
  48. function formatTime(){
  49. strTime=fullYear+"-";
  50. strTime+=(month<10?"0"+month:month)+"-";
  51. strTime+=(date<10?"0"+date:date)+" ";
  52. strTime+=(hours<10?"0"+hours:hours)+":";
  53. strTime+=(minutes<10?"0"+minutes:minutes)+":";
  54. strTime+=(seconds<10?"0"+seconds:seconds);
  55. }
  56. <#if true==isMfa && "TOPT"==optType>
  57. function currentTime(){
  58. seconds++;
  59. if(seconds>59){
  60. minutes++;
  61. seconds=0;
  62. }
  63. if(minutes>59){
  64. hours++;
  65. minutes=0;
  66. }
  67. if(hours>23){
  68. date++;
  69. hours=0;
  70. }
  71. formatTime();
  72. //for timebase token
  73. getTimeBaseCount();
  74. $("#currentTime").val(strTime);
  75. }
  76. <#--timeBase Token Interval default is 30s-->
  77. var timeBaseCount;
  78. function getTimeBaseCount(){
  79. if(seconds<${optInterval}){
  80. timeBaseCount=${optInterval}-seconds;
  81. }else{
  82. timeBaseCount=${optInterval}-(seconds-${optInterval});
  83. }
  84. $("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.validTime"/>("+timeBaseCount+")<@locale code="login.text.login.twofactor.validTime.unit"/>");
  85. };
  86. </#if>
  87. var currentSwitchTab="div_commonLogin";
  88. <#--submit form-->
  89. function doLoginSubmit(){
  90. if(currentSwitchTab=="div_commonLogin"){
  91. $.cookie("username", $("#loginForm input[name=j_username]").val(), { expires: 7 });
  92. $.cookie("switch_form", 1, { expires: 7 });
  93. $("#loginSubmitButton").click();
  94. }else{
  95. $.cookie("username", $("#tfaLoginForm input[name=j_username]").val(), { expires: 7 });
  96. $.cookie("switch_form", 2, { expires: 7 });
  97. $("#tfaLoginSubmitButton").click();
  98. }
  99. };
  100. <#--switch LoginForm && tfaLoginForm-->
  101. function switchTab(id){
  102. if($("#"+id+" input[name=j_username]").val()==""){
  103. $("#"+id+" input[name=j_username]").focus();
  104. }else{
  105. $("#"+id+" input[name=j_password]").focus();
  106. }
  107. currentSwitchTab=id;
  108. }
  109. <#-- when press ENTER key,do form submit-->
  110. document.onkeydown=function(event){
  111. var e = event || window.event || arguments.callee.caller.arguments[0];
  112. if(e && e.keyCode==13){
  113. doLoginSubmit();
  114. };
  115. };
  116. $(function(){
  117. <#if true==isMfa && "TOPT"==optType>
  118. setInterval("currentTime()", 1000);
  119. </#if>
  120. <#--on captcha image click ,new a captcha code-->
  121. <#if true==isCaptcha>
  122. $('#j_captchaimg').click(function () {//
  123. $(this).attr("src", "<@base />/captcha"+(new Date()).getTime());
  124. });
  125. </#if>
  126. <#--submit loginForme-->
  127. $("#loginSubmit").on("click",function(){
  128. doLoginSubmit();
  129. });
  130. <#--submit tfaLoginForme-->
  131. $("#tfa_loginSubmit").on("click",function(){
  132. doLoginSubmit();
  133. });
  134. <#--read username cookie for login e-->
  135. if($.cookie("username")!=undefined&&$.cookie("username")!=""){
  136. $("input[name=j_username]").val($.cookie("username")==undefined?"":$.cookie("username"));
  137. $("input[name=j_password]").val("");
  138. var switch_tab=$.cookie("switch_tab")==undefined?1:$.cookie("switch_tab");
  139. if(switch_tab==2){
  140. switchTab("switch_tfaLogin");
  141. }else{
  142. $("#div_commonLogin input[name=j_password]").focus();
  143. }
  144. }else{
  145. $("#div_commonLogin input[name=j_username]").focus();
  146. }
  147. <#--resend captchae-->
  148. $("#tfa_j_otp_captcha_button").on("click",function(){
  149. if(captchaCount<60){
  150. return;
  151. }
  152. var loginName=$("#tfa_j_username").val();
  153. if(loginName==""){
  154. return;
  155. }
  156. $.get("<@base />/login/otp/"+loginName,function(data,status){
  157. alert("Data: " + data + "\nStatus: " + status);
  158. });
  159. <#--todo:send captcha-->
  160. captchaCountTimer=setInterval("getCaptchaCount()", 1000);
  161. });
  162. $('#register').on('click',function(){
  163. window.location.href="<@base />/register";
  164. });
  165. });
  166. </script>
  167. </head>
  168. <body >
  169. <div id="top">
  170. <#include "layout/nologintop.ftl">
  171. </div>
  172. <div class="container">
  173. <div class="row">
  174. <div class="col-sm-6"></div>
  175. <div class="col-md-4 col-md-offset-4 col-lg-offset-4col-xl-offset-4">
  176. <div class="panel panel-default">
  177. <table border="0">
  178. <tr>
  179. <td >
  180. </td>
  181. <td>
  182. <table id="tableform">
  183. <tr>
  184. <td>
  185. <ul id="switch_tab" class="switch_tab">
  186. <li id="switch_commonLogin" value="div_commonLogin" class="switch_tab_class switch_tab_current"><a href="javascript:void(0);">
  187. <@locale code="login.text.login.normal"/></a></li>
  188. <li id="switch_tfaLogin" value="div_tfaLogin" class="switch_tab_class"><a href="javascript:void(0);">
  189. <@locale code="login.text.login.twofactor"/></a></li>
  190. </ul>
  191. </td>
  192. </tr>
  193. <tr>
  194. <td>
  195. <div id="div_commonLogin" >
  196. <form id="loginForm" name="loginForm" action="<@base />/logon.do" method="post" class="needs-validation" novalidate>
  197. <input type="hidden" name="authType" value="basic"/>
  198. <table class="table login_form_table">
  199. <tr class="loginErrorMessage" <#if ''==loginErrorMessage>style="display:none;"</#if>>
  200. <td colspan="2" style="color:red;">
  201. ${loginErrorMessage!}
  202. </td>
  203. </tr>
  204. <tr>
  205. <td><@locale code="login.text.username"/>:</td>
  206. <td>
  207. <div class="wrapper">
  208. <i class="fa fa-user"></i>
  209. <input required="" class="form-control" type='text' id='j_username' name='username' value="admin" tabindex="1"/>
  210. </div >
  211. </td>
  212. </tr>
  213. <tr>
  214. <td><@locale code="login.text.password"/>:</td>
  215. <td>
  216. <div class="wrapper">
  217. <i class="fa fa-key fa-2" style="color: #FFD700;"></i>
  218. <input required="" class="form-control" type='password' id='j_password' name='password' value="maxkey" tabindex="2"/>
  219. </div >
  220. </td>
  221. </tr>
  222. <#if true==isCaptcha>
  223. <tr>
  224. <td><@locale code="login.text.captcha"/>:</td>
  225. <td>
  226. <div class="wrapper">
  227. <i class="fa fa-lock fa-2"></i>
  228. <input required="" class="form-control" type='text' id="j_captcha" name="captcha" tabindex="3" value="" style="float: left;"/><img id="j_captchaimg" src="<@base/>/captcha"/>
  229. </div >
  230. </td>
  231. </tr>
  232. </#if>
  233. <#if true==isRemeberMe>
  234. <tr>
  235. <td colspan="2">
  236. <table style="width:100%">
  237. <tr>
  238. <td style="width:50%">
  239. <span class="form_checkbox_label">
  240. <input type='checkbox' id="remeberMe" name="remeberMe" class="checkbox" tabindex="4" value="remeberMe" />
  241. <@locale code="login.text.remeberme"/>
  242. </span>
  243. </td>
  244. <td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
  245. </tr>
  246. </table>
  247. </td>
  248. </tr>
  249. </#if>
  250. <tr style="display:none">
  251. <td>sessionid:</td>
  252. <td><input class="form-control" type='text' id="j_sessionid" name="sessionId" value="${sessionid}" /></td>
  253. </tr>
  254. <tr >
  255. <td colspan="2">
  256. <input type="submit" id="loginSubmitButton" style="display: none;" />
  257. <input id="loginSubmit" type="button" tabindex="5" style="width: 100%;" class="button btn btn-lg btn-primary btn-block" value="<@locale code="login.button.login"/>"/></td>
  258. </tr>
  259. </table>
  260. <div class="clear"></div>
  261. </form>
  262. </div>
  263. <div id="div_tfaLogin" >
  264. <form id="tfaLoginForm" name="tfaLoginForm" action="<@base />/logon.do" method="post" class="needs-validation" novalidate>
  265. <input type="hidden" name="authType" value="tfa"/>
  266. <table class="login_form_table">
  267. <tr class="loginErrorMessage" <#if ''==loginErrorMessage>style="display:none;"</#if>>
  268. <td colspan="2" style="color:red;">
  269. ${loginErrorMessage!}
  270. </td>
  271. </tr>
  272. <tr>
  273. <td><@locale code="login.text.username"/>:</td>
  274. <td><input required="" class="form-control" type='text' id='tfa_j_username' name='username' value="" tabindex="1"/></td>
  275. </tr>
  276. <tr>
  277. <td><@locale code="login.text.password"/>:</td>
  278. <td><input required="" class="form-control" type='password' id='tfa_j_password' name='password' value="" tabindex="2" /></td>
  279. </tr>
  280. <#if true==isMfa >
  281. <#if "TOPT"==optType >
  282. <tr>
  283. <td><@locale code="login.text.currenttime"/>:</td>
  284. <td>
  285. <input class="form-control" readonly type='text' id="currentTime" name="currentTime" tabindex="3" value="" />
  286. </td>
  287. </tr>
  288. </#if>
  289. <tr>
  290. <td><@locale code="login.text.captcha"/>:</td>
  291. <td>
  292. <input required="" class="form-control" type='text' id="tfa_j_otp_captcha" name="otpCaptcha" tabindex="3" value="" style="float: left;"/>
  293. <input class="form-control" id="tfa_j_otp_captcha_button" type="button" tabindex="5" class="button" value="获取动态验证码"/>
  294. </td>
  295. </tr>
  296. <tr>
  297. <td></td>
  298. <td>
  299. <div id="currentTime"></div>
  300. </td>
  301. </tr>
  302. </#if>
  303. <#if true==isRemeberMe>
  304. <tr>
  305. <td colspan="2">
  306. <table style="width:100%">
  307. <tr>
  308. <td style="width:50%">
  309. <span class="form_checkbox_label">
  310. <input type='checkbox' id="tfa_remeberMe" name="remeberMe" class="checkbox" tabindex="4" value="remeberMe" />
  311. <@locale code="login.text.remeberme"/>
  312. </span>
  313. </td>
  314. <td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
  315. </tr>
  316. </table>
  317. </td>
  318. </tr>
  319. </#if>
  320. <tr style="display:none">
  321. <td>sessionid:</td>
  322. <td><input class="form-control" type='text' id="tfa_sessionid" name="sessionId" value="${sessionid}" /></td>
  323. </tr>
  324. <tr >
  325. <td colspan="2">
  326. <input type="submit" id="tfaLoginSubmitButton" style="display: none;" />
  327. <input id="tfa_loginSubmit" type="button" style="width: 100%;" tabindex="5" class="button btn btn-lg btn-primary btn-block" value="<@locale code="login.button.login"/>"/></td>
  328. </tr>
  329. </table>
  330. <div class="clear"></div>
  331. </form>
  332. </div>
  333. </td>
  334. </tr>
  335. <tr>
  336. <td>
  337. <table>
  338. <tr >
  339. <td ><@locale code="global.change.language"/> :</td>
  340. <td >
  341. <div >
  342. <a href="<@basePath />/login?language=en">
  343. <@locale code="global.change.language.en"/>
  344. </a>|
  345. <a href="<@basePath />/login?language=zh_CN">
  346. <@locale code="global.change.language.zh"/>
  347. </a>/ Locale : <@locale/>
  348. </div>
  349. </td>
  350. </tr>
  351. <tr>
  352. <td colspan="2">
  353. <div>
  354. <table width="100%" frame="void" cellpadding="8px;" cellspacing="8px;">
  355. <tr>
  356. <td align="left"><@locale code="login.text.otherlogins"/>:</td>
  357. </tr>
  358. <#list ssopList as ssop>
  359. <#if (ssop_index)%3==0>
  360. <tr>
  361. </#if>
  362. <td align="right" nowrap>
  363. <a href="<@base />/logon/oauth20/authorize/${ssop.provider}" title="${ssop.providerName}" >
  364. <img src="<@base />/static/${ssop.icon}" title="${ssop.providerName}" style="width=:32px;height:32px;border:0;"/>
  365. </a>&nbsp;&nbsp;
  366. </td>
  367. <#if (ssop_index +1)%3==0>
  368. </tr>
  369. </#if>
  370. </#list>
  371. <#if (ssopList?size)%3!=0>
  372. </tr>
  373. </#if>
  374. </table>
  375. </div>
  376. </td>
  377. </tr>
  378. </table>
  379. </td>
  380. </tr>
  381. <tr>
  382. <td id="register"><@locale code="login.text.register"/></td>
  383. </tr>
  384. </table>
  385. </td>
  386. </tr>
  387. </table>
  388. </div>
  389. </div>
  390. <div class="col-sm-2"></div>
  391. </div>
  392. </div>
  393. <div id="footer">
  394. <#include "layout/footer.ftl">
  395. </div>
  396. </body>
  397. </html>