diff --git a/src/lib/usePrepareTemplate.ts b/src/lib/usePrepareTemplate.ts deleted file mode 100644 index 18b73498..00000000 --- a/src/lib/usePrepareTemplate.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { useEffect } from "react"; -import { assert } from "tsafe/assert"; -import { createUseInsertScriptTags, type ScriptTag } from "keycloakify/tools/useInsertScriptTags"; -import { createUseInsertLinkTags } from "keycloakify/tools/useInsertLinkTags"; -import { useSetClassName } from "keycloakify/tools/useSetClassName"; - -const { useInsertLinkTags } = createUseInsertLinkTags(); -const { useInsertScriptTags } = createUseInsertScriptTags(); - -export function usePrepareTemplate(params: { - styleSheetHrefs: string[]; - scriptTags: ScriptTag[]; - htmlClassName: string | undefined; - bodyClassName: string | undefined; - htmlLangProperty: string | undefined; - documentTitle: string | undefined; -}) { - const { styleSheetHrefs, scriptTags, htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params; - - 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]); - - const { areAllStyleSheetsLoaded } = useInsertLinkTags({ "hrefs": styleSheetHrefs }); - - const { insertScriptTags } = useInsertScriptTags({ scriptTags }); - - useEffect(() => { - if (!areAllStyleSheetsLoaded) { - return; - } - - insertScriptTags(); - }, [areAllStyleSheetsLoaded]); - - useSetClassName({ - "qualifiedName": "html", - "className": htmlClassName - }); - - useSetClassName({ - "qualifiedName": "body", - "className": bodyClassName - }); - - return { areAllStyleSheetsLoaded }; -} diff --git a/src/login/Template.tsx b/src/login/Template.tsx index 0c6a2a54..04acf097 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -1,11 +1,17 @@ +import { useEffect } from "react"; import { assert } from "keycloakify/tools/assert"; import { clsx } from "keycloakify/tools/clsx"; -import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate"; import { type TemplateProps } from "keycloakify/login/TemplateProps"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; +import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags"; +import { createUseInsertLinkTags } from "keycloakify/tools/useInsertLinkTags"; +import { useSetClassName } from "keycloakify/tools/useSetClassName"; import type { KcContext } from "./kcContext"; import type { I18n } from "./i18n"; +const { useInsertLinkTags } = createUseInsertLinkTags(); +const { useInsertScriptTags } = createUseInsertScriptTags(); + export default function Template(props: TemplateProps) { const { displayInfo = false, @@ -28,8 +34,34 @@ export default function Template(props: TemplateProps) { const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext; - const { areAllStyleSheetsLoaded } = usePrepareTemplate({ - "styleSheetHrefs": !doUseDefaultCss + useEffect(() => { + document.title = msgStr("loginTitle", kcContext.realm.displayName); + }, []); + + useSetClassName({ + "qualifiedName": "html", + "className": getClassName("kcHtmlClass") + }); + + useSetClassName({ + "qualifiedName": "body", + "className": getClassName("kcBodyClass") + }); + + useEffect(() => { + const { currentLanguageTag } = locale ?? {}; + + if (currentLanguageTag === undefined) { + return; + } + + const html = document.querySelector("html"); + assert(html !== null); + html.lang = currentLanguageTag; + }, []); + + const { areAllStyleSheetsLoaded } = useInsertLinkTags({ + "hrefs": !doUseDefaultCss ? [] : [ `${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`, @@ -37,7 +69,10 @@ export default function Template(props: TemplateProps) { `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, `${url.resourcesCommonPath}/lib/pficon/pficon.css`, `${url.resourcesPath}/css/login.css` - ], + ] + }); + + const { insertScriptTags } = useInsertScriptTags({ "scriptTags": [ { "type": "module", @@ -66,13 +101,15 @@ export default function Template(props: TemplateProps) { "src": script } as const) ) - ], - "htmlClassName": getClassName("kcHtmlClass"), - "bodyClassName": getClassName("kcBodyClass"), - "htmlLangProperty": locale?.currentLanguageTag, - "documentTitle": msgStr("loginTitle", kcContext.realm.displayName) + ] }); + useEffect(() => { + if (areAllStyleSheetsLoaded) { + insertScriptTags(); + } + }, [areAllStyleSheetsLoaded]); + if (!areAllStyleSheetsLoaded) { return null; }