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>

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/base.tt2
index 2e739d1..eceb162 100755 (executable)
--- 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 c90b16b..b580f9c 100755 (executable)
--- 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 be2e1be..d8d68fe 100755 (executable)
--- 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