4e5ea05987
* web: begin refactoring the application for future development This commit: - Deletes a bit of code. - Extracts *all* of the Locale logic into a single folder, turns management of the Locale files over to Lit itself, and restricts our responsibility to setting the locale on startup and when the user changes the locale. We do this by converting a lot of internal calls into events; a request to change a locale isn't a function call, it's an event emitted asking `REQUEST_LOCALE_CHANGE`. We've even eliminated the `DETECT_LOCALE_CHANGE` event, which redrew elements with text in them, since Lit's own `@localized()` decorator does that for us automagically. - We wrap our interfaces in an `ak-locale-context` that handles the startup and listens for the `REQUEST_LOCALE_CHANGE` event. - ... and that's pretty much it. Adding `@localized()` as a default behavior to `AKElement` means no more custom localization is needed *anywhere*. * web: improve the localization experience This commit fixes the Storybook story for the localization context component, and fixes the localization initialization pass so that it is only called once per interface environment initialization. Since all our interfaces share the same environment (the Django server), this preserves functionality across all interfaces. --------- Co-authored-by: Jens Langhammer <jens@goauthentik.io>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { globalAK } from "@goauthentik/common/global";
|
|
|
|
import { LOCALES as RAW_LOCALES, enLocale } from "./definitions";
|
|
import { AkLocale } from "./types";
|
|
|
|
export const DEFAULT_LOCALE = "en";
|
|
|
|
export const EVENT_REQUEST_LOCALE = "ak-request-locale";
|
|
|
|
const TOMBSTONE = "⛼⛼tombstone⛼⛼";
|
|
|
|
// NOTE: This is the definition of the LOCALES table that most of the code uses. The 'definitions'
|
|
// file is relatively pure, but here we establish that we want the English locale to loaded when an
|
|
// application is first instantiated.
|
|
|
|
export const LOCALES = RAW_LOCALES.map((locale) =>
|
|
locale.code === "en" ? { ...locale, locale: async () => enLocale } : locale,
|
|
);
|
|
|
|
export function getBestMatchLocale(locale: string): AkLocale | undefined {
|
|
return LOCALES.find((l) => l.match.test(locale));
|
|
}
|
|
|
|
// This looks weird, but it's sensible: we have several candidates, and we want to find the first
|
|
// one that has a supported locale. Then, from *that*, we have to extract that first supported
|
|
// locale.
|
|
|
|
export function findSupportedLocale(candidates: string[]) {
|
|
const candidate = candidates.find((candidate: string) => getBestMatchLocale(candidate));
|
|
return candidate ? getBestMatchLocale(candidate) : undefined;
|
|
}
|
|
|
|
export function localeCodeFromUrl(param = "locale") {
|
|
const url = new URL(window.location.href);
|
|
return url.searchParams.get(param) || "";
|
|
}
|
|
|
|
// Get all locales we can, in order
|
|
// - Global authentik settings (contains user settings)
|
|
// - URL parameter
|
|
// - A requested code passed in, if any
|
|
// - Navigator
|
|
// - Fallback (en)
|
|
|
|
const isLocaleCandidate = (v: unknown): v is string =>
|
|
typeof v === "string" && v !== "" && v !== TOMBSTONE;
|
|
|
|
export function autoDetectLanguage(requestedCode?: string): string {
|
|
const localeCandidates: string[] = [
|
|
globalAK()?.locale ?? TOMBSTONE,
|
|
localeCodeFromUrl("locale"),
|
|
requestedCode ?? TOMBSTONE,
|
|
window.navigator?.language ?? TOMBSTONE,
|
|
DEFAULT_LOCALE,
|
|
].filter(isLocaleCandidate);
|
|
|
|
const firstSupportedLocale = findSupportedLocale(localeCandidates);
|
|
|
|
if (!firstSupportedLocale) {
|
|
console.debug(
|
|
`authentik/locale: No locale found for '[${localeCandidates}.join(',')]', falling back to ${DEFAULT_LOCALE}`,
|
|
);
|
|
return DEFAULT_LOCALE;
|
|
}
|
|
|
|
return firstSupportedLocale.code;
|
|
}
|
|
|
|
export default autoDetectLanguage;
|