提交 0a1d5d1a 编写于 作者: M MaxKey

Login UI optimize

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