From 0ffe39729f01cd35dc463e1672c79a431a64adfd Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Sun, 28 Feb 2016 18:16:18 -0500
Subject: [PATCH] Patron reg field validation (WIP)

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/templates/staff/circ/patron/t_edit.tt2     | 795 ++++++++++++++++-----
 Open-ILS/src/templates/staff/css/circ.css.tt2      |   5 +
 .../web/js/ui/default/staff/circ/patron/regctl.js  |  15 +
 3 files changed, 617 insertions(+), 198 deletions(-)

diff --git a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
index eb5975590c..be71f4397f 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
@@ -19,7 +19,6 @@
 <div ng-if="patron_id"
     class="strong-text-2">[% l('Patron Edit') %]</div>
 
-
 <div id="reg-alert-pane">
 
   <div id="reg-dupe-links">
@@ -74,208 +73,247 @@
   </div>
 </div>
 
-
-[% MACRO formfield(cls, field, path, input_type) BLOCK;
-
-  # input field generator for common text/number/checkbox fields
-
-  IF NOT input_type; input_type = 'text'; END %] 
-
-<div class="row reg-field-row" 
-  ng-show="show_field('[% cls _ '.' _ field %]')">
-
+[% MACRO draw_field_label (cls, field) BLOCK %]
   <div class="col-md-3 reg-field-label"> <!-- field label -->
-
     <label>{{idl_fields.[% cls %].[% field %].label}}</label>
-
     <!-- field documentation img/link -->
     <img ng-show="field_doc.[% cls %].[% field %]" 
       ng-click="set_selected_field_doc('[% cls %]','[% field %]')"
       src='[% DOC_IMG %]'></img>
   </div>
+[% END %]
 
-  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+<!-- progress dialog displayed as we await all data to finish loading -->
+<div class="row" ng-show="!page_data_loaded">
+  <div class="col-md-6 pad-vert">
+    <div class="progress progress-striped active">
+        <div class="progress-bar"  role="progressbar" aria-valuenow="100" 
+              aria-valuemin="0" aria-valuemax="100" style="width: 100%">
+            <span class="sr-only">[% l('Loading...') %]</span>
+        </div>
+    </div>
+  </div>
+</div>
 
-  [% model = path ? 'patron.' _ path _ '.' _ field : 'patron.' _ field %]
+<!--  
+MAIN FORM
+This div wraps the entire form so we can hide it until all needed data
+has been loaded.  Setting ng-form and a name lets us refer to fields
+within the "form" by name for validation.
+-->
+<div ng-form name="reg_form" ng-show="page_data_loaded">
 
-  [% IF input_type == 'checkbox' %]
+<!-- BARCODE -->
 
-    <div class='checkbox'>
-      <input type='checkbox' 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        ng-model='[% model %]'/>
-    </div>
-
-  [% ELSE %]
-    <!-- text / number input -->
-
-    [% IF field == 'alert_message' %]
-      <textarea ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field == 'post_code' %]
-      <input type="text" ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron.[% path %], 'post_code')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field == 'barcode' %]
+<div class="row reg-field-row" ng-show="show_field('ac.barcode')">
+  [% draw_field_label('ac', 'barcode') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
       <input type="text" 
+        name="barcode"
+        ng-model="patron.card.barcode"
+        ng-class="{'patron-reg-invalid-field' : field_is_invalid('barcode')}"
+        ng-required="true"
         focus-me="focus_bc"
         ng-change="field_modified()" 
         ng-disabled="disable_bc"
         ng-blur="handle_field_changed(patron.card, 'barcode')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field == 'usrname' %]
-      <input type="text" 
-        focus-me="focus_usrname"
-        ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field == 'day_phone' %]
-      <input type="text" 
-        ng-blur="handle_field_changed(patron, 'day_phone')"
-        ng-change="field_modified()" 
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field.match('phone') %]
-      <input type="text" 
-        ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field.match('ident_value') %]
-      <input type="text" 
-        ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field == 'first_given_name' OR field == 'family_name' %]
-      <input type="text" 
-        ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field == 'email' %]
-      <input type="[% input_type %]" 
-        ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron, '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSIF field.match('street') OR field == 'city' %]
-      <!-- note: passing address object to dupe_value_changed -->
-      <input type="[% input_type %]" 
-        ng-change="field_modified()" 
-        ng-blur="handle_field_changed(patron.[% path %], '[% field %]')"
-        class="form-control" ng-model="[% model %]"/>
-    [% ELSE %]
-      <input type="[% input_type %]" 
-        ng-change="field_modified()" 
-        class="form-control" ng-model="[% model %]"/>
-    [% END %]
-  [% END %]
-
+        class="form-control" 
+        ng-blur="handle_field_changed(patron.card, 'barcode')"/>
   </div>
