keycloakify 10.0.0-rc.3 → 10.0.0-rc.31

package/src/account/pages/FederatedIdentity.tsx

@@ -0,0 +1,58 @@
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+
+export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { url, federatedIdentity, stateChecker } = kcContext;
+    const { msg } = i18n;
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="federatedIdentity">
+            <div className="main-layout social">
+                <div className="row">
+                    <div className="col-md-10">
+                        <h2>{msg("federatedIdentitiesHtmlTitle")}</h2>
+                    </div>
+                </div>
+                <div id="federated-identities">
+                    {federatedIdentity.identities.map(identity => (
+                        <div key={identity.providerId} className="row margin-bottom">
+                            <div className="col-sm-2 col-md-2">
+                                <label htmlFor={identity.providerId} className="control-label">
+                                    {identity.displayName}
+                                </label>
+                            </div>
+                            <div className="col-sm-5 col-md-5">
+                                <input disabled className="form-control" value={identity.userName} />
+                            </div>
+                            <div className="col-sm-5 col-md-5">
+                                {identity.connected ? (
+                                    federatedIdentity.removeLinkPossible && (
+                                        <form action={url.socialUrl} method="post" className="form-inline">
+                                            <input type="hidden" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" name="action" value="remove" />
+                                            <input type="hidden" name="providerId" value={identity.providerId} />
+                                            <button id={`remove-link-${identity.providerId}`} className="btn btn-default">
+                                                {msg("doRemove")}
+                                            </button>
+                                        </form>
+                                    )
+                                ) : (
+                                    <form action={url.socialUrl} method="post" className="form-inline">
+                                        <input type="hidden" name="stateChecker" value={stateChecker} />
+                                        <input type="hidden" name="action" value="add" />
+                                        <input type="hidden" name="providerId" value={identity.providerId} />
+                                        <button id={`add-link-${identity.providerId}`} className="btn btn-default">
+                                            {msg("doAdd")}
+                                        </button>
+                                    </form>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </Template>
+    );
+}

package/src/account/pages/Log.tsx

@@ -1,8 +1,8 @@
+import type { Key } from "react";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
-import { Key } from "react";
-import { useGetClassName } from "../lib/useGetClassName";
+import type { KcContext } from "../KcContext";
 
 export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;

package/src/account/pages/PageProps.ts

@@ -1,11 +1,11 @@
-import type { I18n } from "keycloakify/account/i18n";
 import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import type { KcContext } from "keycloakify/account/kcContext";
+import type { I18n } from "../i18n";
+import type { KcContext } from "../KcContext";
 
-export type PageProps<NarowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
+export type PageProps<NarrowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
     Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
-    kcContext: NarowedKcContext;
+    kcContext: NarrowedKcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;

package/src/account/pages/Password.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
@@ -10,9 +10,9 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
 
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
-        "classes": {
+        classes: {
             ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
+            kcBodyClass: clsx(classes?.kcBodyClass, "password")
         }
     });
 
@@ -57,18 +57,18 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
             {...{
                 kcContext: {
                     ...kcContext,
-                    "message": (() => {
+                    message: (() => {
                         if (newPasswordError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordError
+                                type: "error",
+                                summary: newPasswordError
                             };
                         }
 
                         if (newPasswordConfirmError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordConfirmError
+                                type: "error",
+                                summary: newPasswordConfirmError
                             };
                         }
 
@@ -98,7 +98,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     value={account.username ?? ""}
                     autoComplete="username"
                     readOnly
-                    style={{ "display": "none" }}
+                    style={{ display: "none" }}
                 />
 
                 {password.passwordSet && (

package/src/account/pages/Sessions.tsx

@@ -1,7 +1,7 @@
 import { clsx } from "keycloakify/tools/clsx";
-import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
@@ -12,12 +12,9 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
         classes
     });
 
-    console.log({ kcContext });
     const { url, stateChecker, sessions } = kcContext;
 
     const { msg } = i18n;
-    console.log({ sdf: kcContext.locale?.supported });
-    console.log({ asdf: "asdf" });
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
             <div className={getClassName("kcContentWrapperClass")}>

package/src/account/pages/Totp.tsx

@@ -1,12 +1,12 @@
 import { clsx } from "keycloakify/tools/clsx";
-import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { MessageKey } from "keycloakify/account/i18n/i18n";
 
 export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
         classes
@@ -14,12 +14,12 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
 
     const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
-        "HmacSHA1": "SHA1",
-        "HmacSHA256": "SHA256",
-        "HmacSHA512": "SHA512"
+        HmacSHA1: "SHA1",
+        HmacSHA256: "SHA256",
+        HmacSHA512: "SHA512"
     };
 
     return (
@@ -77,11 +77,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                             <li>
                                 <p>{msg("totpStep1")}</p>
 
-                                <ul id="kc-totp-supported-apps">
-                                    {totp.supportedApplications.map(app => (
-                                        <li key={app}>{msg(app as MessageKey)}</li>
-                                    ))}
-                                </ul>
+                                <ul id="kc-totp-supported-apps">{totp.supportedApplications?.map(app => <li key={app}>{advancedMsg(app)}</li>)}</ul>
                             </li>
 
                             {mode && mode == "manual" ? (
@@ -99,28 +95,26 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                     </li>
                                     <li>
                                         <p>{msg("totpManualStep3")}</p>
-                                        <p>
-                                            <ul>
-                                                <li id="kc-totp-type">
-                                                    {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
-                                                </li>
-                                                <li id="kc-totp-algorithm">
-                                                    {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                        <ul>
+                                            <li id="kc-totp-type">
+                                                {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
+                                            </li>
+                                            <li id="kc-totp-algorithm">
+                                                {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                            </li>
+                                            <li id="kc-totp-digits">
+                                                {msg("totpDigits")}: {totp.policy.digits}
+                                            </li>
+                                            {totp.policy.type === "totp" ? (
+                                                <li id="kc-totp-period">
+                                                    {msg("totpInterval")}: {totp.policy.period}
                                                 </li>
-                                                <li id="kc-totp-digits">
-                                                    {msg("totpDigits")}: {totp.policy.digits}
+                                            ) : (
+                                                <li id="kc-totp-counter">
+                                                    {msg("totpCounter")}: {totp.policy.initialCounter}
                                                 </li>
-                                                {totp.policy.type === "totp" ? (
-                                                    <li id="kc-totp-period">
-                                                        {msg("totpInterval")}: {totp.policy.period}
-                                                    </li>
-                                                ) : (
-                                                    <li id="kc-totp-counter">
-                                                        {msg("totpCounter")}: {totp.policy.initialCounter}
-                                                    </li>
-                                                )}
-                                            </ul>
-                                        </p>
+                                            )}
+                                        </ul>
                                     </li>
                                 </>
                             ) : (

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

@@ -1,112 +1,13 @@
-#!/usr/bin/env node
+import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
+import { readBuildOptions } from "./shared/buildOptions";
+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 buildOptions = readBuildOptions({ 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)
+        buildOptions
     });
 }
-
-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 { readBuildOptions } from "./shared/buildOptions";
+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 buildOptions = readBuildOptions({
+        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: buildOptions.cacheDirPath
+    });
+
+    console.log(`→ ${keycloakVersion}`);
+
+    const destDirPath = pathJoin(
+        buildOptions.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,
+        buildOptions
+    });
+
+    transformCodebase({
+        srcDirPath: defaultThemeDirPath,
+        destDirPath
+    });
+
+    console.log(chalk.green(`✓ done`));
+}

package/src/bin/eject-page.ts

@@ -0,0 +1,176 @@
+#!/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 { readBuildOptions } from "./shared/buildOptions";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({
+        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 { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
+        values: (() => {
+            switch (themeType) {
+                case "login":
+                    return [...loginThemePageIds];
+                case "account":
+                    return [...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const componentPageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(
+        /ftl$/,
+        "tsx"
+    );
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
+    });
+
+    const targetFilePath = pathJoin(
+        themeSrcDirPath,
+        themeType,
+        "pages",
+        componentPageBasename
+    );
+
+    if (fs.existsSync(targetFilePath)) {
+        console.log(
+            `${pageId} is already ejected, ${pathRelative(
+                process.cwd(),
+                targetFilePath
+            )} already exists`
+        );
+
+        process.exit(-1);
+    }
+
+    {
+        const targetDirPath = pathDirname(targetFilePath);
+
+        if (!fs.existsSync(targetDirPath)) {
+            fs.mkdirSync(targetDirPath, { recursive: true });
+        }
+    }
+
+    const componentPageContent = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                themeType,
+                "pages",
+                componentPageBasename
+            )
+        )
+        .toString("utf8");
+
+    fs.writeFileSync(targetFilePath, Buffer.from(componentPageContent, "utf8"));
+
+    const userProfileFormFieldComponentName = "UserProfileFormFields";
+
+    console.log(
+        [
+            ``,
+            `${chalk.green("✓")} ${chalk.bold(
+                pathJoin(".", pathRelative(process.cwd(), targetFilePath))
+            )} copy pasted from the Keycloakify source code into your project`,
+            ``,
+            `You now need to update your page router:`,
+            ``,
+            `${chalk.bold(
+                pathJoin(
+                    ".",
+                    pathRelative(process.cwd(), themeSrcDirPath),
+                    themeType,
+                    "KcApp.tsx"
+                )
+            )}:`,
+            chalk.grey("```"),
+            `// ...`,
+            ``,
+            chalk.green(
+                `+const ${componentPageBasename.replace(
+                    /.tsx$/,
+                    ""
+                )} = lazy(() => import("./pages/${componentPageBasename}"));`
+            ),
+            ...[
+                ``,
+                ` export default function KcApp(props: { kcContext: KcContext; }) {`,
+                ``,
+                `     // ...`,
+                ``,
+                `     return (`,
+                `         <Suspense>`,
+                `             {(() => {`,
+                `                 switch (kcContext.pageId) {`,
+                `                     // ...`,
+                `+                    case "${pageId}": return (`,
+                `+                        <Login`,
+                `+                            {...{ kcContext, i18n, classes }}`,
+                `+                            Template={Template}`,
+                ...(!componentPageContent.includes(userProfileFormFieldComponentName)
+                    ? []
+                    : [
+                          `+                            ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`
+                      ]),
+                `+                            doUseDefaultCss={true}`,
+                `+                        />`,
+                `+                    );`,
+                `                     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")
+    );
+}