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

Effort toward reconsiliating the server templating and the react world

Browse Source
This commit is contained in:
Joseph Garrone
2024-05-10 02:45:01 +02:00
parent 88efe4a523
commit 570fbd5632
6 changed files with 214 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/login/Template.tsx
View File

@ -28,8 +28,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext;
const { isReady } = usePrepareTemplate({
"styles": !doUseDefaultCss
const { areAllStyleSheetsLoaded } = usePrepareTemplate({
"styleSheetHrefs": !doUseDefaultCss
? []
: [
`${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
@ -38,41 +38,32 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
`${url.resourcesCommonPath}/lib/pficon/pficon.css`,
`${url.resourcesPath}/css/login.css`
],
"scripts": [
"scriptTags": [
{
"isModule": true,
"source": {
"type": "url",
"src": `${url.resourcesPath}/js/menu-button-links.js`
}
"type": "module",
"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")
}
}
"type": "module",
"textContent": [
`import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
``,
`checkCookiesAndSetTimer(`,
` "${authenticationSession.authSessionId}",`,
` "${authenticationSession.tabId}",`,
` "${url.ssoLoginInOtherTabsUrl}"`,
`);`
].join("\n")
} as const
]),
...scripts.map(
script =>
({
"isModule": false,
"source": {
"type": "url",
"src": script
}
"type": "text/javascript",
"src": script
} as const)
)
],
@ -82,7 +73,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
"documentTitle": msgStr("loginTitle", kcContext.realm.displayName)
});
if (!isReady) {
if (!areAllStyleSheetsLoaded) {
return null;
}

30
src/login/lib/useUserProfileForm.tsx
View File

@ -1,5 +1,5 @@
import "keycloakify/tools/Array.prototype.every";
import { useMemo, useReducer, Fragment, type Dispatch } from "react";
import { useMemo, useReducer, useEffect, Fragment, type Dispatch } from "react";
import { id } from "tsafe/id";
import type { MessageKey } from "keycloakify/login/i18n/i18n";
import type { Attribute, Validators } from "keycloakify/login/kcContext/KcContext";
@ -7,9 +7,9 @@ import { useConstCallback } from "keycloakify/tools/useConstCallback";
import { emailRegexp } from "keycloakify/tools/emailRegExp";
import type { KcContext, PasswordPolicies } from "keycloakify/login/kcContext/KcContext";
import { assert, type Equals } from "tsafe/assert";
import type { I18n } from "../i18n";
import { formatNumber } from "keycloakify/tools/formatNumber";
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
import type { I18n } from "../i18n";
export type FormFieldError = {
errorMessage: JSX.Element;
@ -102,26 +102,24 @@ namespace internal {
};
}
const { useInsertScriptTags } = createUseInsertScriptTags();
export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm {
const { kcContext, i18n, doMakeUserConfirmPassword } = params;
usePrepareTemplate({
"styles": [],
"scripts": Object.keys(kcContext.profile?.html5DataAnnotations ?? {})
const { insertScriptTags } = useInsertScriptTags({
"scriptTags": Object.keys(kcContext.profile?.html5DataAnnotations ?? {})
.filter(key => key !== "kcMultivalued" && key !== "kcNumberFormat") // NOTE: Keycloakify handles it.
.map(key => ({
"isModule": true,
"source": {
"type": "url",
"src": `${kcContext.url.resourcesPath}/js/${key}.js`
}
})),
"htmlClassName": undefined,
"bodyClassName": undefined,
"htmlLangProperty": undefined,
"documentTitle": undefined
"type": "module",
"src": `${kcContext.url.resourcesPath}/js/${key}.js`
}))
});
useEffect(() => {
insertScriptTags();
}, []);
const { getErrors } = useGetErrors({
kcContext,
i18n