diff --git a/src/account/Template.tsx b/src/account/Template.tsx index 3b0c2fe4..33ccda82 100644 --- a/src/account/Template.tsx +++ b/src/account/Template.tsx @@ -1,9 +1,8 @@ import { useEffect } from "react"; -import { assert } from "keycloakify/tools/assert"; import { clsx } from "keycloakify/tools/clsx"; import { getKcClsx } from "keycloakify/account/lib/kcClsx"; -import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags"; import { useSetClassName } from "keycloakify/tools/useSetClassName"; +import { useInitialize } from "keycloakify/account/Template.useInitialize"; import type { TemplateProps } from "keycloakify/account/TemplateProps"; import type { I18n } from "./i18n"; import type { KcContext } from "./KcContext"; @@ -13,9 +12,9 @@ export default function Template(props: TemplateProps) { const { kcClsx } = getKcClsx({ doUseDefaultCss, classes }); - const { msg, msgStr, getChangeLocaleUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n; + const { msg, msgStr, currentLanguage, enabledLanguages } = i18n; - const { locale, url, features, realm, message, referrer } = kcContext; + const { url, features, realm, message, referrer } = kcContext; useEffect(() => { document.title = msgStr("accountManagementTitle"); @@ -31,30 +30,9 @@ export default function Template(props: TemplateProps) { className: clsx("admin-console", "user", kcClsx("kcBodyClass")) }); - useEffect(() => { - const { currentLanguageTag } = locale ?? {}; + const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss }); - if (currentLanguageTag === undefined) { - return; - } - - const html = document.querySelector("html"); - assert(html !== null); - html.lang = currentLanguageTag; - }, []); - - const { areAllStyleSheetsLoaded } = useInsertLinkTags({ - componentOrHookName: "Template", - hrefs: !doUseDefaultCss - ? [] - : [ - `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`, - `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, - `${url.resourcesPath}/css/account.css` - ] - }); - - if (!areAllStyleSheetsLoaded) { + if (!isReadyToRender) { return null; } @@ -70,16 +48,16 @@ export default function Template(props: TemplateProps) {
    - {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && ( + {enabledLanguages.length > 1 && (
  • - {labelBySupportedLanguageTag[currentLanguageTag]} + {currentLanguage.label} diff --git a/src/account/Template.useInitialize.ts b/src/account/Template.useInitialize.ts new file mode 100644 index 00000000..1fe87efd --- /dev/null +++ b/src/account/Template.useInitialize.ts @@ -0,0 +1,35 @@ +import { assert } from "keycloakify/tools/assert"; +import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags"; +import type { KcContext } from "keycloakify/account/KcContext"; + +export type KcContextLike = { + url: { + resourcesCommonPath: string; + resourcesPath: string; + }; +}; + +assert(); +assert(); + +export function useInitialize(params: { + kcContext: KcContextLike; + doUseDefaultCss: boolean; +}) { + const { kcContext, doUseDefaultCss } = params; + + const { url } = kcContext; + + const { areAllStyleSheetsLoaded } = useInsertLinkTags({ + componentOrHookName: "Template", + hrefs: !doUseDefaultCss + ? [] + : [ + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`, + `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`, + `${url.resourcesPath}/css/account.css` + ] + }); + + return { isReadyToRender: areAllStyleSheetsLoaded }; +} diff --git a/src/login/Template.tsx b/src/login/Template.tsx index ad4b194a..6199839e 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -3,7 +3,7 @@ import { clsx } from "keycloakify/tools/clsx"; import type { TemplateProps } from "keycloakify/login/TemplateProps"; import { getKcClsx } from "keycloakify/login/lib/kcClsx"; import { useSetClassName } from "keycloakify/tools/useSetClassName"; -import { useStylesAndScripts } from "keycloakify/login/Template.useStylesAndScripts"; +import { useInitialize } from "keycloakify/login/Template.useInitialize"; import type { I18n } from "./i18n"; import type { KcContext } from "./KcContext"; @@ -44,7 +44,7 @@ export default function Template(props: TemplateProps) { className: bodyClassName ?? kcClsx("kcBodyClass") }); - const { isReadyToRender } = useStylesAndScripts({ kcContext, doUseDefaultCss }); + const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss }); if (!isReadyToRender) { return null; diff --git a/src/login/Template.useStylesAndScripts.ts b/src/login/Template.useInitialize.ts similarity index 91% rename from src/login/Template.useStylesAndScripts.ts rename to src/login/Template.useInitialize.ts index a3d0b9a5..5f2bacd1 100644 --- a/src/login/Template.useStylesAndScripts.ts +++ b/src/login/Template.useInitialize.ts @@ -2,7 +2,7 @@ import { useEffect } from "react"; import { assert } from "keycloakify/tools/assert"; import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags"; import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags"; -import { KcContext } from "keycloakify/login/KcContext/KcContext"; +import type { KcContext } from "keycloakify/login/KcContext"; export type KcContextLike = { url: { @@ -16,7 +16,7 @@ export type KcContextLike = { assert(); assert(); -export function useStylesAndScripts(params: { +export function useInitialize(params: { kcContext: KcContextLike; doUseDefaultCss: boolean; }) { @@ -61,9 +61,7 @@ export function useStylesAndScripts(params: { textContent: ` import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js"; - checkCookiesAndSetTimer( - "${url.ssoLoginInOtherTabsUrl}" - ); + checkCookiesAndSetTimer("${url.ssoLoginInOtherTabsUrl}"); ` } ]