diff --git a/src/lib/usePrepareTemplate.ts b/src/lib/usePrepareTemplate.ts index 560161fa..98f0bbd6 100644 --- a/src/lib/usePrepareTemplate.ts +++ b/src/lib/usePrepareTemplate.ts @@ -1,6 +1,7 @@ import { useReducer, useEffect } from "react"; import { headInsert } from "keycloakify/tools/headInsert"; import { clsx } from "keycloakify/tools/clsx"; +import { assert } from "tsafe/assert"; export function usePrepareTemplate(params: { doFetchDefaultThemeResources: boolean; @@ -8,11 +9,31 @@ export function usePrepareTemplate(params: { scripts?: string[]; htmlClassName: string | undefined; bodyClassName: string | undefined; + htmlLangProperty?: string | undefined; + documentTitle?: string; }) { - const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName } = params; + const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params; const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources); + useEffect(() => { + if (htmlLangProperty === undefined) { + return; + } + + const html = document.querySelector("html"); + assert(html !== null); + html.lang = htmlLangProperty; + }, [htmlLangProperty]); + + useEffect(() => { + if (documentTitle === undefined) { + return; + } + + document.title = documentTitle; + }, [documentTitle]); + useEffect(() => { if (!doFetchDefaultThemeResources) { return; diff --git a/src/login/Template.tsx b/src/login/Template.tsx index 6008162a..4d6646bb 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -38,15 +38,15 @@ export default function Template(props: TemplateProps) { `${url.resourcesPath}/css/login.css` ], "htmlClassName": getClassName("kcHtmlClass"), - "bodyClassName": getClassName("kcBodyClass") + "bodyClassName": getClassName("kcBodyClass"), + "htmlLangProperty": locale?.currentLanguageTag, + "documentTitle": i18n.msgStr("loginTitle", kcContext.realm.displayName) }); if (!isReady) { return null; } - document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName); - return (