Skip to Main Content

Breadcrumb

Examples

Improve the user experience

Logging in to applications is an effortless task most of the time, however there are times when you're not paying attention and mistakes occur. Like a typo, forgetting what letters you have already typed, or more annoyingly the CapsLock is enabled and you haven't realized. With some small visual improvements we can help users avoid these problems. For example we can add a button which reveals the typed in value, or an icon which indicates whether the CapsLock is on. This can help reduce support calls for locked accounts and should help to reduce the number of failed login attempts people experience.

Add Peek Functionality

For desktop devices it can be toggled on/off on click, or for touch devices toggled during press/release. The icons can be defined using the config "peekShownIcon" and "peekHiddenIcon" properties.

 

Alert if CapsLock is active

The default icon is "fa-change-case", but it can be changed by setting "capsLockIcon" property to the required value.

Show an Inline Icon

Icons are a great visual aid and help improve the user experience. There're two reasons we included this feature:

  1. It's a nice representation about the state of the typed in value, without any extra place required(if no rules are defined, then it checks whether it has a value (pass) or not(fail)).
  2. Using it, one can easily recreate the well known APEX login form.

The icon values can be defined using the config "inlineCheckIcon" and "inlineFailIcon" properties.

Add a Confirmation Item

Confirming a user's password is needed when a user changes their password. If we don't provide any checking, when a user mistypes their password, they won't realise it. By using a confirm password item it will catch typos and prompt the user to retype their password.

The confirmation item will stay disabled until every password rule is satisfied or the minimum is that it matches and is not null). It can even be a native APEX item, or another "UC - Advanced Password" plugin. If it's the latter then the Confirmation Item option has to be checked. There can be only one confirmation item defined, but if you'd like to disable more page items until the passwords match, just list them in the "Items to Disable" attribute.

 

If both "Confirmation Item" and "Items To Disable" are set, then the items from the latter depend on the state of the "Confirmation Item".

Set Up Password Requirements

There're four main characteristics of a strong password, and with the help of this plug-in you can easily enforce the usage of them on your users:

- At least 8 characters—the more characters, the better
- A mixture of both uppercase and lowercase letters
- A mixture of letters and numbers
- Inclusion of at least one special character, e.g., ! @ # ? ]

-> Set up the minimum required length
-> Add a number of required capital letters
-> Define how many numbers must be in the password
-> List the special characters and require a number of them to be included


If you have any special requirement regarding the password, you should make it clear and visible to the users.

This is when the Rules Container can help you out. It comes with three different styles: Static, Collapsible and External. The "Collapsible" option allows you to define a "Success Message" when all the rules are fulfilled through the "Rules Completed Message" attribute, while the "External" option allows you to show the list of the rules on any region(div) you wish.

Use the "successColor" and the "errorColor" properties to set the color, the "rulesFailIcon", "rulesCheckIcon" to overwrite the default icons in the rules list or the "Stretch Rules Container" option to display the rules next to each other (in the length of the item field).

Must contain at least 5 characters.
At least 3 digits.
Must contain at least 1 capital letters
At least 2 from the list: ?><,./|}[]~§@#$%
Must contain at least 5 characters.
At least 3 digits.
Must contain at least 1 capital letters
At least 2 from the list: ?><,./|}[]~§@#$%

 

Show messages on state change

Check the Show Error Message if Invalid option and write your message into the errorMessage property to simply display it under the item, when the typed in value is invalid. If you'd like to have more control, you can set up your actions on the uc-ap-rule-fail,uc-ap-rule-complete and uc-ap-every-rule-complete events.

Must contain at least 5 characters.
At least 3 digits.
At least 2 from the list: ?><,./|}[]~§@#$%
Must contain at least 5 characters.
At least 3 digits.
At least 2 from the list: ?><,./|}[]~§@#$%

Create your own container

If the provided "Rules Container" styles (Static, Collapsible) don't fit into the structure of the application/form, then there's still an option to present your rules in a nicer way, using the "External" option. In this case, you must set the "rulesContainerId" property to the target element ID; if it's a native APEX Region, then it will be moved under the region body, otherwise as a direct child of the provided element.

Using this option you have complete control and flexibility as to how the rules can be displayed and styled.

Item Container

Must contain at least 7 characters.
At least 1 digits.
Must contain at least 1 capital letters

Rules Container

The one above is just a simple use case of using a Static Region as the "External" container, but if you're thinking about something prettier, it doesn't take too much effort to add a "floating" effect to the target element like the following example:

Must contain at least 7 characters.
At least 1 digits.
 
Must contain at least 7 characters.
At least 1 digits.
At least 2 from the list: ?><,./|}[]~§@#$%

Stylish feedback

A strength bar is always a good choice, it's an other nice way (in addition to the "Rules Container") to give immediate feedback on the validity of the typed in value. The sections represent the number of defined rules.

The strengthBarStyle sets the style either to "dynamic" (meaning it's only visible on focus) or to "static", the "strengthBarBgColor" is responsible for colouring the bar and combining with "strengthBarWidthPct" you can change the width of the bar relative to the item field, e.g. 50 means it'll be the 50% of the input field length.

Must contain at least 3 characters.
At least 2 digits.
Must contain at least 3 characters.
At least 1 digits.
Must contain at least 1 capital letters

Some Ideas

Some examples below should give you some ideas about what can be achieved with the help of this plugin.

 
 
 

FAQ

  • I'd like to disable a button if the password requirements are not fulfilled, but in the "Disable Item(s) if Invalid" only page items are allowed, what can I do?

    Currently you can't select buttons in the plug-in attributes, but as a workaround, you can just set a Static ID to your button(e.g "myButton") and in the "Javascript Initialization Code" add it to the itemsToDisable array.

    function(config){
    config.itemsToDisable.push("myButton");
    return config;
}
  • What does the "Rules Container - External" do?

    It doesn't affect the behaviour of the plug-in, it just gives more control over the display of the password rules. The rules will moved under the specified ID.

    function(config){
    config.rulesContainer = "myRulesContainer";
    return config;
}