Open-ILS/src/templates-bootstrap/opac/register.tt2

   1 [%- PROCESS "opac/parts/header.tt2";
   2     PROCESS "opac/parts/org_selector.tt2";
   3     WRAPPER "opac/parts/base.tt2";
   4     INCLUDE "opac/parts/topnav.tt2";
   5     ctx.page_title = l("Request Library Card");
   6
   7 # for privacy, reload the page after (default) 5 minutes
   8 refresh_time = ctx.register.settings.refresh_timeout || 300;
   9 ctx.refresh = refresh_time _ '; ' _ ctx.opac_root _ '/home';
  10
  11 # some useful variables and MACROs for display,
  12 # field validation, and added info display
  13
  14 ctx_org = ctx.physical_loc || ctx.search_ou || ctx.aou_tree.id;
  15
  16 # list of the registration fields to (potentially)
  17 # display in the order they should be shown
  18
  19 # post_code is the only field below that is required in the database and
  20 # post_code is only required if an address is created.
  21 # To prevent any of these fields from showing locally, regardless org unit
  22 # settings, simply remove the fields from this list.  In the case of
  23 # addresses, if all address fields are removed, no attempt at creating
  24 # an address will be made (and post_code will no longer be required).
  25
  26 register_fields = [
  27     {class => 'stgu',  name = 'first_given_name', label => l('First Name')},
  28     {class => 'stgu',  name = 'second_given_name', label => l('Middle Name')},
  29     {class => 'stgu',  name = 'family_name', label => l('Last Name')},
  30     {class => 'stgu',  name = 'pref_first_given_name', label => l('Preferred First Name')},
  31     {class => 'stgu',  name = 'pref_second_given_name', label => l('Preferred Middle Name')},
  32     {class => 'stgu',  name = 'pref_family_name', label => l('Preferred Last Name')},
  33     {class => 'stgma', name = 'street1', label => l('Street Address')},
  34     {class => 'stgma', name = 'street2', label => l('Street Address (2)')},
  35     {class => 'stgma', name = 'city', label => l('City')},
  36     {class => 'stgma', name = 'county', label => l('County')},
  37     {class => 'stgma', name = 'state', label => l('State')},
  38     {class => 'stgma', name = 'post_code', label => l('Zip Code')},
  39     {class => 'stgu',  name = 'dob', label => l('Date of Birth')},
  40     {class => 'stgu',  name = 'day_phone', label => l('Phone Number')},
  41     {class => 'stgu',  name = 'email', label => l('Email Address')}
  42     {class => 'stgu',  name = 'usrname', label => l('Requested Username')}
  43 ];
  44
  45
  46
  47 %]
  48
  49 <h2 class="sr-only">[% l('Account Registration') %]</h2>
  50 <div class="container">
  51     <div id="main-content-register">
  52         <h1>[% l('Request a Library Card')%]</h1>
  53         <span class="validate">&bigstar; [% l('indicates Required Field') %]</span>
  54         <hr/>
  55
  56         [% IF ctx.register.success %]
  57             <h3>[% l('Registration successful!') %]<h3>
  58             <h4>[% l('Please see library staff to complete your registration.') %]</h4>
  59
  60             [% IF ctx.register.username_taken %]
  61             <p>
  62                 [% |l %]
  63                 Note: The selected username may be in use by another patron.
  64                 You may select another username when finalizing your
  65                 registration or in the online catalog.
  66                 [% END %]
  67             </p>
  68             [% END %]
  69
  70             <br/>
  71             <p>
  72                 <a href="[% ctx.opac_root %]/home"
  73                     class="btn btn-confirm">[% l('Return to the Catalog') %]</a>
  74             </p>
  75
  76         [% ELSIF ctx.register.error %]
  77             <h3>[% l('A registration error has occurred') %]</h3>
  78             <h4>[% l('Please see library staff to complete your registration.') %]</h4>
  79
  80             <br/>
  81             <p>
  82                 <a href="[% ctx.opac_root %]/home"
  83                     class="btn btn-confirm">[% l('Return to the Catalog') %]</a>
  84             </p>
  85
  86         [% ELSE %]
  87
  88         [% IF ctx.user %]
  89             <!-- if the user is logged in, make it
  90                 clear we are tracking the requestor -->
  91             <h4>[% l('New account requested by [_1] [_2] [_3] [_4] [_5]',
  92                     ctx.user.prefix, ctx.user.first_given_name,
  93                     ctx.user.second_given_name, ctx.user.family_name,
  94                     ctx.user.suffix
  95                 ) | html %]</h4>
  96         [% END %]
  97
  98         <form method='POST' class="needs-validation" novalidate>
  99             <div class="form-group row">
 100                 <label class="control-label col-md-2" for='stgu.home_ou'>[% l('Home Library') %]</label>
 101                 <div class="col-md-6">
 102                     [% INCLUDE build_org_selector
 103                             name='stgu.home_ou'
 104                             value=value || ctx_org
 105                             can_have_users_only=1
 106                             valid_org_list=ctx.register.valid_orgs
 107                     %]
 108                 </div>
 109                 <div class="col-md-4">
 110                     [% IF ctx.register.invalid.bad_home_ou %]
 111                     <span class='patron-reg-invalid'>
 112                         [% l('Please select a valid library') %]
 113                     </span>
 114                     [% END %]
 115                 </div>
 116             </div>
 117
 118 [%
 119 # <=== shifting code left for readability
 120
 121 # render a row for each of the register fields
 122 FOR field_def IN register_fields;
 123     fclass = field_def.class;
 124     fname = field_def.name;
 125     orig_name = fname;
 126
 127     field_path = fclass _ "." _ fname;
 128
 129     IF fname.match('^pref_');
 130         # Preferred name fields adopt most visibility, etc.
 131         # settings from the primary name counterparts.
 132         fname = fname.remove('^pref_');
 133     END;
 134
 135     show = ctx.register.settings.$fclass.$fname.show;
 136     require = ctx.register.settings.$fclass.$fname.require;
 137     example = ctx.register.settings.$fclass.$fname.example;
 138     value = ctx.register.values.$fclass.$fname;
 139
 140     invalid_require = ctx.register.invalid.$fclass.$fname.require;
 141     invalid_regex = ctx.register.invalid.$fclass.$fname.regex;
 142
 143     IF orig_name.match('^pref_');
 144         show = show || require;
 145         require = 0; # pref name values never required
 146     END;
 147
 148     NEXT UNLESS require OR show;
 149 %]
 150
 151 <div class="form-group row">
 152         <label class="control-label col-md-2" for='[% field_path %]'>[% field_def.label | html %]
 153         [% IF require %]
 154         <span class="validate">&bigstar;</span>
 155         [% END %]
 156         </label>
 157         <div class="col-md-6">
 158             [% IF fname == "dob"; %]
 159             <div class="input-group date" data-provide="datepicker-inline">
 160                 <input type="text" class="form-control datepicker" id='[% field_path %]'
 161                     name='[% field_path %]' value='[% value || CGI.param(field_path) | html %]' [% IF require %]required[% END %] data-date-format="yyyy-mm-dd" />
 162                 <div class="input-group-addon">
 163                     <span class="glyphicon glyphicon-th"></span>
 164                 </div>
 165             </div>
 166            [% ELSE; %]
 167         <input
 168             class='form-control'
 169             type='text'
 170             id='[% field_path %]'
 171             name='[% field_path %]'
 172             value='[% value || CGI.param(field_path) | html %]' [% IF require %]required[% END %]/>
 173      [% END %]
 174         <div class="invalid-feedback">
 175           [% l('Please enter a [_1]', field_def.label) | html %]
 176         </div>
 177
 178         </div>
 179
 180     <div class="col-md-4">
 181     <!-- display errors and example text -->
 182
 183     [% IF invalid_require %]
 184         <span class='patron-reg-invalid'>
 185             [% l('This field is required') %]
 186         </span>
 187     [% ELSIF invalid_regex %]
 188         <span class='patron-reg-invalid'>
 189             [% l('The value entered does not have the correct format') %]
 190         </span>
 191     [% END %]
 192     [% IF example %]
 193         <span class='patron-reg-extra'>
 194             [% l('(Example: [_1])', example) %]
 195         </span>
 196     [% END %]
 197     </div>
 198 </div>
 199 [% END %]
 200
 201
 202 <!-- ====> shifting the code back to the right for context -->
 203                     [% IF ctx.register.opt_in_settings.size > 0 %]
 204                         [% FOR optin IN ctx.register.opt_in_settings %]
 205                         <div class="form-group row">
 206                             <label class="control-label col-md-2" for="stgs.[% optin.name | uri %]'">[% optin.label | html %]</label>
 207                             <div class="col-md-6">
 208                                 <input type='checkbox'
 209                                     name='stgs.[% optin.name | uri %]'
 210                                     id='stgs.[% optin.name | uri %]'
 211                                     title="[% optin.label | html %]"
 212                                 ></input>
 213                             </div>
 214                             <div class="col-md-4">
 215                             <!-- display errors and example text -->
 216                             </div>
 217                         </div>
 218                         [% END %]
 219                     [% END %]
 220
 221                     <div class="form-group row">
 222                        <div class="col-md-6 offset-md-2">
 223                             <a href="[% ctx.opac_root %]/home"
 224                                 class="btn btn-confirm">[% l('Go Back') %]</a>
 225                             <input type="submit"
 226                                 value="[% l('Submit Registration') %]"
 227                                 class="btn btn-confirm" />
 228                        </div>
 229                     </div>
 230             </form>
 231             [% END %]
 232         </div>
 233     </div>
 234 [%- END %]
 235 <script>
 236 (function() {
 237   'use strict';
 238   window.addEventListener('load', function() {
 239     // Fetch all the forms we want to apply custom Bootstrap validation styles to
 240     var forms = document.getElementsByClassName('needs-validation');
 241     // Loop over them and prevent submission
 242     var validation = Array.prototype.filter.call(forms, function(form) {
 243       form.addEventListener('submit', function(event) {
 244         if (form.checkValidity() === false) {
 245           event.preventDefault();
 246           event.stopPropagation();
 247         }
 248         form.classList.add('was-validated');
 249       }, false);
 250     });
 251   }, false);
 252 })();
 253
 254 $(document).ready(function(){
 255    $('.datepicker').datepicker({
 256         weekStart: 1,
 257         autoclose: true,
 258         todayHighlight: true,
 259     });
 260     $('.datepicker').datepicker("setDate", "");
 261 });
 262 </script>