2
0

login.ftl 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  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"==otpType>
  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<${otpInterval}){
  80. timeBaseCount=${otpInterval}-seconds;
  81. }else{
  82. timeBaseCount=${otpInterval}-(seconds-${otpInterval});
  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"==otpType>
  118. setInterval("currentTime()", 1000);
  119. </#if>
  120. <#--submit loginForme-->
  121. $("#loginSubmit").on("click",function(){
  122. doLoginSubmit();
  123. });
  124. <#--submit tfaLoginForme-->
  125. $("#tfa_loginSubmit").on("click",function(){
  126. doLoginSubmit();
  127. });
  128. <#--read username cookie for login e-->
  129. if($.cookie("username")!=undefined&&$.cookie("username")!=""){
  130. $("input[name=j_username]").val($.cookie("username")==undefined?"":$.cookie("username"));
  131. $("input[name=j_password]").val("");
  132. var switch_tab=$.cookie("switch_tab")==undefined?1:$.cookie("switch_tab");
  133. if(switch_tab==2){
  134. switchTab("switch_tfaLogin");
  135. }else{
  136. $("#div_commonLogin input[name=j_password]").focus();
  137. }
  138. }else{
  139. $("#div_commonLogin input[name=j_username]").focus();
  140. }
  141. <#--resend captchae-->
  142. $("#tfa_j_otp_captcha_button").on("click",function(){
  143. if(captchaCount<60){
  144. return;
  145. }
  146. var loginName=$("#tfa_j_username").val();
  147. if(loginName==""){
  148. return;
  149. }
  150. $.get("<@base />/login/otp/"+loginName,function(data,status){
  151. alert("Data: " + data + "\nStatus: " + status);
  152. });
  153. <#--todo:send captcha-->
  154. captchaCountTimer=setInterval("getCaptchaCount()", 1000);
  155. });
  156. $('#register').on('click',function(){
  157. window.location.href="<@base />/registration/forward";
  158. });
  159. });
  160. </script>
  161. </head>
  162. <body >
  163. <div id="top">
  164. <#include "layout/nologintop.ftl">
  165. </div>
  166. <div class="container">
  167. <div class="row">
  168. <div class="col-sm-6"></div>
  169. <div class="col-md-4 col-md-offset-4 col-lg-offset-4col-xl-offset-4">
  170. <div class="panel panel-default">
  171. <table border="0">
  172. <tr>
  173. <td >
  174. </td>
  175. <td>
  176. <table id="tableform">
  177. <tr>
  178. <td>
  179. <ul id="switch_tab" class="switch_tab">
  180. <li id="switch_commonLogin" value="div_commonLogin" class="switch_tab_class switch_tab_current"><a href="javascript:void(0);">
  181. <@locale code="login.text.login.normal"/></a></li>
  182. <li id="switch_tfaLogin" value="div_tfaLogin" class="switch_tab_class"><a href="javascript:void(0);">
  183. <@locale code="login.text.login.twofactor"/></a></li>
  184. </ul>
  185. </td>
  186. </tr>
  187. <tr>
  188. <td>
  189. <div id="div_commonLogin" >
  190. <form id="loginForm" name="loginForm" action="<@base />/logon.do" method="post" class="needs-validation" novalidate>
  191. <input type="hidden" name="authType" value="basic"/>
  192. <table class="table login_form_table">
  193. <tr class="loginErrorMessage" <#if ''==loginErrorMessage>style="display:none;"</#if>>
  194. <td colspan="2" style="color:red;">
  195. ${loginErrorMessage!}
  196. </td>
  197. </tr>
  198. <tr>
  199. <td><@locale code="login.text.username"/>:</td>
  200. <td>
  201. <div class="wrapper">
  202. <i class="fa fa-user"></i>
  203. <input required="" class="form-control" type='text' id='j_username' name='username' value="admin" tabindex="1"/>
  204. </div >
  205. </td>
  206. </tr>
  207. <tr>
  208. <td><@locale code="login.text.password"/>:</td>
  209. <td>
  210. <div class="wrapper">
  211. <i class="fa fa-key fa-2" style="color: #FFD700;"></i>
  212. <input required="" class="form-control" type='password' id='j_password' name='password' value="maxkey" tabindex="2"/>
  213. </div >
  214. </td>
  215. </tr>
  216. <#if true==isCaptcha>
  217. <tr>
  218. <td><@locale code="login.text.captcha"/>:</td>
  219. <td>
  220. <div class="wrapper">
  221. <i class="fa fa-lock fa-2"></i>
  222. <input required="" class="form-control " type='text' id="j_captcha" name="captcha" tabindex="3" value="" style="float: left;"/><img id="j_captchaimg" class="captcha-image" src="<@base/>/captcha"/>
  223. </div >
  224. </td>
  225. </tr>
  226. </#if>
  227. <#if true==isRemeberMe>
  228. <tr>
  229. <td colspan="2">
  230. <table style="width:100%">
  231. <tr>
  232. <td style="width:50%">
  233. <span class="form_checkbox_label">
  234. <input type='checkbox' id="remeberMe" name="remeberMe" class="checkbox" tabindex="4" value="remeberMe" />
  235. <@locale code="login.text.remeberme"/>
  236. </span>
  237. </td>
  238. <td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
  239. </tr>
  240. </table>
  241. </td>
  242. </tr>
  243. </#if>
  244. <tr style="display:none">
  245. <td>sessionid:</td>
  246. <td><input class="form-control" type='text' id="j_sessionid" name="sessionId" value="${sessionid}" /></td>
  247. </tr>
  248. <tr >
  249. <td colspan="2">
  250. <input type="submit" id="loginSubmitButton" style="display: none;" />
  251. <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>
  252. </tr>
  253. </table>
  254. <div class="clear"></div>
  255. </form>
  256. </div>
  257. <div id="div_tfaLogin" >
  258. <form id="tfaLoginForm" name="tfaLoginForm" action="<@base />/logon.do" method="post" class="needs-validation" novalidate>
  259. <input type="hidden" name="authType" value="tfa"/>
  260. <table class="login_form_table">
  261. <tr class="loginErrorMessage" <#if ''==loginErrorMessage>style="display:none;"</#if>>
  262. <td colspan="2" style="color:red;">
  263. ${loginErrorMessage!}
  264. </td>
  265. </tr>
  266. <tr>
  267. <td><@locale code="login.text.username"/>:</td>
  268. <td><input required="" class="form-control" type='text' id='tfa_j_username' name='username' value="" tabindex="1"/></td>
  269. </tr>
  270. <tr>
  271. <td><@locale code="login.text.password"/>:</td>
  272. <td><input required="" class="form-control" type='password' id='tfa_j_password' name='password' value="" tabindex="2" /></td>
  273. </tr>
  274. <#if true==isMfa >
  275. <tr>
  276. <td><@locale code="login.text.captcha"/>:</td>
  277. <td>
  278. <input required="" class="form-control" type='text' id="tfa_j_otp_captcha" name="otpCaptcha" tabindex="3" value="" style="float: left;"/>
  279. <input class="form-control" id="tfa_j_otp_captcha_button" type="button" tabindex="5" class="button" value="获取动态验证码"/>
  280. </td>
  281. </tr>
  282. <#if "TOPT"==otpType >
  283. <tr>
  284. <td><@locale code="login.text.currenttime"/>:</td>
  285. <td>
  286. <input class="form-control" readonly type='text' id="currentTime" name="currentTime" tabindex="3" value="" />
  287. </td>
  288. </tr>
  289. </#if>
  290. <tr>
  291. <td></td>
  292. <td>
  293. <div id="currentTime"></div>
  294. </td>
  295. </tr>
  296. </#if>
  297. <#if true==isRemeberMe>
  298. <tr>
  299. <td colspan="2">
  300. <table style="width:100%">
  301. <tr>
  302. <td style="width:50%">
  303. <span class="form_checkbox_label">
  304. <input type='checkbox' id="tfa_remeberMe" name="remeberMe" class="checkbox" tabindex="4" value="remeberMe" />
  305. <@locale code="login.text.remeberme"/>
  306. </span>
  307. </td>
  308. <td style="width:50%"><a href="<@base />/forgotpassword/forward"><@locale code="login.text.forgotpassword"/></a></td>
  309. </tr>
  310. </table>
  311. </td>
  312. </tr>
  313. </#if>
  314. <tr style="display:none">
  315. <td>sessionid:</td>
  316. <td><input class="form-control" type='text' id="tfa_sessionid" name="sessionId" value="${sessionid}" /></td>
  317. </tr>
  318. <tr >
  319. <td colspan="2">
  320. <input type="submit" id="tfaLoginSubmitButton" style="display: none;" />
  321. <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>
  322. </tr>
  323. </table>
  324. <div class="clear"></div>
  325. </form>
  326. </div>
  327. </td>
  328. </tr>
  329. <tr>
  330. <td>
  331. <table id="otherlogins" width="100%">
  332. <tr>
  333. <td colspan="3" align="left"><@locale code="login.text.otherlogins"/>:</td>
  334. </tr>
  335. <#list ssopList as ssop>
  336. <#if (ssop_index)%4==0>
  337. <tr>
  338. </#if>
  339. <td align="center" nowrap style="height: 40px;">
  340. <a href="<@base />/logon/oauth20/authorize/${ssop.provider}" title="${ssop.providerName}" >
  341. <img src="<@base />/static/${ssop.icon}" title="${ssop.providerName}" style="width=:32px;height:32px;border:0;"/>
  342. </a>&nbsp;&nbsp;
  343. </td>
  344. <#if (ssop_index +1)%4==0>
  345. </tr>
  346. </#if>
  347. </#list>
  348. <#if (ssopList?size)%4!=0>
  349. </tr>
  350. </#if>
  351. </table>
  352. </td>
  353. </tr>
  354. <tr>
  355. <td id="register"><@locale code="login.text.register"/></td>
  356. </tr>
  357. </table>
  358. </td>
  359. </tr>
  360. </table>
  361. </div>
  362. </div>
  363. <div class="col-sm-2"></div>
  364. </div>
  365. </div>
  366. <div id="footer">
  367. <#include "layout/footer.ftl">
  368. </div>
  369. </body>
  370. </html>