keycloakify 10.0.0-rc.118 → 10.0.0-rc.119

package/src/bin/initialize-account-theme/initializeAccountTheme_singlePage.ts

@@ -0,0 +1,150 @@
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import type { BuildContext } from "../shared/buildContext";
+import * as fs from "fs";
+import chalk from "chalk";
+import { getLatestsSemVersionedTag } from "../shared/getLatestsSemVersionedTag";
+import fetch from "make-fetch-happen";
+import { z } from "zod";
+import { assert, type Equals } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { id } from "tsafe/id";
+import { npmInstall } from "../tools/npmInstall";
+import { copyBoilerplate } from "./copyBoilerplate";
+import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
+
+type BuildContextLike = {
+    cacheDirPath: string;
+    fetchOptions: BuildContext["fetchOptions"];
+    packageJsonFilePath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function initializeAccountTheme_singlePage(params: {
+    accountThemeSrcDirPath: string;
+    buildContext: BuildContextLike;
+}) {
+    const { accountThemeSrcDirPath, buildContext } = params;
+
+    const OWNER = "keycloakify";
+    const REPO = "keycloak-account-ui";
+
+    const [semVersionedTag] = await getLatestsSemVersionedTag({
+        cacheDirPath: buildContext.cacheDirPath,
+        owner: OWNER,
+        repo: REPO,
+        count: 1,
+        doIgnoreReleaseCandidates: false
+    });
+
+    const dependencies = await fetch(
+        `https://raw.githubusercontent.com/${OWNER}/${REPO}/${semVersionedTag.tag}/dependencies.gen.json`,
+        buildContext.fetchOptions
+    )
+        .then(r => r.json())
+        .then(
+            (() => {
+                type Dependencies = {
+                    dependencies: Record<string, string>;
+                    devDependencies?: Record<string, string>;
+                };
+
+                const zDependencies = (() => {
+                    type TargetType = Dependencies;
+
+                    const zTargetType = z.object({
+                        dependencies: z.record(z.string()),
+                        devDependencies: z.record(z.string()).optional()
+                    });
+
+                    assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+                    return id<z.ZodType<TargetType>>(zTargetType);
+                })();
+
+                return o => zDependencies.parse(o);
+            })()
+        );
+
+    dependencies.dependencies["@keycloakify/keycloak-account-ui"] = semVersionedTag.tag;
+
+    const parsedPackageJson = (() => {
+        type ParsedPackageJson = {
+            dependencies?: Record<string, string>;
+            devDependencies?: Record<string, string>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+                dependencies: z.record(z.string()).optional(),
+                devDependencies: z.record(z.string()).optional()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+        const parsedPackageJson = JSON.parse(
+            fs.readFileSync(buildContext.packageJsonFilePath).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    parsedPackageJson.dependencies = {
+        ...parsedPackageJson.dependencies,
+        ...dependencies.dependencies
+    };
+
+    parsedPackageJson.devDependencies = {
+        ...parsedPackageJson.devDependencies,
+        ...dependencies.devDependencies
+    };
+
+    if (Object.keys(parsedPackageJson.devDependencies).length === 0) {
+        delete parsedPackageJson.devDependencies;
+    }
+
+    fs.writeFileSync(
+        buildContext.packageJsonFilePath,
+        JSON.stringify(parsedPackageJson, undefined, 4)
+    );
+
+    run_npm_install: {
+        if (
+            JSON.parse(
+                fs
+                    .readFileSync(pathJoin(getThisCodebaseRootDirPath(), "package.json"))
+                    .toString("utf8")
+            )["version"] === "0.0.0"
+        ) {
+            //NOTE: Linked version
+            break run_npm_install;
+        }
+
+        npmInstall({ packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath) });
+    }
+
+    copyBoilerplate({
+        accountThemeType: "Single-Page",
+        accountThemeSrcDirPath
+    });
+
+    console.log(
+        [
+            chalk.green(
+                "The Single-Page account theme has been successfully initialized."
+            ),
+            `Using Account UI of Keycloak version: ${chalk.bold(semVersionedTag.tag.split("-")[0])}`,
+            `Directory created: ${chalk.bold(pathRelative(process.cwd(), accountThemeSrcDirPath))}`,
+            `Dependencies added to your project's package.json: `,
+            chalk.bold(JSON.stringify(dependencies, null, 2))
+        ].join("\n")
+    );
+}

package/src/bin/initialize-account-theme/src/multi-page/KcContext.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { ExtendKcContext } from "keycloakify/account";
+import type { KcEnvName, ThemeName } from "../kc.gen";
+
+export type KcContextExtension = {
+    themeName: ThemeName;
+    properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = {};
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/src/bin/initialize-account-theme/src/multi-page/KcPage.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import type { ClassKey } from "keycloakify/account";
+import type { KcContext } from "./KcContext";
+import { useI18n } from "./i18n";
+import DefaultPage from "keycloakify/account/DefaultPage";
+import Template from "keycloakify/account/Template";
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const { i18n } = useI18n({ kcContext });
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    default:
+                        return <DefaultPage kcContext={kcContext} i18n={i18n} classes={classes} Template={Template} doUseDefaultCss={true} />;
+                }
+            })()}
+        </Suspense>
+    );
+}
+
+const classes = {} satisfies { [key in ClassKey]?: string };

