diff --git a/package.json b/package.json index cb9462f..24d25bf 100755 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@types/react": "18.0.9", "@types/react-dom": "18.0.4", "react-scripts": "5.0.0", - "typescript": "^4.9.5" + "typescript": "~4.8.0" }, "eslintConfig": { "extends": [ diff --git a/src/keycloakTheme/KcApp.css b/src/keycloakTheme/KcApp.css index a8fdf42..aeaebbe 100644 --- a/src/keycloakTheme/KcApp.css +++ b/src/keycloakTheme/KcApp.css @@ -5,4 +5,12 @@ .my-font { font-family: 'Work Sans'; +} + +.my-root-class { + background: white; +} + +.my-root-class body { + background: url(./assets/background.svg) no-repeat center center fixed; } \ No newline at end of file diff --git a/src/keycloakTheme/KcApp.tsx b/src/keycloakTheme/KcApp.tsx index aa804ce..a9ea5dd 100644 --- a/src/keycloakTheme/KcApp.tsx +++ b/src/keycloakTheme/KcApp.tsx @@ -1,24 +1,31 @@ import "./KcApp.css"; import { lazy, Suspense } from "react"; import type { KcContext } from "./kcContext"; -import { useI18n, type I18n } from "./i18n"; -import Fallback, { defaultKcProps, type PageProps } from "keycloakify"; +import { useI18n } from "./i18n"; +import Fallback, { defaultKcProps, type KcProps, type PageProps } from "keycloakify"; +// Here we have overloaded the default template, however you could use the default one with: +//import Template from "keycloakify/lib/Template"; import Template from "./Template"; -import { KcContextBase } from "keycloakify/lib/getKcContext"; -import type { I18nBase } from "keycloakify/lib/i18n"; -import type { TemplateProps } from "keycloakify"; -const Login = lazy(()=> import("keycloakify/lib/pages/Login")); +const Login = lazy(() => import("keycloakify/lib/pages/Login")); const Register = lazy(() => import("./pages/Register")); const Terms = lazy(() => import("./pages/Terms")); const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1")); const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2")); -type Props = { - kcContext: KcContext; +// This is like editing the theme.properties +// https://github.com/keycloak/keycloak/blob/11.0.3/themes/src/main/resources/theme/keycloak/login/theme.properties +const kcProps: KcProps = { + ...defaultKcProps, + // NOTE: The classes are defined in ./KcApp.css + "kcHeaderWrapperClass": "my-color my-font", + "kcHtmlClass": [...defaultKcProps.kcHtmlClass, "my-root-class"], }; -export default function App({ kcContext }: Props) { +export default function App(props: { kcContext: KcContext; }) { + + const { kcContext } = props; + const i18n = useI18n({ kcContext }); //NOTE: Locales not yet downloaded @@ -26,52 +33,23 @@ export default function App({ kcContext }: Props) { return null; } - const props = { + const pageProps: Omit, "kcContext"> = { i18n, Template, - ...defaultKcProps, - // NOTE: The classes are defined in ./KcApp.css - "kcHeaderWrapperClass": "my-color my-font" - } satisfies Omit, "kcContext">; - - + doFetchDefaultThemeResources: true, + ...kcProps, + }; return ( {(() => { switch (kcContext.pageId) { - case "login.ftl": return ; - case "register.ftl": return ; - case "terms.ftl": return ; - case "my-extra-page-1.ftl": return ; - case "my-extra-page-2.ftl": return ; - default: - - //console.log(xxxx); - - //const x: KcContextBase = kcContext; - //console.log(Template2, x); - - //const y: I18nBase = i18n; - - //const zz: TemplateProps = null as any as TemplateProps; - //const z: TemplateProps = null as any as TemplateProps; - type XX = typeof kcContext; - const Template2: (props: TemplateProps) => JSX.Element | null= null as any as (( props: TemplateProps)=> JSX.Element | null); - - - //const Template3= (props: TemplateProps)=>