httemplate/elements/validate_password.html

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