Make the user return the actual language of the terms for accesibility

src/login/lib/useDownloadTerms.ts

@@ -7,7 +7,13 @@ import {
 import { useOnFistMount } from "keycloakify/tools/useOnFirstMount";
 import { KcContext } from "../KcContext";
 
-const obsTermsMarkdown = createStatefulObservable<string | undefined>(() => undefined);
+const obs = createStatefulObservable<
+    | {
+          termsMarkdown: string;
+          termsLanguageTag: string;
+      }
+    | undefined
+>(() => undefined);
 
 export type KcContextLike = {
     pageId: string;
@@ -22,26 +28,30 @@ assert<KcContext extends KcContextLike ? true : false>();
 /** Allow to avoid bundling the terms and download it on demand*/
 export function useDownloadTerms(params: {
     kcContext: KcContextLike;
-    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
+    downloadTermsMarkdown: (params: {
+        currentLanguageTag: string;
+    }) => Promise<{ termsMarkdown: string; termsLanguageTag: string }>;
 }) {
-    const { kcContext, downloadTermMarkdown } = params;
+    const { kcContext, downloadTermsMarkdown } = params;
 
     useOnFistMount(async () => {
         if (kcContext.pageId === "terms.ftl" || kcContext.termsAcceptanceRequired) {
-            const termsMarkdown = await downloadTermMarkdown({
+            obs.current = await downloadTermsMarkdown({
                 currentLanguageTag:
                     kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag
             });
-
-            obsTermsMarkdown.current = termsMarkdown;
         }
     });
 }
 
 export function useTermsMarkdown() {
-    useRerenderOnChange(obsTermsMarkdown);
+    useRerenderOnChange(obs);
 
-    const termsMarkdown = obsTermsMarkdown.current;
+    if (obs.current === undefined) {
+        return { isDownloadComplete: false as const };
+    }
 
-    return { termsMarkdown };
+    const { termsMarkdown, termsLanguageTag } = obs.current;
+
+    return { isDownloadComplete: true, termsMarkdown, termsLanguageTag };
 }

src/login/pages/Terms.tsx

@@ -18,15 +18,15 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
 
     const { url } = kcContext;
 
-    const { termsMarkdown } = useTermsMarkdown();
+    const { isDownloadComplete, termsMarkdown, termsLanguageTag } = useTermsMarkdown();
 
-    if (termsMarkdown === undefined) {
+    if (!isDownloadComplete) {
         return null;
     }
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
-            <div id="kc-terms-text">
+            <div id="kc-terms-text" lang={termsLanguageTag}>
                 <Markdown>{termsMarkdown}</Markdown>
             </div>
             <form className="form-actions" action={url.loginAction} method="POST">

stories/login/KcApp.tsx

@@ -13,21 +13,26 @@ export default function KcApp(props: { kcContext: KcContext }) {
 
     useDownloadTerms({
         kcContext,
-        downloadTermMarkdown: async ({ currentLanguageTag }) => {
+        downloadTermsMarkdown: async ({ currentLanguageTag }) => {
-            const termsFileName = (() => {
+            let termsLanguageTag = currentLanguageTag;
-                switch (currentLanguageTag) {
+            let termsFileName: string;
-                    case "fr":
-                        return "fr.md";
-                    case "es":
-                        return "es.md";
-                    default:
-                        return "en.md";
-                }
-            })();
 
-            const response = await fetch(`/terms/${termsFileName}`);
+            switch (currentLanguageTag) {
+                case "fr":
+                    termsFileName = "fr.md";
+                    break;
+                case "es":
+                    termsFileName = "es.md";
+                    break;
+                default:
+                    termsFileName = "en.md";
+                    termsLanguageTag = "en";
+                    break;
+            }
 
-            return response.text();
+            const termsMarkdown = await fetch(`/terms/${termsFileName}`).then(response => response.text());
+
+            return { termsMarkdown, termsLanguageTag };
         }
     });