RT# 75817 - fixed contact password page to be more consistant with svc password page, updated javascript to check password as you type rather than when you leave the field.

4 files changed, 69 insertions, 50 deletions

diff --git a/httemplate/elements/change_password.html b/httemplate/elements/change_password.html
index a8cc883b9..463384f2f 100644
--- a/httemplate/elements/change_password.html
+++ b/httemplate/elements/change_password.html
@@ -8,69 +8,81 @@
   display: none;
 }
 </STYLE>
+% if (!$opt{'no_label_display'}) {
 <A ID="<%$pre%>link" HREF="javascript:void(0)" onclick="<%$pre%>toggle(true)">(<% emt( $change_title ) %>)</A>
+% }
 <DIV ID="<%$pre%>form" CLASS="passwordbox">
+% if (!$opt{'noformtag'}) {
   <FORM METHOD="POST" ACTION="<%$fsurl%>misc/process/change-password.html">
-    <% $change_id_input %>
-    <INPUT TYPE="text" ID="<%$pre%>password" NAME="password" VALUE="<% $curr_value |h%>">
-    <& /elements/random_pass.html, $pre.'password', 'randomize' &>
-    <INPUT TYPE="submit" VALUE="change">
-% if ($opt{'popup'}) {
-    <INPUT TYPE="button" VALUE="cancel" onclick="parent.cClick();">
 % }
-% else {
-    <INPUT TYPE="button" VALUE="cancel" onclick="<%$pre%>toggle(false)">  
+
+    <% $change_id_input %>
+    <INPUT TYPE="text" ID="<%$pre%>password" NAME="<% $opt{'pre_pwd_field_label'} %>password" VALUE="<% $curr_value |h%>">
+    <& /elements/random_pass.html, $pre.'password', 'randomize', $change_button_id &>
+% if (!$opt{'noformtag'}) {
+    <INPUT TYPE="submit" ID="<%$change_button_id%>" VALUE="change" disabled="disabled">
+% } else {
+    <INPUT TYPE="button" ID="<%$change_button_id%>" VALUE="change" onclick="<%$pre%>toggle(false)" disabled="disabled">
 %}
+    <INPUT TYPE="button" ID="<%$pre%>cancel_button" VALUE="cancel" onclick="<%$pre%>toggle(false, true)">
+
     <DIV ID="<%$pre%>password_result" STYLE="font-size: smaller"></DIV>
     <& '/elements/validate_password.html', 
          'fieldid'    => $pre.'password',
          'svcnum'     => $svcnum,
-         'contactnum' => $contactnum,
+         'contactnum' => $opt{'contact_num'},
+         'submitid'   => $change_button_id,
     &>
 % if ( $error ) {
     <BR><SPAN STYLE="color: #ff0000"><% $error |h %></SPAN>
 % }
+
+% if (!$opt{'noformtag'}) {
   </FORM>
+% }
+
 </DIV>
 <SCRIPT TYPE="text/javascript">
-function <%$pre%>toggle(val) {
+function <%$pre%>toggle(toggle, clear) {
+  if (clear) {
+    document.getElementById('<%$pre%>password').value = '';
+    document.getElementById('<%$pre%>password_result').innerHTML = '';
+% if ($opt{'contact_num'}) {
+    document.getElementById('<% $opt{'pre_pwd_field_label'} %>selfservice_access').value = 'Y';
+% }
+}
   document.getElementById('<%$pre%>form').style.display =
-    val ? 'inline-block' : 'none';
+    toggle ? 'inline-block' : 'none';
+% if (!$opt{'no_label_display'}) {
   document.getElementById('<%$pre%>link').style.display =
-    val ? 'none' : 'inline';
-}
-% if ( $error || $opt{'popup'} ) {
-<%$pre%>toggle(true);
+    toggle ? 'none' : 'inline';
 % }
+}
 </SCRIPT>
 <%init>
 my %opt = @_;
 
-my $contactnum = $opt{'contact_num'};
 my $curr_value = $opt{'curr_value'} || '';
 my $change_title = $opt{'label'} || 'change';
-
 my $svcnum;
 my $change_id_input = '';
 my $pre = 'changepw';
 
 if ($opt{'svc_acct'}) {
   my $svc_acct = $opt{'svc_acct'};
-  $change_id_input = '<INPUT TYPE="hidden" NAME="svcnum" VALUE="' . $svc_acct->svcnum . '">';
+  $change_id_input = '<INPUT TYPE="hidden" NAME="'.$opt{'pre_pwd_field_label'}.'svcnum" VALUE="' . $svc_acct->svcnum . '">';
   $pre .= $svc_acct->svcnum . '_';
   $svcnum = $svc_acct->svcnum;
 }
 elsif ($opt{'contact_num'}) {
   $change_id_input = '
-    <INPUT TYPE="hidden" NAME="contactnum" VALUE="' . $opt{'contact_num'} . '">
-    <INPUT TYPE="hidden" NAME="custnum" VALUE="' . $opt{'custnum'} . '">
+    <INPUT TYPE="hidden" NAME="'.$opt{'pre_pwd_field_label'}.'contactnum" VALUE="' . $opt{'contact_num'} . '">
+    <INPUT TYPE="hidden" NAME="'.$opt{'pre_pwd_field_label'}.'custnum" VALUE="' . $opt{'custnum'} . '">
   ';
-  $pre .= $opt{'contact_num'} . '_';
+  $pre .= $opt{'pre_pwd_field_label'};
 }
 
-if ($opt{'popup'}) {
-  $change_id_input .= '<INPUT TYPE="hidden" NAME="popup" VALUE="' . $opt{'popup'} . '">';
-}
+my $change_button_id = $pre.'change_button';
 
  my $error = $cgi->param($pre.'error');
 </%init>
diff --git a/httemplate/elements/contact.html b/httemplate/elements/contact.html
index d69029053..850c2540d 100644
--- a/httemplate/elements/contact.html
+++ b/httemplate/elements/contact.html
@@ -50,17 +50,34 @@
 
         <TD>
 %         if ( $field eq 'selfservice_access' ) {
+
             <SELECT NAME = "<%$name%>_<%$field%>"
                     ID   = "<%$id%>_<%$field%>"
+                    STYLE = "width: 140px"
             >
               <OPTION VALUE="">Disabled
 %             if ( $value || $self_base_url ) {
                 <OPTION VALUE="Y" <% $value eq 'Y' ? 'SELECTED' : '' %>>Enabled
 %               if ( $value eq 'Y' && $self_base_url ) {
                   <OPTION VALUE="R">Re-email
+                  <OPTION VALUE="P"><% $pwd_change_label %>
 %               }
 %             }
             </SELECT>
+                  <& /elements/change_password.html,
+                   'contact_num'         => $curr_value,
+                   'custnum'             => $opt{'custnum'},
+                   'curr_value'          => '',
+                   'no_label_display'    => '1',
+                   'noformtag'           => '1',
+                   'pre_pwd_field_label' => $id.'_',
+                  &>
+            <SCRIPT TYPE="text/javascript">
+                    document.getElementById("<%$id%>_<%$field%>").onchange = function() {
+                      if (this.value == "P") { changepw<%$id%>_toggle(true); }
+                      return false
+                    }
+            </SCRIPT>
 %         } elsif ( $field eq 'invoice_dest' ) {
 %           my $curr_value = $cgi->param($name . '_' . $field);
 %           $curr_value = $value if !defined($curr_value);
@@ -85,24 +102,6 @@
           <FONT SIZE="-1"><% $label{$field} %></FONT>
         </TD>
 %     }
-%     my $pwd_change_label = 'change';
-%     $pwd_change_label = 'setup' unless $contact->_password;
-%     my $action = $fsurl . "edit/cust_main-contacts-password.html?custnum=" . $opt{'custnum'} . "&contactnum=" . $curr_value . "&label=" . $pwd_change_label . "&popup=1";
-%     if ($curr_value) {
-        <TD>
-          <% include('/elements/popup_link.html',
-                         'action'      => $action,
-                         'width'       => '763',
-                         'height'      => '408',
-                         'actionlabel' => "$pwd_change_label password",
-                         'html_label'  => "$pwd_change_label password",
-
-                    )
-          %>
-          <br>
-          <FONT SIZE="-1">Password</FONT>
-        </TD>
-%     }
     </TR>
   </TABLE>
 
@@ -113,9 +112,6 @@ my( %opt ) = @_;
 
 my $conf = new FS::Conf;
 
-use Data::Dumper;
-print Dumper($conf->config);
-
 my $self_base_url = $conf->config('selfservice_server-base_url');
 
 my $name = $opt{'element_name'} || $opt{'field'} || 'contactnum';
@@ -187,4 +183,7 @@ $label{'comment'} = 'Comment';
 
 my @fields = $opt{'name_only'} ? qw( first last ) : keys %label;
 
+my $pwd_change_label = 'Change Password';
+$pwd_change_label = 'Setup Password' unless $contact->_password;
+
 </%init>
diff --git a/httemplate/elements/random_pass.html b/httemplate/elements/random_pass.html
index 1517a55d7..778aa20e6 100644
--- a/httemplate/elements/random_pass.html
+++ b/httemplate/elements/random_pass.html
@@ -1,6 +1,6 @@
-<INPUT TYPE="button" VALUE="<% emt($label) %>" onclick="randomPass()">
+<INPUT TYPE="button" VALUE="<% emt($label) %>" onclick="<% $id %>randomPass()">
 <SCRIPT TYPE="text/javascript">
-function randomPass() {
+function <% $id %>randomPass() {
   var pw_set = <% $pw_set |js_string %>;
   var lower = <% $lower |js_string %>;
   var upper = <% $upper |js_string %>;
@@ -19,11 +19,15 @@ function randomPass() {
   for(var j, x, i = pass.length; i; j = Math.floor(Math.random() * i), x = pass[--i], pass[i] = pass[j], pass[j] = x);
   pass = pass.join('');
   document.getElementById('<% $id %>').value = pass;
+% if ($submitid) {
+    document.getElementById('<% $submitid %>').disabled = false;
+% }
 }
 </SCRIPT>
 <%init>
 my $id = shift;
 my $label = shift || 'Generate';
+my $submitid = shift;
 my $pw_set = join('', FS::Password_Mixin->pw_set);
 my $lower = join('', $pw_set =~ /[[:lower:]]/g);
 my $upper = join('', $pw_set =~ /[[:upper:]]/g);
diff --git a/httemplate/elements/validate_password.html b/httemplate/elements/validate_password.html
index bd385a6ca..3d23a552c 100644
--- a/httemplate/elements/validate_password.html
+++ b/httemplate/elements/validate_password.html
@@ -20,9 +20,9 @@ should be the input id plus '_result'.
     'method' => 'POST', # important not to put passwords in url
 &>
 <SCRIPT>
-function add_password_validation (fieldid) {
+function add_password_validation (fieldid, submitid) {
   var inputfield = document.getElementById(fieldid);
-  inputfield.onchange = function () {
+  inputfield.onkeyup = function () {
     var fieldid = this.id+'_result';
     var resultfield = document.getElementById(fieldid);
     if (this.value) {
@@ -36,11 +36,14 @@ function add_password_validation (fieldid) {
             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; }
             }
           }
         }
@@ -50,7 +53,8 @@ function add_password_validation (fieldid) {
     }
   };
 }
-add_password_validation('<% $opt{'fieldid'} %>');
+
+add_password_validation('<% $opt{'fieldid'} %>', '<% $opt{'submitid'} %>');
 </SCRIPT>
 
 <%init>