Password field

From pmusers
Jump to: navigation, search

Use JavaScript to hide a text field and put a password field in its place. When the user enters text into the password, it will be automatically copied to the hidden field, which is saved when the form is submitted.


DynaForm: password form.json (right click and select Save link as)
Process: Password_field-1.pmx (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-05-08)
Tested in: ProcessMaker 3.2.1 Community in Debian 8.4 with Firefox 51


In the following example, a text field with the ID and variable name of "passwordHidden" is added to a DynaForm:

passwordFormInDesigner.png

Then, the following JavaScript code is added to the DynaForm which will hide the "passwordHidden" field from the user. Instead, another input field with the ID "passwordVisible" is inserted in its place. When the user enters a password into the "passwordVisible" field, it is automatically copied to the "passwordHidden" field. It is necessary to keep the "passwordHidden" field, because that is the field that will be saved to the database when the DynaForm is submitted.

$("#form\\[passwordHidden\\]").hide();
 
//add dummyPassword field to get around firefox bug that aways autofills the first password field
$("#form\\[passwordHidden\\]").parent().append(
  '<input id="dummyPassword" name="dummyPassword" type="password" value="" style="display:none" />'+
  '<input id="passwordVisible" name="passwordVisible" type="password" value="" class="pmdynaform-control-text form-control" />'
);

//copy password to hidden password field used by ProcessMaker:
$("#passwordVisible").change(function() {
  $("#passwordHidden").setValue( $(this).val() );
});

//if passwordHidden has previous value, then copy it to passwordVisible: 
$("#passwordVisible").val( $("#passwordHidden").getValue() );

When this Dynaform is used in a case, the user cannot see the text entered into the "passwordVisible" field, but its value will be stored in the "passwordHidden" variable in the case.

passwordFormInUse.png