OPAC: Quipu changes for Bootstrap OPAC
authorTerran McCanna <tmccanna@georgialibraries.org>
Thu, 12 Nov 2020 22:06:57 +0000 (17:06 -0500)
committerChris Sharp <csharp@georgialibraries.org>
Wed, 10 Aug 2022 21:39:07 +0000 (17:39 -0400)
This commit just modifies the front end registration page and CSS,
not the perl changes.

Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
Open-ILS/src/templates-bootstrap/opac/register.tt2

index a20b964..7e5283b 100755 (executable)
@@ -4111,6 +4111,24 @@ padding: 15px;
 
 #course_material_table td, #course_material_table th {
     padding: 4px;
+
+/* QUIPU CUSTOMIZATIONS */
+.radioLabel {
+    text-decoration: none;
+    color: #000;
+    padding-right: 10px;
+}
+
+.eCARDPreferredNameDivClass {
+    padding: 10px;
+    font-size: .9em;
+}
+
+.eCARDPatronNumber {
+    border:3px solid forestgreen;
+    padding:20px;max-width:700px;
+    font-weight:bold;
+    text-align:center;
 }
 
 .form-control {
index 73cc273..ef73140 100755 (executable)
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Request Library Card");
-
-# for privacy, reload the page after (default) 5 minutes
-refresh_time = ctx.register.settings.refresh_timeout || 300;
-ctx.refresh = refresh_time _ '; ' _ ctx.opac_root _ '/home';
-
-# some useful variables and MACROs for display,
-# field validation, and added info display
-
-ctx_org = ctx.physical_loc || ctx.search_ou || ctx.aou_tree.id;
-
-# list of the registration fields to (potentially)
-# display in the order they should be shown
-
-# post_code is the only field below that is required in the database and
-# post_code is only required if an address is created.
-# To prevent any of these fields from showing locally, regardless org unit
-# settings, simply remove the fields from this list.  In the case of
-# addresses, if all address fields are removed, no attempt at creating
-# an address will be made (and post_code will no longer be required).
-
-register_fields = [
-    {class => 'stgu',  name = 'first_given_name', label => l('First Name')},
-    {class => 'stgu',  name = 'second_given_name', label => l('Middle Name')},
-    {class => 'stgu',  name = 'family_name', label => l('Last Name')},
-    {class => 'stgu',  name = 'pref_first_given_name', label => l('Preferred First Name')},
-    {class => 'stgu',  name = 'pref_second_given_name', label => l('Preferred Middle Name')},
-    {class => 'stgu',  name = 'pref_family_name', label => l('Preferred Last Name')},
-    {class => 'stgma', name = 'street1', label => l('Street Address')},
-    {class => 'stgma', name = 'street2', label => l('Street Address (2)')},
-    {class => 'stgma', name = 'city', label => l('City')},
-    {class => 'stgma', name = 'county', label => l('County')},
-    {class => 'stgma', name = 'state', label => l('State')},
-    {class => 'stgma', name = 'post_code', label => l('Zip Code')},
-    {class => 'stgu',  name = 'dob', label => l('Date of Birth')},
-    {class => 'stgu',  name = 'day_phone', label => l('Phone Number')},
-    {class => 'stgu',  name = 'email', label => l('Email Address')}
-    {class => 'stgu',  name = 'usrname', label => l('Requested Username')}
-];
-
-
-
 %]
 
 <h2 class="sr-only">[% l('Account Registration') %]</h2>
-<div class="container">
+<div id="content-wrapper">
     <div id="main-content-register">
-        <h1>[% l('Request a Library Card')%]</h1>
-        <span class="validate">&bigstar; = Required Field</span>
-        <hr/>
-
-        [% IF ctx.register.success %]
-            <h3>[% l('Registration successful!') %]<h3>
-            <h4>[% l('Please see library staff to complete your registration.') %]</h4>
-
-            [% IF ctx.register.username_taken %]
-            <p>
-                [% |l %]
-                Note: The selected username may be in use by another patron.
-                You may select another username when finalizing your
-                registration or in the online catalog.
-                [% END %]
-            </p>
-            [% END %]
-
-            <br/>
-            <p>
-                <a href="[% ctx.opac_root %]/home"
-                    class="btn btn-confirm">[% l('Return to the Catalog') %]</a>
-            </p>
+        <div class="common-full-pad"></div>
+            <div id="eCARDFiles">
 
