keycloakify 7.0.0-rc.0 → 7.0.0-rc.12

package/src/bin/eject-keycloak-page.ts

@@ -2,29 +2,55 @@
 
 import { getProjectRoot } from "./tools/getProjectRoot";
 import cliSelect from "cli-select";
-import { loginThemePageIds, type PageId } from "./keycloakify/generateFtl/generateFtl";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./keycloakify/generateFtl/generateFtl";
 import { capitalize } from "tsafe/capitalize";
 import { readFile, writeFile } from "fs/promises";
 import { existsSync } from "fs";
 import { join as pathJoin, relative as pathRelative } from "path";
 import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
 
 (async () => {
     const projectRootDir = getProjectRoot();
 
-    const { value: pageId } = await cliSelect<PageId>({
-        "values": [...loginThemePageIds]
+    console.log("Select a theme type");
+
+    const { value: themeType } = await cliSelect<ThemeType>({
+        "values": [...themeTypes]
     }).catch(() => {
         console.log("Aborting");
 
         process.exit(-1);
     });
 
-    const pageBasename = `${capitalize(kebabCaseToCamelCase(pageId))}.tsx`;
+    console.log("Select a page you would like to eject");
+
+    const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
+        "values": (() => {
+            switch (themeType) {
+                case "login":
+                    return [...loginThemePageIds];
+                case "account":
+                    return [...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        console.log("Aborting");
+
+        process.exit(-1);
+    });
 
-    console.log(pageId);
+    const pageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx");
 
-    const targetFilePath = pathJoin(process.cwd(), "src", "keycloak-theme", "pages", pageBasename);
+    const targetFilePath = pathJoin(process.cwd(), "src", "keycloak-theme", themeType, "pages", pageBasename);
 
     if (existsSync(targetFilePath)) {
         console.log(`${pageId} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`);
@@ -32,7 +58,7 @@ import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
         process.exit(-1);
     }
 
-    writeFile(targetFilePath, await readFile(pathJoin(projectRootDir, "src", "pages", pageBasename)));
+    writeFile(targetFilePath, await readFile(pathJoin(projectRootDir, "src", themeType, "pages", pageBasename)));
 
     console.log(`${pathRelative(process.cwd(), targetFilePath)} created`);
 })();

package/src/bin/initialize-email-theme.ts

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
+import { keycloakThemeEmailDirPath } from "./keycloakify";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { transformCodebase } from "./tools/transformCodebase";
+import { promptKeycloakVersion } from "./promptKeycloakVersion";
+import * as fs from "fs";
+import { getCliOptions } from "./tools/cliOptions";
+import { getLogger } from "./tools/logger";
+
+(async () => {
+    const { isSilent } = getCliOptions(process.argv.slice(2));
+    const logger = getLogger({ isSilent });
+
+    if (fs.existsSync(keycloakThemeEmailDirPath)) {
+        logger.warn(`There is already a ${pathRelative(process.cwd(), keycloakThemeEmailDirPath)} directory in your project. Aborting.`);
+
+        process.exit(-1);
+    }
+
+    const { keycloakVersion } = await promptKeycloakVersion();
+
+    const builtinKeycloakThemeTmpDirPath = pathJoin(keycloakThemeEmailDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
+
+    await downloadBuiltinKeycloakTheme({
+        keycloakVersion,
+        "destDirPath": builtinKeycloakThemeTmpDirPath,
+        isSilent
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
+        "destDirPath": keycloakThemeEmailDirPath
+    });
+
+    {
+        const themePropertyFilePath = pathJoin(keycloakThemeEmailDirPath, "theme.properties");
+
+        fs.writeFileSync(themePropertyFilePath, Buffer.from(`parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`, "utf8"));
+    }
+
+    logger.log(
+        `${pathRelative(process.cwd(), keycloakThemeEmailDirPath)} ready to be customized, feel free to remove every file you do not customize`
+    );
+
+    fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
+})();

package/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -2,8 +2,7 @@
 <#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 (()=>{
 
-    const out = 
-${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+    const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
     out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
     out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
@@ -113,6 +112,13 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
     out["pageId"] = "${pageId}";
 
+    out["url"]["getLogoutUrl"] = function () {
+        <#attempt>
+            return "${url.getLogoutUrl()}";
+        <#recover>
+        </#attempt>
+    };
+
     return out;
 
 })()

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -38,9 +38,9 @@ export const loginThemePageIds = [
     "idp-review-user-profile.ftl"
 ] as const;
 
-export const accountThemePageIds = ["password.ftl"] as const;
+export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;
 
-export type PageId = (typeof loginThemePageIds)[number];
+export type LoginThemePageId = (typeof loginThemePageIds)[number];
 export type AccountThemePageId = (typeof accountThemePageIds)[number];
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;

package/src/bin/keycloakify/generateKeycloakThemeResources.ts

@@ -3,7 +3,7 @@ import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename } from "path";
 import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFromStaticInJsCode";
 import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, loginThemePageIds, themeTypes, ThemeType } from "./generateFtl";
+import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "./generateFtl";
 import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
 import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
 import { isInside } from "../tools/isInside";
@@ -72,10 +72,6 @@ export async function generateKeycloakThemeResources(params: {
     let generateFtlFilesCode_glob: ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"] | undefined = undefined;
 
     for (const themeType of themeTypes) {
-        if (themeType === "account") {
-            continue;
-        }
-
         const themeDirPath = getThemeDirPath(themeType);
 
         copy_app_resources_to_theme_path: {
@@ -155,7 +151,24 @@ export async function generateKeycloakThemeResources(params: {
             return generateFtlFilesCode;
         })();
 
-        [...loginThemePageIds, ...(buildOptions.extraLoginPages ?? [])].forEach(pageId => {
+        [
+            ...(() => {
+                switch (themeType) {
+                    case "login":
+                        return loginThemePageIds;
+                    case "account":
+                        return accountThemePageIds;
+                }
+            })(),
+            ...((() => {
+                switch (themeType) {
+                    case "login":
+                        return buildOptions.extraLoginPages;
+                    case "account":
+                        return buildOptions.extraAccountPages;
+                }
+            })() ?? [])
+        ].forEach(pageId => {
             const { ftlCode } = generateFtlFilesCode({ pageId });
 
             fs.mkdirSync(themeDirPath, { "recursive": true });

package/src/bin/keycloakify/keycloakify.ts

@@ -1,6 +1,6 @@
 import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
 import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
+import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
 import * as child_process from "child_process";
 import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTestingContainer";
 import * as fs from "fs";
@@ -14,7 +14,7 @@ import type { Equals } from "tsafe";
 const reactProjectDirPath = process.cwd();
 
 export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
-export const keycloakThemeEmailDirPath = pathJoin(keycloakThemeBuildingDirPath, "..", "keycloak_email");
+export const keycloakThemeEmailDirPath = pathJoin(reactProjectDirPath, "src", "keycloak-theme", "email");
 
 export async function main() {
     const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));
@@ -42,7 +42,7 @@ export async function main() {
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
         buildOptions,
         //We have to leave it at that otherwise we break our default theme.
-        //Problem is that we can't guarantee that the the old resources
+        //Problem is that we can`t guarantee that the the old resources
         //will still be available on the newer keycloak version.
         "keycloakVersion": "11.0.3"
     });
@@ -121,19 +121,27 @@ export async function main() {
             "",
             `To test your theme locally you can spin up a Keycloak ${containerKeycloakVersion} container image with the theme pre loaded by running:`,
             "",
-            `👉 $ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename))} 👈`,
+            `👉 $ .${pathSep}${pathRelative(
+                reactProjectDirPath,
+                pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename)
+            )} 👈`,
             "",
-            "Test with different Keycloak versions by editing the .sh file. see available versions here: https://quay.io/repository/keycloak/keycloak?tab=tags",
-            "",
-            "Once your container is up and running: ",
+            `Test with different Keycloak versions by editing the .sh file. see available versions here: https://quay.io/repository/keycloak/keycloak?tab=tags`,
+            ``,
+            `Once your container is up and running: `,
             "- Log into the admin console 👉 http://localhost:8080/admin username: admin, password: admin 👈",
-            '- Create a realm named "myrealm"',
-            '- Create a client with ID: "myclient", "Root URL": "https://www.keycloak.org/app/" and "Valid redirect URIs": "https://www.keycloak.org/app/*"',
-            `- Select Login Theme: ${buildOptions.themeName} (don't forget to save at the bottom of the page)`,
+            `- Create a realm named     "myrealm"`,
+            `- Create a client with ID: "myclient"`,
+            `  Root URL:                        https://www.keycloak.org/app/`,
+            `  Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost isn't necessary here but it will be once you'll want to test the integration with your app)`,
+            `  Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
+            `  Web origins:                     *`,
+            `  Login Theme: ${buildOptions.themeName}`,
+            `  Click save at the bottom of the page.`,
             `- Go to 👉 https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
-            "",
-            "Video demoing this process: https://youtu.be/N3wlBoH4hKg",
-            ""
+            ``,
+            `Video demoing this process: https://youtu.be/N3wlBoH4hKg`,
+            ``
         ].join("\n")
     );
 }

package/src/bin/tools/crc32.ts

@@ -42,6 +42,7 @@ export function crc32(input: Readable | String | Buffer): Promise<number> {
     } else if (input instanceof Readable) {
         return new Promise<number>((resolve, reject) => {
             let crc = ~0;
+            input.setMaxListeners(Infinity);
             input.on("end", () => resolve((crc ^ -1) >>> 0));
             input.on("error", e => reject(e));
             input.on("data", (chunk: Buffer) => {

package/src/bin/tools/kebabCaseToSnakeCase.ts

@@ -3,5 +3,5 @@ import { capitalize } from "tsafe/capitalize";
 export function kebabCaseToCamelCase(kebabCaseString: string): string {
     const [first, ...rest] = kebabCaseString.split("-");
 
-    return [first, rest.map(capitalize)].join("");
+    return [first, ...rest.map(capitalize)].join("");
 }

package/src/index.ts

@@ -1,10 +1 @@
-import Fallback from "keycloakify/Fallback";
-
-export default Fallback;
-
 export { createKeycloakAdapter } from "keycloakify/lib/keycloakJsAdapter";
-export { useDownloadTerms } from "keycloakify/lib/useDownloadTerms";
-export { getKcContext } from "keycloakify/kcContext/getKcContext";
-export { createUseI18n } from "keycloakify/i18n/i18n";
-
-export type { PageProps } from "keycloakify/pages/PageProps";

package/src/lib/useGetClassName.ts

@@ -1,15 +1,18 @@
 import { clsx } from "keycloakify/tools/clsx";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 
-export function useGetClassName<ClassKey extends string>(params: {
-    defaultClasses?: Record<ClassKey, string | undefined>;
-    classes?: Partial<Record<ClassKey, string>>;
-}) {
-    const { defaultClasses, classes } = params;
+export function createUseClassName<ClassKey extends string>(params: { defaultClasses: Record<ClassKey, string | undefined> }) {
+    const { defaultClasses } = params;
 
-    const getClassName = useConstCallback((classKey: ClassKey): string => {
-        return clsx(classKey, defaultClasses?.[classKey], classes?.[classKey]);
-    });
+    function useGetClassName(params: { doUseDefaultCss: boolean; classes: Partial<Record<ClassKey, string>> | undefined }) {
+        const { classes } = params;
 
-    return { getClassName };
+        const getClassName = useConstCallback((classKey: ClassKey): string => {
+            return clsx(classKey, defaultClasses[classKey], classes?.[classKey]);
+        });
+
+        return { getClassName };
+    }
+
+    return { useGetClassName };
 }

package/src/lib/usePrepareTemplate.ts

@@ -1,7 +1,7 @@
 import { useReducer, useEffect } from "react";
-import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../bin/tools/pathJoin";
-import { clsx } from "../tools/clsx";
+import { headInsert } from "keycloakify/tools/headInsert";
+import { pathJoin } from "keycloakify/bin/tools/pathJoin";
+import { clsx } from "keycloakify/tools/clsx";
 
 export function usePrepareTemplate(params: {
     doFetchDefaultThemeResources: boolean;
@@ -12,9 +12,10 @@ export function usePrepareTemplate(params: {
         resourcesCommonPath: string;
         resourcesPath: string;
     };
-    htmlClassName: string;
+    htmlClassName: string | undefined;
+    bodyClassName: string | undefined;
 }) {
-    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, htmlClassName } = params;
+    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, htmlClassName, bodyClassName } = params;
 
     const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
 
@@ -58,17 +59,35 @@ export function usePrepareTemplate(params: {
         };
     }, []);
 
+    useSetClassName({
+        "target": "html",
+        "className": htmlClassName
+    });
+
+    useSetClassName({
+        "target": "body",
+        "className": bodyClassName
+    });
+
+    return { isReady };
+}
+
+function useSetClassName(params: { target: "html" | "body"; className: string | undefined }) {
+    const { target, className } = params;
+
     useEffect(() => {
-        const htmlClassList = document.getElementsByTagName("html")[0].classList;
+        if (className === undefined) {
+            return;
+        }
+
+        const htmlClassList = document.getElementsByTagName(target)[0].classList;
 
-        const tokens = clsx(htmlClassName).split(" ");
+        const tokens = clsx(className).split(" ");
 
         htmlClassList.add(...tokens);
 
         return () => {
             htmlClassList.remove(...tokens);
         };
-    }, [htmlClassName]);
-
-    return { isReady };
+    }, [className]);
 }

package/src/login/Fallback.tsx

@@ -0,0 +1,83 @@
+import { lazy, Suspense } from "react";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { assert, type Equals } from "tsafe/assert";
+import type { I18n } from "./i18n";
+import type { KcContext } from "./kcContext";
+
+const Login = lazy(() => import("keycloakify/login/pages/Login"));
+const Register = lazy(() => import("keycloakify/login/pages/Register"));
+const RegisterUserProfile = lazy(() => import("keycloakify/login/pages/RegisterUserProfile"));
+const Info = lazy(() => import("keycloakify/login/pages/Info"));
+const Error = lazy(() => import("keycloakify/login/pages/Error"));
+const LoginResetPassword = lazy(() => import("keycloakify/login/pages/LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("keycloakify/login/pages/LoginVerifyEmail"));
+const Terms = lazy(() => import("keycloakify/login/pages/Terms"));
+const LoginOtp = lazy(() => import("keycloakify/login/pages/LoginOtp"));
+const LoginPassword = lazy(() => import("keycloakify/login/pages/LoginPassword"));
+const LoginUsername = lazy(() => import("keycloakify/login/pages/LoginUsername"));
+const WebauthnAuthenticate = lazy(() => import("keycloakify/login/pages/WebauthnAuthenticate"));
+const LoginUpdatePassword = lazy(() => import("keycloakify/login/pages/LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("keycloakify/login/pages/LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("keycloakify/login/pages/LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("keycloakify/login/pages/LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("keycloakify/login/pages/LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("keycloakify/login/pages/LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("keycloakify/login/pages/LogoutConfirm"));
+const UpdateUserProfile = lazy(() => import("keycloakify/login/pages/UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("keycloakify/login/pages/IdpReviewUserProfile"));
+
+export default function Fallback(props: PageProps<KcContext, I18n>) {
+    const { kcContext, ...rest } = props;
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "login.ftl":
+                        return <Login kcContext={kcContext} {...rest} />;
+                    case "register.ftl":
+                        return <Register kcContext={kcContext} {...rest} />;
+                    case "register-user-profile.ftl":
+                        return <RegisterUserProfile kcContext={kcContext} {...rest} />;
+                    case "info.ftl":
+                        return <Info kcContext={kcContext} {...rest} />;
+                    case "error.ftl":
+                        return <Error kcContext={kcContext} {...rest} />;
+                    case "login-reset-password.ftl":
+                        return <LoginResetPassword kcContext={kcContext} {...rest} />;
+                    case "login-verify-email.ftl":
+                        return <LoginVerifyEmail kcContext={kcContext} {...rest} />;
+                    case "terms.ftl":
+                        return <Terms kcContext={kcContext} {...rest} />;
+                    case "login-otp.ftl":
+                        return <LoginOtp kcContext={kcContext} {...rest} />;
+                    case "login-username.ftl":
+                        return <LoginUsername kcContext={kcContext} {...rest} />;
+                    case "login-password.ftl":
+                        return <LoginPassword kcContext={kcContext} {...rest} />;
+                    case "webauthn-authenticate.ftl":
+                        return <WebauthnAuthenticate kcContext={kcContext} {...rest} />;
+                    case "login-update-password.ftl":
+                        return <LoginUpdatePassword kcContext={kcContext} {...rest} />;
+                    case "login-update-profile.ftl":
+                        return <LoginUpdateProfile kcContext={kcContext} {...rest} />;
+                    case "login-idp-link-confirm.ftl":
+                        return <LoginIdpLinkConfirm kcContext={kcContext} {...rest} />;
+                    case "login-idp-link-email.ftl":
+                        return <LoginIdpLinkEmail kcContext={kcContext} {...rest} />;
+                    case "login-page-expired.ftl":
+                        return <LoginPageExpired kcContext={kcContext} {...rest} />;
+                    case "login-config-totp.ftl":
+                        return <LoginConfigTotp kcContext={kcContext} {...rest} />;
+                    case "logout-confirm.ftl":
+                        return <LogoutConfirm kcContext={kcContext} {...rest} />;
+                    case "update-user-profile.ftl":
+                        return <UpdateUserProfile kcContext={kcContext} {...rest} />;
+                    case "idp-review-user-profile.ftl":
+                        return <IdpReviewUserProfile kcContext={kcContext} {...rest} />;
+                }
+                assert<Equals<typeof kcContext, never>>(false);
+            })()}
+        </Suspense>
+    );
+}