includes translations

src/lib/i18n/getLanguageLabel.ts

@@ -0,0 +1,39 @@
+
+import type { AvailableLanguages } from "./useKeycloakLanguage";
+
+export function getLanguageLabel(language: AvailableLanguages): LanguageLabel {
+
+    switch (language) {
+        /* spell-checker: disable */
+        case "es": return "Español";
+        case "it": return "Italiano";
+        case "fr": return "Français";
+        case "ca": return "Català";
+        case "en": return "English";
+        case "de": return "Deutsch";
+        case "no": return "Norsk";
+        case "pt_BR": return "Português (Brasil)";
+        case "ru": return "Русский";
+        case "sk":
+        case "sv": return "Slovenčina";
+        case "ja": return "日本語";
+        case "pl": return "Polish";
+        case "zh_CN": return "中文简体"
+        case "sv": return "Svenska";
+        case "lt": return "Lietuvių";
+        case "cs": return "Čeština";
+        case "nl": return "Nederlands";
+        case "tr": return "tr"
+        /* spell-checker: enable */
+    }
+
+    return language;
+
+}
+
+export type LanguageLabel =
+    /* spell-checker: disable */
+    "Deutsch" | "Norsk" | "Русский" | "Svenska" | "Português (Brasil)" | "Lietuvių" |
+    "English" | "Italiano" | "Français" | "中文简体" | "Español" | "Čeština" | "日本語" |
+    "Slovenčina" | "Polish" | "Català" | "Nederlands" | "tr";
+/* spell-checker: enable */

src/lib/i18n/useKeycloakLanguage.ts

@@ -0,0 +1,40 @@
+
+import { createUseGlobalState } from "powerhooks";
+import { messages } from "./messages.generated";
+import { objectKeys } from "evt/tools/typeSafety/objectKeys";
+import { getLanguageLabel } from "./getLanguageLabel";
+
+const availableLanguages = objectKeys(messages["login"]);
+
+export type AvailableLanguages = typeof availableLanguages[number];
+
+export const { useKeycloakLanguage } = createUseGlobalState(
+    "keycloakLanguage",
+    getKeycloakAvailableLanguageBestGuess,
+    { "persistance": "cookies" }
+);
+
+/** 
+ * Pass in "fr-FR" or "français" for example, it will return the AvailableLanguage
+ * it corresponds to. 
+ * If there is no reasonable match it's guessed from navigator.language.
+ * If still no matches en is returned.
+*/
+export function getKeycloakAvailableLanguageBestGuess(
+    languageLike: string = navigator.language
+): AvailableLanguages {
+
+    const iso2LanguageLike = languageLike.split("-")[0].toLowerCase();
+
+    const language = availableLanguages.find(language =>
+        language.toLowerCase().includes(iso2LanguageLike) ||
+        getLanguageLabel(language).toLocaleLowerCase() === languageLike.toLocaleLowerCase()
+    );
+
+    if (language === undefined && languageLike !== navigator.language) {
+        return getKeycloakAvailableLanguageBestGuess(navigator.language);
+    }
+
+    return "en";
+}
+

src/lib/i18n/useKeycloakTranslation.ts

@@ -0,0 +1,28 @@
+
+import { useKeycloakLanguage } from "./useKeycloakLanguage";
+import { messages } from "./messages.generated";
+import { useConstCallback } from "powerhooks";
+
+export type MessageKey = keyof typeof messages["login"]["en"]
+
+export function useKeycloakThemeTranslation() {
+
+    const { keycloakLanguage } = useKeycloakLanguage();
+
+    const t = useConstCallback(
+        (key: MessageKey): string => {
+
+            const out: string | undefined = messages["login"][keycloakLanguage as any as "en"][key];
+
+            if (out !== undefined) {
+                return out;
+            }
+
+            return messages["login"]["en"][key];
+
+        }
+    );
+
+    return { t };
+
+}

src/lib/index.ts

@@ -1 +1,4 @@
-export * from "./keycloakFtlValues";
+export * from "./keycloakFtlValues";
+export * from "./i18n/useKeycloakLanguage";
+export * from "./i18n/useKeycloakTranslation";
+export * from "./i18n/getLanguageLabel";

src/lib/keycloakFtlValues.ts

@@ -5,14 +5,6 @@ import { ftlValuesGlobalName } from "../bin/build-keycloak-theme/generateKeycloa
 import type { generateFtlFilesCodeFactory } from "../bin/build-keycloak-theme/generateFtl";
 import { id } from "evt/tools/typeSafety/id";
 
-export type LanguageLabel =
-    /* spell-checker: disable */
-    "Deutsch" | "Norsk" | "Русский" | "Svenska" | "Português (Brasil)" | "Lietuvių" |
-    "English" | "Italiano" | "Français" | "中文简体" | "Español" | "Čeština" | "日本語" |
-    "Slovenčina" | "Polish" | "Català" | "Nederlands" | "tr";
-/* spell-checker: enable */
-
-export type LanguageTag = "de" | "no" | "ru" | "sv" | "pt-BR" | "lt" | "en" | "it" | "fr" | "zh-CN" | "es" | "cs" | "ja" | "sk" | "pl" | "ca" | "nl" | "tr";
 
 export type KeycloakFtlValues = {
     pageBasename: Parameters<ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"]>[0]["pageBasename"];
@@ -28,14 +20,18 @@ export type KeycloakFtlValues = {
         internationalizationEnabled: boolean;
     },
     //NOTE: Undefined if !realm.internationalizationEnabled
+    //We hide this since we provide a client side internationalization engine
+    /*
     locale?: {
         supported: {
             url: string;
+            languageTag: AvailableLanguages;
+            //NOTE: Is determined by languageTag. Ex: languageTag === "en" => label === "English"
             label: LanguageLabel;
-            languageTag: LanguageTag;
         },
         current: LanguageLabel;
     },
+    */
     auth?: {
         showUsername: boolean;
         showResetCredentials: boolean;