From c2c5d96f8f990522bb3ba0d988b051467725ecdb Mon Sep 17 00:00:00 2001
From: Nicanor Romero Venier <nicanor.romerovenier@bq.com>
Date: Fri, 4 Sep 2015 10:05:20 +0200
Subject: [PATCH 1/2] Modified tab cycle in Login dialog

The cycle now includes the 'remember' checkbox.
---
 src/octoprint/static/js/app/viewmodels/loginstate.js | 6 ++++++
 src/octoprint/templates/navbar/login.jinja2          | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/octoprint/static/js/app/viewmodels/loginstate.js b/src/octoprint/static/js/app/viewmodels/loginstate.js
index e1e6d2c8..d93f3280 100644
--- a/src/octoprint/static/js/app/viewmodels/loginstate.js
+++ b/src/octoprint/static/js/app/viewmodels/loginstate.js
@@ -113,6 +113,12 @@ $(function() {
             }
         };
 
+        self.onLoginRememberKeyup = function(data, event) {
+            if (event.keyCode == 9) {
+                $("#login_user").focus();
+            }
+        }
+
         self.onAllBound = function(allViewModels) {
             self.allViewModels = allViewModels;
         };
diff --git a/src/octoprint/templates/navbar/login.jinja2 b/src/octoprint/templates/navbar/login.jinja2
index f712f82d..d500b107 100644
--- a/src/octoprint/templates/navbar/login.jinja2
+++ b/src/octoprint/templates/navbar/login.jinja2
@@ -8,7 +8,7 @@
     <label for="login_pass">{{ _('Password') }}</label>
     <input type="password" id="login_pass" data-bind="value: loginState.loginPass, event: {'keyup': loginState.onLoginPassKeyup}" placeholder="{{ _('Password') }}">
     <label class="checkbox">
-        <input type="checkbox" id="login_remember" data-bind="checked: loginState.loginRemember"> {{ _('Remember me') }}
+        <input type="checkbox" id="login_remember" data-bind="checked: loginState.loginRemember, event: {'keypress': loginState.onLoginRememberKeyup}"> {{ _('Remember me') }}
     </label>
     <button class="btn btn-block btn-primary" id="login_button" data-bind="click: function() { loginState.login(); }">{{ _('Login') }}</button>
 </div>

From 9f49e3933372d6e43d8dc65b7d57d5e6f003c537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Mon, 7 Sep 2015 09:35:28 +0200
Subject: [PATCH 2/2] We do that tab cycling slightly differently

Moving from the button to the username field probably makes even more
sense and while we are at it we can also extract the element access into
proper variables.
---
 .../static/js/app/viewmodels/loginstate.js    | 24 +++++++++++++------
 src/octoprint/templates/navbar/login.jinja2   |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/octoprint/static/js/app/viewmodels/loginstate.js b/src/octoprint/static/js/app/viewmodels/loginstate.js
index d93f3280..661b1549 100644
--- a/src/octoprint/static/js/app/viewmodels/loginstate.js
+++ b/src/octoprint/static/js/app/viewmodels/loginstate.js
@@ -15,6 +15,10 @@ $(function() {
 
         self.currentUser = ko.observable(undefined);
 
+        self.elementUsernameInput = undefined;
+        self.elementPasswordInput = undefined;
+        self.elementLoginButton = undefined;
+
         self.userMenuText = ko.computed(function() {
             if (self.loggedIn()) {
                 return self.username();
@@ -103,7 +107,7 @@ $(function() {
 
         self.onLoginUserKeyup = function(data, event) {
             if (event.keyCode == 13) {
-                $("#login_pass").focus();
+                self.elementPasswordInput.focus();
             }
         };
 
@@ -113,12 +117,6 @@ $(function() {
             }
         };
 
-        self.onLoginRememberKeyup = function(data, event) {
-            if (event.keyCode == 9) {
-                $("#login_user").focus();
-            }
-        }
-
         self.onAllBound = function(allViewModels) {
             self.allViewModels = allViewModels;
         };
@@ -127,6 +125,18 @@ $(function() {
             self.requestData();
         };
 
+        self.onStartup = function() {
+            self.elementUsernameInput = $("#login_user");
+            self.elementPasswordInput = $("#login_pass");
+            self.elementLoginButton = $("#login_button");
+            if (self.elementUsernameInput && self.elementUsernameInput.length
+                && self.elementLoginButton && self.elementLoginButton.length) {
+                self.elementLoginButton.blur(function() {
+                    self.elementUsernameInput.focus();
+                })
+            }
+        };
+
         self.onStartupComplete = function() {
             self.requestData();
         };
diff --git a/src/octoprint/templates/navbar/login.jinja2 b/src/octoprint/templates/navbar/login.jinja2
index d500b107..f712f82d 100644
--- a/src/octoprint/templates/navbar/login.jinja2
+++ b/src/octoprint/templates/navbar/login.jinja2
@@ -8,7 +8,7 @@
     <label for="login_pass">{{ _('Password') }}</label>
     <input type="password" id="login_pass" data-bind="value: loginState.loginPass, event: {'keyup': loginState.onLoginPassKeyup}" placeholder="{{ _('Password') }}">
     <label class="checkbox">
-        <input type="checkbox" id="login_remember" data-bind="checked: loginState.loginRemember, event: {'keypress': loginState.onLoginRememberKeyup}"> {{ _('Remember me') }}
+        <input type="checkbox" id="login_remember" data-bind="checked: loginState.loginRemember"> {{ _('Remember me') }}
     </label>
     <button class="btn btn-block btn-primary" id="login_button" data-bind="click: function() { loginState.login(); }">{{ _('Login') }}</button>
 </div>