agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update prepare template for Keycloak 24

Browse Source
This commit is contained in:
Joseph Garrone 2024-04-13 01:26:41 +02:00
parent 72a3c37e84
commit 8d1c19bf1c
6 changed files with 92 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/account/Template.tsx
View File

@ -16,12 +16,14 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
const { locale, url, features, realm, message, referrer } = kcContext;
const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss,
"styles": [
`${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`
],
"styles": !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`
],
"scripts": [],
"htmlClassName": getClassName("kcHtmlClass"),
"bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")),
"htmlLangProperty": locale?.currentLanguageTag,

32
src/lib/usePrepareTemplate.ts
View File

@ -4,17 +4,27 @@ import { clsx } from "keycloakify/tools/clsx";
import { assert } from "tsafe/assert";
export function usePrepareTemplate(params: {
doFetchDefaultThemeResources: boolean;
styles?: string[];
scripts?: string[];
styles: string[];
scripts: {
isModule: boolean;
source:
| {
type: "url";
src: string;
}
| {
type: "inline";
code: string;
};
}[];
htmlClassName: string | undefined;
bodyClassName: string | undefined;
htmlLangProperty?: string | undefined;
documentTitle?: string;
htmlLangProperty: string | undefined;
documentTitle: string | undefined;
}) {
const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params;
const { styles, scripts, htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params;
const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
const [isReady, setReady] = useReducer(() => true, styles.length === 0 && scripts.length === 0);
useEffect(() => {
if (htmlLangProperty === undefined) {
@ -35,10 +45,6 @@ export function usePrepareTemplate(params: {
}, [documentTitle]);
useEffect(() => {
if (!doFetchDefaultThemeResources) {
return;
}
let isUnmounted = false;
const removeArray: (() => void)[] = [];
@ -64,10 +70,10 @@ export function usePrepareTemplate(params: {
setReady();
})();
scripts.forEach(src => {
scripts.forEach(script => {
const { remove } = headInsert({
"type": "javascript",
src
...script
});
removeArray.push(remove);

44
src/login/Template.tsx
View File

@ -27,15 +27,45 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession } = kcContext;
const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss,
"styles": [
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
`${url.resourcesCommonPath}/lib/zocial/zocial.css`,
`${url.resourcesPath}/css/login.css`
"styles": !doUseDefaultCss
? []
: [
`${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
`${url.resourcesCommonPath}/lib/pficon/pficon.css`,
`${url.resourcesPath}/css/login.css`
],
"scripts": [
{
"isModule": true,
"source": {
"type": "url",
"src": `${url.resourcesPath}/js/menu-button-links.js`
}
},
...(authenticationSession === undefined
? []
: [
{
"isModule": true,
"source": {
"type": "inline" as const,
"code": [
`import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
``,
`checkCookiesAndSetTimer(`,
` "${authenticationSession.authSessionId}",`,
` "${authenticationSession.tabId}",`,
` "${url.ssoLoginInOtherTabsUrl}"`,
`);`
].join("\n")
}
}
])
],
"htmlClassName": getClassName("kcHtmlClass"),
"bodyClassName": getClassName("kcBodyClass"),

6
src/login/kcContext/KcContext.ts
View File

@ -50,6 +50,7 @@ export declare namespace KcContext {
resourcesCommonPath: string;
loginRestartFlowUrl: string;
loginUrl: string;
ssoLoginInOtherTabsUrl: string;
};
realm: {
name: string;
@ -117,6 +118,11 @@ export declare namespace KcContext {
exists: (fieldName: string) => boolean;
};
properties: Record<string, string | undefined>;
authenticationSession?: {
authSessionId: string;
tabId: string;
ssoLoginInOtherTabsUrl: string;
};
};
export type SamlPostForm = Common & {

3
src/login/kcContext/kcContextMocks.ts
View File

@ -112,7 +112,8 @@ export const kcContextCommonMock: KcContext.Common = {
resourcesPath,
"resourcesCommonPath": `${resourcesPath}/${resources_common}`,
"loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
"loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg"
"loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
"ssoLoginInOtherTabsUrl": "/auth/realms/myrealm/login-actions/switch?client_id=account&tab_id=HoAx28ja4xg"
},
"realm": {
"name": "myrealm",

26
src/tools/headInsert.ts
View File

@ -10,7 +10,16 @@ export function headInsert(
}
| {
type: "javascript";
src: string;
isModule: boolean;
source:
| {
type: "url";
src: string;
}
| {
type: "inline";
code: string;
};
}
): { remove: () => void; prLoaded: Promise<void> } {
const htmlElement = document.createElement(
@ -35,14 +44,19 @@ export function headInsert(
case "css":
return {
"href": params.href,
"type": "text/css",
"rel": "stylesheet",
"media": "screen,print"
"rel": "stylesheet"
};
case "javascript":
return {
"src": params.src,
"type": "text/javascript"
...(() => {
switch (params.source.type) {
case "inline":
return { "textContent": params.source.code };
case "url":
return { "src": params.source.src };
}
})(),
"type": params.isModule ? "module" : "text/javascript"
};
}
})()