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

View File

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