Login UI optimize

maxkey-webs/maxkey-web-maxkey/src/main/resources/templates/views/forgotpassword/findpwd.ftl

@@ -21,7 +21,12 @@
 						</tr>
 						<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" class="captcha-image" src="<@base/>/captcha"/></td>
+								<td>
+								    <div class="input-group" >
+								        <input  required="" class="form-control"  type='text' id="j_captcha" name="captcha"  tabindex="3"  value=""/>
+								        <img id="j_captchaimg" class="captcha-image" src="<@base/>/captcha"/>
+								    </div>
+								</td>
 								
 						</tr>
 						<tr>

maxkey-webs/maxkey-web-maxkey/src/main/resources/templates/views/loginmobile.ftl

@@ -7,23 +7,23 @@
 			</td>
 		</tr>
 		<tr>
-			<td><@locale code="login.text.mobile"/></td>
+			<!--<td><@locale code="login.text.mobile"/></td>-->
 			<td>
 				<div  class="wrapper">
-				    <div class="input-group" style="width:250px;">
+				    <div class="input-group" >
                 	   <i class="fa fa-mobile"></i>
-					   <input required="" class="form-control"  type='text' id='mobile_j_username'  name='username' value="" tabindex="1"/>
+					   <input required="" class="form-control"  type='text' id='mobile_j_username'  name='username' value="" tabindex="1" placeholder='<@locale code="login.text.mobile"/>'/>
 				    </div>
 				</div>
 			</td>
 		</tr>
 		<tr> 
-			<td><@locale code="login.text.smscode"/></td>
+			<!--<td><@locale code="login.text.smscode"/></td>-->
 			<td>
 				<div  class="wrapper">
-				    <div class="input-group" style="width:250px;">
+				    <div class="input-group" >
                     	<i class="fa fa-lock fa-2"></i>
-    					<input required="" class="form-control"  type='password' id='mobile_j_password'  name='password' value=""  tabindex="2"  style="float: left;"/>
+    					<input required="" class="form-control"  type='password' id='mobile_j_password'  name='password' value=""  tabindex="2"  style="float: left;"  placeholder='<@locale code="login.text.smscode"/>'/>
     					<button  class="btn  btn-outline-secondary"  id="mobile_j_otp_button"  tabindex="5"  type="button" >
                            <@locale code="login.text.login.mobile.obtain"/>
                         </button>

maxkey-webs/maxkey-web-maxkey/src/main/resources/templates/views/loginnormal.ftl

@@ -7,37 +7,37 @@
 			</td>
 		</tr>
 		<tr>
-			<td><@locale code="login.text.username"/></td>
+			<!--<td><@locale code="login.text.username"/></td>-->
 			<td>
 			 	<div  class="wrapper">
-			 	   <div class="input-group" style="width:250px;">
+			 	   <div class="input-group" >
                 	   <i class="fa fa-user" ></i>
-					   <input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"/>
+					   <input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"  placeholder='<@locale code="login.text.username"/>' />
 				    </div >
 				</div >
 			</td>
 		</tr>
 		<tr>
-			<td><@locale code="login.text.password"/></td>
+			<!--<td><@locale code="login.text.password"/></td>-->
 			<td>
 				<div  class="wrapper">
-				    <div class="input-group" style="width:250px;">
+				    <div class="input-group" >
                 	   <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"/>
-				       <i class="passwdeye fa fa-eye-slash fa-2" style="left: 220px; color: gainsboro;" refid="j_password" ></i>
+					   <input required="" class="form-control"  type='password' id='j_password'  name='password' value="maxkey"  tabindex="2" placeholder='<@locale code="login.text.password"/>'/>
+				       <i class="passwdeye fa fa-eye-slash fa-2" style="left: 270px; color: gainsboro;" refid="j_password" ></i>
 				    </div >
 				</div >
 			</td>
 		</tr>
 		<#if true==isCaptcha> 
 		<tr>
-			<td><@locale code="login.text.captcha"/></td>
+			<!--<td><@locale code="login.text.captcha"/></td>-->
 			<td>
 				<div  class="wrapper">
                 	
-                	<div class="input-group" style="width:250px;">
+                	<div class="input-group" >
                 	   <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;"/>
+					   <input required="" class="form-control "  type='text' id="j_captcha" name="captcha"  tabindex="3"  value="" style="float: left;"  placeholder='<@locale code="login.text.captcha"/>'/>
 					   <img id="j_captchaimg" class="captcha-image" src="<@base/>/captcha"/>
 				    </div >
 				</div >

maxkey-webs/maxkey-web-maxkey/src/main/resources/templates/views/logintfa.ftl

@@ -7,30 +7,30 @@
 			</td>
 		</tr>
 		<tr>
-			<td><@locale code="login.text.username"/></td>
+			<!--<td><@locale code="login.text.username"/></td>-->
 			<td>
 				<div  class="wrapper">
 					<i class="fa fa-user"></i>
-					<input required="" class="form-control"  type='text' id='tfa_j_username'  name='username' value="" tabindex="1"/>
+					<input required="" class="form-control"  type='text' id='tfa_j_username'  name='username' value="" tabindex="1"  placeholder='<@locale code="login.text.username"/>'/>
 				</div>
 			</td>
 		</tr>
 		<tr> 
