Hide/Show "Retrieve Password" field on login screen with HTML template

Hide/Show "Retrieve Password" field on login screen with HTML template

In this article, we will learn how to enable the "Hide/Show" feature that is available within the "Security -> Settings" option, for the "Retrieve Password" field that is found on the login screen that was generated with HTML template.

Currently, this feature is automatically enabled when the security module is generated without using a custom HTML template for the Login screen. However, so that we can enable it in our login screen that has an HTML template, we must add two JavaScript functions inside our template's index file.

Below, let's see the procedures performed in each topic:

Enabling the field inside the HTML template index file

If the field is not enabled in your template, we need to follow the step by step below:

1 - Within the Login application in your ScriptCase, more precisely in "User's HTML", we click on the Check button to verify the fields that are not included in the HTML template file located in the external libraries. The expected result should be as shown in the images below:



2 - By clicking on "SC_FIELD_INFO_retrieve_pswd", a modal window will open that will show us an example of where the field should be added inside the HTML template:


3 - We go to the option "Tools -> External Libraries", then "Edit" in the library that we are using for the HTML template of the login, and look for the ".html" file:



4 - We add the field inside the "form" tag in the HTML code, and save the file:


5 - We go back to the Login application, and click again on the Check button (according to the first step), and we get the "OK" check for the {new_user} field:


Enabling "scHideUserField()" and "scShowUserField()" functions to enable "Hide/Show"

For this option to work in the Security Module settings, we will need to add these two functions within the HTML code of our template.

The script for both is available below so we can just copy, paste and save:

  1. <script type="text/javascript>">
  2. // Function to enable and disable the retrieve password field
  3. function scHideUserField(fieldName)
  4.    {
  5.       if(fieldName == 'retrieve_pswd')
  6.      {
  7.        $('#id-retrieve_pswd-1').hide();
  8.     }
  9.     
  10. }
  11. function scShowUserField(fieldName)
  12. {
  13.     if(fieldName == 'retrieve_pswd')
  14.     {
  15.        $('#id-retrieve_pswd-1').show();
  16.    }
  17. }
  18. </script>
It is important to point out that this script must be added inside the "head" tag of the template's HTML file.
Another point before finishing is related to the "id" of the field that is passed as a parameter inside the conditionals in the functions.

This "id" must conform to what is referenced in the template's HTML code, and so that we can capture this information, we can inspect the element with the Login application running, and identify which "id" represents the field "retrieve_pswd" to replace what is found in the above script.

As you can see in the image below, on the right is the HTML code of the template, but highlighted is the "Retrieve Password".

The information that interests us is inside the "div" tag that is above the highlighted code, which is precisely the "id-retrieve_pwsd-1". Just replace the script's "id" with the "id" that appears in your HTML template.


In the example script above, this id is already included in the conditional, because it is the example template from ScriptCase's sample library.
Once that is done, just save and run the application again, and access the account to enter the "Security -> Settings" option, and enable or disable the "Retrieve Password" field to be shown or not on the Login screen.










    • Related Articles

    • Hide/Show "New User" field on login screen with HTML template

      In this article, we will learn how to enable the "Hide/Show" feature that is available within the "Security -> Settings" option, for the "New User" field found in the login screen that was generated with HTML template. Currently, this feature is ...

    • Hide/Show "Remember Me" Field on Login Screen with HTML Template

      In this article, we will learn how to enable the "Hide/Show" feature that is available within the "Security -> Settings" option, for the "Remember Login" field that is found on the login screen that was generated with the HTML template. Currently, ...

    • Retrieve password

      An inconsistency was observed when trying to reset the password using the "app_retrieve_pswd" application. The correction was made for new modules, created from release 9.10.001. For modules created in previous releases that use this option, we must ...

    • Manual Password Reset

      In this article, we'll show how to reset your password in the development environment. 1 - First you'll need to find your Scriptcase database (nm_scriptcase.db): C:\Program Files\NetMake\v9-php73\wwwroot\scriptcase\devel\conf\scriptcase In Windows ...

    • Using the sc_field_display macro

      To dynamically hide a field in this example, the macro sc_field_display is used, which is responsible for hiding or dynamically displaying a field or several. This macro has scope in the following events: In this example, it will be used within an ...