-
-  <!-- supplemental actions and example text -->
   <div class="col-md-6 patron-reg-example">
-
-    [% IF field == 'barcode' %]
-
       <button class="btn btn-default" ng-show="!patron.isnew"
         ng-click="replace_card()">[% l('Replace Barcode') %]</button>
       <button class="btn btn-default" 
         ng-click="cards_dialog()">[% l('See All') %]</button>
+  </div>
+</div>
 
-    [% ELSIF field == 'passwd' %]
+<!-- USRNAME -->
 
-      <button class="btn btn-default" ng-click="generate_password()">
-        [% l('Generate Password') %]</button>
+<div class="row reg-field-row" ng-show="show_field('au.usrname')">
+  [% draw_field_label('au', 'usrname') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      name='usrname'
+      ng-class="{'patron-reg-invalid-field' : field_is_invalid('usrname')}"
+      ng-required="true"
+      focus-me="focus_usrname"
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'usrname')"
+      class="form-control" 
+      ng-model="patron.usrname"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <div ng-show="dupe_username" class="patron-reg-validation-alert">
+      <span>[% l('Username is already in use') %]</span>
+    </div>
+  </div>
+</div>
 
-    [% ELSIF field == 'usrname' %]
+<!-- PASSWD -->
 
-      <div ng-show="dupe_username" class="patron-reg-validation-alert">
-        <span>[% l('Username is already in use') %]</span>
-      </div>
+<div class="row reg-field-row" ng-show="show_field('au.passwd')">
+  [% draw_field_label('au', 'passwd') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      name='passwd'
+      ng-class="{'patron-reg-invalid-field' : field_is_invalid('passwd')}"
+      ng-required="true"
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'passwd')"
+      class="form-control" 
+      ng-model="patron.passwd"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <button class="btn btn-default" ng-click="generate_password()">
+      [% l('Generate Password') %]</button>
+  </div>
+</div>
 
-    [% ELSE %]
+<!-- PREFIX -->
 
