From 0fb9e371c81207154e2948af7ead1142275926c2 Mon Sep 17 00:00:00 2001
From: Terran McCanna <tmccanna@georgialibraries.org>
Date: Mon, 20 Sep 2021 18:12:47 -0400
Subject: [PATCH] LP1909144 BooPAC Login Form Tabbing

This change places the cursor in the user name field and adjusts the order
of the elements so that tabbing out of the user name field comes to the
password field next.

Note that this modifies both the login modal and the embedded login form.

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Elaine Hardy <ehardy@georgialibraries.org>
Signed-off-by: Jason Boyer <JBoyer@equinoxOLI.org>
---
 .../src/templates-bootstrap/opac/parts/base.tt2    |  7 ++
 .../templates-bootstrap/opac/parts/login/form.tt2  | 81 ++++++++++++----------
 .../opac/parts/login/login_modal.tt2               | 63 +++++++++--------
 3 files changed, 86 insertions(+), 65 deletions(-)

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
index 2e739d1097..eceb162f99 100755
--- a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
@@ -53,6 +53,13 @@
         [% PROCESS 'opac/parts/stripe.tt2' %]
 <script  src="[% ctx.media_prefix %]/opac/deps/node_modules/jquery/dist/jquery.min.js"></script>
 
+		<script>
+			$(document).ready(function(){
+				$("#loginModal").on('shown.bs.modal', function(){
+					$(this).find('#username_field').focus();
+				});
+			});
+		</script>
 
     </head>
     <body[% IF want_dojo; ' class="tundra d-flex flex-column min-vh-100"'; ELSE; ' class="tundra d-flex flex-column min-vh-100"';  END %]>
diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
index c90b16b5e3..b580f9ce2f 100755
--- a/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/form.tt2
@@ -20,44 +20,50 @@
 </div>
 [% END %]
 
+<div class="table table-borderless table-sm">
+	<div class="row">
+		<div class="col-sm w-50">
+			<label for='username_field' class="lbl1" >[% l('Library Card Number') %]
+			<a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+			<i class="fas fa-question-circle"></i></a></label>
+		</div>
+		<div class="col-sm w-50">
+			<label for="password_field" class="lbl1" >[% l('PIN') %]
+			<a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+            <i class="fas fa-question-circle"></i></a></label>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-sm w-50">
+			<input class="form-control" type='text' id="username_field" name="username" autofocus />
+		</div>
+		<div class="col-sm w-50">
+			<input class="form-control" id="password_field" name="password" type="password"/>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-sm w-50">
+			<a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Request A Card') %]</a>
+		</div>
+		<div class="col-sm w-50">
+			[% IF reset_password == 'true' %]
+				<a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot Your Password?') %]  </a>
+			[% END %]
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-sm w-50">
+			<input type="checkbox" value="" id="rememberMe">
+            <label class="form-check-label" for="rememberMe">
+               [% l('Stay logged in?') %]
+            </label>
+		</div>
+		<div class="col-sm w-50">
+			<button type="submit" class="btn btn-confirm my-2"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> [% l('Log in') %]</button>
+		</div>
+	</div>
+</div>
 