-        [% ELSIF ctx.register.error %]
-            <h3>[% l('A registration error has occurred') %]</h3>
-            <h4>[% l('Please see library staff to complete your registration.') %]</h4>
+            <link href="https://ecard.quipugroup.net/css/eCARD.css" rel="stylesheet">
 
-            <br/>
-            <p>
-                <a href="[% ctx.opac_root %]/home"
-                    class="btn btn-confirm">[% l('Return to the Catalog') %]</a>
-            </p>
+            <link href="https://ecard.quipugroup.net/js/jqueryUI/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
 
-        [% ELSE %]
+            <script type="text/javascript" src="https://ecard.quipugroup.net/js/jquery-1.11.1.min.js"></script>
 
-        [% IF ctx.user %]
-            <!-- if the user is logged in, make it
-                clear we are tracking the requestor -->
-            <h4>[% l('New account requested by [_1] [_2] [_3] [_4] [_5]',
-                    ctx.user.prefix, ctx.user.first_given_name,
-                    ctx.user.second_given_name, ctx.user.family_name,
-                    ctx.user.suffix
-                ) | html %]</h4>
-        [% END %]
+            <script type="text/javascript" src="https://ecard.quipugroup.net/js/jqueryUI/js/jquery-ui-1.10.4.custom.min.js"></script>
 
-        <form method='POST' class="needs-validation" novalidate>
-            <div class="form-group row">
-                <label class="control-label col-md-2" for='stgu.home_ou'>[% l('Home Library') %]</label>
-                <div class="col-md-6">
-                    [% INCLUDE build_org_selector
-                            name='stgu.home_ou'
-                            value=value || ctx_org
-                            can_have_users_only=1
-                            valid_org_list=ctx.register.valid_orgs
-                    %]
-                </div>    
-                <div class="col-md-4">
-                    [% IF ctx.register.invalid.bad_home_ou %]
-                    <span class='patron-reg-invalid'>
-                        [% l('Please select a valid library') %]
-                    </span>
-                    [% END %]
-                </div>
-            </div>
+            <script type="text/javascript" src="https://ecard.quipugroup.net/js/jquery.xdomainrequest.min.js"></script>
 
-[%
-# <=== shifting code left for readability
+            <script type="text/javascript" src="https://ecard.quipugroup.net/js/jquery.PrintArea.js"></script>
 
-# render a row for each of the register fields
-FOR field_def IN register_fields;
-    fclass = field_def.class;
-    fname = field_def.name;
-    orig_name = fname;
+            <script type="text/javascript" src="https://ecard.quipugroup.net/js/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js"></script>
 
-    field_path = fclass _ "." _ fname;
+            <script type="text/javascript" src="https://ecard.quipugroup.net/js/eCARDMain2.js"></script>
 
-    IF fname.match('^pref_');
-        # Preferred name fields adopt most visibility, etc.
-        # settings from the primary name counterparts.
-        fname = fname.remove('^pref_');
-    END;
+            <script type="text/javascript" src="https://ecard.quipugroup.net/Libraries/48/eCARDLibrary.js"></script>
 
-    show = ctx.register.settings.$fclass.$fname.show;
-    require = ctx.register.settings.$fclass.$fname.require;
-    example = ctx.register.settings.$fclass.$fname.example;
-    value = ctx.register.values.$fclass.$fname;
+            </div>
 
-    invalid_require = ctx.register.invalid.$fclass.$fname.require;
-    invalid_regex = ctx.register.invalid.$fclass.$fname.regex;
+            <div id="pines_intro_inhouse" style="display:none;">
+            <h1>Welcome to PINES!</h1>
+                <p>Please fill out the form below to register for a PINES e-card. An e-card provides immediate access to your library's online resources.</p>
 
-    IF orig_name.match('^pref_');
-        show = show || require;
-        require = 0; # pref name values never required
-    END;
+                <p>If you'd like to upgrade to a full PINES card in order to check out library books and other materials, please bring your e-card account number and your photo ID to the library's circulation desk to complete the registration process.</p>
+            </div>
 
-    NEXT UNLESS require OR show;
-%]
+            <div id="pines_intro_remote" style="display:none;">
+            <h1>Welcome to PINES!</h1>
+                <p>Please fill out the form below to register for a PINES e-card. An e-card provides immediate access to your library's online resources.</p>
 
