external
/
mailinabox
mirror of https://github.com/mail-in-a-box/mailinabox.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Autofocus otp input when logging in, update layout

This commit is contained in:
Felix Spöttel 2020-09-02 20:30:08 +02:00
parent 8597646a12
commit 6594e19a1f
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
management/templates/login.html
View File

@ -18,7 +18,7 @@
display: none; display: none;
} }
#loginForm.twofactor #loginOtp { #loginForm.is-twofactor #loginOtp {
display: block display: block
} }
</style> </style>
@ -71,9 +71,9 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
</div> </div>
</div> </div>
<div class="form-group" id="loginOtp"> <div class="form-group" id="loginOtp">
<label for="loginOtpInput" class="col-sm-3 control-label">Two Factor Code</label> <div class="col-sm-offset-3 col-sm-9">
<div class="col-sm-9"> <label for="loginOtpInput" class="control-label">Two Factor Code</label>
<input type="text" class="form-control" id="loginOtpInput" placeholder="123456"> <input type="text" class="form-control" id="loginOtpInput" placeholder="6-digit code">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -88,10 +88,11 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
function do_login() { function do_login() {
if ($('#loginEmail').val() == "") { if ($('#loginEmail').val() == "") {
show_modal_error("Login Failed", "Enter your email address.", function() { show_modal_error("Login Failed", "Enter your email address.", function() {
$('#loginEmail').focus(); $('#loginEmail').focus();
}); });
return false; return false;
} }
if ($('#loginPassword').val() == "") { if ($('#loginPassword').val() == "") {
show_modal_error("Login Failed", "Enter your email password.", function() { show_modal_error("Login Failed", "Enter your email password.", function() {
$('#loginPassword').focus(); $('#loginPassword').focus();
@ -110,10 +111,13 @@ function do_login() {
// This API call always succeeds. It returns a JSON object indicating // This API call always succeeds. It returns a JSON object indicating
// whether the request was authenticated or not. // whether the request was authenticated or not.
if (response.status != 'ok') { if (response.status != 'ok') {
if (response.status === 'missing_token' && !$('#loginForm').hasClass('twofactor')) { if (response.status === 'missing_token' && !$('#loginForm').hasClass('is-twofactor')) {
$('#loginForm').addClass('twofactor'); $('#loginForm').addClass('is-twofactor');
setTimeout(() => {
$('#loginOtpInput').focus();
});
} else { } else {
$('#loginForm').removeClass('twofactor'); $('#loginForm').removeClass('is-twofactor');
// Show why the login failed. // Show why the login failed.
show_modal_error("Login Failed", response.reason) show_modal_error("Login Failed", response.reason)
@ -137,7 +141,7 @@ function do_login() {
$('#loginEmail').val(''); $('#loginEmail').val('');
$('#loginPassword').val(''); $('#loginPassword').val('');
$('#loginOtpInput').val(''); $('#loginOtpInput').val('');
$('#loginForm').removeClass('twofactor'); $('#loginForm').removeClass('is-twofactor');
// Remember the credentials. // Remember the credentials.
if (typeof localStorage != 'undefined' && typeof sessionStorage != 'undefined') { if (typeof localStorage != 'undefined' && typeof sessionStorage != 'undefined') {
@ -172,7 +176,7 @@ function do_logout() {
} }
function show_login() { function show_login() {
$('#loginForm').removeClass('twofactor'); $('#loginForm').removeClass('is-twofactor');
$('#loginOtpInput').val(''); $('#loginOtpInput').val('');
$('#loginEmail,#loginPassword').each(function() { $('#loginEmail,#loginPassword').each(function() {
var input = $(this); var input = $(this);