From 7e8dcecfe6fe6de2d9d5c95d714180eb621e927c Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Mon, 14 Mar 2016 10:41:59 -0400 Subject: [PATCH] JBAS-1132 Self-register UI, KCLS-style Signed-off-by: Bill Erickson --- .../templates_kcls/opac/parts/state_selector.tt2 | 59 +++ KCLS/openils/var/templates_kcls/opac/register.tt2 | 461 +++++++++++++++++++++ Open-ILS/web/js/ui/default/opac/register.js | 210 ++++++++++ 3 files changed, 730 insertions(+) create mode 100644 KCLS/openils/var/templates_kcls/opac/parts/state_selector.tt2 create mode 100644 KCLS/openils/var/templates_kcls/opac/register.tt2 create mode 100644 Open-ILS/web/js/ui/default/opac/register.js diff --git a/KCLS/openils/var/templates_kcls/opac/parts/state_selector.tt2 b/KCLS/openils/var/templates_kcls/opac/parts/state_selector.tt2 new file mode 100644 index 0000000000..d3818cf263 --- /dev/null +++ b/KCLS/openils/var/templates_kcls/opac/parts/state_selector.tt2 @@ -0,0 +1,59 @@ + +[% BLOCK state_selector %] + +[% END %] diff --git a/KCLS/openils/var/templates_kcls/opac/register.tt2 b/KCLS/openils/var/templates_kcls/opac/register.tt2 new file mode 100644 index 0000000000..ce8e746f68 --- /dev/null +++ b/KCLS/openils/var/templates_kcls/opac/register.tt2 @@ -0,0 +1,461 @@ +[%- PROCESS "opac/parts/header.tt2"; + PROCESS "opac/parts/org_selector.tt2"; + PROCESS "opac/parts/state_selector.tt2"; + WRAPPER "opac/parts/base.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; + +# TODO put these on the EG server? +card_url = 'https://www.kcls.org/images/library/cards/Card_'; +wallet_cards = ['12man', 'blank', 'books', 'mirror']; +keychain_cards = ['keychain']; + +MACRO input_field(fclass, fname, label, type, css_class) BLOCK; + field_path = fclass _ "." _ fname; + value = ctx.register.values.$fclass.$fname; + type = type || 'text'; + css_class = css_class || ''; +%] + + + [% IF invalid_require %] + + [% l('This field is required') %] + + [% ELSIF invalid_regex %] + + [% l('The value entered does not have the correct format') %] + + [% END %] +[% +END; # input_field() + +%] + + + + + +
+
+ +

[% l('Request a Library Card')%]

+ + [% IF ctx.register.success %] +

[% l('Registration successful!') %]

+

[% l('Please see library staff to complete your registration.') %]

+
+ +
+
+ [% END %] + + + +
+
    +
  • + + * +
    +
      +
    • + + +
      • +
    • + + +
      • +
    +
    +
    • + + + +

  • Your Information

    • +
    + +
  • +
    +
    +
    + + * +
    +
    [% input_field('stgu', 'first_given_name', 'First Name') %]
    +
    +
    +
    +
    [% input_field('stgu', 'second_given_name', 'Middle Name') %]
    +
    +
    +
    + + * +
    +
    [% input_field('stgu', 'family_name', 'Last Name') %]
    +
    +
    +
    +
    • + +
  • + +
    +
    +
    [% input_field('stgu', 'day_phone', 'Phone Number') %]
    +
    +
    (xxx-xxx-xxxx)
    +
    +
    +
    • + +
  • + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • + +
  • + +
    [% input_field('stgu', 'email', 'Email', 'email') %]
    +
    • + +
  • + +
    [% input_field('stgsc', '1', 'Gender') %]
    +
    • + +
  • + +
    [% input_field('stgu', 'ident_value2', 'Parent / Guardian', 'text', 'wide-input') %]
    +
    • + +
  • + +
    + [% INCLUDE build_org_selector + name='stgu.home_ou' + id='stgu.home_ou' + value=value || '' + can_have_users_only=1 + no_indent=1 + no_root=1 + valid_org_list=ctx.register.valid_orgs + %] + * + [% IF ctx.register.invalid.bad_home_ou %] + + [% l('Please select a valid library') %] + + [% END %] +
    +
    • + +

  • Contact Preferences

    • +
    + +
  • + +
    +
      +
    • + [% input_field('stgsc', '3', 'Events Mailing', 'checkbox') %] + +
      • +
    • + [% input_field('stgsc', '4', 'Foundation Mailing', 'checkbox') %] + +
      • +
    +
    +
    • + +
  • +

    + Residential Address* +

    +
    • + +
  • +
    [% input_field( + 'stgba', 'street1', 'Street Address', 'text', 'wide-input') %]
    + +
    • +
  • +
    +
    +
    [% input_field( + 'stgba', 'street2', 'Address Line 2', 'text', 'wide-input') %]
    +
    +
    +
    +
    [% input_field('stgba', 'city', 'City') %]
    +
    + +
    +
    +
    +
    +
    • +
  • +
    +
    +
    [% PROCESS state_selector name='stgba.state' id='stgba.state' %]
    +
    + +
    +
    +
    +
    [% input_field('stgba', 'post_code', 'Zip / Post Code') %]
    +
    + +
    +
    +
    +
    + +
    • + +
  • + +
    + + +
    +
    • + + + + + +
  • +
    +
    + +
    +
    + +
    +
    +
    +
    • +
+
+
+
+ +[% END %] + diff --git a/Open-ILS/web/js/ui/default/opac/register.js b/Open-ILS/web/js/ui/default/opac/register.js new file mode 100644 index 0000000000..3f521747f0 --- /dev/null +++ b/Open-ILS/web/js/ui/default/opac/register.js @@ -0,0 +1,210 @@ +/* + KCLS custom patron self-registration functions +*/ + +var invalid_fields = {}; +var is_juvenile = false; +var required_fields = [ + 'stgu.card_style', + 'stgu.first_given_name', + 'stgu.family_name', + 'stgu.dob', + 'stgba.street1', + 'stgba.city', + 'stgba.state', + 'stgba.post_code', +]; + +var copy_addr_fields = ['street1','street2','city','state','post_code']; + +/* show/hide card options depending on the selected type. */ +function show_card_types(type) { + var wal = document.getElementById('wallet-cards'); + var key = document.getElementById('keychain-cards'); + if (type == 'wallet') { + wal.style.display = 'block'; + key.style.display = 'none'; + } else { + wal.style.display = 'none'; + key.style.display = 'block'; + } + + // Select the first card in each group. + // Cards are put into groups, but use the same form name. + document.getElementById('first-'+type+'-card').checked = 'checked'; +} + +function check_juvenile(dobString) { + var dobDate = Date.parse(dobString); + var ageDate = new Date(); // minimum age for non-juvenile + ageDate.setFullYear(ageDate.getFullYear() - 18); + is_juvenile = (dobDate > ageDate); +} + +/* +Show or hide the mailing address. +*/ +function show_hide_mailing(hide) { + var display = hide ? 'none' : 'block'; + document.getElementById('mailing-address-1').style.display = display; + document.getElementById('mailing-address-2').style.display = display; + document.getElementById('mailing-address-3').style.display = display; +} + +function validate(dom_id) { + var element = document.getElementById(dom_id); + var value = element ? element.value : ''; + var valid = true; + + switch(dom_id) { + case 'stgu.first_given_name': + if (value) { + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = 'Please include first name'; + valid = false; + } + + break; + + case 'stgu.family_name': + if (value) { + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = 'Please include last name'; + valid = false; + } + + break; + + case 'stgu.dob': + // dob value is generated by compile_dob(). + if (value) { + delete invalid_fields[dom_id]; + check_juvenile(value); + } else { + valid = false; + is_juvenile = false; + invalid_fields[dom_id] = + "Please enter a valid date of birth."; + } + validate('stgu.ident_value2'); + break; + + case 'stgu.ident_value2': // parent/guardian + // A value is only required if is_juvenile is true. + valid = Boolean(value) || !is_juvenile; + if (valid) { + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = + "Please list all parents or guardians living at your address." + } + + break; + + case 'stgu.card_style': + // be sure the user has selected a card style. + // In this case dom_id is really a radio selector name. + var styles = document.getElementsByName(dom_id); + var checked = false; + for (var i = 0; i < styles.length; i++) { + if (styles[i].checked) { + checked = true; + break; + } + } + + if (checked) { + valid = false; + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = "Please select a card style." + } + break; + + case 'stgba.street1': + if (value) { + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = "Please enter an address street"; + } + break; + + case 'stgba.city': + if (value) { + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = "Please enter a address city"; + } + break; + + case 'stgba.post_code': + if (value) { + delete invalid_fields[dom_id]; + } else { + invalid_fields[dom_id] = "Please enter an address zip/post code"; + } + break; + } + + if (element) { + element.className = valid ? '' : 'patron-reg-invalid'; + } +} + +function compile_dob() { + var day = document.getElementById('dob.day').value || ''; + var mon = document.getElementById('dob.month').value || ''; + var year = document.getElementById('dob.year').value || ''; + var dob = document.getElementById('stgu.dob'); + var dob_display = document.getElementById('dob.display'); + + if (day && mon && year.length == 4 && Number(year) >= 1900) { + var dob_date = new Date(year, Number(mon) - 1, Number(day)); + + if (dob_date) { + + // push the time forward by our timezone offset to force the + // stored (UTC) date to match the entered date. + dob_date.setTime(dob_date.getTime() + + dob_date.getTimezoneOffset() * 60 * 1000); + + dob.value = dob_date.toISOString().replace(/T.*/,''); + dob_display.innerHTML = '(' + dob_date.toDateString() + ')'; + validate('stgu.dob'); + return; + } + } + + // date is incomplete or invalid. clear the compiled dob value. + dob.value = ''; + dob_display.innerHTML = ''; + validate('stgu.dob'); +} + +/* +If we have collected any invalid field messages, bundle +them into a single alert message, alert it, then prevent +the form from submitting by returning false. +*/ +function onsub() { + + // force the validator to run on all required fields regardless + // of whether they have been changed. + for (var i = 0; i < required_fields.length; i++) + validate(required_fields[i]); + + var msg = ''; + for (var key in invalid_fields) { + msg += '\n*' + invalid_fields[key] + '\n'; + } + + if (msg) { + alert(msg); + return false; + } + return true; +} + + -- 2.11.0