From 32fc0415da81e8f0657efd523e8c799efb8cd21d Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Tue, 7 Feb 2023 16:12:09 -0600
Subject: [PATCH] Fix auto-advance on ENTER for login form

if user hits ENTER while focused on username field, just set focus to
password field but do not submit form.  if user hits ENTER on while
the password field is focused, then submit form

this has long been the behavior but it was broken when removing jquery
---
 tailbone/templates/deform/password.pt | 3 ++-
 tailbone/templates/login.mako         | 7 +++++++
 tailbone/views/auth.py                | 9 +++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/tailbone/templates/deform/password.pt b/tailbone/templates/deform/password.pt
index d81b570f..b74d763a 100644
--- a/tailbone/templates/deform/password.pt
+++ b/tailbone/templates/deform/password.pt
@@ -9,7 +9,8 @@
        tal:omit-tag="">
     <b-input name="${name}"
              v-model="${vmodel}"
-             type="password">
+             type="password"
+             tal:attributes="attributes|field.widget.attributes|{};">
     </b-input>
   </div>
 </span>
diff --git a/tailbone/templates/login.mako b/tailbone/templates/login.mako
index f53de560..6e6e347f 100644
--- a/tailbone/templates/login.mako
+++ b/tailbone/templates/login.mako
@@ -64,6 +64,13 @@
         this.$refs.username.focus()
     }
 
+    TailboneForm.methods.usernameKeydown = function(event) {
+        if (event.which == 13) {
+            event.preventDefault()
+            this.$refs.password.focus()
+        }
+    }
+
   </script>
 </%def>
 
diff --git a/tailbone/views/auth.py b/tailbone/views/auth.py
index 1a1c406d..9bcb644f 100644
--- a/tailbone/views/auth.py
+++ b/tailbone/views/auth.py
@@ -122,9 +122,14 @@ class AuthenticationView(View):
             'tailbone', 'main_image_url',
             default=self.request.static_url('tailbone:static/img/home_logo.png'))
 
-        # nb. hacky..but necessary, to add the ref, for autofocus
+        # nb. hacky..but necessary, to add the refs, for autofocus
+        # (also add key handler, so ENTER acts like TAB)
         dform = form.make_deform_form()
-        dform['username'].widget.attributes = {'ref': 'username'}
+        dform['username'].widget.attributes = {
+            'ref': 'username',
+            '@keydown.native': 'usernameKeydown',
+        }
+        dform['password'].widget.attributes = {'ref': 'password'}
 
         return {
             'form': form,