keycloakify 10.0.0-rc.4 → 10.0.0-rc.40

package/src/bin/copy-keycloak-resources-to-public.ts

@@ -1,112 +1,13 @@
-#!/usr/bin/env node
+import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
+import { getBuildContext } from "./shared/buildContext";
+import type { CliCommandOptions } from "./main";
 
-import { downloadKeycloakStaticResources, type BuildOptionsLike } from "./keycloakify/generateTheme/downloadKeycloakStaticResources";
-import { join as pathJoin, relative as pathRelative } from "path";
-import { readBuildOptions } from "./keycloakify/buildOptions";
-import { themeTypes, keycloak_resources, lastKeycloakVersionWithAccountV1 } from "./constants";
-import { readThisNpmProjectVersion } from "./tools/readThisNpmProjectVersion";
-import { assert, type Equals } from "tsafe/assert";
-import * as fs from "fs";
-import { rmSync } from "./tools/fs.rmSync";
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
 
-export async function copyKeycloakResourcesToPublic(params: { processArgv: string[] }) {
-    const { processArgv } = params;
+    const buildContext = getBuildContext({ cliCommandOptions });
 
-    const buildOptions = readBuildOptions({ processArgv });
-
-    const destDirPath = pathJoin(buildOptions.publicDirPath, keycloak_resources);
-
-    const keycloakifyBuildinfoFilePath = pathJoin(destDirPath, "keycloakify.buildinfo");
-
-    const { keycloakifyBuildinfoRaw } = generateKeycloakifyBuildinfoRaw({
-        destDirPath,
-        "keycloakifyVersion": readThisNpmProjectVersion(),
-        buildOptions
-    });
-
-    skip_if_already_done: {
-        if (!fs.existsSync(keycloakifyBuildinfoFilePath)) {
-            break skip_if_already_done;
-        }
-
-        const keycloakifyBuildinfoRaw_previousRun = fs.readFileSync(keycloakifyBuildinfoFilePath).toString("utf8");
-
-        if (keycloakifyBuildinfoRaw_previousRun !== keycloakifyBuildinfoRaw) {
-            break skip_if_already_done;
-        }
-
-        return;
-    }
-
-    rmSync(destDirPath, { "force": true, "recursive": true });
-
-    for (const themeType of themeTypes) {
-        await downloadKeycloakStaticResources({
-            "keycloakVersion": (() => {
-                switch (themeType) {
-                    case "login":
-                        return buildOptions.loginThemeResourcesFromKeycloakVersion;
-                    case "account":
-                        return lastKeycloakVersionWithAccountV1;
-                }
-            })(),
-            themeType,
-            "themeDirPath": destDirPath,
-            buildOptions
-        });
-    }
-
-    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"
-            ].join(" ")
-        )
-    );
-
-    fs.writeFileSync(pathJoin(buildOptions.publicDirPath, keycloak_resources, ".gitignore"), Buffer.from("*", "utf8"));
-
-    fs.writeFileSync(keycloakifyBuildinfoFilePath, Buffer.from(keycloakifyBuildinfoRaw, "utf8"));
-}
-
-export function generateKeycloakifyBuildinfoRaw(params: {
-    destDirPath: string;
-    keycloakifyVersion: string;
-    buildOptions: BuildOptionsLike & {
-        loginThemeResourcesFromKeycloakVersion: string;
-    };
-}) {
-    const { destDirPath, keycloakifyVersion, buildOptions } = params;
-
-    const { cacheDirPath, npmWorkspaceRootDirPath, loginThemeResourcesFromKeycloakVersion, ...rest } = buildOptions;
-
-    assert<Equals<typeof rest, {}>>(true);
-
-    const keycloakifyBuildinfoRaw = JSON.stringify(
-        {
-            keycloakifyVersion,
-            "buildOptions": {
-                loginThemeResourcesFromKeycloakVersion,
-                "cacheDirPath": pathRelative(destDirPath, cacheDirPath),
-                "npmWorkspaceRootDirPath": pathRelative(destDirPath, npmWorkspaceRootDirPath)
-            }
-        },
-        null,
-        2
-    );
-
-    return { keycloakifyBuildinfoRaw };
-}
-
-async function main() {
     await copyKeycloakResourcesToPublic({
-        "processArgv": process.argv.slice(2)
+        buildContext
     });
 }
-
-if (require.main === module) {
-    main();
-}

package/src/bin/download-keycloak-default-theme.ts

