LSformElement::password: Add confirmInput feature

doc/conf/LSattribute/LSattr_html/LSattr_html_password.docbook

@@ -131,6 +131,24 @@
   </listitem>
 </varlistentry>
 
+<varlistentry>
+  <term>confirmInput</term>
+  <listitem>
+    <simpara>Booléen définissant si un second champ mot de passe sera affiché dans
+    le formulaire pour que l'utilisateur confirme la saisie du nouveau mot de passe.
+    </simpara>
+  </listitem>
+</varlistentry>
+
+<varlistentry>
+  <term>confirmInputError</term>
+  <listitem>
+    <simpara>&LSformat; du message d'erreur affiché à l'utilisateur si le mot de
+    passe saisie dans le champs de confirmation ne correspond pas au nouveau mot
+    de passe. <emphasis>Paramètre facultatif.</emphasis></simpara>
+  </listitem>
+</varlistentry>
+
 <varlistentry>
   <term>confirmChange</term>
   <listitem>

src/css/default/LSformElement_password.css

@@ -4,3 +4,9 @@
 img.LSformElement_password_view_btn, img.LSformElement_password_generate_btn, img.LSformElement_password_verify_btn {
   cursor:                     pointer;
 }
+
+div.LSformElement_password_confirm label {
+  display: block;
+  color: #333;
+  font-size: 0.9em;
+}

src/includes/class/class.LSformElement_password.php

@@ -62,6 +62,15 @@ class LSformElement_password extends LSformElement {
         return true;
       }
 
