keycloakify 10.0.0-rc.7 → 10.0.0-rc.70

package/src/bin/eject-page.ts

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./shared/constants";
+import { capitalize } from "tsafe/capitalize";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+import type { CliCommandOptions } from "./main";
+import { getBuildContext } from "./shared/buildContext";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({
+        cliCommandOptions
+    });
+
+    console.log(chalk.cyan("Theme type:"));
+
+    const { value: themeType } = await cliSelect<ThemeType>({
+        values: [...themeTypes]
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan("Select the page you want to customize:"));
+
+    const templateValue = "Template.tsx (Layout common to every page)";
+    const userProfileFormFieldsValue =
+        "UserProfileFormFields.tsx (Renders the form of the register.ftl, login-update-profile.ftl, update-email.ftl and idp-review-user-profile.ftl)";
+
+    const { value: pageIdOrComponent } = await cliSelect<
+        | LoginThemePageId
+        | AccountThemePageId
+        | typeof templateValue
+        | typeof userProfileFormFieldsValue
+    >({
+        values: (() => {
+            switch (themeType) {
+                case "login":
+                    return [
+                        templateValue,
+                        userProfileFormFieldsValue,
+                        ...loginThemePageIds
+                    ];
+                case "account":
+                    return [templateValue, ...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageIdOrComponent}`);
+
+    const componentBasename = (() => {
+        if (pageIdOrComponent === templateValue) {
+            return "Template.tsx";
+        }
+
+        if (pageIdOrComponent === userProfileFormFieldsValue) {
+            return "UserProfileFormFields.tsx";
+        }
+
+        return capitalize(kebabCaseToCamelCase(pageIdOrComponent)).replace(/ftl$/, "tsx");
+    })();
+
+    const pagesOrDot = (() => {
+        if (
+            pageIdOrComponent === templateValue ||
+            pageIdOrComponent === userProfileFormFieldsValue
+        ) {
+            return ".";
+        }
+
+        return "pages";
+    })();
+
+    const targetFilePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        themeType,
+        pagesOrDot,
+        componentBasename
+    );
+
+    if (fs.existsSync(targetFilePath)) {
+        console.log(
+            `${pageIdOrComponent} is already ejected, ${pathRelative(
+                process.cwd(),
+                targetFilePath
+            )} already exists`
+        );
+
+        process.exit(-1);
+    }
+
+    const componentCode = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                themeType,
+                pagesOrDot,
+                componentBasename
+            )
+        )
+        .toString("utf8");
+
+    {
+        const targetDirPath = pathDirname(targetFilePath);
+
+        if (!fs.existsSync(targetDirPath)) {
+            fs.mkdirSync(targetDirPath, { recursive: true });
+        }
+    }
+
+    fs.writeFileSync(targetFilePath, Buffer.from(componentCode, "utf8"));
+
+    console.log(
+        `${chalk.green("✓")} ${chalk.bold(
+            pathJoin(".", pathRelative(process.cwd(), targetFilePath))
+        )} copy pasted from the Keycloakify source code into your project`
+    );
+
+    edit_KcApp: {
+        if (
+            pageIdOrComponent !== templateValue &&
+            pageIdOrComponent !== userProfileFormFieldsValue
+        ) {
+            break edit_KcApp;
+        }
+
+        const kcAppTsxPath = pathJoin(
+            buildContext.themeSrcDirPath,
+            themeType,
+            "KcPage.tsx"
+        );
+
+        const kcAppTsxCode = fs.readFileSync(kcAppTsxPath).toString("utf8");
+
+        const modifiedKcAppTsxCode = (() => {
+            switch (pageIdOrComponent) {
+                case templateValue:
+                    return kcAppTsxCode.replace(
+                        `keycloakify/${themeType}/Template`,
+                        "./Template"
+                    );
+                case userProfileFormFieldsValue:
+                    return kcAppTsxCode.replace(
+                        `keycloakify/login/UserProfileFormFields`,
+                        "./UserProfileFormFields"
+                    );
+            }
+            assert<Equals<typeof pageIdOrComponent, never>>(false);
+        })();
+
+        if (kcAppTsxCode === modifiedKcAppTsxCode) {
+            console.log(
+                chalk.red(
+                    "Unable to automatically update KcPage.tsx, please update it manually"
+                )
+            );
+            return;
+        }
+
+        fs.writeFileSync(kcAppTsxPath, Buffer.from(modifiedKcAppTsxCode, "utf8"));
+
+        console.log(
+            `${chalk.green("✓")} ${chalk.bold(
+                pathJoin(".", pathRelative(process.cwd(), kcAppTsxPath))
+            )} Updated`
+        );
+
+        return;
+    }
+
+    const userProfileFormFieldComponentName = "UserProfileFormFields";
+
+    console.log(
+        [
+            ``,
+            `You now need to update your page router:`,
+            ``,
+            `${chalk.bold(
+                pathJoin(
+                    ".",
+                    pathRelative(process.cwd(), buildContext.themeSrcDirPath),
+                    themeType,
+                    "KcPage.tsx"
+                )
+            )}:`,
+            chalk.grey("```"),
+            `// ...`,
+            ``,
+            chalk.green(
+                `+const ${componentBasename.replace(
+                    /.tsx$/,
+                    ""
+                )} = lazy(() => import("./pages/${componentBasename}"));`
+            ),
+            ...[
+                ``,
+                ` export default function KcPage(props: { kcContext: KcContext; }) {`,
+                ``,
+                `     // ...`,
+                ``,
+                `     return (`,
+                `         <Suspense>`,
+                `             {(() => {`,
+                `                 switch (kcContext.pageId) {`,
+                `                     // ...`,
+                `+                    case "${pageIdOrComponent}": return (`,
+                `+                        <${componentBasename}`,
+                `+                            {...{ kcContext, i18n, classes }}`,
+                `+                            Template={Template}`,
+                `+                            doUseDefaultCss={true}`,
+                ...(!componentCode.includes(userProfileFormFieldComponentName)
+                    ? []
+                    : [
+                          `+                            ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`,
+                          `+                            doMakeUserConfirmPassword={doMakeUserConfirmPassword}`
+                      ]),
+                `+                        />`,
+                `+                    );`,
+                `                     default: return <Fallback /* .. */ />;`,
+                `                 }`,
+                `             })()}`,
+                `         </Suspense>`,
+                `     );`,
+                ` }`
+            ].map(line => {
+                if (line.startsWith("+")) {
+                    return chalk.green(line);
+                }
+                if (line.startsWith("-")) {
+                    return chalk.red(line);
+                }
+                return chalk.grey(line);
+            }),
+            chalk.grey("```")
+        ].join("\n")
+    );
+}

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

@@ -1,26 +1,25 @@
-import { downloadBuiltinKeycloakTheme } from "./shared/downloadBuiltinKeycloakTheme";
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
 import { join as pathJoin, relative as pathRelative } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
 import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
-import { readBuildOptions } from "./shared/buildOptions";
+import { getBuildContext } from "./shared/buildContext";
 import * as fs from "fs";
-import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
-import { rmSync } from "./tools/fs.rmSync";
 import type { CliCommandOptions } from "./main";
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
     const { cliCommandOptions } = params;
 
-    const buildOptions = readBuildOptions({ cliCommandOptions });
+    const buildContext = getBuildContext({ cliCommandOptions });
 
-    const { themeSrcDirPath } = getThemeSrcDirPath({
-        "reactAppRootDirPath": buildOptions.reactAppRootDirPath
-    });
-
-    const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
+    const emailThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "email");
 
     if (fs.existsSync(emailThemeSrcDirPath)) {
-        console.warn(`There is already a ${pathRelative(process.cwd(), emailThemeSrcDirPath)} directory in your project. Aborting.`);
+        console.warn(
+            `There is already a ${pathRelative(
+                process.cwd(),
+                emailThemeSrcDirPath
+            )} directory in your project. Aborting.`
+        );
 
         process.exit(-1);
     }
@@ -29,33 +28,38 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const { keycloakVersion } = await promptKeycloakVersion({
         // NOTE: This is arbitrary
-        "startingFromMajor": 17,
-        "cacheDirPath": buildOptions.cacheDirPath
+        startingFromMajor: 17,
+        excludeMajorVersions: [],
+        cacheDirPath: buildContext.cacheDirPath
     });
 
-    const builtinKeycloakThemeTmpDirPath = pathJoin(buildOptions.cacheDirPath, "initialize-email-theme_tmp");
-
-    rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
-
-    await downloadBuiltinKeycloakTheme({
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
         keycloakVersion,
-        "destDirPath": builtinKeycloakThemeTmpDirPath,
-        buildOptions
+        buildContext
     });
 
     transformCodebase({
-        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
-        "destDirPath": emailThemeSrcDirPath
+        srcDirPath: pathJoin(defaultThemeDirPath, "base", "email"),
+        destDirPath: emailThemeSrcDirPath
     });
 
     {
         const themePropertyFilePath = pathJoin(emailThemeSrcDirPath, "theme.properties");
 
-        fs.writeFileSync(themePropertyFilePath, Buffer.from(`parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`, "utf8"));
+        fs.writeFileSync(
+            themePropertyFilePath,
+            Buffer.from(
+                `parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`,
+                "utf8"
+            )
+        );
     }
 
-    console.log(`The \`${pathJoin(".", pathRelative(process.cwd(), emailThemeSrcDirPath))}\` directory have been created.`);
+    console.log(
+        `The \`${pathJoin(
+            ".",
+            pathRelative(process.cwd(), emailThemeSrcDirPath)
+        )}\` directory have been created.`
+    );
     console.log("You can delete any file you don't modify.");
-
-    rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true });
 }