-    <div class="mx-auto row w-75 my-5">
-        <div class='col-md-6'>
-            <label for='username_field' class="lbl1" >[% l('Library Card Number') %]
-            <a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
-            <i class="fas fa-question-circle"></i></a></label> <br>
-            <div class="input_bg mb-2">
-                <input class="form-control" type='text' id="username_field" name="username"/>
-            </div>
-               <a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Request A Card') %]</a>
-            <br>
-
-        </div>
-        <div class='col-md-6'>
-            <label for="password_field" class="lbl1" >[% l('PIN') %]
-            <a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
-                        <i class="fas fa-question-circle"></i>
-                    </a></label><br>
-
-            <div class="input_bg mb-2">
-                <input class="form-control" id="password_field" name="password" type="password"/>
-            </div>
-           [% IF reset_password == 'true' %]
-            <a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot Your Password?') %]  </a>
-            [% END %]
-            <br>
-
-        </div>
-
-         <div class="col-12 pt-4 text-center">
-            <div class="form-check my-2">
-                <input class="form-check-input" type="checkbox" value="" id="rememberMe">
-                <label class="form-check-label" for="rememberMe">
-                    [% l('Stay logged in?') %]
-                </label>
-            </div>
-            <button type="submit" class="btn btn-confirm my-2"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> [% l('Log in') %]</button>
-        </div>
         <div style="clear: both; padding-top: 15px;" class="col-12 text-center">
         [%
             redirect = CGI.param('redirect_to');
@@ -76,7 +82,6 @@
 
         </div>
         <input id="client_tz_id" name="client_tz" type="hidden" />
-        </div>
     </form>
 
 </div>
diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
index be2e1be8d5..d8d68fee17 100755
--- a/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/login/login_modal.tt2
@@ -3,7 +3,7 @@
     <div class="modal-content">
      <form method='post' action="/eg/opac/login?redirect_to=%2Feg%2Fopac%2Fmyopac%2Fmain">
       <div class="modal-header">
-        <h1 class="modal-title" id="exampleModalLabel">[% l('Login To Evergreen') %]</h1>
+        <h1 class="modal-title" id="exampleModalLabel">Login To Evergreen</h1>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <i class="fas fa-times" aria-hidden="true"></i>
         </button>
@@ -26,33 +26,42 @@
     [% END %]
 
 <div class='container'>
-    <div class="mx-auto row py-4">
-        <div class='col-md-6'>
-            <label for='username_field' class="lbl1" >[% l('Library Card Number') %]
-            <a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
-            <i class="fas fa-question-circle"></i></a></label> <br>
-            <div class="input_bg mb-2">
-                <input class="form-control" type='text' id="username_field" name="username"/>
-            </div>
-               <a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Request A Card') %]</a>
-            <br>
-
-        </div>
-        <div class='col-md-6'>
-            <label for="password_field" class="lbl1" >[% l('PIN') %]
-            <a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
-                        <i class="fas fa-question-circle"></i>
-                    </a></label><br>
+	<div class="table table-borderless table-sm">
+		<div class="row">
+			<div class="col-sm w-50">
+				<label for='username_field' class="lbl1" >[% l('Library Card Number') %]
+				<a href="#" title="[% INCLUDE "opac/parts/login/username_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+				<i class="fas fa-question-circle"></i></a></label>
+			</div>
+			<div class="col-sm w-50">
+				<label for="password_field" class="lbl1" >[% l('PIN') %]
+				<a href="#" title="[% INCLUDE "opac/parts/login/password_hint.tt2" %]" data-html="true" data-toggle="tooltip">
+                <i class="fas fa-question-circle"></i>
+                </a></label>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-sm w-50">
+				<input class="form-control" type='text' id="username_field" name="username"/>
+			</div>
+			<div class="col-sm w-50">
+				<input class="form-control" id="password_field" name="password" type="password"/>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-sm w-50">
+				<a href='[% mkurl(ctx.opac_root _ '/register', {}, 1) %]'>[% l('Request A Card') %]</a>
+			</div>
+			<div class="col-sm w-50">
+				[% IF reset_password == 'true' %]
+				<a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot Your Password?') %]  </a>
+				[% END %]
+			</div>
+		</div>
+	</div>
 
-            <div class="input_bg mb-2">
-                <input class="form-control" id="password_field" name="password" type="password"/>
-            </div>
-           [% IF reset_password == 'true' %]
-            <a href='[% mkurl(ctx.opac_root _ '/password_reset', {}, 1) %]'>[% l('Forgot Your Password?') %]  </a>
-            [% END %]
-            <br>
+    <div class="mx-auto row py-4">
 
-        </div>
         <div style="clear: both; padding-top: 15px;" class="col-12">
         [%
             redirect = CGI.param('redirect_to');
@@ -88,4 +97,4 @@
       </form>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
-- 
2.11.0