+      if ($this -> getParam('html_options.confirmInput', False, 'bool')) {
+        $confirm_name = $this -> name . '_confirm';
+        if (!isset($_POST[$confirm_name]) || !$_POST[$confirm_name] || $_POST[$confirm_name] != $return[$this -> name]) {
+          unset($return[$this -> name]);
+          $this -> form -> setElementError($this -> attr_html, _('%{label}: passwords entered did not match.'));
+          return true;
+        }
+      }
+
       if ($this -> verifyPassword($return[$this -> name][0]) || (empty($return[$this -> name][0]) && empty($val))) {
         LSdebug("Password : no change");
         unset($return[$this -> name]);
@@ -155,10 +164,15 @@ class LSformElement_password extends LSformElement {
         'viewHash' => $this -> getParam('html_options.viewHash', false, 'bool'),
         'verify' => ( (!$this -> attr_html -> attribute -> ldapObject-> isNew()) && $this -> getParam('html_options.verify', True, 'bool') ),
         'confirmChange' => (!$this -> attr_html -> attribute -> ldapObject-> isNew() && $this -> getParam('html_options.confirmChange', False, 'bool')),
+        'confirmInput' => $this -> getParam('html_options.confirmInput', False, 'bool'),
       );
 
       if ($params['confirmChange']) {
         $params['confirmChangeQuestion'] = getFData(__($this -> getParam('html_options.confirmChangeQuestion', '%{label}: Do you confirm the password change?')), $this -> label);
+
+      if ($params['confirmInput']) {
+        $defaultConfirmInputError = ___('Passwords entered did not match.');
+        $params['confirmInputError'] = getFData(__($this -> getParam('html_options.confirmInputError', $defaultConfirmInputError)), $this -> label);
       }
 
       if ($this -> getParam('html_options.mail')) {
@@ -176,6 +190,7 @@ class LSformElement_password extends LSformElement {
         'pwd' => $pwd,
         'clearView' => $this -> getParam('html_options.clearView'),
         'clearEdit' => $this -> getParam('html_options.clearEdit'),
+        'confirmInput' => $this -> getParam('html_options.confirmInput', False, 'bool'),
       )
     );
     return $return;

src/includes/js/LSformElement_password_field.js

@@ -88,12 +88,20 @@ var LSformElement_password_field = new Class({
       }
 
       this.initialize_input();
-
-      if (this.params['confirmChange']) {
+      if (this.params.confirmInput) {
+        this.input_confirm = this.input.getNext('div.LSformElement_password_confirm').getElement('input');
         varLSform.addEvent(
           'submit',
-          this.onLSformSubmit.bind(this),
-          'LSformElement_password('+this.name+') :: confirmChange',
+          this.onLSformSubmit_confirmInput.bind(this),
+          'LSformElement_password('+this.name+') :: confirmInput'
+        );
+      }
+
+      if (this.params.confirmChange) {
+        varLSform.addEvent(
+          'submit',
+          this.onLSformSubmit_confirmChange.bind(this),
+          'LSformElement_password('+this.name+') :: confirmChange'
         );
       }
     },
@@ -181,6 +189,9 @@ var LSformElement_password_field = new Class({
       var data = JSON.decode(responseText);
       if ( varLSdefault.checkAjaxReturn(data) ) {
         this.input.value=data.generatePassword;
+        if (this.input_confirm) {
+          this.input_confirm.value = data.generatePassword;
+        }
         this.changeInputType('view');
       }
     },
@@ -189,26 +200,24 @@ var LSformElement_password_field = new Class({
       if (((this.input.type=='password')&&(state=='hide'))||((this.input.type=='text')&&(state=='view'))) {
         return this.input;
       }
+
+      var newType;
       if (this.input.type=='password') {
-        var newType = 'text';
+        newType = 'text';
         this.viewBtn.src=varLSdefault.imagePath('hide');
         varLSdefault.setHelpInfo(this.viewBtn,'LSformElement_password','hide');
       }
       else {
-        var newType = 'password';
+        newType = 'password';
         this.viewBtn.src=varLSdefault.imagePath('view');
         varLSdefault.setHelpInfo(this.viewBtn,'LSformElement_password','view');
       }
-      var newInput = new Element('input');
-      newInput.setProperty('name',this.input.getProperty('name'));
-      newInput.setProperty('type',newType);
-      newInput.setProperty('class',this.input.getProperty('class'));
-      newInput.setProperty('value',this.input.getProperty('value'));
-      newInput.injectAfter(this.input);
-      this.input.destroy();
-      this.input = newInput;
-      this.initialize_input();
-      return newInput;
+
+      this.input.setProperty('type', newType);
+      if (this.input_confirm) {
+        this.input_confirm.setProperty('type', newType);
+      }
+      return this.input;
     },
 
     onVerifyBtnClick: function() {
@@ -260,7 +269,7 @@ var LSformElement_password_field = new Class({
       }
     },
 
-    onLSformSubmit: function(form, on_confirm, on_cancel) {
+    onLSformSubmit_confirmChange: function(form, on_confirm, on_cancel) {
       // If no new password set, just confirm
       if (!this.input.value) {
         on_confirm();
@@ -277,5 +286,15 @@ var LSformElement_password_field = new Class({
           on_cancel();
         }).bind(this)
       });
+    },
+
+    onLSformSubmit_confirmInput: function(form, on_confirm, on_cancel) {
+      if (this.input.value == this.input_confirm.value) {
+        on_confirm();
+      }
+      else {
+        varLSform.addError(this.params.confirmInputError, this.name);
+        on_cancel();
+      }
     }
 });

src/templates/default/LSformElement_password_field.tpl

@@ -9,5 +9,10 @@
 <input type='text' name='{$attr_name|escape:"htmlall"}[]' value='{$pwd|escape:"htmlall"}' class='LSformElement_password' autocomplete="off"/>
 {else}
 <input type='password' name='{$attr_name|escape:"htmlall"}[]' value='{$pwd|escape:"htmlall"}' class='LSformElement_password' autocomplete="off"/>
+{if $confirmInput}
+<div class="LSformElement_password_confirm">
+<label for="{$attr_name|escape:"htmlall"}_confirm[]">{tr msg="Please confirm new password:"}</label>
+<input type='password' name='{$attr_name|escape:"htmlall"}_confirm[]' autocomplete="off"/>
+{/if}
 {/if}
 {/if}