web: fix locale change not updating all elements

closes #2365

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-02-26 16:28:21 +01:00
parent 2c54be85be
commit 7e5d8624c8
4 changed files with 18 additions and 10 deletions

View file

@ -10,8 +10,8 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<ak-message-container></ak-message-container> <ak-message-container data-refresh-on-locale="true"></ak-message-container>
<ak-interface-admin> <ak-interface-admin data-refresh-on-locale="true">
<section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl"> <section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
<div class="pf-c-empty-state" style="height: 100vh;"> <div class="pf-c-empty-state" style="height: 100vh;">
<div class="pf-c-empty-state__content"> <div class="pf-c-empty-state__content">

View file

@ -20,8 +20,8 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<ak-message-container></ak-message-container> <ak-message-container data-refresh-on-locale="true"></ak-message-container>
<ak-flow-executor> <ak-flow-executor data-refresh-on-locale="true">
<section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl"> <section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
<div class="pf-c-empty-state" style="height: 100vh;"> <div class="pf-c-empty-state" style="height: 100vh;">
<div class="pf-c-empty-state__content"> <div class="pf-c-empty-state__content">

View file

@ -10,8 +10,8 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<ak-message-container></ak-message-container> <ak-message-container data-refresh-on-locale="true"></ak-message-container>
<ak-interface-user> <ak-interface-user data-refresh-on-locale="true">
<section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl"> <section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
<div class="pf-c-empty-state" style="height: 100vh;"> <div class="pf-c-empty-state" style="height: 100vh;">
<div class="pf-c-empty-state__content"> <div class="pf-c-empty-state__content">

View file

@ -4,6 +4,8 @@ import { Messages, i18n } from "@lingui/core";
import { detect, fromNavigator, fromUrl } from "@lingui/detect-locale"; import { detect, fromNavigator, fromUrl } from "@lingui/detect-locale";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { LitElement } from "lit";
import { messages as localeDE } from "../locales/de"; import { messages as localeDE } from "../locales/de";
import { messages as localeEN } from "../locales/en"; import { messages as localeEN } from "../locales/en";
import { messages as localeES } from "../locales/es"; import { messages as localeES } from "../locales/es";
@ -93,8 +95,7 @@ const DEFAULT_FALLBACK = () => "en";
export function autoDetectLanguage() { export function autoDetectLanguage() {
let detected = let detected =
detect(fromUrl("locale"), fromNavigator(), DEFAULT_FALLBACK) || detect(fromUrl("locale"), fromNavigator(), DEFAULT_FALLBACK) || DEFAULT_FALLBACK();
DEFAULT_FALLBACK();
// For now we only care about the first locale part // For now we only care about the first locale part
if (detected.includes("_")) { if (detected.includes("_")) {
detected = detected.split("_")[0]; detected = detected.split("_")[0];
@ -111,8 +112,15 @@ export function activateLocale(code: string) {
const urlLocale = fromUrl("locale"); const urlLocale = fromUrl("locale");
if (urlLocale !== null && urlLocale !== "") { if (urlLocale !== null && urlLocale !== "") {
i18n.activate(urlLocale); i18n.activate(urlLocale);
return; } else {
i18n.activate(code);
} }
i18n.activate(code); document.querySelectorAll("[data-refresh-on-locale=true]").forEach((el) => {
try {
(el as LitElement).requestUpdate();
} catch {
console.debug(`authentik/locale: failed to update element ${el}`);
}
});
} }
autoDetectLanguage(); autoDetectLanguage();