package/src/bin/initialize-account-theme/src/multi-page/KcPageStory.tsx

@@ -0,0 +1,38 @@
+import type { DeepPartial } from "keycloakify/tools/DeepPartial";
+import type { KcContext } from "./KcContext";
+import { createGetKcContextMock } from "keycloakify/account/KcContext";
+import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
+import KcPage from "./KcPage";
+import { themeNames, kcEnvDefaults } from "../kc.gen";
+
+const kcContextExtension: KcContextExtension = {
+    themeName: themeNames[0],
+    properties: {
+        ...kcEnvDefaults
+    }
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+    kcContextExtension,
+    kcContextExtensionPerPage,
+    overrides: {},
+    overridesPerPage: {}
+});
+
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+    const { pageId } = params;
+
+    function KcPageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext: overrides } = props;
+
+        const kcContextMock = getKcContextMock({
+            pageId,
+            overrides
+        });
+
+        return <KcPage kcContext={kcContextMock} />;
+    }
+
+    return { KcPageStory };
+}

package/src/bin/initialize-account-theme/src/multi-page/i18n.ts

@@ -0,0 +1,5 @@
+import { createUseI18n } from "keycloakify/account";
+
+export const { useI18n, ofTypeI18n } = createUseI18n({});
+
+export type I18n = typeof ofTypeI18n;

package/src/bin/initialize-account-theme/src/single-page/KcContext.ts

@@ -0,0 +1,7 @@
+import type { KcContextLike } from "@keycloakify/keycloak-account-ui";
+import type { KcEnvName } from "../kc.gen";
+
+export type KcContext = KcContextLike & {
+    themeType: "account";
+    properties: Record<KcEnvName, string>;
+};

package/src/bin/initialize-account-theme/src/single-page/KcPage.tsx

@@ -0,0 +1,11 @@
+import { lazy } from "react";
+import { KcAccountUiLoader } from "@keycloakify/keycloak-account-ui";
+import type { KcContext } from "./KcContext";
+
+const KcAccountUi = lazy(() => import("@keycloakify/keycloak-account-ui/KcAccountUi"));
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    return <KcAccountUiLoader kcContext={kcContext} KcAccountUi={KcAccountUi} />;
+}

package/src/bin/initialize-account-theme/updateAccountThemeImplementationInConfig.ts

