XNAT-4467: Refactored script and Spawner elements for the "Passwords" panel....

XNAT-4467: Refactored script and Spawner elements for the "Passwords" panel. Also, now a future password expiration date can be set.

src/main/resources/META-INF/xnat/spawner/site-admin-elements.yaml

@@ -27,34 +27,42 @@ siteDescriptionPage:
         type: text
         name: siteDescriptionPage
         size: 30
-    after: "<p class='description'>Specify a velocity template file to display on the login page</p>"
+    after: >
+        <p class="description">Specify a velocity template file to display on the login page</p>
 
 siteDescriptionText:
     tag: textarea|data-code-editor;data-code-language=html
     element:
         name: siteDescriptionText
         rows: 8
-    after: "<p class='description'>Specify a simple text description of this site.</p>"
+    after: >
+        <p class="description">Specify a simple text description of this site.</p>
 
 passwordExpirationInterval:
     tag: input
-    before: '<br>'
     element:
         type: text
         id: passwordExpirationInterval
         name: passwordExpirationInterval
         label: Password Expiration (Interval)
     after: >
-      <p class='description'>Interval of time after which unchanged passwords expire and users have to change them. Uses <a target="_blank" href="http://www.postgresql.org/docs/9.0/static/functions-datetime.html">PostgreSQL interval notation</a></p>
+      <p class="description">Interval of time after which unchanged passwords expire and users have to change them.
+      Uses <a target="_blank" href="http://www.postgresql.org/docs/9.0/static/functions-datetime.html">PostgreSQL interval notation</a></p>
 
 passwordExpirationDate:
     tag: input
-    before: '<br>'
     element:
         type: text
         id: passwordExpirationDate
         name: passwordExpirationDate
         label: Password Expiration (Date)
+    after:
+        datePicker:
+            tag: span#datePicker
+            content: >
+              &nbsp;&nbsp;<span id='openCal-passwordExpirationDate' class='icon icon-sm icon-calendar'></span>
+              <br>
+              <p class='description'>Expire passwords that were last changed before this date and require those users to change them.</p>
 
 siteDescriptionType:
     kind: panel.element
@@ -435,22 +443,17 @@ passwords:
                             tag: label.pad5h|for=passwordExpirationTypeDate
                             content: Date
                 passwordExpirationInterval:
-                    tag: div.input-bundle.interval.inline
+                    tag: div.input-bundle.interval
                     contents:
                         ${passwordExpirationInterval}
                 passwordExpirationDate:
-                    tag: div.input-bundle.date.inline
-                    after:
-                        label:
-                            tag: span#datePicker
-                            content: >
-                              &nbsp;&nbsp;<span id='openCal-passwordExpirationDate' class='icon icon-sm icon-calendar'></span><br><p class='description'>Expire passwords that were last changed before this date and require those users to change them.</p>
+                    tag: div.input-bundle.date
                     contents:
                         ${passwordExpirationDate}
                 pwExpTypeJs:
                     tag: script
                     element:
-                        src: ~/scripts/xnat/admin/pwExpType.js
+                        src: ~/scripts/xnat/admin/passwords.js
         passwordReuseRestriction:
             kind: panel.select.single
             id: passwordReuseRestriction

src/main/webapp/scripts/xnat/admin/passwords.js

+// interactions with 'Security Passwords' section of admin ui
+console.log('passwordExpirationType.js');
+
+(function(){
+
+    var container$ = $('div[data-name="passwordExpiration"]');
+    var bundles$ = container$.find('div.input-bundle');
+
+
+    // Password Expiration
+    (function(){
+
+        var fieldInterval$ =
+                container$.find('#passwordExpirationInterval')
+                    .css({ marginTop: '10px' });
+
+        var fieldDate$ =
+                container$.find('#passwordExpirationDate')
+                    .attr('placeholder', 'MM/DD/YYYY')
+                    .css({
+                        marginTop: '10px',
+                        width:     '90px'
+                    })
+                    .datetimepicker({
+                        timepicker: false,
+                        // today is max date, disallow future date selection
+                        // maxDate:    '+1970/01/01',
+                        format:     'm/d/Y'
+                    });
+
+        var openCal$ =
+                container$.find('#openCal-passwordExpirationDate')
+                    .click(function(){
+                        fieldDate$.datetimepicker('show');
+                    });
+
+        container$.find('input[name="passwordExpirationType"]').on('change', function(){
+            changeExpirationType(this.value);
+        });
+
+        changeExpirationType(XNAT.data.siteConfig.passwordExpirationType);
+
+        function changeExpirationType(value){
+            value = (value || 'interval').toLowerCase();
+            bundles$.hide();
+            bundles$.filter('.' + value).show();
+        }
+
+    })();
+
+
+    // Password Reuse
+    (function(){
+
+        var durationContainer$ = $('div[data-name="passwordHistoryDuration"]');
+        var durationInput$ = durationContainer$.find('input#passwordHistoryDuration');
+
+        $('#passwordReuseRestriction').on('change', function(){
+            changePasswordReuseType(this.value);
+        });
+
+        changePasswordReuseType(XNAT.data.siteConfig.passwordReuseRestriction);
+
+        function changePasswordReuseType(value){
+            value = (value || 'none').toLowerCase();
+            if (value === 'historical'){
+                durationContainer$.removeClass('disabled');
+                durationInput$.prop('disabled', false).removeClass('disabled');
+            }
+            else {
+                durationContainer$.addClass('disabled');
+                durationInput$.prop('disabled', true).addClass('disabled');
+            }
+        }
+
+    })();
+
+
+})();