Login UI optimize

maxkey-webs/maxkey-web-maxkey/src/main/resources/messages/message.properties

@@ -59,7 +59,7 @@ login.text.username=\u7528\u6237\u540D
 login.text.mobile=\u624B\u673A\u53F7\u7801
 login.text.password=\u5BC6    \u7801
 login.text.captcha=\u9A8C\u8BC1\u7801
-login.text.smscode=\u77ED\u4FE1\u9A8C\u8BC1\u7801
+login.text.smscode=\u9A8C \u8BC1 \u7801
 login.text.remeberme=\u8BB0\u4F4F\u767B\u5F55
 login.text.forgotpassword=\u5FD8\u8BB0\u5BC6\u7801
 login.button.login=\u767B\u5F55

maxkey-webs/maxkey-web-maxkey/src/main/resources/messages/message_en.properties

@@ -59,7 +59,7 @@ login.text.username=Username
 login.text.mobile=Phone Number
 login.text.password=Password
 login.text.captcha=CAPTCHA
-login.text.smscode=Message Code
+login.text.smscode=Code
 login.text.remeberme=RemeberMe
 login.text.forgotpassword=Forgot Password
 login.button.login=Login

maxkey-webs/maxkey-web-maxkey/src/main/resources/messages/message_zh_CN.properties

@@ -59,7 +59,7 @@ login.text.username=\u7528\u6237\u540D
 login.text.mobile=\u624B\u673A\u53F7\u7801
 login.text.password=\u5BC6    \u7801
 login.text.captcha=\u9A8C\u8BC1\u7801
-login.text.smscode=\u77ED\u4FE1\u9A8C\u8BC1\u7801
+login.text.smscode=\u9A8C \u8BC1 \u7801
 login.text.remeberme=\u8BB0\u4F4F\u767B\u5F55
 login.text.forgotpassword=\u5FD8\u8BB0\u5BC6\u7801
 login.button.login=\u767B\u5F55

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

@@ -7,23 +7,27 @@
 			</td>
 		</tr>
 		<tr>
-			<td><@locale code="login.text.mobile"/>：</td>
+			<td><@locale code="login.text.mobile"/></td>
 			<td>
 				<div  class="wrapper">
-                	<i class="fa fa-mobile"></i>
-					<input required="" class="form-control"  type='text' id='mobile_j_username'  name='username' value="" tabindex="1"/>
+				    <div class="input-group" style="width:250px;">
+                	   <i class="fa fa-mobile"></i>
+					   <input required="" class="form-control"  type='text' id='mobile_j_username'  name='username' value="" tabindex="1"/>
+				    </div>
 				</div>
 			</td>
 		</tr>
 		<tr> 
-			<td><@locale code="login.text.smscode"/>：</td>
+			<td><@locale code="login.text.smscode"/></td>
 			<td>
 				<div  class="wrapper">
-                	<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;"/>
-					<button  class="btn  btn-outline-secondary"  id="mobile_j_otp_button"  tabindex="5"  type="button" >
-                       <@locale code="login.text.login.mobile.obtain"/>
-                    </button>
+				    <div class="input-group" style="width:250px;">
+                    	<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;"/>
+    					<button  class="btn  btn-outline-secondary"  id="mobile_j_otp_button"  tabindex="5"  type="button" >
+                           <@locale code="login.text.login.mobile.obtain"/>
+                        </button>
+                    </div>
 				</div>
 			</td>
 		</tr>

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

@@ -7,30 +7,39 @@
 			</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='j_username'  name='username' value="admin" tabindex="1"/>
+			 	   <div class="input-group" style="width:250px;">
+                	   <i class="fa fa-user" ></i>
+					   <input required="" class="form-control" type='text' id='j_username'  name='username' value="admin" tabindex="1"/>
+				    </div >
 				</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='j_password'  name='password' value="maxkey"  tabindex="2"/>
+				    <div class="input-group" style="width:250px;">
+                	   <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>
+				    </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">
-                	<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" class="captcha-image" src="<@base/>/captcha"/>
+                	
+                	<div class="input-group" style="width:250px;">
+                	   <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" class="captcha-image" src="<@base/>/captcha"/>
+				    </div >
 				</div >
 			</td>
 			

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

@@ -7,7 +7,7 @@
 			</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>
@@ -16,7 +16,7 @@
 			</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>
@@ -26,7 +26,7 @@
 		</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>

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

@@ -18,24 +18,24 @@
 						<div class="card-body">
 						    <main class ="form-signin">
 							<form class="form-horizontal m-t-20 needs-validation" id="loginForm" name="loginForm" action="<@base />/logon.do" method="post"  novalidate>
-							<div class="row g-3">
+							<div class="row g-4">
 								<div class="">
 								    <div class="input-group">
-                                        <span class="input-group-text fa fa-user"></span>
+                                        <span class="input-group-text fa fa-user d-flex justify-content-center"></span>
                                         <input id='j_username' name='username' value="admin" class="form-control" type="text" required="" placeholder="<@locale code="login.text.username"/>">
                                     </div>
 									
 								</div>
 								<div class="">
 								    <div class="input-group">
-                                        <span class="input-group-text fa fa-key"></span>
+                                        <span class="input-group-text fa fa-key d-flex justify-content-center"></span>
                                         <input id='j_password' name='password' class="form-control" type="password" required="" placeholder="<@locale code="login.text.password"/>">
 									</div>
 								</div>
 								<#if true==isCaptcha> 
 								<div class="">
 								    <div class="input-group">
-                                        <span class="input-group-text fa fa-refresh"></span>
+                                        <span class="input-group-text fa fa-refresh 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

@@ -256,8 +256,8 @@ body{
 }
 
 .login_form_table td, .login_form_table th {
-    padding: .2rem;
-    vertical-align: top;
+    height: 60px;
+    vertical-align: middle;
     border-top: 1px solid #dee2e6;
 }
 
@@ -283,7 +283,7 @@ body{
 
 #j_captchaimg{
 	width:70px;
-	height: 33px;
+	height: 35px;
 	vertical-align: top;
 }
 
@@ -308,6 +308,7 @@ body{
 #register a{
 	font-weight: bold;
 	color: white;
+	text-decoration-line: none;
 }
 
 .login_error_message{
@@ -346,8 +347,9 @@ body{
 	position: absolute; 
 	top: 5px; 
 	left: 5px; 
-	font-size: 22px; 
-	color: gray;
+	font-size: 24px; 
+	color: black;
+	z-index: 20;
 }
 
 #tfa_j_otp_button,#mobile_j_otp_button{

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

@@ -534,7 +534,7 @@ header .header-container .nav-left>li, .header .header-container .nav-right>li {
 
 #j_captchaimg{
 	width:70px;
-	height: 33px;
+	height: 35px;
 	vertical-align: top;
 }
 

maxkey-webs/maxkey-web-resources/src/main/resources/static/javascript/platform.common.js

@@ -33,6 +33,18 @@ $(function(){
 	$('.captcha-image').click(function () {//
 		$(this).attr("src", webContextPath + "/captcha?"+(new Date()).getTime()); 
 	});
+    
+    //passwdeye
+    $('.passwdeye').click(function () {//
+        if($(this).hasClass("fa-eye-slash")){
+            $(this).removeClass("fa-eye-slash").addClass("fa-eye");
+            $("#"+$(this).attr("refid")).attr("type","text");
+        }else{
+            $(this).removeClass("fa-eye").addClass("fa-eye-slash");
+            $("#"+$(this).attr("refid")).attr("type","password");
+        }
+    });
+    
 	
     /*side-nav-menu side navigation*/
     if($('#side-nav-menu').length > 0){