-			<td><@locale code="login.text.password"/></td>
+			<!--<td><@locale code="login.text.password"/></td>-->
 			<td>
 				<div  class="wrapper">
 					<i class="fa fa-key fa-2" style="color: #FFD700;"></i>
-					<input required="" class="form-control"  type='password' id='tfa_j_password'  name='password' value=""  tabindex="2" />
+					<input required="" class="form-control"  type='password' id='tfa_j_password'  name='password' value=""  tabindex="2"  placeholder='<@locale code="login.text.password"/>'/>
 				</div>
 			</td>
 		</tr>
 		<#if true==isMfa >
 		<tr>
-			<td><@locale code="login.text.captcha"/></td>
+			<!--<td><@locale code="login.text.captcha"/></td>-->
 			<td>
 				<div  class="wrapper">
 					<i class="fa fa-lock fa-2"></i>
-					<input required="" class="form-control"  type='text' id="tfa_j_otp_captcha" name="otpCaptcha"  tabindex="3"  value=""   style="float: left;"/>
+					<input required="" class="form-control"  type='text' id="tfa_j_otp_captcha" name="otpCaptcha"  tabindex="3"  value=""   style="float: left;"  placeholder='<@locale code="login.text.captcha"/>'/>
 					<button  class="btn  btn-outline-secondary"  id="tfa_j_otp_button"  tabindex="5"  type="button" >
 					   <@locale code="login.text.login.twofactor.obtain"/>
 					</button>

maxkey-webs/maxkey-web-maxkey/src/main/resources/templates/views/main/appList.ftl

@@ -22,7 +22,7 @@
 		<div class="row">
 		</#if>
 			<div class="col-3" style="min-width: 160px;">
-	  				<table  class="none" style="min-width: 160px; min-height: 120px;border-spacing: 0;border-collapse: collapse;">
+	  				<table  class="none" style="width: 100%; min-height: 120px;border-spacing: 0;border-collapse: collapse;">
 	  					<tr><td style="text-align: center;border-spacing: 0;border-collapse: collapse;border: 0px;">
 	  						<a  target="_blank" title="${app.name}"
 	  							<#if "SP"==app.inducer>

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

@@ -36,7 +36,7 @@
 								<#if true==isCaptcha> 
 								<div class="">
 								    <div class="input-group">
-                                        <span class="input-group-text fa fa-refresh d-flex justify-content-center"></span>
+                                        <span class="input-group-text fa fa-shield d-flex justify-content-center"></span>
                                         <input id="j_captcha" name="captcha" class="form-control" value="" type="text" required="" placeholder="<@locale code="login.text.captcha"/>"> 
                                         <img id="j_captchaimg" class="captcha-image" src="<@base/>/captcha" />
                                     </div>

maxkey-webs/maxkey-web-resources/src/main/resources/static/css/base.css

@@ -255,16 +255,25 @@ body{
 	width:358px;
 }
 
-.login_form_table td, .login_form_table th {
+.login_form_table td,
+.login_form_table th {
     height: 60px;
     vertical-align: middle;
     border-top: 1px solid #dee2e6;
 }
 
-#j_username,#j_password,#tfa_j_username,#tfa_j_password,#currentTime{
+#j_username,
+#j_password,
+#tfa_j_username,
+#tfa_j_password,
+#currentTime,
+#mobile_j_username,
+#mobile_j_password
+{
 	width	:250px;
 	font-size: 14px;
 	font-weight: bold;
+	height: 40px;
 }
 
 #j_captcha{
@@ -287,6 +296,12 @@ body{
 	vertical-align: top;
 }
 
+.login_form_table #j_captchaimg{
+    width: 100px;
+    height: 40px;
+    vertical-align: top;
+}
+
 #normalLogin,#tfaLogin,#mobileLogin,#qrcodelogin{
 	
 }
@@ -335,18 +350,23 @@ body{
 	position: relative; 
 }
 
+
+.login_form_table  .wrapper .input-group{
+	width:90%;
+}
+
 #div_normalLogin .wrapper input,
 #div_tfaLogin .wrapper input,
 #div_mobileLogin .wrapper input { 
-    text-indent: 20px;
+    text-indent: 46px;
 }
 	
 #div_normalLogin .wrapper i.fa,
 #div_tfaLogin .wrapper i.fa,
 #div_mobileLogin .wrapper i.fa{ 
 	position: absolute; 
-	top: 5px; 
-	left: 5px; 
+	top: 6px; 
+	left: 16px; 
 	font-size: 24px; 
 	color: black;
 	z-index: 20;
@@ -354,8 +374,12 @@ body{
 
 #tfa_j_otp_button,#mobile_j_otp_button{
     width   :130px;
-    height: 34px;
+    height: 40px;
     font-size: 14px;
     font-weight: bold;  
     text-indent: 1px;
 }
+
+#otherlogins{
+    margin-top: -14px;
+}

maxkey-webs/maxkey-web-resources/src/main/resources/static/css_mgt/base.css

@@ -513,6 +513,7 @@ header .header-container .nav-left>li, .header .header-container .nav-right>li {
 #j_username,#j_password,#tfa_j_username,#tfa_j_password,#currentTime{
 	font-size: 14px;
 	font-weight: bold;
+	height: 40px;
 }
 
 #loginForm .input-group i.fa{