JBAS-1665 Self-reg kiosk mode additions (submit another, etc.)

* Hide submit-another button in kiosk mode
* Adds a black border around the verification requirements "wall of
  text"
* Clicking on a card image now selects the image -- no longer necessary
  to click exactly on the radio input.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/KCLS/openils/var/templates_kcls/opac/register.tt2 b/KCLS/openils/var/templates_kcls/opac/register.tt2
index 2b34da7..7dd80b5 100644 (file)
--- a/KCLS/openils/var/templates_kcls/opac/register.tt2
+++ b/KCLS/openils/var/templates_kcls/opac/register.tt2
@@ -197,6 +197,10 @@ END; # input_field()
   text-decoration: none;
   font-weight: 600;
 }
+#kiosk-verification-reqs {
+  padding: 8px;
+  border: 1px solid black;
+}
 </style>
 
     </head>
@@ -225,9 +229,11 @@ END; # input_field()
 
     [% IF ctx.register.success %]
       <h2>[% l('Registration successful!') %]<h3>
+      [% IF !kiosk %]
       <a href='[% redo_url | html %]'><button 
         id='submit-another'>Submit Another Application</button></a>
       <br/>
+      [% END %]
       <br/>
       <div class='success-minus-2'>
         [% IF kiosk %]
@@ -243,6 +249,7 @@ END; # input_field()
       [% IF kiosk %]
         <h3>Verification Requirements</h3>
 
+        <div id='kiosk-verification-reqs'>
         <p>
         1. Photo identification with birth date (one piece required for adults).
         Acceptable examples are as follows and may be current or expired:
@@ -278,6 +285,7 @@ END; # input_field()
         You may get a library card today without address verification, but you will be limited to checking
         out 2 items. If you do not bring address verification, the card will expire after 90 days.
         </p>
+        </div>
       [% END %]
 
     [% ELSE %]
@@ -309,7 +317,8 @@ END; # input_field()
           <div class="grid">
             [% FOR ctype IN wallet_cards %]
             <div class="grid-cell">
-              <div><img class="card-img" src="[% card_url _ ctype _ '.png' %]"/></div>
+              <div><img class="card-img" src="[% card_url _ ctype _ '.png' %]"
+                onclick="select_card('[% ctype %]')"/></div>
               <div class="card-style-option">
                 <input [% IF loop.first %]id='first-wallet-card'[% END %]
                   type="radio" name="stgsc.10" value="[% ctype %]"/>
@@ -324,7 +333,8 @@ END; # input_field()
           <div class="grid">
             [% FOR ctype IN keychain_cards %]
             <div class="grid-cell">
-              <div><img class="card-img" src="[% card_url _ ctype _ '.png' %]"/></div>
+              <div><img class="card-img" src="[% card_url _ ctype _ '.png' %]"
+                onclick="select_card('[% ctype %]')"/></div>
               <div class="card-style-option">
                 <input [% IF loop.first %]id='first-keychain-card'[% END %]
                   type="radio" name="stgsc.10" value="[% ctype %]"/>

diff --git a/Open-ILS/web/js/ui/default/opac/register.js b/Open-ILS/web/js/ui/default/opac/register.js
index a7cdf13..99dbb15 100644 (file)
--- a/Open-ILS/web/js/ui/default/opac/register.js
+++ b/Open-ILS/web/js/ui/default/opac/register.js
@@ -38,6 +38,12 @@ function show_card_types(type) {
     document.getElementById('first-'+type+'-card').checked = 'checked';
 }
 
+function select_card(type) {
+    last_activity = new Date();
+    console.log('selecting card: ' + type);
+    $("input[value='" + type + "']").prop('checked', true);
+}
+
 function check_juvenile(dobString) {
     var dobDate = Date.parse(dobString);
     var ageDate = new Date(); // minimum age for non-juvenile