How to use the encryption component.

• Install the Encryption component. Once the component is installed every time a user tries to login to Joomla (client or admin side) the password will be encrypted on the web browser before it is submitted to the server, where it will be decrypted. Passwords are also encrypted when an administrator changes a user's password, when a user registers and when a registered user changes his own password.
• Import encryption plugins for your login modules or other extensions you are using. You can  download zip files for preconfigured controls from downloads/encryption-plugins.html. Click on menu item "Components/Encryption Configuration/Encryption Controls". Click "Browse", select downloaded plugin zip file and then click "Import".
  

  

• Optionally you can generate new encryption keys but it is not necessary since they are automatically generated every 180 days. You can also change the generation frequency and encryption keys length.
• Advanced users can configure the plugin to encrypt other HTML input elements.

Encryption Controls.

The encryption plugin not only encrypts the passwords configured by default but you can also set up which form elements you would like to go encrypted. So, that is what you can do on the page shown when you click on "Encryption controls" menu item. On this page you will initially see the default configuration to encrypt all Joomla default passwords. But you can change them or add new elements.

The plugin does the encryption by inserting JavaScript code inside the page. This way the encryption is executed before the page is submitted. To add new elements you just have to configure which elements on which forms contains sensitive data.

Suppose you have developed (or downloaded) a component that has a form with sensitive information, a credit card number for example. Then just click the "Encryption controls" menu item and then on the "new" button. You will get a form where you should type in the following elements:

Decription: Just type whatever you want. Leave it blank or write something to remind what this element is.
Enabled: A radio button to decide if you want this control encrypted or not.
Form id: The id of the form where the element is in.
Form name: The name of the form where the element is. You can not leave form id and form name both blank.
Control id: The id of the input element you want encrypted. This can not be left blank, the element must have an id.
Control name: The name of the input element you want encrypted. This can not be left blank, the element must have a name.
Encrypt control when empty: A radio button to decide if the control is encrypted when it is empty.
Minimum control length: This is an integer number specifying the minimum length of the value of the control so it will be encrypted.
Option filter: The value of the option parameter required for the control to be considered for encryption. If it is left blank the option parameter will be ignored.
View filter: Same as option filter but in this case for the view parameter.
Insert encrypt form code before: Most of the time this parameter is not required. Sometimes form submission is triggered from JavaScript code. And sometimes on some browsers (or all of them) the onSubmit event won’t be raised. So you need to insert JavaScript code to start the encryption, then what you type here is the line of code before which the code to encrypt will be inserted. For example on back-end login this value is "login.submit\(\);". Notice the backslashes before the parenthesis. That is because this is a regular expression.
Insert encrypt form code on submit event handler: If this property is set to "Yes" the encryption code is inserted in the onSubmit event of the form. You should always set this value to yes.
Use on back-end: If this value is set to "Yes" the encryption will be applied on back-end.
Use on front-end: If this value is set to "Yes" the encryption will be applied on front-end.
Show encrypted signal: If this value is set to “Yes” you will see floating text box over the encrypted control after encryption process.

Then, going back to the credit card example, you will have to look at the html code of the form where the credit card will be typed. And you'll need three things, the form name, the credit card control id and the credit card control name. Also, if the form has an id you have to get it too.

Suppose this is the html code:

<form id="buyForm" name="buyForm1">
<input type="text" id="name" name="name" />
<input type="text" id="credit_card" name="credit_card" />
</form>

Then you would write the following values:

Decription: User credit card number
Form id: buyForm
Form name: buyForm1
Control id: credit_card
Control name: credit_card
Encrypt control when empty: No
Minimum control length: 10
Option filter: com_shop_cart (the value of option parameter)
View filter: (empty)
Insert encrypt form code before: Leave blank.
Insert encrypt form code on submit event handler: Yes
Use on back-end: No (since this form will be on front-end)
Use on front-end: Yes.
Show encrypted signal: Yes.

After you have set up these values the credit card information will be encrypted.