Customizing the Change Password page (/u/reset-password) language

Problem statement

We use new universal login and want to set the user-preferred language in the initial login/forgot password email. We stored ui_locales in user_metadata and customized the email template with the ui_locales parameter to form the URL link to the u/reset-password page. However, it’s not working as we expected.

Cause

The issue is that the link returned in the {{ url }} variable of the Change Password email template ends with a hash mark (#). This prevents customers from easily adding the ui_locales query string parameter to the end of the link determined by the language used in the email template stored in the user’s metadata. Therefore, the browser’s Accept-Language header will take precedence and possibly display a different language on the /u/reset-password page than what’s on the login page and email template.

Solution

Using built-in methods of Liquid Syntax, you can remove characters from a string. remove – Liquid template language

<a href="{{ url | remove: "#" }}&ui_locales=fr-FR">click here</a> 

The above code removes the trailing hash mark and appends the ui_locales parameter onto the URL, setting the language of the /u/reset-password page to the same language used in the email template.

Reference

2 Likes

Also, as you are in the Change Password Template, you can get the user’s metadata to dynamically set the language, as it follows:

<a href="{{ url | remove: "#" }}&ui_locales={{user.user_metadata.lang}}">click here</a>

In this example the user must have set a user metadata like this one:

{
  "lang": "fr-FR"
}

So, in this case, when the users click in the link, it will redirect them to a login with their preferred language.