keycloakify 10.1.0-rc.0 → 10.1.0

package/src/bin/keycloakify/keycloakify.ts

@@ -12,6 +12,10 @@ import * as os from "os";
 import { rmSync } from "../tools/fs.rmSync";
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({ cliCommandOptions });
+
     exit_if_maven_not_installed: {
         let commandOutput: Buffer | undefined = undefined;
 
@@ -25,31 +29,44 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             break exit_if_maven_not_installed;
         }
 
-        const installationCommand = (() => {
-            switch (os.platform()) {
-                case "darwin":
-                    return "brew install mvn";
-                case "win32":
-                    return "choco install mvn";
-                case "linux":
-                default:
-                    return "sudo apt-get install mvn";
-            }
-        })();
-
-        console.log(
-            `${chalk.red("Apache Maven required.")} Install it with \`${chalk.bold(
-                installationCommand
-            )}\` (for example)`
-        );
+        if (
+            fs
+                .readFileSync(buildContext.packageJsonFilePath)
+                .toString("utf8")
+                .includes(`"mvn"`)
+        ) {
+            console.log(
+                chalk.red(
+                    [
+                        "Please remove the 'mvn' package from your package.json'dependencies list,",
+                        "reinstall your dependencies and try again.",
+                        "We need the Apache Maven CLI, not this: https://www.npmjs.com/package/mvn"
+                    ].join(" ")
+                )
+            );
+        } else {
+            const installationCommand = (() => {
+                switch (os.platform()) {
+                    case "darwin":
+                        return "brew install mvn";
+                    case "win32":
+                        return "choco install mvn";
+                    case "linux":
+                    default:
+                        return "sudo apt-get install mvn";
+                }
+            })();
+
+            console.log(
+                `${chalk.red("Apache Maven required.")} Install it with \`${chalk.bold(
+                    installationCommand
+                )}\` (for example)`
+            );
+        }
 
         process.exit(1);
     }
 
-    const { cliCommandOptions } = params;
-
-    const buildContext = getBuildContext({ cliCommandOptions });
-
     console.log(
         [
             chalk.cyan(`keycloakify v${readThisNpmPackageVersion()}`),

package/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -1,5 +1,5 @@
 import type { BuildContext } from "../../shared/buildContext";
-import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../shared/constants";
 import { assert } from "tsafe/assert";
 import { posix } from "path";
 
@@ -50,7 +50,7 @@ export function replaceImportsInCssCode(params: {
                             break inline_style_in_html;
                         }
 
-                        return `url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname}")`;
+                        return `url("\${xKeycloakify.resourcesPath}/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}${assetFileAbsoluteUrlPathname}")`;
                     }
 
                     const assetFileRelativeUrlPathname = posix.relative(

package/src/bin/keycloakify/replacers/replaceImportsInJsCode/vite.ts

@@ -1,4 +1,4 @@
-import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../../shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
@@ -85,13 +85,13 @@ export function replaceImportsInJsCode_vite(params: {
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${relativePathOfAssetFile}"`,
-                    `(window.kcContext["x-keycloakify"].resourcesPath.substring(1) + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath.substring(1) + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${relativePathOfAssetFile}")`
                 );
 
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${buildContext.urlPathname ?? "/"}${relativePathOfAssetFile}"`,
-                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${relativePathOfAssetFile}")`
                 );
             });
     }

package/src/bin/keycloakify/replacers/replaceImportsInJsCode/webpack.ts

@@ -1,4 +1,4 @@
-import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } from "../../../shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
@@ -90,7 +90,7 @@ export function replaceImportsInJsCode_webpack(params: {
                 return "${u}";
             })()] = ${
                 isArrowFunction ? `${e} =>` : `function(${e}) { return `
-            } "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${staticDir}${language}/"`
+            } "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${staticDir}${language}/"`
                 .replace(/\s+/g, " ")
                 .trim();
         }
@@ -104,7 +104,7 @@ export function replaceImportsInJsCode_webpack(params: {
                 `[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`,
                 "g"
             ),
-            `window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/${staticDir}`
+            `window.kcContext["x-keycloakify"].resourcesPath + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${staticDir}`
         );
 
     return { fixedJsCode };

