提交 b44b32a3 编写于 作者: M MaxKey

Login UI optimize

上级 72f1868e
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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{
......
......@@ -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;
}
......
......@@ -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){
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册