httemplate/elements/validate_password_js.html

   1 <%doc>
   2
   3 JavaScript to perform password validation
   4
   5   <& '/elements/validate_password_js.html',
   6      contactnum  => $contactnum,
   7      svcnum      => $svcnum
   8   &>
   9
  10 The ID of the input field can be anything;  the ID of the DIV in which to display results
  11 should be the input id plus '_result'.
  12
  13 </%doc>
  14
  15 <& '/elements/xmlhttp.html',
  16     'url'  => $p.'misc/xmlhttp-validate_password.html',
  17     'subs' => [ 'validate_password' ],
  18     'method' => 'POST', # important not to put passwords in url
  19 &>
  20 <SCRIPT>
  21 function add_password_validation (fieldid, submitid, svcnum, contactnum) {
  22   var inputfield = document.getElementById(fieldid);
  23   inputfield.onkeydown = function(e) {
  24     var key;
  25     if (window.event) { key = window.event.keyCode; }
  26     else { key = e.which; } // for ff browsers
  27     // some browsers allow the enter key to submit a form even if the submit button is disabled
  28     // below prevents enter key from submiting form if password has not been validated.
  29     if (key == '13') {
  30       var check = checkPasswordValidation(fieldid);
  31       return check;
  32     }
  33   }
  34   inputfield.onkeyup = function () {
  35     var fieldid = this.id+'_result';
  36     var resultfield = document.getElementById(fieldid);
  37     if (this.value) {
  38       resultfield.innerHTML = '<SPAN STYLE="color: blue;">Validating password...</SPAN>';
  39       validate_password('fieldid',fieldid,'svcnum','<% $opt{'svcnum'} %>','contactnum', contactnum,'password',this.value,
  40         function (result) {
  41           result = JSON.parse(result);
  42           var resultfield = document.getElementById(result.fieldid);
  43           if (resultfield) {
  44             var errorimg = '<IMG SRC="<% $p %>images/error.png" style="width: 1em; display: inline-block; padding-right: .5em">';
  45             var validimg = '<IMG SRC="<% $p %>images/tick.png" style="width: 1em; display: inline-block; padding-right: .5em">';
  46             if (result.valid) {
  47               resultfield.innerHTML = validimg+'<SPAN STYLE="color: green;">Password valid!</SPAN>';
  48               if (submitid){ document.getElementById(submitid).disabled = false; }
  49             } else if (result.error) {
  50               resultfield.innerHTML = errorimg+'<SPAN STYLE="color: red;">'+result.error+'</SPAN>';
  51               if (submitid){ document.getElementById(submitid).disabled = true; }
  52             } else {
  53               result.syserror = result.syserror || 'Server error';
  54               resultfield.innerHTML = errorimg+'<SPAN STYLE="color: red;">'+result.syserror+'</SPAN>';
  55               if (submitid){ document.getElementById(submitid).disabled = true; }
  56             }
  57           }
  58         }
  59       );
  60     } else {
  61       resultfield.innerHTML = '';
  62       if (submitid){ document.getElementById(submitid).disabled = false; }
  63     }
  64   };
  65 }
  66
  67 </SCRIPT>
  68
  69 <%init>
  70 my %opt = @_;
  71 </%init>