Switch locale (#24736)

* Switch locale

fixes: #24082
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* PR comments

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/account-ui/pom.xml

@@ -116,6 +116,7 @@
       "resourceUrl": "${resourceUrl}",
       "logo": "${properties.logo!""}",
       "logoUrl": "${properties.logoUrl!""}",
+      "locale": "${locale}",
       "features": {
             "isRegistrationEmailAsUsername": ${realm.registrationEmailAsUsername?c},
             "isEditUserNameAllowed": ${realm.editUsernameAllowed?c},

js/apps/account-ui/src/environment.ts

@@ -11,6 +11,8 @@ export type Environment = {
   logo: string;
   /** Indicates the url to be followed when Brand image is clicked */
   logoUrl: string;
+  /** The locale of the user */
+  locale: string;
   /** Feature flags */
   features: {
     isRegistrationEmailAsUsername: boolean;
@@ -36,6 +38,7 @@ const defaultEnvironment: Environment = {
   resourceUrl: "http://localhost:8080",
   logo: "/logo.svg",
   logoUrl: "/",
+  locale: "en",
   features: {
     isRegistrationEmailAsUsername: false,
     isEditUserNameAllowed: true,

js/apps/account-ui/src/i18n.ts

@@ -1,4 +1,4 @@
-import { createInstance } from "i18next";
+import { LanguageDetectorModule, createInstance } from "i18next";
 import HttpBackend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
 
@@ -14,6 +14,14 @@ type KeyValue = { key: string; value: string };
 // that we can have a proper type-safe translation function.
 export type TFuncKey = any;
 
+export const keycloakLanguageDetector: LanguageDetectorModule = {
+  type: "languageDetector",
+
+  detect() {
+    return environment.locale;
+  },
+};
+
 export const i18n = createInstance({
   fallbackLng: DEFAULT_LOCALE,
   interpolation: {
@@ -35,4 +43,5 @@ export const i18n = createInstance({
 });
 
 i18n.use(HttpBackend);
+i18n.use(keycloakLanguageDetector);
 i18n.use(initReactI18next);

js/apps/account-ui/src/personal-info/PersonalInfo.tsx

@@ -29,7 +29,7 @@ import {
 } from "../api/representations";
 import { Page } from "../components/page/Page";
 import { environment } from "../environment";
-import { TFuncKey } from "../i18n";
+import { TFuncKey, i18n } from "../i18n";
 import { usePromise } from "../utils/usePromise";
 
 const PersonalInfo = () => {
@@ -58,6 +58,12 @@ const PersonalInfo = () => {
   const onSubmit = async (user: UserRepresentation) => {
     try {
       await savePersonalInfo(user);
+      const locale = user.attributes?.["locale"]?.toString();
+      i18n.changeLanguage(locale, (error) => {
+        if (error) {
+          console.warn("Error(s) loading locale", locale, error);
+        }
+      });
       keycloak?.updateToken();
       addAlert(t("accountUpdatedMessage"));
     } catch (error) {