diff --git a/README.md b/README.md index 309807d..94f7ea9 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ git clone https://github.com/keycloakify/keycloakify-starter cd keycloakify-starter yarn install # Generate the dist_keycloak/.jar file that you can import in Keycloak -yarn build-keycloak-theme +yarn build-keycloak-theme ``` # Storybook @@ -44,23 +44,53 @@ npx keycloakify eject-page The starter comes with a generic GitHub Actions workflow that builds the theme and publishes the jars [as GitHub releases artifacts](https://github.com/keycloakify/keycloakify-starter/releases/tag/v7.1.0). -To release a new version **just update the `package.json` version and push**. +To release a new version **just update the `package.json` version and push**. To enable the workflow go to your fork of this repository on GitHub then navigate to: -`Settings` > `Actions` > `Workflow permissions`, select `Read and write permissions`. +`Settings` > `Actions` > `Workflow permissions`, select `Read and write permissions`. + +# Email theme + +Keycloakify lets you bundle an email theme however customization can't be made with React yet. +To initialize the email theme run: + +```bash +npx keycloakify initialize-email-theme +``` # Removing the account theme If you don't need to customize [the account theme pages](https://storybook.keycloakify.dev/?path=/story/account-account--default). You can remove the `src/account` directory. -This will significantly reduce the the size of the jar and the build time. -Don't forget to update `src/main.tsx` and `src/vite-env.d.ts`. +This will significantly reduce the the size of the jar and the build time. -# Email theme +You'll need to apply theses changes to the `src/main.tsx` file: -Keycloakify lets you bundle an email theme however customization can't be made with React yet. -To initialize the email theme run: - -```bash -npx keycloakify initialize-email-theme +```diff + createRoot(document.getElementById("root")!).render( + + + {(() => { + switch (window.kcContext?.themeType) { + case "login": + return ; +- case "account": +- return ; + case undefined: + return

No Keycloak Context

; + } + })()} +
+
+ ); + + declare global { + interface Window { + kcContext?: + | import("./login/KcContext").KcContext +- | import("./account/KcContext").KcContext; + } + } ``` + +Don't forget to update `src/main.tsx` and `src/vite-env.d.ts`. diff --git a/src/main.tsx b/src/main.tsx index 8b46fb2..7e89ca6 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -9,7 +9,8 @@ import { getKcContextMock } from "./login/PageStory"; if (import.meta.env.DEV) { window.kcContext = getKcContextMock({ - pageId: "register.ftl" + pageId: "register.ftl", + overrides: {} }); } */ @@ -33,3 +34,11 @@ createRoot(document.getElementById("root")!).render( ); + +declare global { + interface Window { + kcContext?: + | import("./login/KcContext").KcContext + | import("./account/KcContext").KcContext; + } +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 37e9404..11f02fe 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,10 +1 @@ /// - -import type { KcContext as KcContextLogin } from "./login/kcContext"; -import type { KcContext as KcContextAccount } from "./account/kcContext"; - -declare global { - interface Window { - kcContext?: KcContextLogin | KcContextAccount; - } -}