From 6594e19a1fa5f6e31ed76d7daf1f8c9dda39e1fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Wed, 2 Sep 2020 20:30:08 +0200
Subject: [PATCH] Autofocus otp input when logging in, update layout

---
 management/templates/login.html | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/management/templates/login.html b/management/templates/login.html
index 0322dd5f..8d8bd394 100644
--- a/management/templates/login.html
+++ b/management/templates/login.html
@@ -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);