Jump to content
Updated Privacy Statement

Storefront Change Password Dialog Customization


Md.Yunus Raza

Recommended Posts

Hi There,

 

I am trying to customize the attached storefront change password dialog. Basically what I want is to help user with the password complexity requirement. By default a user who wants to change the password has to remember the complexity requirement which is not always possible and they get feedback AFTER they have typed the new password and hit OK button. 

 

I have identified the name of the this dialog box is #genericDialogBox and the name of the "New Password" and "Confirm Password" fields are #newPassword & #confirmPassword respectively.

Based on this information, I have added lines in custom\script.js and custom\sytle.css files. So that the moment user clicks the #newPassword then the jquery function defined in custom\script.js kicks in  and gives feedback to user. 

 

The lines looks like this in custom\script.js (courtsey of this blog https://netscalerrocks.com/netscaler/appexpert/passwordreset-portal-with-netscaler-as-frontend/)

However I am not getting anything on the dialog box. It appears to me that either this is not dialog box is not writeable or maybe the script is executing before this dialog box appears.

 

Has anyone done this?

 

 

$('#genericDialogBox .custompfeedbackBottom').ready(function(){

$("#newPassword").keyup(function(){

 check_pass();

});

$("#confirmPassword").keyup(function(){

 check_pass();

});

});

function check_pass()

{

var val=document.getElementById("newPassword").value;

var valpass2=document.getElementById("confirmPassword").value;

var status=0;

var returnString = "<br>Password does not meet the following complexity requirments:<br>";

if(val!="")

{

 // If the password length is less than 6

 if(val.length<=5) {

   var missingLength = 6-val.length;

   var returnString = returnString + " Missing " + missingLength + " chars<br>";

   var status=0;

 } else {

   var status=status+1;

 }

 // If the password is missing a decimal

 if(!val.match(/\d+/)){

   var returnString = returnString + " Missing decimal<br>";

   var status=0;

 } else {

   var status=status+1;

 }

 // If the password is missing a special character

 if(!val.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){

   var returnString = returnString + " Missing special char: !@#$%^&*?_~-()[]/<br>";

   var status=0;

 } else {

   var status=status+1;

 }

 // If the password is missing CAPITAL letter

 if(!val.match(/[A-Z]/)){

   var returnString = returnString + " Missing Capital letter<br>";

 } else {

   var status=status+1;

 }

// If the 2 passwords match

 if(val != valpass2){

   var returnString = returnString + " The 2 password does not match<br>";

   var status=0;

 } else {

   var status=status+1;

 }

//Validate the overall complexity

 if(status==5){

var returnString = "<br>Password meets complexity requirements<br>";

   document.getElementById('#genericDialogBox .custompfeedbackBottom').innerHTML=returnString;

   

    } else {

  

document.getElementById('#genericDialogBox .custompfeedbackBottom').innerHTML=returnString;

   

 }

}

}

 

 

The line in custom\style.css looks like this:

 

 .custompfeedbackBottom

{   

text-align:center;   

color:black;   

font-size:15px;

}

 

 .custompfeedbackBottom a

{   

color:white;   

text-decoration:underline;

}

 

ctxf1.png

Link to comment
Share on other sites

  • 1 month later...

Hi Yunus,

Unfortunately, StoreFront does not have an event that you can intercept when the Change Password screen is invoked.
You are correct that the code above is being executed WAY too soon.
I had worked on this for a client some time ago, and it was a big pain (and took quite some time to get right).
What I ended up doing was to poll the page looking for an id of #newPassword. Once the field was showing (the "display" attribute was no longer set to "none"), I threw up a custom <div> with the password requirements. StoreFront DOES have the beforeDisplayHomeScreen extension, so once that point has been reached, I know that I can cancel the polling.

Here is what the finished screen looked like:

 

5c087eb8d3043_SFChangePW.thumb.jpg.4da864ef62dc9ed84fd125b7db1a1e4f.jpg

 

Sam

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 2 years later...

@Yunus Raza, you can try the following-

Create a copy of the ChangePassword.tfrm file located
under: “C:\inetpub\wwwroot\Citrix\StoreAuth\App_Data\Templates” and the
ExplicitFormsCommon.resx located under: “C:\inetpub\wwwroot\Citrix\StoreAuth\App_Data\resources”
for back up purposes.

Edit the ChangePassword.tfrm file and add the following
below the line: “@Heading("ExplicitFormsCommon:ChangePasswordHeadingText")”
:


@Text("ExplicitFormsCommon:PasswordRequirement")
@Text("ExplicitFormsCommon:PasswordRequirement2")
@Text("ExplicitFormsCommon:PasswordRequirement3")
@Text("ExplicitFormsCommon:PasswordRequirement4")
@Text("ExplicitFormsCommon:PasswordRequirement5")


Then save the file.

================================================

Edit the ExplicitFormsCommon.resx file and add the
following before the closing line “</root>”: 



<data name="PasswordRequirement"
xml:space="preserve">

<value>Your password must be
at least 8 characters in length and include 3 of these 4
elements:</value>

</data>

<data name="PasswordRequirement2"
xml:space="preserve">

<value>- An uppercase
letter</value>

</data>

<data name="PasswordRequirement3"
xml:space="preserve">

<value>- A lowercase
letter</value>

</data>

<data name="PasswordRequirement4"
xml:space="preserve">

<value>- A
number</value>

</data>

<data name="PasswordRequirement5"
xml:space="preserve">

<value>- A special
character; ! # + = @</value>

</data>

Then save the file.
============================
Do an IISRESET

==============================

Output attached :-

 

image.thumb.png.8c4b34aa81a3c54a17560e45501b273e.png

Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...