aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/keycloakTheme/KcApp.css8
-rw-r--r--src/keycloakTheme/KcApp.tsx74
-rw-r--r--src/keycloakTheme/Template.tsx6
-rw-r--r--src/keycloakTheme/assets/background.svg132
-rw-r--r--src/keycloakTheme/kcContext.ts2
-rw-r--r--src/keycloakTheme/pages/Register.tsx2
-rw-r--r--src/keycloakTheme/pages/Terms.tsx2
7 files changed, 171 insertions, 55 deletions
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>) {
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-11 11:45:19 +0000