-      <!-- invalidate buttons -->
+<div class="row reg-field-row" ng-show="show_field('au.prefix')">
+  [% draw_field_label('au', 'prefix') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="text" 
+      ng-change="field_modified()" 
+      class="form-control" 
+      name="prefix"
+      ng-class="{'patron-reg-invalid-field' : field_is_invalid('prefix')}"
+      ng-required="org_settings['ui.patron.edit.au.prefix.require']"
+      ng-model="patron.prefix"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.au.prefix.example']">
+        [% l('Example: [_1]', "{{org_settings['ui.patron.edit.au.prefix.example']}}") %]
+      </span>
+  </div>
+</div>
 
-      [% IF field.match('phone') OR field.match('email') %]
-        <button ng-show="patron.[% field %] && !patron.isnew" 
-            class="btn btn-default" 
-            ng-click="invalidate_field('[% field %]')">
-            [% l('Invalidate') %]
-        </button>
-      [% END %]
+<!-- FIRST_GIVEN_NAME -->
 
-      <!-- example strings -->
+<div class="row reg-field-row" ng-show="show_field('au.first_given_name')">
+  [% draw_field_label('au', 'first_given_name') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'first_given_name')"
+      class="form-control" ng-model="patron.first_given_name"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.first_given_name.example']">
+      [% l('Example: [_1]', "{{org_settings['ui.patron.edit.au.first_given_name.example']}}") %]
+    </span>
+  </div>
+</div>
 
-      [% set_str = "org_settings['ui.patron.edit." _ 
-          cls _ "." _ field _ ".example']"; %]
+<!-- SECOND_GIVEN_NAME -->
 
-      <span ng-if="[% set_str %]">
-        [% l('Example: [_1]', "{{" _ set_str _ "}}") %]
-      </span>
+<div class="row reg-field-row" ng-show="show_field('au.second_given_name')">
+  [% draw_field_label('au', 'second_given_name') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="text" 
+      ng-change="field_modified()" 
+      class="form-control" ng-model="patron.second_given_name"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.second_given_name.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.second_given_name.example']}}") %]
+    </span>
+  </div>
+</div>
 
-      <!-- phones have a fall-through example strings -->
-      [% IF field.match('phone') %]
-        <span ng-if="![% set_str %] && org_settings['ui.patron.edit.phone.example']">
-          [% l('Example: [_1]', 
-          "{{org_settings['ui.patron.edit.phone.example']}}") %]
-        </span>
-      [% END %]
-    [% END %]
+<!-- FAMILY_NAME -->
+
+<div class="row reg-field-row" ng-show="show_field('au.family_name')">
+  [% draw_field_label('au', 'family_name') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="text" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'family_name')"
+      class="form-control" ng-model="patron.family_name"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.family_name.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.family_name.example']}}") %]
+    </span>
   </div>
 </div>
-[% END %]
 
-<!-- progress dialog displayed as we await all data to finish loading -->
-<div class="row" ng-show="!page_data_loaded">
-  <div class="col-md-6 pad-vert">
-    <div class="progress progress-striped active">
-        <div class="progress-bar"  role="progressbar" aria-valuenow="100" 
-              aria-valuemin="0" aria-valuemax="100" style="width: 100%">
-            <span class="sr-only">[% l('Loading...') %]</span>
-        </div>
-    </div>
+<!-- SUFFIX -->
+
+<div class="row reg-field-row" ng-show="show_field('au.suffix')">
+  [% draw_field_label('au', 'suffix') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="text" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'suffix')"
+      class="form-control" 
+      ng-model="patron.suffix"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.au.suffix.example']">
+        [% l('Example: [_1]', 
+          "{{org_settings['ui.patron.edit.au.suffix.example']}}") %]
+      </span>
   </div>
 </div>
 
-<!-- this div wraps the entire form so we can hide it 
-     until all needed data has been loaded -->
-<div ng-show="page_data_loaded"><!-- form wrapper -->
+<!-- ALIAS -->
 
-[% formfield('ac', 'barcode', 'card') %]
-[% formfield('au', 'usrname') %]
-[% formfield('au', 'passwd') %]
-[% formfield('au', 'prefix') %]
-[% formfield('au', 'first_given_name') %]
-[% formfield('au', 'second_given_name') %]
-[% formfield('au', 'family_name') %]
-[% formfield('au', 'suffix') %]
-[% formfield('au', 'alias') %]
+<div class="row reg-field-row" ng-show="show_field('au.alias')">
+  [% draw_field_label('au', 'alias') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="text" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'alias')"
+      class="form-control" 
+      ng-model="patron.alias"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.au.alias.example']">
+        [% l('Example: [_1]', 
+          "{{org_settings['ui.patron.edit.au.alias.example']}}") %]
+      </span>
+  </div>
+</div>
+
+<!-- DOB -->
 
 <div class="row reg-field-row" ng-show="show_field('au.dob')">
-  <div class="col-md-3 reg-field-label">
-    <label>{{idl_fields.au.dob.label}}</label>
-    <img ng-show="field_doc.au.dob" 
-      ng-click="selected_field_doc=field_doc.au.dob"
-      src='[% DOC_IMG %]'></img>
-  </div>
+  [% draw_field_label('au', 'dob') %]
   <div class="col-md-3 reg-field-input">
     <input eg-date-input 
       ng-change="field_modified()" 
       ng-blur="handle_field_changed(patron, 'dob')"
       class="form-control" ng-model="patron.dob"/>
   </div>
+  <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.au.dob.example']">
+        [% l('Example: [_1]', 
+          "{{org_settings['ui.patron.edit.au.dob.example']}}") %]
+      </span>
+  </div>
 </div>
 
-[% formfield('au', 'juvenile', '', 'checkbox') %]
+<!-- JUVENILE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.juvenile')">
+  [% draw_field_label('au', 'juvenile') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="checkbox"
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'juvenile')"
+      class="form-control" ng-model="patron.juvenile"/>
+  </div>
+</div>
 
 <!-- ident_type -->
 
 <div class="row reg-field-row" ng-show="show_field('au.ident_type')">
-  <div class="col-md-3 reg-field-label">
-    <label>{{idl_fields.au.ident_type.label}}</label>
-    <img ng-show="field_doc.au.ident_type" 
-      ng-click="selected_field_doc=field_doc.au.ident_type"
-      src='[% DOC_IMG %]'></img>
-  </div>
+  [% draw_field_label('au', 'ident_type') %]
   <div class="col-md-3 reg-field-input">
     <div class="btn-group" dropdown>
       <button type="button" class="btn btn-default dropdown-toggle">
@@ -295,38 +333,156 @@
   </div>
 </div>
 
+<!-- IDENT_VALUE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.ident_value')">
+  [% draw_field_label('au', 'ident_value') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'ident_value')"
+      class="form-control" 
+      ng-model="patron.ident_value"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.ident_value.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.ident_value.example']}}") %]
+    </span>
+  </div>
+</div>
+
+<!-- IDENT_VALUE2 -->
+<div class="row reg-field-row" ng-show="show_field('au.ident_value2')">
+  [% draw_field_label('au', 'ident_value2') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'ident_value2')"
+      class="form-control" 
+      ng-model="patron.ident_value2"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.ident_value2.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.ident_value2.example']}}") %]
+    </span>
+  </div>
+</div>
+
+
+<!-- EMAIL -->
+<div class="row reg-field-row" ng-show="show_field('au.email')">
+  [% draw_field_label('au', 'ident_value2') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="email" 
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'email')"
+      class="form-control" ng-model="patron.email"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <button ng-show="patron.email && !patron.isnew" 
+      class="btn btn-default" 
+      ng-click="invalidate_field('email')">[% l('Invalidate') %]</button>
+    <span ng-if="org_settings['ui.patron.edit.au.email.example']">
+      [% l('Example: [_1]',
+        "{{org_settings['ui.patron.edit.au.email.example']}}") %]
+    </span>
+  </div>
+</div>
+
+<!-- DAY_PHONE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.day_phone')">
+  [% draw_field_label('au', 'day_phone') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      ng-blur="handle_field_changed(patron, 'day_phone')"
+      ng-change="field_modified()" 
+      class="form-control" ng-model="patron.day_phone"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <button ng-show="patron.day_phone && !patron.isnew" 
+        class="btn btn-default" 
+        ng-click="invalidate_field('day_phone')">[% l('Invalidate') %]</button>
+    <span ng-if="org_settings['ui.patron.edit.au.day_phone.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.day_phone.example']}}") %]
+    </span>
+    <!-- phones have a fall-through example strings -->
+    <span ng-if="!org_settings['ui.patron.edit.au.day_phone.example'] && org_settings['ui.patron.edit.phone.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.phone.example']}}") %]
+    </span>
+  </div>
+</div>
+
+<!-- EVENING_PHONE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.evening_phone')">
+  [% draw_field_label('au', 'evening_phone') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      ng-blur="handle_field_changed(patron, 'evening_phone')"
+      ng-change="field_modified()" 
+      class="form-control" ng-model="patron.evening_phone"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <button ng-show="patron.evening_phone && !patron.isnew" 
+        class="btn btn-default" 
+        ng-click="invalidate_field('evening_phone')">[% l('Invalidate') %]</button>
+    <span ng-if="org_settings['ui.patron.edit.au.evening_phone.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.evening_phone.example']}}") %]
+    </span>
+    <!-- phones have a fall-through example strings -->
+    <span ng-if="!org_settings['ui.patron.edit.au.evening_phone.example'] && org_settings['ui.patron.edit.phone.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.phone.example']}}") %]
+    </span>
+  </div>
+</div>
 
