From 5dcc71799ede6dc03ba46ff08271a4bcc6710bc1 Mon Sep 17 00:00:00 2001
From: Kjartan Sverrisson <kjartan@overcast.io>
Date: Thu, 23 Jan 2020 15:53:29 +0000
Subject: [PATCH] Reorder login form to match expected tab order. Fix #5274
 (#5775)

Addresses the issue of incorrect tab-order when logging on using keyboard. This change moves the password reset link to the very end of the form code, while maintaining the same visual location.

* Fix lint issues
* Refactor login position to remove unused media query

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
---
 .../admin/static_src/wagtailadmin/scss/layouts/login.scss  | 6 +++++-
 wagtail/admin/templates/wagtailadmin/login.html            | 7 ++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss
index 54b9bb144..7a38bbedd 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss
+++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss
@@ -118,9 +118,13 @@ input[type=checkbox]:before {
     opacity: 1;
     position: absolute;
     font-size: 1.3em;
-    top: 50%;
     margin-top: -0.5em;
     right: 5%;
+    top: 213px;
+
+    @include media-breakpoint-up(sm) {
+        top: 65%;
+    }
 }
 
 .messages {
diff --git a/wagtail/admin/templates/wagtailadmin/login.html b/wagtail/admin/templates/wagtailadmin/login.html
index 4410244fa..c3fcf2372 100644
--- a/wagtail/admin/templates/wagtailadmin/login.html
+++ b/wagtail/admin/templates/wagtailadmin/login.html
@@ -52,9 +52,6 @@
                             {{ form.password }}
                         </div>
                     </div>
-                    {% if show_password_reset %}
-                        <p class="help"><a href="{% url 'wagtailadmin_password_reset' %}">{% trans "Forgotten it?" %}</a></p>
-                    {% endif %}
                 </li>
 
                 {% block extra_fields %}
@@ -83,6 +80,10 @@
                     {% endblock %}
                 </li>
             </ul>
+
+            {% if show_password_reset %}
+                <p class="help"><a href="{% url 'wagtailadmin_password_reset' %}">{% trans "Forgotten it?" %}</a></p>
+            {% endif %}
         {% endblock %}
         </form>