@@ -0,0 +1,63 @@
+import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
+import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
+import { getBuildContext } from "./shared/buildContext";
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
+import { transformCodebase } from "./tools/transformCodebase";
+import type { CliCommandOptions } from "./main";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({
+        cliCommandOptions
+    });
+
+    console.log(
+        chalk.cyan(
+            "Select the Keycloak version from which you want to download the builtins theme:"
+        )
+    );
+
+    const { keycloakVersion } = await promptKeycloakVersion({
+        startingFromMajor: undefined,
+        cacheDirPath: buildContext.cacheDirPath
+    });
+
+    console.log(`→ ${keycloakVersion}`);
+
+    const destDirPath = pathJoin(
+        buildContext.keycloakifyBuildDirPath,
+        "src",
+        "main",
+        "resources",
+        "theme"
+    );
+
+    console.log(
+        [
+            `Downloading builtins theme of Keycloak ${keycloakVersion} here:`,
+            `- ${chalk.bold(
+                `.${pathSep}${pathJoin(pathRelative(process.cwd(), destDirPath), "base")}`
+            )}`,
+            `- ${chalk.bold(
+                `.${pathSep}${pathJoin(
+                    pathRelative(process.cwd(), destDirPath),
+                    "keycloak"
+                )}`
+            )}`
+        ].join("\n")
+    );
+
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion,
+        buildContext
+    });
+
+    transformCodebase({
+        srcDirPath: defaultThemeDirPath,
+        destDirPath
+    });
+
+    console.log(chalk.green(`✓ done`));
+}

package/src/bin/eject-page.ts

@@ -0,0 +1,258 @@
+#!/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 { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+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 { themeSrcDirPath } = getThemeSrcDirPath({
+        projectDirPath: buildContext.projectDirPath
+    });
+
+    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(
+        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(themeSrcDirPath, themeType, "KcApp.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 KcApp.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(), themeSrcDirPath),
+                    themeType,
+                    "KcApp.tsx"
+                )
+            )}:`,
+            chalk.grey("```"),
+            `// ...`,
+            ``,
+            chalk.green(
+                `+const ${componentBasename.replace(
+                    /.tsx$/,
+                    ""
+                )} = lazy(() => import("./pages/${componentBasename}"));`
+            ),
+            ...[
+                ``,
+                ` export default function KcApp(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,60 +1,69 @@
-#!/usr/bin/env node
-
-import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
 import { join as pathJoin, relative as pathRelative } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
-import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { readBuildOptions } from "./keycloakify/buildOptions";
+import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
+import { getBuildContext } from "./shared/buildContext";
 import * as fs from "fs";
-import { getLogger } from "./tools/logger";
-import { getThemeSrcDirPath } from "./getThemeSrcDirPath";
-import { rmSync } from "./tools/fs.rmSync";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
 
-export async function main() {
-    const buildOptions = readBuildOptions({
-        "processArgv": process.argv.slice(2)
-    });
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
 
-    const logger = getLogger({ "isSilent": buildOptions.isSilent });
+    const buildContext = getBuildContext({ cliCommandOptions });
 
     const { themeSrcDirPath } = getThemeSrcDirPath({
-        "reactAppRootDirPath": buildOptions.reactAppRootDirPath
+        projectDirPath: buildContext.projectDirPath
     });
 
     const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
 
     if (fs.existsSync(emailThemeSrcDirPath)) {
-        logger.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);
     }
 
-    const { keycloakVersion } = await promptKeycloakVersion();
+    console.log("Initialize with the base email theme from which version of Keycloak?");
 
-    const builtinKeycloakThemeTmpDirPath = pathJoin(emailThemeSrcDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
+    const { keycloakVersion } = await promptKeycloakVersion({
+        // NOTE: This is arbitrary
+        startingFromMajor: 17,
+        cacheDirPath: buildContext.cacheDirPath
+    });
 
-    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"
+            )
+        );
     }
 
-    logger.log(`${pathRelative(process.cwd(), emailThemeSrcDirPath)} ready to be customized, feel free to remove every file you do not customize`);
-
-    rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
-}
-
-if (require.main === module) {
-    main();
+    console.log(
+        `The \`${pathJoin(
+            ".",
+            pathRelative(process.cwd(), emailThemeSrcDirPath)
+        )}\` directory have been created.`
+    );
+    console.log("You can delete any file you don't modify.");
 }