From 6738f6f6cf895630b6c821e09bee29da6da0a674 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Thu, 4 Mar 2021 13:56:51 +0100 Subject: [PATCH] Login appear to be working now --- .../generateKeycloakThemeResources.ts | 5 +- src/lib/components/Template.tsx | 53 +++++++++++-------- src/lib/tools/appendHead.ts | 49 +++++++++++++++++ src/lib/tools/appendLinkInHead.ts | 24 --------- src/lib/tools/appendScriptInHead.ts | 22 -------- 5 files changed, 85 insertions(+), 68 deletions(-) create mode 100644 src/lib/tools/appendHead.ts delete mode 100644 src/lib/tools/appendLinkInHead.ts delete mode 100644 src/lib/tools/appendScriptInHead.ts diff --git a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts index 8bfe5ba4..02649779 100644 --- a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts +++ b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts @@ -106,7 +106,10 @@ export function generateKeycloakThemeResources( fs.writeFileSync( pathJoin(themeDirPath, "theme.properties"), - Buffer.from(`import=common/${themeName}\n`, "utf8") + Buffer.from([ + `[import=common/${themeName}`, + "locales=ca,cs,de,en,es,fr,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN" + ].join("\n"), "utf8") ); } diff --git a/src/lib/components/Template.tsx b/src/lib/components/Template.tsx index c87efb24..d031989d 100644 --- a/src/lib/components/Template.tsx +++ b/src/lib/components/Template.tsx @@ -1,5 +1,5 @@ -import { useState, useEffect, memo } from "react"; +import { useState, useReducer ,useEffect, memo } from "react"; import type { ReactNode } from "react"; import { useKcTranslation } from "../i18n/useKcTranslation"; import { kcContext } from "../kcContext"; @@ -9,8 +9,7 @@ import { useKcLanguageTag } from "../i18n/useKcLanguageTag"; import type { KcLanguageTag } from "../i18n/KcLanguageTag"; import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag"; import { useCallbackFactory } from "powerhooks"; -import { appendLinkInHead } from "../tools/appendLinkInHead"; -import { appendScriptInHead } from "../tools/appendScriptInHead"; +import { appendHead } from "../tools/appendHead"; import { join as pathJoin } from "path"; import { useConstCallback } from "powerhooks"; import type { KcTemplateProperties } from "./KcProperties"; @@ -69,36 +68,48 @@ export const Template = memo((props: TemplateProps) => { kcContext )); + const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false); + useEffect(() => { - kcProperties.stylesCommon?.forEach( - relativePath => - appendLinkInHead( - { "href": pathJoin(url.resourcesCommonPath, relativePath) } - ) - ); + let isUnmounted = false; - kcProperties.styles?.forEach( - relativePath => - appendLinkInHead( - { "href": pathJoin(url.resourcesPath, relativePath) } - ) - ); + Promise.all( + [ + ...(kcProperties.stylesCommon ?? []).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)), + ...(kcProperties.styles ?? []).map(relativePath => pathJoin(url.resourcesPath, relativePath)) + ].map(href => appendHead({ + "type": "css", + href + }))).then(() => { + + if (isUnmounted) { + return; + } + + setExtraCssLoaded(); + + }); kcProperties.scripts?.forEach( - relativePath => - appendScriptInHead( - { "src": pathJoin(url.resourcesPath, relativePath) } - ) + relativePath => appendHead({ + "type": "javascript", + "src": pathJoin(url.resourcesPath, relativePath) + }) ); document.getElementsByTagName("html")[0] .classList .add(cx(kcProperties.kcHtmlClass)); + return () => { isUnmounted = true; }; }, []); + if (!isExtraCssLoaded) { + return null; + } + return (
@@ -108,7 +119,7 @@ export const Template = memo((props: TemplateProps) => {
-
+
{ ( @@ -142,7 +153,7 @@ export const Template = memo((props: TemplateProps) => { } { - ( + !( auth !== undefined && auth.showUsername && !auth.showResetCredentials diff --git a/src/lib/tools/appendHead.ts b/src/lib/tools/appendHead.ts new file mode 100644 index 00000000..b04fff03 --- /dev/null +++ b/src/lib/tools/appendHead.ts @@ -0,0 +1,49 @@ + +import { Deferred } from "evt/tools/Deferred"; + +export function appendHead( + params: { + type: "css"; + href: string; + } | { + type: "javascript"; + src: string; + } +) { + + const htmlElement = document.createElement( + (() => { + switch (params.type) { + case "css": return "link"; + case "javascript": return "script"; + } + })() + ); + + const dLoaded = new Deferred(); + + htmlElement.addEventListener("load", () => dLoaded.resolve()); + + Object.assign( + htmlElement, + (() => { + switch (params.type) { + case "css": return { + "href": params.href, + "type": "text/css", + "rel": "stylesheet", + "media": "screen,print" + }; + case "javascript": return { + "src": params.src, + "type": "text/javascript", + }; + } + })() + ); + + document.getElementsByTagName("head")[0].appendChild(htmlElement); + + return dLoaded.pr; + +} \ No newline at end of file diff --git a/src/lib/tools/appendLinkInHead.ts b/src/lib/tools/appendLinkInHead.ts deleted file mode 100644 index c51afa20..00000000 --- a/src/lib/tools/appendLinkInHead.ts +++ /dev/null @@ -1,24 +0,0 @@ - -export function appendLinkInHead( - props: { - href: string; - } -) { - - const { href } = props; - - var link = document.createElement("link"); - - Object.assign( - link, - { - href, - "type": "text/css", - "rel": "stylesheet", - "media": "screen,print" - } - ); - - document.getElementsByTagName("head")[0].appendChild(link); - -} diff --git a/src/lib/tools/appendScriptInHead.ts b/src/lib/tools/appendScriptInHead.ts deleted file mode 100644 index 596b4c00..00000000 --- a/src/lib/tools/appendScriptInHead.ts +++ /dev/null @@ -1,22 +0,0 @@ - -export function appendScriptInHead( - props: { - src: string; - } -) { - - const { src } = props; - - var script = document.createElement("script"); - - Object.assign( - script, - { - src, - "type": "text/javascript", - } - ); - - document.getElementsByTagName("head")[0].appendChild(script); - -}