package/src/bin/shared/buildContext.ts

@@ -14,8 +14,7 @@ import { assert, type Equals } from "tsafe/assert";
 import * as child_process from "child_process";
 import {
     VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES,
-    BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME,
-    LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT
+    BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME
 } from "./constants";
 import type { KeycloakVersionRange } from "./KeycloakVersionRange";
 import { exclude } from "tsafe";
@@ -33,7 +32,6 @@ export type BuildContext = {
     extraThemeProperties: string[] | undefined;
     groupId: string;
     artifactId: string;
-    loginThemeResourcesFromKeycloakVersion: string;
     projectDirPath: string;
     projectBuildDirPath: string;
     /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
@@ -85,7 +83,6 @@ export type BuildOptions = {
     extraThemeProperties?: string[];
     artifactId?: string;
     groupId?: string;
-    loginThemeResourcesFromKeycloakVersion?: string;
     keycloakifyBuildDirPath?: string;
     kcContextExclusionsFtl?: string;
     startKeycloakOptions?: {
@@ -357,7 +354,6 @@ export function getBuildContext(params: {
                     extraThemeProperties: z.array(z.string()).optional(),
                     artifactId: z.string().optional(),
                     groupId: z.string().optional(),
-                    loginThemeResourcesFromKeycloakVersion: z.string().optional(),
                     keycloakifyBuildDirPath: z.string().optional(),
                     kcContextExclusionsFtl: z.string().optional(),
                     startKeycloakOptions: zStartKeycloakOptions.optional()
@@ -545,9 +541,6 @@ export function getBuildContext(params: {
             process.env.KEYCLOAKIFY_ARTIFACT_ID ??
             buildOptions.artifactId ??
             `${themeNames[0]}-keycloak-theme`,
-        loginThemeResourcesFromKeycloakVersion:
-            buildOptions.loginThemeResourcesFromKeycloakVersion ??
-            LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT,
         projectDirPath,
         projectBuildDirPath,
         keycloakifyBuildDirPath: (() => {

package/src/bin/shared/constants.ts

@@ -1,10 +1,10 @@
-export const KEYCLOAK_RESOURCES = "keycloak-resources";
-export const RESOURCES_COMMON = "resources-common";
-export const LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1 = "21.1.2";
-export const BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR = "dist";
+export const WELL_KNOWN_DIRECTORY_BASE_NAME = {
+    DOT_KEYCLOAKIFY: ".keycloakify",
+    RESOURCES_COMMON: "resources-common",
+    DIST: "dist"
+} as const;
 
 export const THEME_TYPES = ["login", "account"] as const;
-export const ACCOUNT_V1_THEME_NAME = "account-v1";
 
 export type ThemeType = (typeof THEME_TYPES)[number];
 
@@ -71,5 +71,3 @@ export type AccountThemePageId = (typeof ACCOUNT_THEME_PAGE_IDS)[number];
 export const CONTAINER_NAME = "keycloak-keycloakify";
 
 export const FALLBACK_LANGUAGE_TAG = "en";
-
-export const LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT = "24.0.4";

package/src/bin/shared/copyKeycloakResourcesToPublic.ts

@@ -1,44 +1,34 @@
-import {
-    downloadKeycloakStaticResources,
-    type BuildContextLike as BuildContextLike_downloadKeycloakStaticResources
-} from "./downloadKeycloakStaticResources";
-import { join as pathJoin, relative as pathRelative } from "path";
-import {
-    THEME_TYPES,
-    KEYCLOAK_RESOURCES,
-    LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1
-} from "../shared/constants";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../shared/constants";
 import { readThisNpmPackageVersion } from "../tools/readThisNpmPackageVersion";
 import { assert } from "tsafe/assert";
 import * as fs from "fs";
 import { rmSync } from "../tools/fs.rmSync";
 import type { BuildContext } from "./buildContext";
+import { transformCodebase } from "../tools/transformCodebase";
+import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
 
-export type BuildContextLike = BuildContextLike_downloadKeycloakStaticResources & {
-    loginThemeResourcesFromKeycloakVersion: string;
+export type BuildContextLike = {
     publicDirPath: string;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
-export async function copyKeycloakResourcesToPublic(params: {
+export function copyKeycloakResourcesToPublic(params: {
     buildContext: BuildContextLike;
 }) {
     const { buildContext } = params;
 
-    const destDirPath = pathJoin(buildContext.publicDirPath, KEYCLOAK_RESOURCES);
+    const destDirPath = pathJoin(
+        buildContext.publicDirPath,
+        WELL_KNOWN_DIRECTORY_BASE_NAME.DOT_KEYCLOAKIFY
+    );
 
     const keycloakifyBuildinfoFilePath = pathJoin(destDirPath, "keycloakify.buildinfo");
 
     const keycloakifyBuildinfoRaw = JSON.stringify(
         {
-            destDirPath,
-            keycloakifyVersion: readThisNpmPackageVersion(),
-            buildContext: {
-                loginThemeResourcesFromKeycloakVersion: readThisNpmPackageVersion(),
-                cacheDirPath: pathRelative(destDirPath, buildContext.cacheDirPath),
-                fetchOptions: buildContext.fetchOptions
-            }
+            keycloakifyVersion: readThisNpmPackageVersion()
         },
         null,
         2
@@ -62,35 +52,35 @@ export async function copyKeycloakResourcesToPublic(params: {
 
     rmSync(destDirPath, { force: true, recursive: true });
 
+    // NOTE: To remove in a while, remove the legacy keycloak-resources directory
+    rmSync(pathJoin(pathDirname(destDirPath), "keycloak-resources"), {
+        force: true,
+        recursive: true
+    });
+
     fs.mkdirSync(destDirPath, { recursive: true });
 
     fs.writeFileSync(pathJoin(destDirPath, ".gitignore"), Buffer.from("*", "utf8"));
 
-    for (const themeType of THEME_TYPES) {
-        await downloadKeycloakStaticResources({
-            keycloakVersion: (() => {
-                switch (themeType) {
-                    case "login":
-                        return buildContext.loginThemeResourcesFromKeycloakVersion;
-                    case "account":
-                        return LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1;
-                }
-            })(),
-            themeType,
-            themeDirPath: destDirPath,
-            buildContext
-        });
-    }
+    transformCodebase({
+        srcDirPath: pathJoin(
+            getThisCodebaseRootDirPath(),
+            "res",
+            "public",
+            WELL_KNOWN_DIRECTORY_BASE_NAME.DOT_KEYCLOAKIFY
+        ),
+        destDirPath
+    });
 
     fs.writeFileSync(
         pathJoin(destDirPath, "README.txt"),
         Buffer.from(
             // prettier-ignore
             [
-                "This is just a test folder that helps develop",
-                "the login and register page without having to run a Keycloak container\n",
-                "This directory will be automatically excluded from the final build."
-            ].join(" ")
+                "This directory is only used in dev mode by Keycloakify",
+                "It won't be included in your final build.",
+                "Do not modify anything in this directory.",
+            ].join("\n")
         )
     );
 

package/src/bin/start-keycloak/start-keycloak.ts

@@ -2,7 +2,7 @@ import { getBuildContext } from "../shared/buildContext";
 import { exclude } from "tsafe/exclude";
 import type { CliCommandOptions as CliCommandOptions_common } from "../main";
 import { promptKeycloakVersion } from "../shared/promptKeycloakVersion";
-import { ACCOUNT_V1_THEME_NAME, CONTAINER_NAME } from "../shared/constants";
+import { CONTAINER_NAME } from "../shared/constants";
 import { SemVer } from "../tools/SemVer";
 import { assert, type Equals } from "tsafe/assert";
 import * as fs from "fs";
@@ -409,13 +409,9 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         ...[
             ...buildContext.themeNames,
             ...(fs.existsSync(
-                pathJoin(
-                    buildContext.keycloakifyBuildDirPath,
-                    "theme",
-                    ACCOUNT_V1_THEME_NAME
-                )
+                pathJoin(buildContext.keycloakifyBuildDirPath, "theme", "account-v1")
             )
-                ? [ACCOUNT_V1_THEME_NAME]
+                ? ["account-v1"]
                 : [])
         ]
             .map(themeName => ({

package/src/login/KcContext/KcContext.ts

@@ -149,11 +149,6 @@ export declare namespace KcContext {
 
             getFirstError: (...fieldNames: string[]) => string;
         };
-        authenticationSession?: {
-            authSessionId: string;
-            tabId: string;
-            ssoLoginInOtherTabsUrl: string;
-        };
         properties: {};
         "x-keycloakify": {
             messages: Record<string, string>;
@@ -193,7 +188,7 @@ export declare namespace KcContext {
             password?: string;
         };
         usernameHidden?: boolean;
-        social: {
+        social?: {
             displayInfo: boolean;
             providers?: {
                 loginUrl: string;
@@ -213,9 +208,12 @@ export declare namespace KcContext {
             registrationAction: string;
         };
         passwordRequired: boolean;
-        recaptchaRequired: boolean;
+        recaptchaRequired?: boolean;
+        recaptchaVisible?: boolean;
         recaptchaSiteKey?: string;
+        recaptchaAction?: string;
         termsAcceptanceRequired?: boolean;
+        messageHeader?: string;
     };
 
     export type Info = Common & {
@@ -330,7 +328,7 @@ export declare namespace KcContext {
             rememberMe?: string;
         };
         usernameHidden?: boolean;
-        social: Login["social"];
+        social?: Login["social"];
     };
 
     export type LoginPassword = Common & {
@@ -348,9 +346,6 @@ export declare namespace KcContext {
             showTryAnotherWayLink?: boolean;
             attemptedUsername?: string;
         };
-        social: {
-            displayInfo: boolean;
-        };
     };
 
     export type WebauthnAuthenticate = Common & {
@@ -362,13 +357,9 @@ export declare namespace KcContext {
         // I hate this:
         userVerification: UserVerificationRequirement | "not specified";
         rpId: string;
-        createTimeout: string;
+        createTimeout: string | number;
         isUserIdentified: "true" | "false";
         shouldDisplayAuthenticators: boolean;
-        social: {
-            displayInfo: boolean;
-        };
-        login: {};
         realm: {
             password: boolean;
             registrationAllowed: boolean;
@@ -403,7 +394,7 @@ export declare namespace KcContext {
         authenticatorAttachment: string;
         requireResidentKey: string;
         userVerificationRequirement: string;
-        createTimeout: number;
+        createTimeout: number | string;
         excludeCredentialIds: string;
         isSetRetry?: boolean;
         isAppInitiatedAction?: boolean;
@@ -589,7 +580,7 @@ export declare namespace KcContext {
         url: {
             registrationUrl: string;
         };
-        registrationDisabled: boolean;
+        registrationDisabled?: boolean;
         isUserIdentified: boolean | "true" | "false";
         challenge: string;
         userVerification: string;

package/src/login/KcContext/kcContextMocks.ts

@@ -1,8 +1,7 @@
 import "keycloakify/tools/Object.fromEntries";
 import type { KcContext, Attribute } from "./KcContext";
 import {
-    RESOURCES_COMMON,
-    KEYCLOAK_RESOURCES,
+    WELL_KNOWN_DIRECTORY_BASE_NAME,
     type LoginThemePageId
 } from "keycloakify/bin/shared/constants";
 import { id } from "tsafe/id";
@@ -76,7 +75,7 @@ const attributesByName = Object.fromEntries(
     ]).map(attribute => [attribute.name, attribute])
 );
 
-const resourcesPath = `${BASE_URL}${KEYCLOAK_RESOURCES}/login/resources`;
+const resourcesPath = `${BASE_URL}${WELL_KNOWN_DIRECTORY_BASE_NAME.DOT_KEYCLOAKIFY}/login`;
 
 export const kcContextCommonMock: KcContext.Common = {
     themeVersion: "0.0.0",
@@ -86,7 +85,7 @@ export const kcContextCommonMock: KcContext.Common = {
     url: {
         loginAction: "#",
         resourcesPath,
-        resourcesCommonPath: `${resourcesPath}/${RESOURCES_COMMON}`,
+        resourcesCommonPath: `${resourcesPath}/${WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON}`,
         loginRestartFlowUrl: "#",
         loginUrl: "#",
         ssoLoginInOtherTabsUrl: "#"
@@ -327,9 +326,6 @@ export const kcContextMocks = [
         realm: {
             ...kcContextCommonMock.realm,
             resetPasswordAllowed: true
-        },
-        social: {
-            displayInfo: false
         }
     }),
     id<KcContext.WebauthnAuthenticate>({
@@ -349,11 +345,7 @@ export const kcContextMocks = [
         rpId: "",
         createTimeout: "0",
         isUserIdentified: "false",
-        shouldDisplayAuthenticators: false,
-        social: {
-            displayInfo: false
-        },
-        login: {}
+        shouldDisplayAuthenticators: false
     }),
     id<KcContext.LoginUpdatePassword>({
         ...kcContextCommonMock,
@@ -585,7 +577,7 @@ export const kcContextMocks = [
         challenge: "",
         userVerification: "not specified",
         rpId: "",
-        createTimeout: "0",
+        createTimeout: 0,
         authenticators: {
             authenticators: []
         },

package/src/login/Template.tsx

@@ -3,9 +3,8 @@ import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
 import type { TemplateProps } from "keycloakify/login/TemplateProps";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
-import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
-import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import { useStylesAndScripts } from "keycloakify/login/Template.useStylesAndScripts";
 import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
 
@@ -30,7 +29,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { msg, msgStr, getChangeLocaleUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
-    const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext;
+    const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
 
     useEffect(() => {
         document.title = documentTitle ?? msgStr("loginTitle", kcContext.realm.displayName);
@@ -46,71 +45,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         className: bodyClassName ?? kcClsx("kcBodyClass")
     });
 
-    useEffect(() => {
-        const { currentLanguageTag } = locale ?? {};
-
-        if (currentLanguageTag === undefined) {
-            return;
-        }
-
-        const html = document.querySelector("html");
-        assert(html !== null);
-        html.lang = currentLanguageTag;
-    }, []);
-
-    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
-        componentOrHookName: "Template",
-        hrefs: !doUseDefaultCss
-            ? []
-            : [
-                  `${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
-                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
-                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-                  `${url.resourcesCommonPath}/lib/pficon/pficon.css`,
-                  `${url.resourcesPath}/css/login.css`
-              ]
-    });
-
-    const { insertScriptTags } = useInsertScriptTags({
-        componentOrHookName: "Template",
-        scriptTags: [
-            {
-                type: "module",
-                src: `${url.resourcesPath}/js/menu-button-links.js`
-            },
-            ...(authenticationSession === undefined
-                ? []
-                : [
-                      {
-                          type: "module",
-                          textContent: [
-                              `import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
-                              ``,
-                              `checkCookiesAndSetTimer(`,
-                              `  "${authenticationSession.authSessionId}",`,
-                              `  "${authenticationSession.tabId}",`,
-                              `  "${url.ssoLoginInOtherTabsUrl}"`,
-                              `);`
-                          ].join("\n")
-                      } as const
-                  ]),
-            ...scripts.map(
-                script =>
-                    ({
-                        type: "text/javascript",
-                        src: script
-                    }) as const
-            )
-        ]
-    });
-
-    useEffect(() => {
-        if (areAllStyleSheetsLoaded) {
-            insertScriptTags();
-        }
-    }, [areAllStyleSheetsLoaded]);
+    const { isReadyToRender } = useStylesAndScripts({ kcContext, doUseDefaultCss });
 
-    if (!areAllStyleSheetsLoaded) {
+    if (!isReadyToRender) {
         return null;
     }