Login UI optimize
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user