-<div class="form-group row">
-        <label class="control-label col-md-2" for='[% field_path %]'>[% field_def.label | html %]
-        [% IF require %]
-        <span class="validate">&bigstar;</span>
-        [% END %]
-        </label>
-        <div class="col-md-6">
-            [% IF fname == "dob"; %]
-            <div class="input-group date" data-provide="datepicker-inline">
-                <input type="text" class="form-control datepicker" id='[% field_path %]'
-                    name='[% field_path %]' value='[% value || CGI.param(field_path) | html %]' [% IF require %]required[% END %] data-date-format="yyyy-mm-dd" />
-                <div class="input-group-addon">
-                    <span class="glyphicon glyphicon-th"></span>
-                </div>
+                <p>If you'd like to upgrade to a full PINES card in order to check out library books and other materials, please bring your e-card account number and your photo ID to any PINES library to complete the registration process. If you have any questions, please call your local library for assistance.</p>
             </div>
-           [% ELSE; %]
-        <input
-            class='form-control'
-            type='text'
-            id='[% field_path %]'
-            name='[% field_path %]'
-            value='[% value || CGI.param(field_path) | html %]' [% IF require %]required[% END %]/>
-     [% END %]
-        <div class="invalid-feedback">
-          Please enter a [% field_def.label | html %]
-        </div>
-         [% IF example %]
-        <span class='patron-reg-extra'>
-            [% l('(Example: [_1])', example) %]
-        </span>
-    [% END %]
 
-        </div>
+            <div id="eCARD" data-language="en" data-branchid="">
 
-    <div class="col-md-4">
-    <!-- display errors and example text -->
 
-    [% IF invalid_require %]
-        <span class='patron-reg-invalid'>
-            [% l('This field is required') %]
-        </span>
-    [% ELSIF invalid_regex %]
-        <span class='patron-reg-invalid'>
-            [% l('The value entered does not have the correct format') %]
-        </span>
-    [% END %]
-    [% IF example %]
-        <span class='patron-reg-extra'>
-            [% l('(Example: [_1])', example) %]
-        </span>
-    [% END %]
+            <!-- eCARD requires JavaScript in order to display the registration form -->
+            <!-- The following will detect if JavaScript is enabled on the patron's browser -->
+            <noscript>
+            <h2 style="color:red;">Warning - JavaScript Required</h2>
+            <p>For full functionality of this web page it is necessary to enable JavaScript in your browser. For more information on most browsers, try <a href="http://www.enable-javascript.com/" target="_blank">How to enable JavaScript</a> OR <a href="http://activatejavascript.org/en/instructions" target="_blank">activatejavascript.org</a><
+            </p>
+            </noscript>
+            </div>
+        
+        <div class="common-full-pad"></div>    
     </div>
 </div>
-[% END %]
-
-
-<!-- ====> shifting the code back to the right for context -->
-                    [% IF ctx.register.opt_in_settings.size > 0 %]
-                        [% FOR optin IN ctx.register.opt_in_settings %]
-                        <div class="form-group row">
-                            <label class="control-label col-md-2" for="stgs.[% optin.name | uri %]'">[% optin.label | html %]</label>
-                            <div class="col-md-6">
-                                <input type='checkbox'
-                                    name='stgs.[% optin.name | uri %]'
-                                    id='stgs.[% optin.name | uri %]'
-                                    title="[% optin.label | html %]"
-                                ></input>
-                            </div>
-                            <div class="col-md-4">
-                            <!-- display errors and example text -->
-                            </div>
-                        </div>
-                        [% END %]
-                    [% END %]
-
-                    <div class="form-group row">
-                       <div class="col-md-6 offset-md-2">
-                            <a href="[% ctx.opac_root %]/home"
-                                class="btn btn-confirm">[% l('Go Back') %]</a>
-                            <input type="submit"
-                                value="[% l('Submit Registration') %]"
-                                class="btn btn-confirm" />
-                       </div>
-                    </div>
-            </form>
-            [% END %]
-        </div>
-    </div>
 [%- END %]
-<script>
-(function() {
-  'use strict';
-  window.addEventListener('load', function() {
-    // Fetch all the forms we want to apply custom Bootstrap validation styles to
-    var forms = document.getElementsByClassName('needs-validation');
-    // Loop over them and prevent submission
-    var validation = Array.prototype.filter.call(forms, function(form) {
-      form.addEventListener('submit', function(event) {
-        if (form.checkValidity() === false) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        form.classList.add('was-validated');
-      }, false);
-    });
-  }, false);
-})();
-
-$(document).ready(function(){
-   $('.datepicker').datepicker({
-        weekStart: 1,
-        autoclose: true,
-        todayHighlight: true,
-    });
-    $('.datepicker').datepicker("setDate", new Date());
-});
-</script>