This commit is contained in:
garronej 2023-02-26 14:07:11 +01:00
parent 3d0736e72b
commit f750ebaf61
9 changed files with 176 additions and 60 deletions

View file

@ -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<PageProps<any, typeof i18n>, "kcContext"> = {
i18n,
Template,
...defaultKcProps,
// NOTE: The classes are defined in ./KcApp.css
"kcHeaderWrapperClass": "my-color my-font"
} satisfies Omit<PageProps<any, I18n>, "kcContext">;
doFetchDefaultThemeResources: true,
...kcProps,
};
return (
<Suspense>
{(() => {
switch (kcContext.pageId) {
case "login.ftl": return <Login {...{kcContext, ...props }} />;
case "register.ftl": return <Register {...{ kcContext, ...props }} />;
case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...props }} />;
case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...props }} />;
default:
//console.log(xxxx);
//const x: KcContextBase = kcContext;
//console.log(Template2, x);
//const y: I18nBase = i18n;
//const zz: TemplateProps<KcContextBase, I18nBase> = null as any as TemplateProps<KcContext, I18n>;
//const z: TemplateProps<KcContextBase, I18nBase> = null as any as TemplateProps<typeof kcContext, I18n>;
type XX = typeof kcContext;
const Template2: (props: TemplateProps<KcContextBase, I18nBase>) => JSX.Element | null= null as any as (( props: TemplateProps<XX, I18n>)=> JSX.Element | null);
//const Template3= (props: TemplateProps<typeof kcContext, I18n>)=> <Template {...props}/>;
/*
const xxxx: PageProps<KcContextBase, I18nBase> = {
"kcContext": kcContext,
...defaultKcProps,
"Template": Template3,
"i18n": i18n
};
*/
return <Fallback {...{ kcContext, ...props }} Template={Template3} />;
case "login.ftl": return <Login {...{ kcContext, ...pageProps }} />;
case "register.ftl": return <Register {...{ kcContext, ...pageProps }} />;
case "terms.ftl": return <Terms {...{ kcContext, ...pageProps }} />;
case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...pageProps }} />;
case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...pageProps }} />;
default: return <Fallback {...{ kcContext, ...pageProps }} />;
}
})()}
</Suspense>