Failure to change error on Create Account Strong Password

Get Help
1

Hi everyone,

I’m trying to change the error on the password field for Create account option when the conditions for a strong password are not met. I tried modifying the LanguageDictionary options but it fails to accept it.

This is the link which you can use to test it:
https://cleanelectricity-dev.us.auth0.com/login

languageDictionary = {
error: {
signUp: {
‘lock.fallback’: <p> We have encountered an error registering your account. Here are a few possibilities: <ol> <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet?<a href="https://go.cleanchoiceenergy.com/find-your-solar-farm/"> Check availability</a>.</li> <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li> <li>If you think this is an error, contact customer care at 1-800-240-2241.</li> </ol> </p>
},
login: {
‘lock.fallback’: <p> There was a problem on login. Possible reasons: <ol> <li>Incorrect email/password.</li> <li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li> </ol> </p>,
}
},
blankErrorHint: ‘This field cannot be blank’,
emailInputPlaceholder: ‘Email’,
invalidErrorHint: ‘Invalid email address’,
passwordInputPlaceholder: ‘Password’,
signUpSubmitLabel: ‘Create account’,
loginLabel: ‘Log in’,
loginSubmitLabel: ‘Log in’,
signUpLabel: ‘Create account’,
signUpTerms: ‘Signup terms.’,
forgotPasswordInstructions : “We’ll send you an email with a link to reset your password”
};

I’ve tested every solution listed on the following link and nothing works.

P.S: When one tries to create an account with an invalid email (test123, for example), the error given used to be “Invalid”. I modified it using the following property because nothing else worked, however I assume this is not the correct way to do it:
invalidErrorHint: ‘Invalid email address’

Can you point me in the right direction?

3

Hi @MinchoMilev,

Welcome to the Auth0 Community!

I understand that you are trying to modify the password strength text when a user signs up on your application.

So far, you are on the right track in using the languageDictionary object to modify the text options.

However, you will have to change the passwordStrength property to adjust the text to your preference.

languageDictionary: {
  passwordStrength: {
    containsAtLeast: 'Contain at least %d of the following %d types of characters:',
    identicalChars: 'No more than %d identical characters in a row (e.g., "%s" not allowed)',
    nonEmpty: 'Non-empty password required',
    numbers: 'Numbers (i.e. 0-9)',
    lengthAtLeast: 'At least %d characters in length',
    lowerCase: 'Lower case letters (a-z)',
    shouldContain: 'Should contain:',
    specialCharacters: 'Special characters (e.g. !@#$%^&*)',
    upperCase: 'Upper case letters (A-Z)'
  },
}

See here for the languageDictionary reference.

Once this is complete, you will have total control over the password strength text of your app.

Hoped this helps!

Please let me know if you have any further questions.

Thank you.

4

Hello @rueben.tiow!
Thank you for your quick response! I already tried that and it didn’t work. I used every property which makes sense to be used along with the passwordStrength object and it didn’t work.
P.S: What about the last issue I listed - invalidErrorHint?

5

Here is the new languageDictionary I’m using:

