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 { locale, url, features, realm, message, referrer } = kcContext;
const { isReady } = usePrepareTemplate({ const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss, "styles": !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}/node_modules/patternfly/dist/css/patternfly.min.css`,
`${url.resourcesPath}/css/account.css` `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
], `${url.resourcesPath}/css/account.css`
],
"scripts": [],
"htmlClassName": getClassName("kcHtmlClass"), "htmlClassName": getClassName("kcHtmlClass"),
"bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")), "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")),
"htmlLangProperty": locale?.currentLanguageTag, "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"; import { assert } from "tsafe/assert";
export function usePrepareTemplate(params: { export function usePrepareTemplate(params: {
doFetchDefaultThemeResources: boolean; styles: string[];
styles?: string[]; scripts: {
scripts?: string[]; isModule: boolean;
source:
| {
type: "url";
src: string;
}
| {
type: "inline";
code: string;
};
}[];
htmlClassName: string | undefined; htmlClassName: string | undefined;
bodyClassName: string | undefined; bodyClassName: string | undefined;
htmlLangProperty?: string | undefined; htmlLangProperty: string | undefined;
documentTitle?: string; 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(() => { useEffect(() => {
if (htmlLangProperty === undefined) { if (htmlLangProperty === undefined) {
@ -35,10 +45,6 @@ export function usePrepareTemplate(params: {
}, [documentTitle]); }, [documentTitle]);
useEffect(() => { useEffect(() => {
if (!doFetchDefaultThemeResources) {
return;
}
let isUnmounted = false; let isUnmounted = false;
const removeArray: (() => void)[] = []; const removeArray: (() => void)[] = [];
@ -64,10 +70,10 @@ export function usePrepareTemplate(params: {
setReady(); setReady();
})(); })();
scripts.forEach(src => { scripts.forEach(script => {
const { remove } = headInsert({ const { remove } = headInsert({
"type": "javascript", "type": "javascript",
src ...script
}); });
removeArray.push(remove); 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 { 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({ const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss, "styles": !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}/node_modules/@patternfly/patternfly/patternfly.min.css`,
`${url.resourcesCommonPath}/lib/zocial/zocial.css`, `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
`${url.resourcesPath}/css/login.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"), "htmlClassName": getClassName("kcHtmlClass"),
"bodyClassName": getClassName("kcBodyClass"), "bodyClassName": getClassName("kcBodyClass"),

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

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

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

@ -112,7 +112,8 @@ export const kcContextCommonMock: KcContext.Common = {
resourcesPath, resourcesPath,
"resourcesCommonPath": `${resourcesPath}/${resources_common}`, "resourcesCommonPath": `${resourcesPath}/${resources_common}`,
"loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg", "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": { "realm": {
"name": "myrealm", "name": "myrealm",

26
src/tools/headInsert.ts
View File

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