登录图标改进

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/HELP-US-OUT.txt

+I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
+Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
+comprehensive icon sets or copy and paste your own.
+
+Please. Check it out.
+
+-Dave Gandy

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/animated.less

+// Animated Icons
+// --------------------------
+
+.@{fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.@{fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/bordered-pulled.less

+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em @fa-border-color;
+  border-radius: .1em;
+}
+
+.@{fa-css-prefix}-pull-left { float: left; }
+.@{fa-css-prefix}-pull-right { float: right; }
+
+.@{fa-css-prefix} {
+  &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/core.less

+// Base Class Definition
+// -------------------------
+
+.@{fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/fixed-width.less

+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/font-awesome.less

+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables.less";
+@import "mixins.less";
+@import "path.less";
+@import "core.less";
+@import "larger.less";
+@import "fixed-width.less";
+@import "list.less";
+@import "bordered-pulled.less";
+@import "animated.less";
+@import "rotated-flipped.less";
+@import "stacked.less";
+@import "icons.less";
+@import "screen-reader.less";

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/larger.less

+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/list.less

+// List Icons
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: @fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+  position: absolute;
+  left: -@fa-li-width;
+  width: @fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.@{fa-css-prefix}-lg {
+    left: (-@fa-li-width + (4em / 14));
+  }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/mixins.less

+// Mixins
+// --------------------------
+
+.fa-icon() {
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+.fa-icon-rotate(@degrees, @rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
+  -webkit-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+
+.fa-icon-flip(@horiz, @vert, @rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
+  -webkit-transform: scale(@horiz, @vert);
+      -ms-transform: scale(@horiz, @vert);
+          transform: scale(@horiz, @vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable() {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/path.less

+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
+  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
+    url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
+    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
+    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
+    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
+  // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/rotated-flipped.less

+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
+.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .@{fa-css-prefix}-rotate-90,
+:root .@{fa-css-prefix}-rotate-180,
+:root .@{fa-css-prefix}-rotate-270,
+:root .@{fa-css-prefix}-flip-horizontal,
+:root .@{fa-css-prefix}-flip-vertical {
+  filter: none;
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/screen-reader.less

+// Screen Readers
+// -------------------------
+
+.sr-only { .sr-only(); }
+.sr-only-focusable { .sr-only-focusable(); }

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/less/stacked.less

+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.@{fa-css-prefix}-stack-1x { line-height: inherit; }
+.@{fa-css-prefix}-stack-2x { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-inverse; }

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_animated.scss

+// Spinning Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_bordered-pulled.scss

+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.#{$fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_core.scss

+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_fixed-width.scss

+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_larger.scss

+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.#{$fa-css-prefix}-2x { font-size: 2em; }
+.#{$fa-css-prefix}-3x { font-size: 3em; }
+.#{$fa-css-prefix}-4x { font-size: 4em; }
+.#{$fa-css-prefix}-5x { font-size: 5em; }

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_list.scss

+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: $fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.#{$fa-css-prefix}-li {
+  position: absolute;
+  left: -$fa-li-width;
+  width: $fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.#{$fa-css-prefix}-lg {
+    left: -$fa-li-width + (4em / 14);
+  }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_mixins.scss

+// Mixins
+// --------------------------
+
+@mixin fa-icon() {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
+  -webkit-transform: rotate($degrees);
+      -ms-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
+  -webkit-transform: scale($horiz, $vert);
+      -ms-transform: scale($horiz, $vert);
+          transform: scale($horiz, $vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_path.scss

+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_rotated-flipped.scss

+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .#{$fa-css-prefix}-rotate-90,
+:root .#{$fa-css-prefix}-rotate-180,
+:root .#{$fa-css-prefix}-rotate-270,
+:root .#{$fa-css-prefix}-flip-horizontal,
+:root .#{$fa-css-prefix}-flip-vertical {
+  filter: none;
+}

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_screen-reader.scss

+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only(); }
+.sr-only-focusable { @include sr-only-focusable(); }

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/_stacked.scss

+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
+.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
+.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

maxkey-web-maxkey/src/main/resources/static/font-awesome-4.7.0/scss/font-awesome.scss

+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";

maxkey-web-maxkey/src/main/resources/templates/views/layout/common.cssjs.ftl

@@ -6,6 +6,8 @@
 	<link 	href="<@base />/static/bootstrap-4.4.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
 	<link  href="<@base />/static/bootstrap-4.4.1/css/<@theme/>/bootstrap.min.css" type="text/css" rel="stylesheet" />
 	<script src ="<@base />/static/bootstrap-4.4.1/js/bootstrap.min.js" type="text/javascript" ></script>
+	<#-- font-awesome-4.7.0 -->
+	<link   href="<@base />/static/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
 	<#-- metadata -->
 	<script src ="<@base />/static/jquery/jquery.metadata.js" type="text/javascript" ></script>
 	<#--bootstrap-table-1.16.0-->

maxkey-web-maxkey/src/main/resources/templates/views/login.ftl

 <!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml"  lang="en">
+<html   lang="en">
 <head>
-
 <#include  "layout/header.ftl">
 <#include  "layout/common.cssjs.ftl">
-<#if true==isKerberos> 
-	<@browser name="MSIE">
-		<script type="text/javascript"> 
-			/**configuration AD Domain Authentication**/
-		    var WinNetwork = new ActiveXObject("WScript.Network");
-		    var userDomains=${userDomainUrlJson};
-		    for(var iter = 0; iter < userDomains.length; iter++){
-		    	if(WinNetwork.UserDomain==userDomains[iter].userDomain){
-		    		//alert("Kerberos redirect Uri is "+userDomains[iter].redirectUri);
-		    		document.location.href=userDomains[iter].redirectUri;
-		    	}
-		    }
-		</script>
-	</@browser>
-</#if>
 
-<script type="text/javascript"> 
-<#--resend captcha code Interval-->
-var captchaCountTimer;
-var captchaCount=60;
-function getCaptchaCount(){
-	$("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.obtain.valid"/>("+captchaCount+")<@locale code="login.text.login.twofactor.obtain.valid.unit"/>");
-	
-	
-	captchaCount--;
-	if(captchaCount==0){
-		$("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.obtain"/>");
-		captchaCount=60;
-		clearInterval(captchaCountTimer);
-	}
-}
-<#--current datetime-->
-var currentDate= new Date('${.now}');
-var fullYear=currentDate.getFullYear();
-var month=currentDate.getMonth()+1;
-var date=currentDate.getDate();
+	<style>
+		.wrapper { position: relative; }
+		i.fa { position: absolute; top: 5px; left: 5px; font-size: 22px; color: gray;}
+		.wrapper input { text-indent: 20px;}
+	</style>
 
-var hours=currentDate.getHours();
-var minutes=currentDate.getMinutes();
-var seconds=currentDate.getSeconds();
-var strTime="";
-function formatTime(){
-	strTime=fullYear+"-";
-	strTime+=(month<10?"0"+month:month)+"-";
-	strTime+=(date<10?"0"+date:date)+" ";
-	strTime+=(hours<10?"0"+hours:hours)+":";
-	strTime+=(minutes<10?"0"+minutes:minutes)+":";
-	strTime+=(seconds<10?"0"+seconds:seconds);
-}
+	<#if true==isKerberos> 
+		<@browser name="MSIE">
+			<script type="text/javascript"> 
+				/**configuration AD Domain Authentication**/
+			    var WinNetwork = new ActiveXObject("WScript.Network");
+			    var userDomains=${userDomainUrlJson};
+			    for(var iter = 0; iter < userDomains.length; iter++){
+			    	if(WinNetwork.UserDomain==userDomains[iter].userDomain){
+			    		//alert("Kerberos redirect Uri is "+userDomains[iter].redirectUri);
+			    		document.location.href=userDomains[iter].redirectUri;
+			    	}
+			    }
+			</script>
+		</@browser>
+	</#if>
 
-<#if true==isMfa && "TOPT"==optType>
-function currentTime(){
-	seconds++;
-	if(seconds>59){
-		minutes++;
-		seconds=0;
-	}
-	if(minutes>59){
-		hours++;
-		minutes=0;
-	}
-	if(hours>23){
-		date++;
-		hours=0;
+	<script type="text/javascript"> 
+	<#--resend captcha code Interval-->
+	var captchaCountTimer;
+	var captchaCount=60;
+	function getCaptchaCount(){
+		$("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.obtain.valid"/>("+captchaCount+")<@locale code="login.text.login.twofactor.obtain.valid.unit"/>");
+		
+		
+		captchaCount--;
+		if(captchaCount==0){
+			$("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.obtain"/>");
+			captchaCount=60;
+			clearInterval(captchaCountTimer);
+		}
 	}
-	formatTime();
-	//for timebase token
-	getTimeBaseCount();
+	<#--current datetime-->
+	var currentDate= new Date('${.now}');
+	var fullYear=currentDate.getFullYear();
+	var month=currentDate.getMonth()+1;
+	var date=currentDate.getDate();
 	
-	$("#currentTime").val(strTime);
-}
-
-<#--timeBase Token  Interval default is 30s-->
-var timeBaseCount;
-function getTimeBaseCount(){
-	if(seconds<${optInterval}){
-		timeBaseCount=${optInterval}-seconds;
-	}else{
-		timeBaseCount=${optInterval}-(seconds-${optInterval});
-	}
-	$("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.validTime"/>("+timeBaseCount+")<@locale code="login.text.login.twofactor.validTime.unit"/>");
-};
-</#if>
-var currentSwitchTab="div_commonLogin";
-<#--submit form-->		
-function doLoginSubmit(){
-	if(currentSwitchTab=="div_commonLogin"){
-		$.cookie("username", $("#loginForm input[name=j_username]").val(), { expires: 7 });
-		$.cookie("switch_form", 1, { expires: 7 });
-		$("#loginSubmitButton").click();
-	}else{
-		$.cookie("username", $("#tfaLoginForm input[name=j_username]").val(), { expires: 7 });
-		$.cookie("switch_form", 2, { expires: 7 });
-		$("#tfaLoginSubmitButton").click();
+	var hours=currentDate.getHours();
+	var minutes=currentDate.getMinutes();
+	var seconds=currentDate.getSeconds();
+	var strTime="";
+	function formatTime(){
+		strTime=fullYear+"-";
+		strTime+=(month<10?"0"+month:month)+"-";
+		strTime+=(date<10?"0"+date:date)+" ";
+		strTime+=(hours<10?"0"+hours:hours)+":";
+		strTime+=(minutes<10?"0"+minutes:minutes)+":";
+		strTime+=(seconds<10?"0"+seconds:seconds);
 	}
-};
-
-<#--switch LoginForm && tfaLoginForm-->
-function switchTab(id){
-	if($("#"+id+" input[name=j_username]").val()==""){
-		$("#"+id+" input[name=j_username]").focus();
-	}else{
-		$("#"+id+" input[name=j_password]").focus();
-	}
-	currentSwitchTab=id;
-}
-<#-- when press ENTER key,do form submit-->
-document.onkeydown=function(event){
-	var e = event || window.event || arguments.callee.caller.arguments[0];
-	if(e && e.keyCode==13){ 
-		doLoginSubmit();
-	};
-};
 	
-$(function(){
 	<#if true==isMfa && "TOPT"==optType>
-	setInterval("currentTime()", 1000);
-	</#if>
-	<#--on captcha image click ,new a captcha code-->
-	<#if true==isCaptcha>
-	$('#j_captchaimg').click(function () {//
-           $(this).attr("src", "<@base />/captcha"); 
-	}); 
+	function currentTime(){
+		seconds++;
+		if(seconds>59){
+			minutes++;
+			seconds=0;
+		}
+		if(minutes>59){
+			hours++;
+			minutes=0;
+		}
+		if(hours>23){
+			date++;
+			hours=0;
+		}
+		formatTime();
+		//for timebase token
+		getTimeBaseCount();
+		
+		$("#currentTime").val(strTime);
+	}
+	
+	<#--timeBase Token  Interval default is 30s-->
+	var timeBaseCount;
+	function getTimeBaseCount(){
+		if(seconds<${optInterval}){
+			timeBaseCount=${optInterval}-seconds;
+		}else{
+			timeBaseCount=${optInterval}-(seconds-${optInterval});
+		}
+		$("#tfa_j_otp_captcha_button").val("<@locale code="login.text.login.twofactor.validTime"/>("+timeBaseCount+")<@locale code="login.text.login.twofactor.validTime.unit"/>");
+	};
 	</#if>
-
-	<#--submit loginForme-->
-	$("#loginSubmit").on("click",function(){
-			doLoginSubmit();
-	});
-	<#--submit tfaLoginForme-->	
-	$("#tfa_loginSubmit").on("click",function(){
-			doLoginSubmit();
-	});
+	var currentSwitchTab="div_commonLogin";
+	<#--submit form-->		
+	function doLoginSubmit(){
+		if(currentSwitchTab=="div_commonLogin"){
+			$.cookie("username", $("#loginForm input[name=j_username]").val(), { expires: 7 });
+			$.cookie("switch_form", 1, { expires: 7 });
+			$("#loginSubmitButton").click();
+		}else{
+			$.cookie("username", $("#tfaLoginForm input[name=j_username]").val(), { expires: 7 });
+			$.cookie("switch_form", 2, { expires: 7 });
+			$("#tfaLoginSubmitButton").click();
+		}
+	};
 	
-	<#--read username cookie for login e-->		
-	if($.cookie("username")!=undefined&&$.cookie("username")!=""){
-		$("input[name=j_username]").val($.cookie("username")==undefined?"":$.cookie("username"));
-		$("input[name=j_password]").val("");
-		var switch_tab=$.cookie("switch_tab")==undefined?1:$.cookie("switch_tab");
-		if(switch_tab==2){
-			switchTab("switch_tfaLogin");
+	<#--switch LoginForm && tfaLoginForm-->
+	function switchTab(id){
+		if($("#"+id+" input[name=j_username]").val()==""){
+			$("#"+id+" input[name=j_username]").focus();
 		}else{
-			$("#div_commonLogin input[name=j_password]").focus();
+			$("#"+id+" input[name=j_password]").focus();
 		}
-			
-	}else{
-		$("#div_commonLogin input[name=j_username]").focus();
+		currentSwitchTab=id;
 	}
-	<#--resend  captchae-->	
-	$("#tfa_j_otp_captcha_button").on("click",function(){	
-		if(captchaCount<60){
-			return;
-		}
-		var loginName=$("#tfa_j_username").val();
-		if(loginName==""){
-			return;
+	<#-- when press ENTER key,do form submit-->
+	document.onkeydown=function(event){
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+		if(e && e.keyCode==13){ 
+			doLoginSubmit();
+		};
+	};
+	
+	$(function(){
+		<#if true==isMfa && "TOPT"==optType>
+		setInterval("currentTime()", 1000);
+		</#if>
+		<#--on captcha image click ,new a captcha code-->
+		<#if true==isCaptcha>
+		$('#j_captchaimg').click(function () {//
+	           $(this).attr("src", "<@base />/captcha"); 
+		}); 
+		</#if>
+	
+		<#--submit loginForme-->
+		$("#loginSubmit").on("click",function(){
+				doLoginSubmit();
+		});
+		<#--submit tfaLoginForme-->	
+		$("#tfa_loginSubmit").on("click",function(){
+				doLoginSubmit();
+		});
+		
+		<#--read username cookie for login e-->		
+		if($.cookie("username")!=undefined&&$.cookie("username")!=""){
+			$("input[name=j_username]").val($.cookie("username")==undefined?"":$.cookie("username"));
+			$("input[name=j_password]").val("");
+			var switch_tab=$.cookie("switch_tab")==undefined?1:$.cookie("switch_tab");
+			if(switch_tab==2){
+				switchTab("switch_tfaLogin");
+			}else{
+				$("#div_commonLogin input[name=j_password]").focus();
+			}
+				
+		}else{
+			$("#div_commonLogin input[name=j_username]").focus();
 		}
-		$.get("<@base />/login/otp/"+loginName,function(data,status){
-    		alert("Data: " + data + "\nStatus: " + status);
-  		});
+		<#--resend  captchae-->	
+		$("#tfa_j_otp_captcha_button").on("click",function(){	
+			if(captchaCount<60){
+				return;
+			}
+			var loginName=$("#tfa_j_username").val();
+			if(loginName==""){
+				return;
+			}
+			$.get("<@base />/login/otp/"+loginName,function(data,status){
+	    		alert("Data: " + data + "\nStatus: " + status);
+	  		});
+			
+			<#--todo:send captcha-->
+			captchaCountTimer=setInterval("getCaptchaCount()", 1000);
+		});
+		$('#register').on('click',function(){
+			window.location.href="<@base />/register";
+		});
 		
-		<#--todo:send captcha-->
-		captchaCountTimer=setInterval("getCaptchaCount()", 1000);
 	});
-	$('#register').on('click',function(){
-		window.location.href="<@base />/register";
-	});
-	
-});
 </script>
 </head>
 <body  >
@@ -214,17 +220,30 @@ $(function(){
 										</tr>
 										<tr>
 											<td><@locale code="login.text.username"/>：</td>
-											<td><input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"/></td>
+											<td>
+											 	<div  class="wrapper">
+		                                        	<i class="fa fa-user"></i>
+													<input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"/>
+												</div >
+											</td>
 										</tr>
 										<tr>
 											<td><@locale code="login.text.password"/>：</td>
-											<td><input required="" class="form-control"  type='password' id='j_password'  name='password' value="maxkey"  tabindex="2"/></td>
+											<td>
+												<div  class="wrapper">
+		                                        	<i class="fa fa-key fa-2" style="color: #FFD700;"></i>
+													<input required="" class="form-control"  type='password' id='j_password'  name='password' value="maxkey"  tabindex="2"/>
+												</div >
+											</td>
 										</tr>
 										<#if true==isCaptcha> 
 										<tr>
 											<td><@locale code="login.text.captcha"/>：</td>
 											<td>
-											<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"/>
+												<div  class="wrapper">
+		                                        	<i class="fa fa-lock fa-2"></i>
+													<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"/>
+												</div >
 											</td>
 											
 										</tr>