Bump version

README.md

@@ -35,7 +35,7 @@
 </p>
 
 <p align="center">
-    <i>Ultimately this build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
+    <i>This build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
@@ -117,6 +117,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
+## 7.12
+
+-   You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
+    There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.extrathemenames).
+
 ## 7.9
 
 -   Separate script for copying the default theme static assets to the public directory.  

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "7.11.10",
+    "version": "7.12.0",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

src/account/kcContext/KcContext.ts

@@ -8,6 +8,7 @@ export declare namespace KcContext {
     export type Common = {
         keycloakifyVersion: string;
         themeType: "account";
+        themeName: string;
         locale?: {
             supported: {
                 url: string;

src/account/kcContext/kcContextMocks.ts

@@ -9,6 +9,7 @@ const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
     "themeType": "account",
+    "themeName": "my-theme-name",
     "url": {
         "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
         "resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),

src/bin/keycloakify/BuildOptions.ts

@@ -16,6 +16,7 @@ export namespace BuildOptions {
         isSilent: boolean;
         themeVersion: string;
         themeName: string;
+        extraThemeNames: string[];
         extraLoginPages: string[] | undefined;
         extraAccountPages: string[] | undefined;
         extraThemeProperties?: string[];
@@ -108,8 +109,17 @@ export function readBuildOptions(params: { projectDirPath: string; processArgv:
     const common: BuildOptions.Common = (() => {
         const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
 
-        const { extraPages, extraLoginPages, extraAccountPages, extraThemeProperties, groupId, artifactId, bundler, keycloakVersionDefaultAssets } =
-            keycloakify ?? {};
+        const {
+            extraPages,
+            extraLoginPages,
+            extraAccountPages,
+            extraThemeProperties,
+            groupId,
+            artifactId,
+            bundler,
+            keycloakVersionDefaultAssets,
+            extraThemeNames = []
+        } = keycloakify ?? {};
 
         const themeName =
             keycloakify.themeName ??
@@ -120,6 +130,7 @@ export function readBuildOptions(params: { projectDirPath: string; processArgv:
 
         return {
             themeName,
+            extraThemeNames,
             "bundler": (() => {
                 const { KEYCLOAKIFY_BUNDLER } = process.env;
 

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -122,6 +122,7 @@
     out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
     out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
     out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
+    out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
     out["pageId"] = "${pageId}";
 
     return out;

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -17,6 +17,7 @@ export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.Ex
 
 export namespace BuildOptionsLike {
     export type Common = {
+        themeName: string;
         customUserAttributes: string[];
         themeVersion: string;
     };
@@ -134,7 +135,8 @@ export function generateFtlFilesCodeFactory(params: {
             )
             .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
             .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
-            .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType),
+            .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
+            .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", buildOptions.themeName),
         "<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->": [
             "<#if scripts??>",
             "    <#list scripts as script>",

src/bin/keycloakify/generateJavaStackFiles.ts

@@ -7,6 +7,7 @@ import type { BuildOptions } from "./BuildOptions";
 
 export type BuildOptionsLike = {
     themeName: string;
+    extraThemeNames: string[];
     groupId: string;
     artifactId?: string;
     themeVersion: string;
@@ -26,7 +27,7 @@ export function generateJavaStackFiles(params: {
     jarFilePath: string;
 } {
     const {
-        buildOptions: { groupId, themeName, themeVersion, artifactId },
+        buildOptions: { groupId, themeName, extraThemeNames, themeVersion, artifactId },
         keycloakThemeBuildingDirPath,
         doBundlesEmailTemplate
     } = params;
@@ -67,12 +68,12 @@ export function generateJavaStackFiles(params: {
             Buffer.from(
                 JSON.stringify(
                     {
-                        "themes": [
+                        "themes": [themeName, ...extraThemeNames].map(themeName => [
                             {
                                 "name": themeName,
                                 "types": [...themeTypes, ...(doBundlesEmailTemplate ? ["email"] : [])]
                             }
-                        ]
+                        ])
                     },
                     null,
                     2

src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -6,6 +6,7 @@ import type { BuildOptions } from "./BuildOptions";
 
 export type BuildOptionsLike = {
     themeName: string;
+    extraThemeNames: string[];
 };
 
 {
@@ -27,11 +28,9 @@ export function generateStartKeycloakTestingContainer(params: {
     const {
         keycloakThemeBuildingDirPath,
         keycloakVersion,
-        buildOptions: { themeName }
+        buildOptions: { themeName, extraThemeNames }
     } = params;
 
-    const keycloakThemePath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(/\\/g, "/");
-
     fs.writeFileSync(
         pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename),
 
@@ -49,7 +48,13 @@ export function generateStartKeycloakTestingContainer(params: {
                 "   -e KEYCLOAK_ADMIN=admin \\",
                 "   -e KEYCLOAK_ADMIN_PASSWORD=admin \\",
                 "   -e JAVA_OPTS=-Dkeycloak.profile=preview \\",
-                `   -v "${keycloakThemePath}":"/opt/keycloak/themes/${themeName}":rw \\`,
+                ...[themeName, ...extraThemeNames].map(
+                    themeName =>
+                        `   -v "${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(
+                            /\\/g,
+                            "/"
+                        )}":"/opt/keycloak/themes/${themeName}":rw \\`
+                ),
                 `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
                 `   start-dev`,
                 ""

src/bin/keycloakify/keycloakify.ts

@@ -23,27 +23,38 @@ export async function main() {
     const logger = getLogger({ "isSilent": buildOptions.isSilent });
     logger.log("🔏 Building the keycloak theme...⌚");
 
-    const { doBundlesEmailTemplate } = await generateTheme({
-        keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
-        "emailThemeSrcDirPath": (() => {
-            const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({ projectDirPath });
+    let doBundlesEmailTemplate: boolean | undefined;
 
-            if (emailThemeSrcDirPath === undefined || !fs.existsSync(emailThemeSrcDirPath)) {
-                return;
-            }
+    for (const themeName of [buildOptions.themeName, ...buildOptions.extraThemeNames]) {
+        const { doBundlesEmailTemplate: doBundlesEmailTemplate_ } = await generateTheme({
+            keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
+            "emailThemeSrcDirPath": (() => {
+                const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({ projectDirPath });
 
-            return emailThemeSrcDirPath;
-        })(),
-        "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
-        buildOptions,
-        "keycloakifyVersion": (() => {
-            const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
+                if (emailThemeSrcDirPath === undefined || !fs.existsSync(emailThemeSrcDirPath)) {
+                    return;
+                }
 
-            assert(typeof version === "string");
+                return emailThemeSrcDirPath;
+            })(),
+            "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
+            "buildOptions": {
+                ...buildOptions,
+                "themeName": themeName
+            },
+            "keycloakifyVersion": (() => {
+                const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
 
-            return version;
-        })()
-    });
+                assert(typeof version === "string");
+
+                return version;
+            })()
+        });
+
+        doBundlesEmailTemplate ??= doBundlesEmailTemplate_;
+    }
+
+    assert(doBundlesEmailTemplate !== undefined);
 
     const { jarFilePath } = generateJavaStackFiles({
         keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,

src/bin/keycloakify/parsedPackageJson.ts

@@ -25,6 +25,7 @@ export type ParsedPackageJson = {
         keycloakifyBuildDirPath?: string;
         customUserAttributes?: string[];
         themeName?: string;
+        extraThemeNames?: string[];
     };
 };
 
@@ -46,7 +47,8 @@ export const zParsedPackageJson = z.object({
             "reactAppBuildDirPath": z.string().optional(),
             "keycloakifyBuildDirPath": z.string().optional(),
             "customUserAttributes": z.array(z.string()).optional(),
-            "themeName": z.string().optional()
+            "themeName": z.string().optional(),
+            "extraThemeNames": z.array(z.string()).optional()
         })
         .optional()
 });

src/login/kcContext/KcContext.ts

@@ -39,6 +39,7 @@ export declare namespace KcContext {
     export type Common = {
         keycloakifyVersion: string;
         themeType: "login";
+        themeName: string;
         url: {
             loginAction: string;
             resourcesPath: string;

src/login/kcContext/kcContextMocks.ts

@@ -105,6 +105,7 @@ const attributesByName = Object.fromEntries(attributes.map(attribute => [attribu
 export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
     "themeType": "login",
+    "themeName": "my-theme-name",
     "url": {
         "loginAction": "#",
         "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
@@ -527,7 +528,7 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         pageId: "saml-post-form.ftl",
         "samlPost": {
-            "url": "https://saml-post-url"
+            "url": ""
         }
     }),
     id<KcContext.LoginPageExpired>({

src/login/pages/SamlPostForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
@@ -9,13 +9,26 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
     const { msgStr, msg } = i18n;
 
     const { samlPost } = kcContext;
+
+    const [htmlFormElement, setHtmlFormElement] = useState<HTMLFormElement | null>(null);
+
     useEffect(() => {
-        document.forms[0].submit();
-    }, [samlPost]);
+        if (htmlFormElement === null) {
+            return;
+        }
+
+        // Storybook
+        if (samlPost.url === "") {
+            alert("In a real Keycloak the user would be redirected immediately");
+            return;
+        }
+
+        htmlFormElement.submit();
+    }, [htmlFormElement]);
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("saml.post-form.title")}>
             <p>{msg("saml.post-form.message")}</p>
-            <form name="saml-post-binding" method="post" action={samlPost.url}>
+            <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement}>
                 {samlPost.SAMLRequest && <input type="hidden" name="SAMLRequest" value={samlPost.SAMLRequest} />}
                 {samlPost.SAMLResponse && <input type="hidden" name="SAMLResponse" value={samlPost.SAMLResponse} />}
                 {samlPost.relayState && <input type="hidden" name="RelayState" value={samlPost.relayState} />}