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] 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>