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

Knowledge Articles
,
1

Last Updated: Oct 14, 2024

Overview

When clicking on the link received on the Password Reset Email, the Password Reset page it redirects to is not correctly localized. How to specify the language from this Password Reset Page?

Cause

While it is possible to use ui_locales to set the language in the initial login/forgot password page, and add user metadata to customize the Email Template, passing the ui_locales parameter in the URL link to the /u/reset-password page is not possible out of the box. This is due to the URL ending with a hash mark (#). Everything added onto the end of the URL would be considered a fragment, and not a query string parameter which results in the language of the /u/reset-password page defaulting to whatever is set in the browser’s Accept-Language header.

Solution

Follow the steps or video below:

Using built-in methods of Liquid Syntax, it is possible to remove and add characters from a string. The code below 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.

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

​​​​​​By adding this code, on the Password Reset Email Template, the user will see a Click here link that will redirect to the reset password page, properly localized thanks to the ui_locales parameter appended before.

Related References

2 Likes
3

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.