summaryrefslogtreecommitdiff
path: root/httemplate/elements/validate_password_js.html
blob: 64db0a97b965803737a8fa540191137b7e538ba5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<%doc>

JavaScript to perform password validation

  <& '/elements/validate_password_js.html', 
     contactnum  => $contactnum,
     svcnum      => $svcnum
  &>

The ID of the input field can be anything;  the ID of the DIV in which to display results
should be the input id plus '_result'.

</%doc>

<& '/elements/xmlhttp.html',
    'url'  => $p.'misc/xmlhttp-validate_password.html',
    'subs' => [ 'validate_password' ],
    'method' => 'POST', # important not to put passwords in url
&>
<SCRIPT>
function add_password_validation (fieldid, submitid, svcnum, contactnum) {
  var inputfield = document.getElementById(fieldid);
  inputfield.onkeydown = function(e) {
    var key;
    if (window.event) { key = window.event.keyCode; }
    else { key = e.which; } // for ff browsers
    // some browsers allow the enter key to submit a form even if the submit button is disabled
    // below prevents enter key from submiting form if password has not been validated.
    if (key == '13') {
      var check = checkPasswordValidation(fieldid);
      return check;
    }
  }
  inputfield.onkeyup = function () {
    var fieldid = this.id+'_result';
    var resultfield = document.getElementById(fieldid);
    if (this.value) {
      resultfield.innerHTML = '<SPAN STYLE="color: blue;">Validating password...</SPAN>';
      validate_password('fieldid',fieldid,'svcnum','<% $opt{'svcnum'} %>','contactnum', contactnum,'password',this.value,
        function (result) {
          result = JSON.parse(result);
          var resultfield = document.getElementById(result.fieldid);
          if (resultfield) {
            var errorimg = '<IMG SRC="<% $p %>images/error.png" style="width: 1em; display: inline-block; padding-right: .5em">';
            var validimg = '<IMG SRC="<% $p %>images/tick.png" style="width: 1em; display: inline-block; padding-right: .5em">';
            if (result.valid) {
              resultfield.innerHTML = validimg+'<SPAN STYLE="color: green;">Password valid!</SPAN>';
              if (submitid){ document.getElementById(submitid).disabled = false; }
            } else if (result.error) {
              resultfield.innerHTML = errorimg+'<SPAN STYLE="color: red;">'+result.error+'</SPAN>';
              if (submitid){ document.getElementById(submitid).disabled = true; }
            } else {
              result.syserror = result.syserror || 'Server error';
              resultfield.innerHTML = errorimg+'<SPAN STYLE="color: red;">'+result.syserror+'</SPAN>';
              if (submitid){ document.getElementById(submitid).disabled = true; }
            }
          }
        }
      );
    } else {
      resultfield.innerHTML = '';
      if (submitid){ document.getElementById(submitid).disabled = false; }
    }
  };
}

</SCRIPT>

<%init>
my %opt = @_;
</%init>