-[% formfield('au', 'ident_value') %]
-[% formfield('au', 'ident_value2') %]
-[% formfield('au', 'email', '', 'email') %]
-[% formfield('au', 'day_phone') %]
-[% formfield('au', 'evening_phone') %]
-[% formfield('au', 'other_phone') %]
+<!-- OTHER_PHONE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.other_phone')">
+  [% draw_field_label('au', 'other_phone') %]
+  <div class="col-md-3 reg-field-input">
+    <input type="text" 
+      ng-blur="handle_field_changed(patron, 'other_phone')"
+      ng-change="field_modified()" 
+      class="form-control" ng-model="patron.other_phone"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <button ng-show="patron.other_phone && !patron.isnew" 
+        class="btn btn-default" 
+        ng-click="invalidate_field('other_phone')">[% l('Invalidate') %]</button>
+    <span ng-if="org_settings['ui.patron.edit.au.other_phone.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.other_phone.example']}}") %]
+    </span>
+    <!-- phones have a fall-through example strings -->
+    <span ng-if="!org_settings['ui.patron.edit.au.other_phone.example'] && org_settings['ui.patron.edit.phone.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.phone.example']}}") %]
+    </span>
+  </div>
+</div>
 
 <!-- home org unit selector -->
 
 <div class="row reg-field-row" ng-show="show_field('au.home_ou')">
