diff options
| -rwxr-xr-x | package.json | 2 | ||||
| -rw-r--r-- | src/keycloakTheme/KcApp.css | 8 | ||||
| -rw-r--r-- | src/keycloakTheme/KcApp.tsx | 74 | ||||
| -rw-r--r-- | src/keycloakTheme/Template.tsx | 6 | ||||
| -rw-r--r-- | src/keycloakTheme/assets/background.svg | 132 | ||||
| -rw-r--r-- | src/keycloakTheme/kcContext.ts | 2 | ||||
| -rw-r--r-- | src/keycloakTheme/pages/Register.tsx | 2 | ||||
| -rw-r--r-- | src/keycloakTheme/pages/Terms.tsx | 2 | ||||
| -rw-r--r-- | yarn.lock | 8 |
9 files changed, 176 insertions, 60 deletions
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<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> diff --git a/src/keycloakTheme/Template.tsx b/src/keycloakTheme/Template.tsx index 59644f8..fb9aee7 100644 --- a/src/keycloakTheme/Template.tsx +++ b/src/keycloakTheme/Template.tsx @@ -9,9 +9,7 @@ import { assert } from "keycloakify/lib/tools/assert"; import { clsx } from "keycloakify/lib/tools/clsx"; import { pathJoin } from "keycloakify/bin/tools/pathJoin"; import type { TemplateProps } from "keycloakify/lib/KcProps"; -//import type { KcContextBase } from "keycloakify/lib/getKcContext"; import type { KcContext } from "./kcContext"; -// Here Instead of KcContextBase.Common you should provide your own context import type { I18n } from "./i18n"; export default function Template(props: TemplateProps<KcContext, I18n>) { @@ -118,7 +116,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) { {locale.supported.map(({ languageTag }) => ( <li key={languageTag} className="kc-dropdown-item"> {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - <a href="#" onClick={()=> changeLocale(languageTag)}> + <a href="#" onClick={() => changeLocale(languageTag)}> {labelBySupportedLanguageTag[languageTag]} </a> </li> @@ -212,7 +210,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) { <div className={clsx(props.kcFormGroupClass)}> <input type="hidden" name="tryAnotherWay" value="on" /> {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - <a href="#" id="try-another-way" onClick={()=>{ + <a href="#" id="try-another-way" onClick={() => { document.forms["kc-select-try-another-way-form" as never].submit(); return false; }}> diff --git a/src/keycloakTheme/assets/background.svg b/src/keycloakTheme/assets/background.svg new file mode 100644 index 0000000..0e1cada --- /dev/null +++ b/src/keycloakTheme/assets/background.svg @@ -0,0 +1,132 @@ +<svg width="1521" height="961" viewBox="0 0 1521 961" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g opacity="0.4"> +<g filter="url(#filter0_dd)"> +<path d="M289.342 250.792L427.47 389.611C471.444 433.805 542.707 433.805 586.621 389.611L724.749 250.792L507.046 32L289.342 250.792Z" fill="#EFEEEE"/> +<path d="M586.267 389.258L586.267 389.258C542.548 433.256 471.603 433.256 427.824 389.258L290.047 250.792L507.046 32.7089L724.044 250.792L586.267 389.258Z" stroke="white" stroke-opacity="0.01"/> +</g> +<g filter="url(#filter1_dd)"> +<path d="M32 509.755L170.128 648.573C214.103 692.767 285.365 692.767 329.28 648.573L467.408 509.755L249.704 290.962L32 509.755Z" fill="#EFEEEE"/> +<path d="M328.925 648.221L328.925 648.221C285.206 692.218 214.262 692.219 170.483 648.221L32.7054 509.755L249.704 291.671L466.702 509.755L328.925 648.221Z" stroke="white" stroke-opacity="0.01"/> +</g> +<g filter="url(#filter2_dd)"> +<path d="M289.281 767.036L427.409 905.854C471.384 950.048 542.646 950.048 586.561 905.854L724.689 767.036L506.985 548.243L289.281 767.036Z" fill="#EFEEEE"/> +<path d="M586.206 905.502L586.206 905.502C542.487 949.499 471.543 949.5 427.764 905.502L289.986 767.036L506.985 548.952L723.983 767.036L586.206 905.502Z" stroke="white" stroke-opacity="0.01"/> +</g> +<g filter="url(#filter3_dd)"> +<path d="M546.562 509.755L684.69 648.573C728.665 692.767 799.927 692.767 843.842 648.573L981.97 509.755L764.266 290.962L546.562 509.755Z" fill="#EFEEEE"/> +<path d="M843.487 648.221L843.487 648.221C799.768 692.218 728.824 692.219 685.044 648.221L547.267 509.755L764.266 291.671L981.264 509.755L843.487 648.221Z" stroke="white" stroke-opacity="0.01"/> +</g> +<g filter="url(#filter4_dd)"> +<path d="M803.843 250.792L941.971 389.611C985.945 433.805 1057.21 433.805 1101.12 389.611L1239.25 250.792L1021.55 32L803.843 250.792Z" fill="#EFEEEE"/> +<path d="M1100.77 389.258L1100.77 389.258C1057.05 433.256 986.105 433.256 942.325 389.258L804.548 250.792L1021.55 32.7089L1238.55 250.792L1100.77 389.258Z" stroke="white" stroke-opacity="0.01"/> +</g> +<g filter="url(#filter5_dd)"> +<path d="M1062.81 509.755L1200.93 648.573C1244.91 692.767 1316.17 692.767 1360.08 648.573L1498.21 509.755L1280.51 290.962L1062.81 509.755Z" fill="#EFEEEE"/> +<path d="M1359.73 648.221L1359.73 648.221C1316.01 692.218 1245.07 692.219 1201.29 648.221L1063.51 509.755L1280.51 291.671L1497.51 509.755L1359.73 648.221Z" stroke="white" stroke-opacity="0.01"/> +</g> +<g filter="url(#filter6_dd)"> +<path d="M805.524 767.036L943.653 905.854C987.627 950.048 1058.89 950.048 1102.8 905.854L1240.93 767.036L1023.23 548.243L805.524 767.036Z" fill="#EFEEEE"/> +<path d="M1102.45 905.502L1102.45 905.502C1058.73 949.499 987.786 949.5 944.007 905.502L806.23 767.036L1023.23 548.952L1240.23 767.036L1102.45 905.502Z" stroke="white" stroke-opacity="0.01"/> +</g> +</g> +<defs> +<filter id="filter0_dd" x="257.342" y="0" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +<filter id="filter1_dd" x="0" y="258.962" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +<filter id="filter2_dd" x="257.281" y="516.243" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +<filter id="filter3_dd" x="514.562" y="258.962" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +<filter id="filter4_dd" x="771.843" y="0" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +<filter id="filter5_dd" x="1030.81" y="258.962" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +<filter id="filter6_dd" x="773.524" y="516.243" width="489.408" height="444.757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="6" dy="6"/> +<feGaussianBlur stdDeviation="8"/> +<feColorMatrix type="matrix" values="0 0 0 0 0.75 0 0 0 0 0.71011 0 0 0 0 0.653125 0 0 0 0.51 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> +<feOffset dx="-6" dy="-6"/> +<feGaussianBlur stdDeviation="13"/> +<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.83 0"/> +<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/> +</filter> +</defs> +</svg> diff --git a/src/keycloakTheme/kcContext.ts b/src/keycloakTheme/kcContext.ts index 47e956b..7b4cb47 100644 --- a/src/keycloakTheme/kcContext.ts +++ b/src/keycloakTheme/kcContext.ts @@ -1,4 +1,4 @@ -import { getKcContext } from "keycloakify/lib/kcContext"; +import { getKcContext } from "keycloakify/lib/getKcContext"; //NOTE: In most of the cases you do not need to overload the KcContext, you can // just call getKcContext(...) without type arguments. diff --git a/src/keycloakTheme/pages/Register.tsx b/src/keycloakTheme/pages/Register.tsx index ea6639d..1dcf216 100644 --- a/src/keycloakTheme/pages/Register.tsx +++ b/src/keycloakTheme/pages/Register.tsx @@ -4,7 +4,7 @@ // Note that it is no longer recommended to use register.ftl, it's best to use register-user-profile.ftl // See: https://docs.keycloakify.dev/realtime-input-validation import { clsx } from "keycloakify/lib/tools/clsx"; -import type { PageProps } from "keycloakify"; +import type { PageProps } from "keycloakify/lib/KcProps"; import type { KcContext } from "../kcContext"; import type { I18n } from "../i18n"; diff --git a/src/keycloakTheme/pages/Terms.tsx b/src/keycloakTheme/pages/Terms.tsx index 342602e..62e9fd9 100644 --- a/src/keycloakTheme/pages/Terms.tsx +++ b/src/keycloakTheme/pages/Terms.tsx @@ -12,8 +12,8 @@ import { Markdown } from "keycloakify/lib/tools/Markdown"; import { evtTermMarkdown, useDownloadTerms } from "keycloakify/lib/pages/Terms"; import tos_en_url from "../assets/tos_en.md"; import tos_fr_url from "../assets/tos_fr.md"; -import type { KcContext } from "../kcContext"; import type { PageProps } from "keycloakify/lib/KcProps"; +import type { KcContext } from "../kcContext"; import type { I18n } from "../i18n"; export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl"; }>, I18n>) { @@ -8810,10 +8810,10 @@ typedarray-to-buffer@^3.1.5: dependencies: is-typedarray "^1.0.0" -typescript@^4.9.5: - version "4.9.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" - integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== +typescript@~4.8.0: + version "4.8.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6" + integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ== unbox-primitive@^1.0.2: version "1.0.2" |