package/src/bin/keycloakify/buildJars/buildJar.ts

@@ -1,18 +1,24 @@
 import { assert, type Equals } from "tsafe/assert";
-import type { KeycloakAccountV1Version, KeycloakThemeAdditionalInfoExtensionVersion } from "./extensionVersions";
+import type {
+    KeycloakAccountV1Version,
+    KeycloakThemeAdditionalInfoExtensionVersion
+} from "./extensionVersions";
 import { join as pathJoin, dirname as pathDirname } from "path";
 import { transformCodebase } from "../../tools/transformCodebase";
-import type { BuildOptions } from "../../shared/buildOptions";
+import type { BuildContext } from "../../shared/buildContext";
 import * as fs from "fs/promises";
 import { accountV1ThemeName } from "../../shared/constants";
-import { generatePom, BuildOptionsLike as BuildOptionsLike_generatePom } from "./generatePom";
+import {
+    generatePom,
+    BuildContextLike as BuildContextLike_generatePom
+} from "./generatePom";
 import { readFileSync } from "fs";
 import { isInside } from "../../tools/isInside";
 import child_process from "child_process";
 import { rmSync } from "../../tools/fs.rmSync";
-import { getMetaInfKeycloakThemesJsonPath } from "../../shared/metaInfKeycloakThemes";
+import { writeMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
 
-export type BuildOptionsLike = BuildOptionsLike_generatePom & {
+export type BuildContextLike = BuildContextLike_generatePom & {
     keycloakifyBuildDirPath: string;
     themeNames: string[];
     artifactId: string;
@@ -20,65 +26,97 @@ export type BuildOptionsLike = BuildOptionsLike_generatePom & {
     cacheDirPath: string;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export async function buildJar(params: {
     jarFileBasename: string;
     keycloakAccountV1Version: KeycloakAccountV1Version;
     keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
-    buildOptions: BuildOptionsLike;
+    resourcesDirPath: string;
+    buildContext: BuildContextLike;
 }): Promise<void> {
-    const { jarFileBasename, keycloakAccountV1Version, keycloakThemeAdditionalInfoExtensionVersion, buildOptions } = params;
-
-    const keycloakifyBuildTmpDirPath = pathJoin(buildOptions.cacheDirPath, jarFileBasename.replace(".jar", ""));
-
-    rmSync(keycloakifyBuildTmpDirPath, { "recursive": true, "force": true });
-
-    {
-        const keycloakThemesJsonFilePath = getMetaInfKeycloakThemesJsonPath({ "keycloakifyBuildDirPath": "" });
-
-        const themePropertiesFilePathSet = new Set(
-            ...buildOptions.themeNames.map(themeName => pathJoin("src", "main", "resources", "theme", themeName, "account", "theme.properties"))
-        );
+    const {
+        jarFileBasename,
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        resourcesDirPath,
+        buildContext
+    } = params;
+
+    const keycloakifyBuildTmpDirPath = pathJoin(
+        buildContext.cacheDirPath,
+        jarFileBasename.replace(".jar", "")
+    );
 
-        const accountV1RelativeDirPath = pathJoin("src", "main", "resources", "theme", accountV1ThemeName);
+    rmSync(keycloakifyBuildTmpDirPath, { recursive: true, force: true });
 
-        transformCodebase({
-            "srcDirPath": buildOptions.keycloakifyBuildDirPath,
-            "destDirPath": keycloakifyBuildTmpDirPath,
-            "transformSourceCode":
-                keycloakAccountV1Version !== null
-                    ? undefined
-                    : ({ fileRelativePath, sourceCode }) => {
-                          if (fileRelativePath === keycloakThemesJsonFilePath) {
-                              const keycloakThemesJsonParsed = JSON.parse(sourceCode.toString("utf8")) as {
-                                  themes: { name: string; types: string[] }[];
-                              };
+    const tmpResourcesDirPath = pathJoin(
+        keycloakifyBuildTmpDirPath,
+        "src",
+        "main",
+        "resources"
+    );
 
-                              keycloakThemesJsonParsed.themes = keycloakThemesJsonParsed.themes.filter(({ name }) => name !== accountV1ThemeName);
+    transformCodebase({
+        srcDirPath: resourcesDirPath,
+        destDirPath: tmpResourcesDirPath,
+        transformSourceCode:
+            keycloakAccountV1Version !== null
+                ? undefined
+                : (params: {
+                      fileRelativePath: string;
+                      sourceCode: Buffer;
+                  }): { modifiedSourceCode: Buffer } | undefined => {
+                      const { fileRelativePath, sourceCode } = params;
+
+                      if (
+                          isInside({
+                              dirPath: pathJoin("theme", accountV1ThemeName),
+                              filePath: fileRelativePath
+                          })
+                      ) {
+                          return undefined;
+                      }
 
-                              return { "modifiedSourceCode": Buffer.from(JSON.stringify(keycloakThemesJsonParsed, null, 2), "utf8") };
+                      for (const themeName of buildContext.themeNames) {
+                          if (
+                              fileRelativePath ===
+                              pathJoin("theme", themeName, "account", "theme.properties")
+                          ) {
+                              const modifiedSourceCode = Buffer.from(
+                                  sourceCode
+                                      .toString("utf8")
+                                      .replace(
+                                          `parent=${accountV1ThemeName}`,
+                                          "parent=keycloak"
+                                      ),
+                                  "utf8"
+                              );
+
+                              assert(
+                                  Buffer.compare(modifiedSourceCode, sourceCode) !== 0
+                              );
+
+                              return { modifiedSourceCode };
                           }
+                      }
 
-                          if (isInside({ "dirPath": "target", "filePath": fileRelativePath })) {
-                              return undefined;
-                          }
+                      return { modifiedSourceCode: sourceCode };
+                  }
+    });
 
-                          if (isInside({ "dirPath": accountV1RelativeDirPath, "filePath": fileRelativePath })) {
-                              return undefined;
-                          }
+    if (keycloakAccountV1Version === null) {
+        writeMetaInfKeycloakThemes({
+            resourcesDirPath: tmpResourcesDirPath,
+            getNewMetaInfKeycloakTheme: ({ metaInfKeycloakTheme }) => {
+                assert(metaInfKeycloakTheme !== undefined);
 
-                          if (themePropertiesFilePathSet.has(fileRelativePath)) {
-                              return {
-                                  "modifiedSourceCode": Buffer.from(
-                                      sourceCode.toString("utf8").replace(`parent=${accountV1ThemeName}`, "parent=keycloak"),
-                                      "utf8"
-                                  )
-                              };
-                          }
+                metaInfKeycloakTheme.themes = metaInfKeycloakTheme.themes.filter(
+                    ({ name }) => name !== accountV1ThemeName
+                );
 
-                          return { "modifiedSourceCode": sourceCode };
-                      }
+                return metaInfKeycloakTheme;
+            }
         });
     }
 
@@ -102,8 +140,17 @@ export async function buildJar(params: {
         }
 
         (["register.ftl", "login-update-profile.ftl"] as const).forEach(pageId =>
-            buildOptions.themeNames.map(themeName => {
-                const ftlFilePath = pathJoin(keycloakifyBuildTmpDirPath, "src", "main", "resources", "theme", themeName, "login", pageId);
+            buildContext.themeNames.map(themeName => {
+                const ftlFilePath = pathJoin(
+                    keycloakifyBuildTmpDirPath,
+                    "src",
+                    "main",
+                    "resources",
+                    "theme",
+                    themeName,
+                    "login",
+                    pageId
+                );
 
                 const ftlFileContent = readFileSync(ftlFilePath).toString("utf8");
 
@@ -118,53 +165,67 @@ export async function buildJar(params: {
                 })();
 
                 const modifiedFtlFileContent = ftlFileContent.replace(
-                    `out["pageId"] = "\${pageId}";`,
-                    `out["pageId"] = "${pageId}"; out["realPageId"] = "${realPageId}";`
+                    `kcContext.pageId = "\${pageId}";`,
+                    `kcContext.pageId = "${pageId}"; kcContext.realPageId = "${realPageId}";`
                 );
 
                 assert(modifiedFtlFileContent !== ftlFileContent);
 
-                fs.writeFile(pathJoin(pathDirname(ftlFilePath), realPageId), Buffer.from(modifiedFtlFileContent, "utf8"));
+                fs.writeFile(
+                    pathJoin(pathDirname(ftlFilePath), realPageId),
+                    Buffer.from(modifiedFtlFileContent, "utf8")
+                );
             })
         );
     }
 
     {
         const { pomFileCode } = generatePom({
-            buildOptions,
+            buildContext,
             keycloakAccountV1Version,
             keycloakThemeAdditionalInfoExtensionVersion
         });
 
-        await fs.writeFile(pathJoin(keycloakifyBuildTmpDirPath, "pom.xml"), Buffer.from(pomFileCode, "utf8"));
+        await fs.writeFile(
+            pathJoin(keycloakifyBuildTmpDirPath, "pom.xml"),
+            Buffer.from(pomFileCode, "utf8")
+        );
     }
 
     await new Promise<void>((resolve, reject) =>
-        child_process.exec("mvn clean install", { "cwd": keycloakifyBuildTmpDirPath }, error => {
-            if (error !== null) {
-                console.error(
-                    `Build jar failed: ${JSON.stringify(
-                        {
-                            jarFileBasename,
-                            keycloakAccountV1Version,
-                            keycloakThemeAdditionalInfoExtensionVersion
-                        },
-                        null,
-                        2
-                    )}`
-                );
-
-                reject(error);
-                return;
+        child_process.exec(
+            `mvn clean install -Dmaven.repo.local=${pathJoin(keycloakifyBuildTmpDirPath, ".m2")}`,
+            { cwd: keycloakifyBuildTmpDirPath },
+            error => {
+                if (error !== null) {
+                    console.error(
+                        `Build jar failed: ${JSON.stringify(
+                            {
+                                jarFileBasename,
+                                keycloakAccountV1Version,
+                                keycloakThemeAdditionalInfoExtensionVersion
+                            },
+                            null,
+                            2
+                        )}`
+                    );
+
+                    reject(error);
+                    return;
+                }
+                resolve();
             }
-            resolve();
-        })
+        )
     );
 
     await fs.rename(
-        pathJoin(keycloakifyBuildTmpDirPath, "target", `${buildOptions.artifactId}-${buildOptions.themeVersion}.jar`),
-        pathJoin(buildOptions.keycloakifyBuildDirPath, jarFileBasename)
+        pathJoin(
+            keycloakifyBuildTmpDirPath,
+            "target",
+            `${buildContext.artifactId}-${buildContext.themeVersion}.jar`
+        ),
+        pathJoin(buildContext.keycloakifyBuildDirPath, jarFileBasename)
     );
 
-    rmSync(keycloakifyBuildTmpDirPath, { "recursive": true });
+    rmSync(keycloakifyBuildTmpDirPath, { recursive: true });
 }