languageDictionary = {
error: {
signUp: {
password_strength_error: ‘Password is too weak.’,
invalid_password: ‘Password is invalid.’,
password_dictionary_error: ‘Password is too common.’,
‘lock.fallback’: <p> We have encountered an error registering your account. Here are a few possibilities: <ol> <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet?<a href="https://go.cleanchoiceenergy.com/find-your-solar-farm/"> Check availability</a>.</li> <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li> <li>If you think this is an error, contact customer care at 1-800-240-2241.</li> </ol> </p>
},
login: {
‘lock.fallback’: <p> There was a problem on login. Possible reasons: <ol> <li>Incorrect email/password.</li> <li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li> </ol> </p>,
}
},
invalidPasswordErrorHint: ‘Password is invalid’,
invalidEmailErrorHint: ‘Email is invalid’,
blankPasswordErrorHint: “Password can’t be blank”,
blankErrorHint: ‘This field cannot be blank’,
emailInputPlaceholder: ‘Email’,
invalidErrorHint: ‘Invalid email address’,
passwordInputPlaceholder: ‘Password’,
signUpSubmitLabel: ‘Create account’,
loginLabel: ‘Log in’,
loginSubmitLabel: ‘Log in’,
signUpLabel: ‘Create account’,
signUpTerms: ‘Signup terms.’,
forgotPasswordInstructions : “We’ll send you an email with a link to reset your password”,
passwordStrength: {
containsAtLeast: ‘Contain at least 3 of the following 4 types of characters:’,
identicalChars: ‘No more than 2 identical characters in a row (e.g., “sss” not allowed)’,
nonEmpty: ‘Non-empty password required’,
numbers: ‘Numbers (i.e. 0-9)’,
lengthAtLeast: ‘At least 8 characters in length’,
lowerCase: ‘Lower case letters (a-z)’,
shouldContain: ‘Should contain:’,
specialCharacters: ‘Special characters (e.g. !@#$%^&*)’,
upperCase: ‘Upper case letters (A-Z)’
},
};

If you do not meet the criteria for strong password and submit, the field error stays: “This field cannot be blank”.

7

Hi @MinchoMilev,

Thank you for your response.

After looking closely at your languageDictionary object, there appear to be multiple places where there are syntax errors. That would be the first concern. I have gone ahead and fixed all the syntax errors in the code snippet. See below for a revised version.

languageDictionary : {
    error: {
        signUp: {
            password_strength_error: 'Password is too weak.',
            invalid_password: 'Password is invalid.',
            password_dictionary_error: 'Password is too common.',
            'lock.fallback': '<p> We have encountered an error registering your account. Here are a few possibilities: <ol> <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet?<a href="https://go.cleanchoiceenergy.com/find-your-solar-farm/"> Check availability</a>.</li> <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li> <li>If you think this is an error, contact customer care at 1-800-240-2241.</li> </ol> </p>',
        },
        login: {
        'lock.fallback': '<p> There was a problem on login. Possible reasons: <ol> <li>Incorrect email/password.</li> <li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li> </ol> </p>',
        }
    },
    invalidPasswordErrorHint: 'Password is invalid',
    invalidEmailErrorHint: 'Email is invalid',
    blankPasswordErrorHint: 'Password can’t be blank',
    blankErrorHint: 'This field cannot be blank',
    emailInputPlaceholder: 'Email',
    invalidErrorHint: 'Invalid email address',
    passwordInputPlaceholder: 'Password',
    signUpSubmitLabel: 'Create account',
    loginLabel: 'Log in',
    loginSubmitLabel: 'Log in',
    signUpLabel: 'Create account',
    signUpTerms: 'Signup terms.',
    forgotPasswordInstructions : 'We’ll send you an email with a link to reset your password',
    passwordStrength: {
        containsAtLeast: '[Test] Contain at least 3 of the following 4 types of characters:',
        identicalChars: '[Test] No more than 2 identical characters in a row (e.g., “sss” not allowed)',
        nonEmpty: '[Test] Non-empty password required',
        numbers: '[Test] Numbers (i.e. 0-9)',
        lengthAtLeast: '[Test] At least 8 characters in length',
        lowerCase: '[Test] Lower case letters (a-z)',
        shouldContain: '[Test] Should contain:',
        specialCharacters: '[Test] Special characters (e.g. !@#$%^&*)',
        upperCase: '[Test] Upper case letters (A-Z)'
    },
},

Once I finished fixing the syntax errors, I managed to get your script working. I appended the words “[Test]” to demonstrate that the password strength text is modified.

image
image606×826 62.9 KB

The complete languageDictionary obect here is useful for checking the usage.

Please let me know how this goes for you.

Thank you.

8

Hello @rueben.tiow,
What you suggested works for the passwordStrength but I do not need that. My issue is that when I try to create an account and type a password which does not satisfy the password strength conditions (“qwe123” as example) and I click SUBMIT, the field says: “This field cannot be blank” instead of “The password is invalid” or some other message. Another problem is that if the email is invalid (“test”, for example, instead of “test@test.com”), the message is “Invalid” instead of “Invalid email address”. How can I fix that? Here is the latest snippet of my code.

languageDictionary = {
            error: {
                signUp: {
                  password_strength_error: 'Password is too weak.',
                  invalid_password: 'Password is invalid.',
                  password_dictionary_error: 'Password is too common.',
                 	'lock.fallback': `<p>
                                We have encountered an error registering your account. Here are a few possibilities:
                                <ol>
                                    <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet?<a href="https://go.cleanchoiceenergy.com/find-your-solar-farm/"> Check availability</a>.</li>
                                    <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li>
                                    <li>If you think this is an error, contact customer care at 1-800-240-2241.</li>
                                </ol>
                            </p>`
                },
              	login: {
                  'lock.fallback': `
									<p> 
										There was a problem on login. Possible reasons:
										<ol>
											<li>Incorrect email/password.</li>
											<li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li>
										</ol>
      						</p>`,
                }
            },
            invalidPasswordErrorHint: 'Password is invalid',
            invalidEmailErrorHint: 'Email is invalid',
            blankPasswordErrorHint: 'Password can’t be blank',
          	blankErrorHint: 'This field cannot be blank',
          	emailInputPlaceholder: 'Email',
          	passwordInputPlaceholder: 'Password',
            signUpSubmitLabel: 'Create account',
            loginLabel: 'Log in',
            loginSubmitLabel: 'Log in',
          	signUpLabel: 'Create account',
          	signUpTerms: 'Signup terms.',
          	forgotPasswordInstructions : "We’ll send you an email with a link to reset your password",
            passwordStrength: {
                containsAtLeast: 'Contain at least 3 of the following 4 types of characters:',
                identicalChars: 'No more than 2 identical characters in a row (e.g., "%s" not allowed)',
                nonEmpty: 'Non-empty password required',
                numbers: 'Numbers (i.e. 0-9)',
                lengthAtLeast: 'At least 8 characters in length',
                lowerCase: 'Lower case letters (a-z)',
                shouldContain: 'Should contain:',
                specialCharacters: 'Special characters (e.g. !@#$%^&*)',
                upperCase: 'Upper case letters (A-Z)'
            },
        };

Here you can see the error messages.

image
image894×624 53.7 KB

9

Hi @MinchoMilev,

There are a couple of things that stand out in your screenshot.

First, the This field cannot be blank happens when no values are provided in the password text box.

To customize the text, you will need to change the invalidPasswordErrorHint.

And for the email, you will need to change the invalidEmailErrorHint.

Moreover, you will need to remove the InvalidErrorHint and blankErrorHint since it’s intended to be used as a general error for both password and email.

Once that is complete, you will have full control over the error text.

Please let me know if you have any further questions.

Thank you.

10

Hi @rueben.tiow

Even after doing what you suggested, the issue persists. Here is the code snippet.

languageDictionary = {
            error: {
                signUp: {
                 	'lock.fallback': `<p>
                                We have encountered an error registering your account. Here are a few possibilities:
                                <ol>
                                    <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet?<a href="https://go.cleanchoiceenergy.com/find-your-solar-farm/"> Check availability</a>.</li>
                                    <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li>
                                    <li>If you think this is an error, contact customer care at 1-800-240-2241.</li>
                                </ol>
                            </p>`
                },
              	login: {
                  'lock.fallback': `
									<p> 
										There was a problem on login. Possible reasons:
										<ol>
											<li>Incorrect email/password.</li>
											<li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li>
										</ol>
      						</p>`,
                }
            },
            invalidPasswordErrorHint: 'Password is invalid',
            invalidEmailErrorHint: 'Email is invalid',
          	emailInputPlaceholder: 'Email',
          	passwordInputPlaceholder: 'Password',
            signUpSubmitLabel: 'Create account',
            loginLabel: 'Log in',
            loginSubmitLabel: 'Log in',
          	signUpLabel: 'Create account',
          	signUpTerms: 'Signup terms.',
          	forgotPasswordInstructions : "We’ll send you an email with a link to reset your password",
            passwordStrength: {
                containsAtLeast: 'Contain at least 3 of the following 4 types of characters:',
                identicalChars: 'No more than 2 identical characters in a row (e.g., "%s" not allowed)',
                nonEmpty: 'Non-empty password required',
                numbers: 'Numbers (i.e. 0-9)',
                lengthAtLeast: 'At least 8 characters in length',
                lowerCase: 'Lower case letters (a-z)',
                shouldContain: 'Should contain:',
                specialCharacters: 'Special characters (e.g. !@#$%^&*)',
                upperCase: 'Upper case letters (A-Z)'
            },
        };

image
image798×870 74.8 KB

11

Hi @rueben.tiow,

Any ideas?

1 Like
12

Hi @MinchoMilev,

Thank you for your response.

After my tests, I did not find the same observations as you. As mentioned in my earlier post, your code likely contains syntax errors that are causing the behavior you shared in your screenshot. This is consistent with the error message “Invalid” for an invalidEmailErrorHint and “Can’t be blank” for invalidPasswordErrorHint, which does not match the text in your languageDictionary object, namely “Email is invalid” and “Password is invalid” respectively.

In this case, please make sure that your code is following the correct syntax like the following:

languageDictionary : {
    error: {
        signUp: {
            password_strength_error: 'Password is too weak.',
            invalid_password: 'Password is invalid.',
            password_dictionary_error: 'Password is too common.',
            'lock.fallback': '<p> We have encountered an error registering your account. Here are a few possibilities: <ol> <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet?<a href="https://go.cleanchoiceenergy.com/find-your-solar-farm/"> Check availability</a>.</li> <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li> <li>If you think this is an error, contact customer care at 1-800-240-2241.</li> </ol> </p>',
        },
        login: {
        'lock.fallback': '<p> There was a problem on login. Possible reasons: <ol> <li>Incorrect email/password.</li> <li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li> </ol> </p>',
        }
    },
    invalidPasswordErrorHint: '[Test] Password is invalid',
    invalidEmailErrorHint: '[Test] Email is invalid',
    emailInputPlaceholder: 'Email',
    passwordInputPlaceholder: 'Password',
    signUpSubmitLabel: 'Create account',
    loginLabel: 'Log in',
    loginSubmitLabel: 'Log in',
    signUpLabel: 'Create account',
    signUpTerms: 'Signup terms.',
    forgotPasswordInstructions : 'We’ll send you an email with a link to reset your password',
    passwordStrength: {
        containsAtLeast: '[Test] Contain at least 3 of the following 4 types of characters:',
        identicalChars: '[Test] No more than 2 identical characters in a row (e.g., “sss” not allowed)',
        nonEmpty: '[Test] Non-empty password required',
        numbers: '[Test] Numbers (i.e. 0-9)',
        lengthAtLeast: '[Test] At least 8 characters in length',
        lowerCase: '[Test] Lower case letters (a-z)',
        shouldContain: '[Test] Should contain:',
        specialCharacters: '[Test] Special characters (e.g. !@#$%^&*)',
        upperCase: '[Test] Upper case letters (A-Z)'
    },
},

Note that I prepended “[Test]” to the invalidPasswordErrorHint and invalidEmailErrorHint for clarity that these changes are reflected on the UI, confirming that it works as expected. See below.

image
image644×932 54.1 KB

Please let me know how this goes for you.

Thank you.

13

Hello @rueben.tiow ,

Thank you for the time and the help provided. I tested your solution (copy/paste) but it didn’t work again. I assume there is an error somewhere else around the code. Do you have any idea how to proceed to find where it might be?

Here is a snapshot of the code:

<script>
        // Decode utf8 characters properly
        var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));

        config.extraParams = config.extraParams || {};
        var connection = config.connection;
        var prompt = config.prompt;
        var languageDictionary;
        var language;
        if (config.dict && config.dict.signin && config.dict.signin.title) {
            languageDictionary = { title: config.dict.signin.title };
        } else if (typeof config.dict === 'string') {
            language = config.dict;
        }

        var loginHint = config.extraParams.login_hint;

        var colors = config.colors || {};
        languageDictionary = {
            error: {
                signUp: {
                 	'lock.fallback': `<p>
                                We have encountered an error registering your account. Here are a few possibilities:
                                <ol>
                                    <li>Make sure you enter the email address that you used to enroll. Haven’t enrolled yet? <a href="https://cleanchoiceenergy.com">Check availability</a>.</li>
                                    <li>Have you enrolled recently? Your online account may not be ready yet - you’ll be notified by email when it’s ready.</li>
                                    <li>If you think this is an error, contact customer care at 1-800-240-2241.</li>
                                </ol>
                            </p>`
                },
              	login: {
                  'lock.fallback': `
									<p> 
										There was a problem on login. Possible reasons:
										<ol>
											<li>Incorrect email/password.</li>
											<li>We improved our customer portal experience. You need to create a new portal account to access the new portal. Click “Create account” below to create your new portal account.</li>
										</ol>
      						</p>`,
                }
            },
          	blankPasswordErrorHint: 'Password can’t be blank',
            //blankErrorHint: 'This field cannot be blank',
            //invalidErrorHint: 'Invalid email address',
            invalidPasswordErrorHint: 'Password is invalid',
            invalidEmailErrorHint: 'Email is invalid',
          	emailInputPlaceholder: 'Email',
          	passwordInputPlaceholder: 'Password',
            signUpSubmitLabel: 'Create account',
            loginLabel: 'Log in',
            loginSubmitLabel: 'Log in',
          	signUpLabel: 'Create account',
          	signUpTerms: 'Signup terms.',
          	forgotPasswordInstructions : "We’ll send you an email with a link to reset your password",
            passwordStrength: {
                containsAtLeast: 'Passwords must contain %s of the %s character types:',
                identicalChars: 'No more than 2 identical characters in a row (e.g., "%s" not allowed)',
                nonEmpty: 'Non-empty password required',
                numbers: 'Numbers: 0-9',
                lengthAtLeast: 'At least %s characters in length',
                lowerCase: 'Lowercase letters: a-z',
                shouldContain: 'Should contain:',
                specialCharacters: 'Symbols: e.g. !@#$%^&*)',
                upperCase: 'Uppercase letters: A-Z'
            },
        };

        // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
        var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
            auth: {
                redirectUrl: config.callbackURL,
                responseType: (config.internalOptions || {}).response_type ||
                    (config.callbackOnLocationHash ? 'token' : 'code'),
                params: config.internalOptions
            },
            configurationBaseUrl: config.clientConfigurationBaseUrl,
            overrides: {
                __tenant: config.auth0Tenant,
                __token_issuer: config.authorizationServer.issuer
            },
            assetsUrl: config.assetsUrl,
            allowedConnections: connection ? [connection] : null,
            rememberLastLogin: !prompt,
            language: language,
            languageDictionary: languageDictionary,
            theme: {
                logo: 'https://cleanchoiceenergy.com/images/cce-logo-stacked.svg',
                primaryColor: colors.primary ? colors.primary : 'green',
            },
            prefill: loginHint ? { email: loginHint, username: loginHint } : null,
            closable: false,
            defaultADUsernameFromEmailPrefix: false,
            initialScreen: config.extraParams.mode,
            loginAfterSignUp: true
        });

        if (colors.page_background) {
            var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                colors.page_background +
                ' }';
            var style = document.createElement('style');
            style.appendChild(document.createTextNode(css));
            document.body.appendChild(style);
        }

  			setTimeout(() => {
          const enrollNow = document.querySelector('.enrollNow');
          const parent = document.querySelector('.auth0-lock-cred-pane-internal-wrapper');
          parent.appendChild(enrollNow);
          window.manageTitle('login');
        }, 1600);

        lock.show();
    </script>

Thank you.

1 Like
14

Hi @MinchoMilev,

Thank you for your response.

After testing your script, I did not find the same observations. I copied and pasted the script and tested it on my end and managed to get it working without making any changes. I can confirm and guarantee that your script has no issues.

In this case, it may be worth defining only a few properties in your languageDictionary object to verify that it works. For example:

languageDictionary  = {
  invalidPasswordErrorHint: '[Test] Password is invalid',
  invalidEmailErrorHint: '[Test] Email is invalid',
  signUpLabel: '[Test] Create account'
}

This should verify if the languageDictionary is working. Please let me know your findings.

Lastly, could you clarify how you are testing the Universal Login Page?

Thank you.

15

Hello @rueben.tiow

I confirm the languageDirectory is working (by changing signUpLabel) but the invalidPasswordErrorHint and invalidEmailErrorHint do not work.

I am testing it by changing the required properties and going to the dev environment on our webpage (where we test) and observing the results. As I told you, changing the signUpLabel works and it displays properly on the testing environment, however the other 2 properties do not.

16

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.