@@ -0,0 +1,92 @@
+import { join as pathJoin } from "path";
+import { assert, type Equals } from "tsafe/assert";
+import type { BuildContext } from "../shared/buildContext";
+import * as fs from "fs";
+import chalk from "chalk";
+import { z } from "zod";
+import { id } from "tsafe/id";
+
+export type BuildContextLike = {
+    bundler: BuildContext["bundler"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function updateAccountThemeImplementationInConfig(params: {
+    buildContext: BuildContext;
+    accountThemeType: "Single-Page" | "Multi-Page";
+}) {
+    const { buildContext, accountThemeType } = params;
+
+    switch (buildContext.bundler) {
+        case "vite":
+            {
+                const viteConfigPath = pathJoin(
+                    buildContext.projectDirPath,
+                    "vite.config.ts"
+                );
+
+                if (!fs.existsSync(viteConfigPath)) {
+                    console.log(
+                        chalk.bold(
+                            `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite config`
+                        )
+                    );
+                    break;
+                }
+
+                const viteConfigContent = fs
+                    .readFileSync(viteConfigPath)
+                    .toString("utf8");
+
+                const modifiedViteConfigContent = viteConfigContent.replace(
+                    /accountThemeImplementation\s*:\s*"none"/,
+                    `accountThemeImplementation: "${accountThemeType}"`
+                );
+
+                if (modifiedViteConfigContent === viteConfigContent) {
+                    console.log(
+                        chalk.bold(
+                            `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite.config.ts`
+                        )
+                    );
+                    break;
+                }
+
+                fs.writeFileSync(viteConfigPath, modifiedViteConfigContent);
+            }
+            break;
+        case "webpack":
+            {
+                const parsedPackageJson = (() => {
+                    type ParsedPackageJson = {
+                        keycloakify: Record<string, string>;
+                    };
+
+                    const zParsedPackageJson = (() => {
+                        type TargetType = ParsedPackageJson;
+
+                        const zTargetType = z.object({
+                            keycloakify: z.record(z.string())
+                        });
+
+                        assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+                        return id<z.ZodType<TargetType>>(zTargetType);
+                    })();
+
+                    return zParsedPackageJson.parse(
+                        JSON.parse(
+                            fs
+                                .readFileSync(buildContext.packageJsonFilePath)
+                                .toString("utf8")
+                        )
+                    );
+                })();
+
+                parsedPackageJson.keycloakify.accountThemeImplementation =
+                    accountThemeType;
+            }
+            break;
+    }
+}

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

@@ -24,7 +24,7 @@ export type BuildContextLike = BuildContextLike_generatePom & {
     artifactId: string;
     themeVersion: string;
     cacheDirPath: string;
-    recordIsImplementedByThemeType: BuildContext["recordIsImplementedByThemeType"];
+    implementedThemeTypes: BuildContext["implementedThemeTypes"];
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -135,7 +135,7 @@ export async function buildJar(params: {
     }
 
     route_legacy_pages: {
-        if (!buildContext.recordIsImplementedByThemeType.login) {
+        if (!buildContext.implementedThemeTypes.login.isImplemented) {
             break route_legacy_pages;
         }
 

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

@@ -10,9 +10,8 @@ import type { BuildContext } from "../../shared/buildContext";
 export type BuildContextLike = BuildContextLike_buildJar & {
     projectDirPath: string;
     keycloakifyBuildDirPath: string;
-    recordIsImplementedByThemeType: BuildContext["recordIsImplementedByThemeType"];
+    implementedThemeTypes: BuildContext["implementedThemeTypes"];
     jarTargets: BuildContext["jarTargets"];
-    doUseAccountV3: boolean;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -24,8 +23,8 @@ export async function buildJars(params: {
     const { resourcesDirPath, buildContext } = params;
 
     const doesImplementAccountV1Theme =
-        buildContext.recordIsImplementedByThemeType.account &&
-        !buildContext.doUseAccountV3;
+        buildContext.implementedThemeTypes.account.isImplemented &&
+        buildContext.implementedThemeTypes.account.type === "Multi-Page";
 
     await Promise.all(
         keycloakAccountV1Versions

package/src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts

@@ -53,10 +53,9 @@ export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
         projectDirPath: string;
         projectBuildDirPath: string;
         environmentVariables: { name: string; default: string }[];
-        recordIsImplementedByThemeType: BuildContext["recordIsImplementedByThemeType"];
+        implementedThemeTypes: BuildContext["implementedThemeTypes"];
         themeSrcDirPath: string;
-        bundler: { type: "vite" } | { type: "webpack" };
-        doUseAccountV3: boolean;
+        bundler: "vite" | "webpack";
     };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -74,11 +73,15 @@ export async function generateResourcesForMainTheme(params: {
     };
 
     for (const themeType of ["login", "account"] as const) {
-        const isAccountV3 = themeType === "account" && buildContext.doUseAccountV3;
-        if (!buildContext.recordIsImplementedByThemeType[themeType]) {
+        if (!buildContext.implementedThemeTypes[themeType].isImplemented) {
             continue;
         }
 
+        const isForAccountSpa =
+            themeType === "account" &&
+            (assert(buildContext.implementedThemeTypes.account.isImplemented),
+            buildContext.implementedThemeTypes.account.type === "Single-Page");
+
         const themeTypeDirPath = getThemeTypeDirPath({ themeType });
 
         apply_replacers_and_move_to_theme_resources: {
@@ -93,7 +96,7 @@ export async function generateResourcesForMainTheme(params: {
 
             if (
                 themeType === "account" &&
-                buildContext.recordIsImplementedByThemeType.login
+                buildContext.implementedThemeTypes.login.isImplemented
             ) {
                 // NOTE: We prevent doing it twice, it has been done for the login theme.
 
@@ -118,7 +121,7 @@ export async function generateResourcesForMainTheme(params: {
                 );
 
                 if (fs.existsSync(dirPath)) {
-                    assert(buildContext.bundler.type === "webpack");
+                    assert(buildContext.bundler === "webpack");
 
                     throw new Error(
                         [
@@ -184,10 +187,10 @@ export async function generateResourcesForMainTheme(params: {
                     case "login":
                         return LOGIN_THEME_PAGE_IDS;
                     case "account":
-                        return isAccountV3 ? ["index.ftl"] : ACCOUNT_THEME_PAGE_IDS;
+                        return isForAccountSpa ? ["index.ftl"] : ACCOUNT_THEME_PAGE_IDS;
                 }
             })(),
-            ...(isAccountV3
+            ...(isForAccountSpa
                 ? []
                 : readExtraPagesNames({
                       themeType,
@@ -203,7 +206,7 @@ export async function generateResourcesForMainTheme(params: {
         });
 
         i18n_messages_generation: {
-            if (isAccountV3) {
+            if (isForAccountSpa) {
                 break i18n_messages_generation;
             }
 
@@ -230,7 +233,7 @@ export async function generateResourcesForMainTheme(params: {
         }
 
         keycloak_static_resources: {
-            if (isAccountV3) {
+            if (isForAccountSpa) {
                 break keycloak_static_resources;
             }
 
@@ -256,13 +259,13 @@ export async function generateResourcesForMainTheme(params: {
                     `parent=${(() => {
                         switch (themeType) {
                             case "account":
-                                return isAccountV3 ? "base" : ACCOUNT_V1_THEME_NAME;
+                                return isForAccountSpa ? "base" : ACCOUNT_V1_THEME_NAME;
                             case "login":
                                 return "keycloak";
                         }
                         assert<Equals<typeof themeType, never>>(false);
                     })()}`,
-                    ...(isAccountV3 ? ["deprecatedMode=false"] : []),
+                    ...(isForAccountSpa ? ["deprecatedMode=false"] : []),
                     ...(buildContext.extraThemeProperties ?? []),
                     ...buildContext.environmentVariables.map(
                         ({ name, default: defaultValue }) =>
@@ -275,7 +278,7 @@ export async function generateResourcesForMainTheme(params: {
     }
 
     email: {
-        if (!buildContext.recordIsImplementedByThemeType.email) {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
             break email;
         }
 
@@ -288,11 +291,11 @@ export async function generateResourcesForMainTheme(params: {
     }
 
     bring_in_account_v1: {
-        if (buildContext.doUseAccountV3) {
+        if (!buildContext.implementedThemeTypes.account.isImplemented) {
             break bring_in_account_v1;
         }
 
-        if (!buildContext.recordIsImplementedByThemeType.account) {
+        if (buildContext.implementedThemeTypes.account.type !== "Multi-Page") {
             break bring_in_account_v1;
         }
 
@@ -303,7 +306,10 @@ export async function generateResourcesForMainTheme(params: {
     }
 
     bring_in_account_v3_i18n_messages: {
-        if (!buildContext.doUseAccountV3) {
+        if (!buildContext.implementedThemeTypes.account.isImplemented) {
+            break bring_in_account_v3_i18n_messages;
+        }
+        if (buildContext.implementedThemeTypes.account.type !== "Single-Page") {
             break bring_in_account_v3_i18n_messages;
         }
 
@@ -340,12 +346,12 @@ export async function generateResourcesForMainTheme(params: {
 
         metaInfKeycloakThemes.themes.push({
             name: themeName,
-            types: objectEntries(buildContext.recordIsImplementedByThemeType)
-                .filter(([, isImplemented]) => isImplemented)
+            types: objectEntries(buildContext.implementedThemeTypes)
+                .filter(([, { isImplemented }]) => isImplemented)
                 .map(([themeType]) => themeType)
         });
 
-        if (buildContext.recordIsImplementedByThemeType.account) {
+        if (buildContext.implementedThemeTypes.account.isImplemented) {
             metaInfKeycloakThemes.themes.push({
                 name: ACCOUNT_V1_THEME_NAME,
                 types: ["account"]

package/src/bin/keycloakify/keycloakify.ts

@@ -85,7 +85,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
     });
 
     run_post_build_script: {
-        if (buildContext.bundler.type !== "vite") {
+        if (buildContext.bundler !== "vite") {
             break run_post_build_script;
         }
 

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

@@ -8,7 +8,7 @@ export type BuildContextLike = {
     projectBuildDirPath: string;
     assetsDirPath: string;
     urlPathname: string | undefined;
-    bundler: { type: "vite" } | { type: "webpack" };
+    bundler: "vite" | "webpack";
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -20,7 +20,7 @@ export function replaceImportsInJsCode(params: {
     const { jsCode, buildContext } = params;
 
     const { fixedJsCode } = (() => {
-        switch (buildContext.bundler.type) {
+        switch (buildContext.bundler) {
             case "vite":
                 return replaceImportsInJsCode_vite({
                     jsCode,

package/src/bin/main.ts

@@ -179,6 +179,20 @@ program
         }
     });
 
+program
+    .command({
+        name: "initialize-account-theme",
+        description: "Initialize the account theme."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./initialize-account-theme");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
 program
     .command({
         name: "copy-keycloak-resources-to-public",