-  <div class="col-md-3 reg-field-label">
-    <label>{{idl_fields.au.home_ou.label}}</label>
-    <img ng-show="field_doc.au.home_ou" 
-      ng-click="selected_field_doc=field_doc.au.home_ou"
-      src='[% DOC_IMG %]'></img>
-    </div>
-    <div class="col-md-3 reg-field-input">
-      <eg-org-selector selected="patron.home_ou" onchange="handle_home_org_changed">
-      </eg-org-selector>
+  [% draw_field_label('au', 'home_ou') %]
+  <div class="col-md-3 reg-field-input">
+    <eg-org-selector selected="patron.home_ou" onchange="handle_home_org_changed">
+    </eg-org-selector>
   </div>
 </div>
 
 <!-- profile selector -->
 
 <div class="row reg-field-row" ng-show="show_field('au.profile')">
-  <div class="col-md-3 reg-field-label">
-    <label>{{idl_fields.au.profile.label}}</label>
-    <img ng-show="field_doc.au.profile" 
-      ng-click="selected_field_doc=field_doc.au.profile"
-      src='[% DOC_IMG %]'></img>
-  </div>
+  [% draw_field_label('au', 'profile') %]
   <div class="col-md-3 reg-field-input">
     <div class="btn-group" dropdown>
       <button type="button" class="btn btn-default dropdown-toggle">
@@ -351,12 +507,7 @@
 </div>
 
 <div class="row reg-field-row" ng-show="show_field('au.expire_date')">
-  <div class="col-md-3 reg-field-label">
-  <label>{{idl_fields.au.expire_date.label}}</label>
-    <img ng-show="field_doc.au.expire_date" 
-    ng-click="selected_field_doc=field_doc.au.expire_date"
-    src='[% DOC_IMG %]'></img>
-  </div>
+  [% draw_field_label('au', 'expire_date') %]
   <div class="col-md-3 reg-field-input">
     <input eg-date-input 
       ng-blur="handle_field_changed(patron, 'expire_date')"
@@ -371,12 +522,7 @@
 <!-- net_access_level -->
 
 <div class="row reg-field-row" ng-show="show_field('au.net_access_level')">
-  <div class="col-md-3 reg-field-label">
-    <label>{{idl_fields.au.net_access_level.label}}</label>
-    <img ng-show="field_doc.au.net_access_level" 
-      ng-click="selected_field_doc=field_doc.au.net_access_level"
-      src='[% DOC_IMG %]'></img>
-  </div>
+  [% draw_field_label('au', 'net_access_level') %]
   <div class="col-md-3 reg-field-input">
     <div class="btn-group" dropdown>
       <button type="button" class="btn btn-default dropdown-toggle">
@@ -397,12 +543,99 @@
   </div>
 </div>
 
