From 7e5d8624c8a3f37a01e5af992b0b40cbee968314 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 26 Feb 2022 16:28:21 +0100
Subject: [PATCH] web: fix locale change not updating all elements

closes #2365

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 authentik/core/templates/if/admin.html |  4 ++--
 authentik/core/templates/if/flow.html  |  4 ++--
 authentik/core/templates/if/user.html  |  4 ++--
 web/src/interfaces/locale.ts           | 16 ++++++++++++----
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/authentik/core/templates/if/admin.html b/authentik/core/templates/if/admin.html
index 27955ecee..dc3e6dc82 100644
--- a/authentik/core/templates/if/admin.html
+++ b/authentik/core/templates/if/admin.html
@@ -10,8 +10,8 @@
 {% endblock %}
 
 {% block body %}
-<ak-message-container></ak-message-container>
-<ak-interface-admin>
+<ak-message-container data-refresh-on-locale="true"></ak-message-container>
+<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">
         <div class="pf-c-empty-state" style="height: 100vh;">
             <div class="pf-c-empty-state__content">
diff --git a/authentik/core/templates/if/flow.html b/authentik/core/templates/if/flow.html
index e3bb042ec..433420175 100644
--- a/authentik/core/templates/if/flow.html
+++ b/authentik/core/templates/if/flow.html
@@ -20,8 +20,8 @@
 {% endblock %}
 
 {% block body %}
-<ak-message-container></ak-message-container>
-<ak-flow-executor>
+<ak-message-container data-refresh-on-locale="true"></ak-message-container>
+<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">
         <div class="pf-c-empty-state" style="height: 100vh;">
             <div class="pf-c-empty-state__content">
diff --git a/authentik/core/templates/if/user.html b/authentik/core/templates/if/user.html
index b443920f3..66bf4b446 100644
--- a/authentik/core/templates/if/user.html
+++ b/authentik/core/templates/if/user.html
@@ -10,8 +10,8 @@
 {% endblock %}
 
 {% block body %}
-<ak-message-container></ak-message-container>
-<ak-interface-user>
+<ak-message-container data-refresh-on-locale="true"></ak-message-container>
+<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">
         <div class="pf-c-empty-state" style="height: 100vh;">
             <div class="pf-c-empty-state__content">
diff --git a/web/src/interfaces/locale.ts b/web/src/interfaces/locale.ts
index 65d635061..a12527dc3 100644
--- a/web/src/interfaces/locale.ts
+++ b/web/src/interfaces/locale.ts
@@ -4,6 +4,8 @@ import { Messages, i18n } from "@lingui/core";
 import { detect, fromNavigator, fromUrl } from "@lingui/detect-locale";
 import { t } from "@lingui/macro";
 
+import { LitElement } from "lit";
+
 import { messages as localeDE } from "../locales/de";
 import { messages as localeEN } from "../locales/en";
 import { messages as localeES } from "../locales/es";
@@ -93,8 +95,7 @@ const DEFAULT_FALLBACK = () => "en";
 
 export function autoDetectLanguage() {
     let detected =
-        detect(fromUrl("locale"), fromNavigator(), DEFAULT_FALLBACK) ||
-        DEFAULT_FALLBACK();
+        detect(fromUrl("locale"), fromNavigator(), DEFAULT_FALLBACK) || DEFAULT_FALLBACK();
     // For now we only care about the first locale part
     if (detected.includes("_")) {
         detected = detected.split("_")[0];
@@ -111,8 +112,15 @@ export function activateLocale(code: string) {
     const urlLocale = fromUrl("locale");
     if (urlLocale !== null && 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();