agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login page implemented

Browse Source
This commit is contained in:
Joseph Garrone
2021-03-02 23:48:31 +01:00
parent 7f6ab1d391
commit 43c412405a
12 changed files with 487 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/lib/i18n/getLanguageLabel.ts → src/lib/i18n/KcLanguageTag.ts
View File

@ -1,7 +1,17 @@
import type { AvailableLanguages } from "./useKeycloakLanguage";
import { objectKeys } from "evt/tools/typeSafety/objectKeys";
import { messages } from "./generated_messages/login";
export function getLanguageLabel(language: AvailableLanguages): LanguageLabel {
export type KcLanguageTag = keyof typeof messages;
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 function getKcLanguageTagLabel(language: KcLanguageTag): LanguageLabel {
switch (language) {
/* spell-checker: disable */
@ -31,9 +41,29 @@ export function getLanguageLabel(language: AvailableLanguages): LanguageLabel {
}
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 */
const availableLanguages = objectKeys(messages);
/**
* Pass in "fr-FR" or "français" for example, it will return the AvailableLanguage
* it corresponds to: "fr".
* If there is no reasonable match it's guessed from navigator.language.
* If still no matches "en" is returned.
*/
export function getBestMatchAmongKcLanguageTag(
languageLike: string
): KcLanguageTag {
const iso2LanguageLike = languageLike.split("-")[0].toLowerCase();
const language = availableLanguages.find(language =>
language.toLowerCase().includes(iso2LanguageLike) ||
getKcLanguageTagLabel(language).toLocaleLowerCase() === languageLike.toLocaleLowerCase()
);
if (language === undefined && languageLike !== navigator.language) {
return getBestMatchAmongKcLanguageTag(navigator.language);
}
return "en";
}

15
src/lib/i18n/useKcLanguageTag.ts Normal file
View File

@ -0,0 +1,15 @@
import { createUseGlobalState } from "powerhooks";
import { kcContext } from "../kcContext";
import { getBestMatchAmongKcLanguageTag } from "./KcLanguageTag";
import { assert } from "evt/tools/typeSafety/assert";
export const { useKcLanguageTag } = createUseGlobalState(
"kcLanguageTag",
() => getBestMatchAmongKcLanguageTag((
assert(kcContext !== undefined, "Page not served by KeyCloak"),
kcContext.locale?.["current" as never] ??
navigator.language
)),
{ "persistance": "cookies" }
);

8
src/lib/i18n/useKeycloakTranslation.tsx → src/lib/i18n/useKcTranslation.tsx
View File

@ -1,5 +1,5 @@
import { useKeycloakLanguage } from "./useKeycloakLanguage";
import { useKcLanguageTag } from "./useKcLanguageTag";
import { messages } from "./generated_messages/login";
import { useConstCallback } from "powerhooks";
import type { ReactNode } from "react";
@ -7,14 +7,14 @@ import { id } from "evt/tools/typeSafety/id";
export type MessageKey = keyof typeof messages["en"];
export function useKeycloakThemeTranslation() {
export function useKcTranslation() {
const { keycloakLanguage } = useKeycloakLanguage();
const { kcLanguageTag } = useKcLanguageTag();
const tStr = useConstCallback(
(key: MessageKey, ...args: (string | undefined)[]): string => {
let str: string = messages[keycloakLanguage as any as "en"][key] ?? messages["en"][key];
let str: string = messages[kcLanguageTag as any as "en"][key] ?? messages["en"][key];
args.forEach((arg, i) => {

44
src/lib/i18n/useKeycloakLanguage.ts
View File

@ -1,44 +0,0 @@
import { createUseGlobalState } from "powerhooks";
import { messages } from "./generated_messages/login";
import { objectKeys } from "evt/tools/typeSafety/objectKeys";
import { getLanguageLabel } from "./getLanguageLabel";
import { keycloakPagesContext } from "../keycloakFtlValues";
const availableLanguages = objectKeys(messages);
export type AvailableLanguages = typeof availableLanguages[number];
export const { useKeycloakLanguage } = createUseGlobalState(
"keycloakLanguage",
() => getBestMatchAmongKeycloakAvailableLanguages(
keycloakPagesContext?.locale?.["current" as never] ??
navigator.language
),
{ "persistance": "cookies" }
);
/**
* Pass in "fr-FR" or "français" for example, it will return the AvailableLanguage
* it corresponds to: "fr".
* If there is no reasonable match it's guessed from navigator.language.
* If still no matches "en" is returned.
*/
export function getBestMatchAmongKeycloakAvailableLanguages(
languageLike: string
): 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 getBestMatchAmongKeycloakAvailableLanguages(navigator.language);
}
return "en";
}