-[% formfield('au', 'active', '', 'checkbox') %]
-[% formfield('au', 'barred', '', 'checkbox') %]
-[% formfield('au', 'master_account', '', 'checkbox') %]
-[% formfield('au', 'claims_returned_count', '', 'number') %]
-[% formfield('au', 'claims_never_checked_out_count', '', 'number') %]
-[% formfield('au', 'alert_message') %]
+<!-- ACTIVE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.active')">
+  [% draw_field_label('au', 'active') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <div class='checkbox'>
+      <input type='checkbox' 
+        ng-blur="handle_field_changed(patron, 'active')"
+        ng-model='patron.active'/>
+    </div>
+  </div>
+</div>
+
+<!-- BARRED -->
+
+<div class="row reg-field-row" ng-show="show_field('au.barred')">
+  [% draw_field_label('au', 'barred') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <div class='checkbox'>
+      <input type='checkbox' 
+        ng-blur="handle_field_changed(patron, 'barred')"
+        ng-model='patron.barred'/>
+    </div>
+  </div>
+</div>
+
+<!-- MASTER_ACCOUNT -->
+
+<div class="row reg-field-row" ng-show="show_field('au.master_account')">
+  [% draw_field_label('au', 'master_account') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <div class='checkbox'>
+      <input type='checkbox' 
+        ng-blur="handle_field_changed(patron, 'master_account')"
+        ng-model='patron.master_account'/>
+    </div>
+  </div>
+</div>
+
+<!-- CLAIMS_RETURNED_COUNT -->
+
+<div class="row reg-field-row" ng-show="show_field('au.claims_returned_count')">
+  [% draw_field_label('au', 'claims_returned_count') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="number" 
+      ng-blur="handle_field_changed(patron, 'claims_returned_count')"
+      ng-change="field_modified()" 
+      class="form-control" ng-model="patron.claims_returned_count"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.claims_returned_count.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.claims_returned_count.example']}}") %]
+    </span>
+  </div>
+</div>
+
+<!-- CLAIMS_NEVER_CHECKED_OUT_COUNT -->
+
+<div class="row reg-field-row" ng-show="show_field('au.claims_never_checked_out_count')">
+  [% draw_field_label('au', 'claims_never_checked_out_count') %]
+  <div class="col-md-3 reg-field-input"> <!-- field form input -->
+    <input type="number" 
+      ng-blur="handle_field_changed(patron, 'claims_never_checked_out_count')"
+      ng-change="field_modified()" 
+      class="form-control" ng-model="patron.claims_never_checked_out_count"/>
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.claims_never_checked_out_count.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.claims_never_checked_out_count.example']}}") %]
+    </span>
+  </div>
+</div>
+
+<!-- ALERT_MESSAGE -->
+
+<div class="row reg-field-row" ng-show="show_field('au.alert_message')">
+  [% draw_field_label('au', 'alert_message') %]
+  <div class="col-md-3 reg-field-input">
+    <textarea 
+      class="form-control" 
+      ng-model="patron.alert_message"
+      ng-change="field_modified()" 
+      ng-blur="handle_field_changed(patron, 'alert_message')">
+  </div>
+  <div class="col-md-6 patron-reg-example">
+    <span ng-if="org_settings['ui.patron.edit.au.alert_message.example']">
+      [% l('Example: [_1]', 
+        "{{org_settings['ui.patron.edit.au.alert_message.example']}}") %]
+    </span>
+  </div>
+</div>
 
 <div class="alert alert-success row" role="alert">
   <div class="col-md-6">[% l('User Settings') %]</div>
@@ -545,16 +778,182 @@
       </div>
   </div>
 
-  [% formfield('aua', 'address_type', 'addresses[$index]') %]
-  [% formfield('aua', 'post_code', 'addresses[$index]') %]
-  [% formfield('aua', 'street1', 'addresses[$index]') %]
-  [% formfield('aua', 'street2', 'addresses[$index]') %]
-  [% formfield('aua', 'city', 'addresses[$index]') %]
-  [% formfield('aua', 'county', 'addresses[$index]') %]
-  [% formfield('aua', 'state', 'addresses[$index]') %]
-  [% formfield('aua', 'country', 'addresses[$index]') %]
-  [% formfield('aua', 'valid', 'addresses[$index]', 'checkbox') %]
-  [% formfield('aua', 'within_city_limits', 'addresses[$index]', 'checkbox') %]
+  <!-- ADDRESS_TYPE -->
+  <div class="row reg-field-row" ng-show="show_field('aua.address_type')">
+    [% draw_field_label('aua', 'address_type') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].address_type"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'address_type')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.address_type.example']">
+         Example: {{org_settings['ui.patron.edit.aua.address_type.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- POST_CODE -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.post_code')">
+    [% draw_field_label('aua', 'post_code') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].post_code"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'post_code')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.post_code.example']">
+         Example: {{org_settings['ui.patron.edit.aua.post_code.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- STREET1 -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.street1')">
+    [% draw_field_label('aua', 'street1') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].street1"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'street1')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.street1.example']">
+         Example: {{org_settings['ui.patron.edit.aua.street1.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- STREET2 -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.street2')">
+    [% draw_field_label('aua', 'street2') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].street2"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'street2')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.street2.example']">
+         Example: {{org_settings['ui.patron.edit.aua.street2.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- CITY -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.city')">
+    [% draw_field_label('aua', 'city') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].city"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'city')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.city.example']">
+         Example: {{org_settings['ui.patron.edit.aua.city.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- COUNTY -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.county')">
+    [% draw_field_label('aua', 'county') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].county"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'county')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.county.example']">
+         Example: {{org_settings['ui.patron.edit.aua.county.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- STATE -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.state')">
+    [% draw_field_label('aua', 'state') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].state"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'state')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.state.example']">
+         Example: {{org_settings['ui.patron.edit.aua.state.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- COUNTRY -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.country')">
+    [% draw_field_label('aua', 'country') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="text" 
+        ng-change="field_modified()" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].country"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'country')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.country.example']">
+         Example: {{org_settings['ui.patron.edit.aua.country.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- VALID -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.valid')">
+    [% draw_field_label('aua', 'valid') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="checkbox" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].valid"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'valid')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.valid.example']">
+         Example: {{org_settings['ui.patron.edit.aua.valid.example']}}
+       </span>
+    </div>
+  </div>
+
+  <!-- WITHIN_CITY_LIMITS -->
+
+  <div class="row reg-field-row" ng-show="show_field('aua.within_city_limits')">
+    [% draw_field_label('aua', 'within_city_limits') %]
+    <div class="col-md-3 reg-field-input">
+      <input type="checkbox" 
+        class="form-control" 
+        ng-model="patron.addresses[$index].within_city_limits"
+        ng-blur="handle_field_changed(patron.addresses[$index], 'within_city_limits')"/>
+    </div>
+    <div class="col-md-6 patron-reg-example">
+      <span ng-if="org_settings['ui.patron.edit.aua.within_city_limits.example']">
+         Example: {{org_settings['ui.patron.edit.aua.within_city_limits.example']}}
+       </span>
+    </div>
+  </div>
 
   <div class="row" ng-if="$last">
     <button type="button" ng-click="new_address()" 
diff --git a/Open-ILS/src/templates/staff/css/circ.css.tt2 b/Open-ILS/src/templates/staff/css/circ.css.tt2
index 9efbe7baff..8e69dfe42a 100644
--- a/Open-ILS/src/templates/staff/css/circ.css.tt2
+++ b/Open-ILS/src/templates/staff/css/circ.css.tt2
@@ -158,6 +158,11 @@ but the ones I'm finding aren't quite cutting it..*/
   color: red;
 }
 
+.patron-reg-invalid-field {
+  background-color: yellow;
+  color: red;
+}
+
 /* -- end patron registration -- */
 
 [%# 
diff --git a/Open-ILS/web/js/ui/default/staff/circ/patron/regctl.js b/Open-ILS/web/js/ui/default/staff/circ/patron/regctl.js
index a140d33f2e..a0816f2764 100644
--- a/Open-ILS/web/js/ui/default/staff/circ/patron/regctl.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/patron/regctl.js
@@ -1426,6 +1426,12 @@ function PatronRegCtrl($scope, $routeParams,
 
         console.log('changing field ' + field_name + ' to ' + value);
 
+        console.log($scope.reg_form.usrname.$error);
+
+        if (field_name == 'usrname') {
+            console.log('invalid : ' + $scope.field_is_invalid('usrname'));
+        }
+
         switch (field_name) {
             case 'day_phone' : 
                 if ($scope.patron.day_phone && 
@@ -1483,6 +1489,15 @@ function PatronRegCtrl($scope, $routeParams,
         $scope.field_modified();
     }
 
+    // Tests angular's form field validation toggles.
+    $scope.field_is_invalid = function(field_name) {
+        console.log('err: ' + field_name + ' : ' 
+            + $scope.reg_form[field_name].$error.required);
+        return 
+            $scope.reg_form[field_name].$error.required ||
+            !$scope.reg_form[field_name].$error.valid;
+    }
+
 
     $scope.edit_passthru.save = function(save_args) {
         if (!save_args) save_args = {};
-- 
2.11.0