Smartphone

Goal

Extend User Properties form of Touch UI to enforce a simple password policy. The validation checks if user has entered atleast one number in password, while creating a new user or changing the password for existing user

For Classic UI, check this post

For product password validation provider, check this post

Demo | Package Install


New User



Change Password

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-enforce-password-policy

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-enforce-password-policy/clientlib and set a property categories of String type to granite.securityCUI

3) Create file ( type nt:file ) /apps/touchui-enforce-password-policy/clientlib/js.txt, add the following

                         policy.js

4) Create file ( type nt:file ) /apps/touchui-enforce-password-policy/clientlib/policy.js, add the following code

(function ($, $document) {
 //id added in /libs/granite/security/content/userEditor/items/page/items/contentWrapper/items/contentContainer/items/content/items/content/items/photoSettings/items/col1/items/accountSettings/items/changePassword
 var ADMIN_PASSWORD_DIV = "#admin_password",
 FIELD_CHANGE_PASSWORD = ".change-user-password", // change password form
 FIELD_NEW_USER_PASSWORD = ".user-password-fields", //new user form
 BUTTON_OK = ".user-admin-change-password", // change password form
 BUTTON_SAVE = ".user-admin-save-user", //new user form
 RE_TYPE_PASSWORD_FIELD = "[name=rep:re-password]";

 var $policyText = $("<div/>").css(padding-bottom, 10px)
 .css(font-style, italic)
 .css(text-align, center)
 .html(New Password must contain a number);

 $(ADMIN_PASSWORD_DIV).find(".coral-Modal-body")
 .prepend($policyText);

 $(ADMIN_PASSWORD_DIV).find(RE_TYPE_PASSWORD_FIELD).focusout(focusHandler);

 $(FIELD_NEW_USER_PASSWORD).find(RE_TYPE_PASSWORD_FIELD).focusout(focusHandler);

 //change password form
 $document.on("keyup", FIELD_CHANGE_PASSWORD, function(){
 keyHandler($(FIELD_CHANGE_PASSWORD));
 });

 //new user form
 $document.on("keyup.user-admin change.user-admin selected.user-admin", ".save-button-enabler", function(){
 keyHandler( $(FIELD_NEW_USER_PASSWORD).find("[type=password]"));
 });

 function keyHandler($fields){
 if(!$fields || $fields.length != 2){
 return;
 }

 var one = $($fields[0]).val(), two = $($fields[1]).val();

 if(isValidPassword(one) && isValidPassword(two) && (one == two)){
 return;
 }

 $(BUTTON_OK).attr("disabled", "disabled"); // change password form
 $(BUTTON_SAVE).attr("disabled", "disabled"); //new user form
 }

 function focusHandler(event){
 clearErrors();

 var val = $(event.currentTarget).val();

 if(isValidPassword(val)){
 return;
 }

 var message = "Password must contain a number";

 showErrorAlert(message);
 }

 function clearErrors(){
 $(BUTTON_OK).removeAttr("disabled"); // change password form
 $(BUTTON_SAVE).removeAttr("disabled"); //new user form
 }

 function isValidPassword(text){
 if(!text){
 return true;
 }

 //check for number in text
 return /d/.test(text);
 }

 function showErrorAlert(message, title){
 var fui = $(window).adaptTo("foundation-ui"),
 options = [{
 text: "OK",
 warning: true
 }];

 title = title || "Error";

 fui.prompt(title, message, "notice", options);

 $(BUTTON_OK).attr("disabled", "disabled"); // change password form
 $(BUTTON_SAVE).attr("disabled", "disabled"); //new user form
 }
})(jQuery, jQuery(document));