keycloakify 6.13.2 → 7.0.0-rc.3

package/src/Fallback.tsx

@@ -0,0 +1,81 @@
+import { lazy, Suspense } from "react";
+import type { PageProps } from "keycloakify/pages/PageProps";
+import type { I18n } from "keycloakify/i18n";
+import type { KcContext } from "./kcContext";
+
+const Login = lazy(() => import("keycloakify/pages/Login"));
+const Register = lazy(() => import("keycloakify/pages/Register"));
+const RegisterUserProfile = lazy(() => import("keycloakify/pages/RegisterUserProfile"));
+const Info = lazy(() => import("keycloakify/pages/Info"));
+const Error = lazy(() => import("keycloakify/pages/Error"));
+const LoginResetPassword = lazy(() => import("keycloakify/pages/LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("keycloakify/pages/LoginVerifyEmail"));
+const Terms = lazy(() => import("keycloakify/pages/Terms"));
+const LoginOtp = lazy(() => import("keycloakify/pages/LoginOtp"));
+const LoginPassword = lazy(() => import("keycloakify/pages/LoginPassword"));
+const LoginUsername = lazy(() => import("keycloakify/pages/LoginUsername"));
+const WebauthnAuthenticate = lazy(() => import("keycloakify/pages/WebauthnAuthenticate"));
+const LoginUpdatePassword = lazy(() => import("keycloakify/pages/LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("keycloakify/pages/LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("keycloakify/pages/LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("keycloakify/pages/LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("keycloakify/pages/LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("keycloakify/pages/LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("keycloakify/pages/LogoutConfirm"));
+const UpdateUserProfile = lazy(() => import("keycloakify/pages/UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("keycloakify/pages/IdpReviewUserProfile"));
+
+export default function Fallback(props: PageProps<KcContext, I18n>) {
+    const { kcContext, ...rest } = props;
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "login.ftl":
+                        return <Login kcContext={kcContext} {...rest} />;
+                    case "register.ftl":
+                        return <Register kcContext={kcContext} {...rest} />;
+                    case "register-user-profile.ftl":
+                        return <RegisterUserProfile kcContext={kcContext} {...rest} />;
+                    case "info.ftl":
+                        return <Info kcContext={kcContext} {...rest} />;
+                    case "error.ftl":
+                        return <Error kcContext={kcContext} {...rest} />;
+                    case "login-reset-password.ftl":
+                        return <LoginResetPassword kcContext={kcContext} {...rest} />;
+                    case "login-verify-email.ftl":
+                        return <LoginVerifyEmail kcContext={kcContext} {...rest} />;
+                    case "terms.ftl":
+                        return <Terms kcContext={kcContext} {...rest} />;
+                    case "login-otp.ftl":
+                        return <LoginOtp kcContext={kcContext} {...rest} />;
+                    case "login-username.ftl":
+                        return <LoginUsername kcContext={kcContext} {...rest} />;
+                    case "login-password.ftl":
+                        return <LoginPassword kcContext={kcContext} {...rest} />;
+                    case "webauthn-authenticate.ftl":
+                        return <WebauthnAuthenticate kcContext={kcContext} {...rest} />;
+                    case "login-update-password.ftl":
+                        return <LoginUpdatePassword kcContext={kcContext} {...rest} />;
+                    case "login-update-profile.ftl":
+                        return <LoginUpdateProfile kcContext={kcContext} {...rest} />;
+                    case "login-idp-link-confirm.ftl":
+                        return <LoginIdpLinkConfirm kcContext={kcContext} {...rest} />;
+                    case "login-idp-link-email.ftl":
+                        return <LoginIdpLinkEmail kcContext={kcContext} {...rest} />;
+                    case "login-page-expired.ftl":
+                        return <LoginPageExpired kcContext={kcContext} {...rest} />;
+                    case "login-config-totp.ftl":
+                        return <LoginConfigTotp kcContext={kcContext} {...rest} />;
+                    case "logout-confirm.ftl":
+                        return <LogoutConfirm kcContext={kcContext} {...rest} />;
+                    case "update-user-profile.ftl":
+                        return <UpdateUserProfile kcContext={kcContext} {...rest} />;
+                    case "idp-review-user-profile.ftl":
+                        return <IdpReviewUserProfile kcContext={kcContext} {...rest} />;
+                }
+            })()}
+        </Suspense>
+    );
+}

package/src/Template.tsx

@@ -0,0 +1,197 @@
+import { assert } from "keycloakify/tools/assert";
+import { clsx } from "keycloakify/tools/clsx";
+import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
+import { type TemplateProps, defaultTemplateClasses } from "keycloakify/TemplateProps";
+import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { KcContext } from "./kcContext";
+import type { I18n } from "./i18n";
+
+export default function Template(props: TemplateProps<KcContext, I18n>) {
+    const {
+        displayInfo = false,
+        displayMessage = true,
+        displayRequiredFields = false,
+        displayWide = false,
+        showAnotherWayIfPresent = true,
+        headerNode,
+        showUsernameNode = null,
+        formNode,
+        infoNode = null,
+        kcContext,
+        i18n,
+        doUseDefaultCss,
+        classes
+    } = props;
+
+    const { getClassName } = useGetClassName({
+        "defaultClasses": !doUseDefaultCss ? undefined : defaultTemplateClasses,
+        classes
+    });
+
+    const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+
+    const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
+
+    const { isReady } = usePrepareTemplate({
+        "doFetchDefaultThemeResources": doUseDefaultCss,
+        url,
+        "stylesCommon": [
+            "node_modules/patternfly/dist/css/patternfly.min.css",
+            "node_modules/patternfly/dist/css/patternfly-additions.min.css",
+            "lib/zocial/zocial.css"
+        ],
+        "styles": ["css/login.css"],
+        "htmlClassName": getClassName("kcHtmlClass")
+    });
+
+    if (!isReady) {
+        return null;
+    }
+
+    return (
+        <div className={getClassName("kcLoginClass")}>
+            <div id="kc-header" className={getClassName("kcHeaderClass")}>
+                <div id="kc-header-wrapper" className={getClassName("kcHeaderWrapperClass")}>
+                    {msg("loginTitleHtml", realm.displayNameHtml)}
+                </div>
+            </div>
+
+            <div className={clsx(getClassName("kcFormCardClass"), displayWide && getClassName("kcFormCardAccountClass"))}>
+                <header className={getClassName("kcFormHeaderClass")}>
+                    {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
+                        <div id="kc-locale">
+                            <div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
+                                <div className="kc-dropdown" id="kc-locale-dropdown">
+                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                    <a href="#" id="kc-current-locale-link">
+                                        {labelBySupportedLanguageTag[currentLanguageTag]}
+                                    </a>
+                                    <ul>
+                                        {locale.supported.map(({ languageTag }) => (
+                                            <li key={languageTag} className="kc-dropdown-item">
+                                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                                <a href="#" onClick={() => changeLocale(languageTag)}>
+                                                    {labelBySupportedLanguageTag[languageTag]}
+                                                </a>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
+                        displayRequiredFields ? (
+                            <div className={getClassName("kcContentWrapperClass")}>
+                                <div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
+                                    <span className="subtitle">
+                                        <span className="required">*</span>
+                                        {msg("requiredFields")}
+                                    </span>
+                                </div>
+                                <div className="col-md-10">
+                                    <h1 id="kc-page-title">{headerNode}</h1>
+                                </div>
+                            </div>
+                        ) : (
+                            <h1 id="kc-page-title">{headerNode}</h1>
+                        )
+                    ) : displayRequiredFields ? (
+                        <div className={getClassName("kcContentWrapperClass")}>
+                            <div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
+                                <span className="subtitle">
+                                    <span className="required">*</span> {msg("requiredFields")}
+                                </span>
+                            </div>
+                            <div className="col-md-10">
+                                {showUsernameNode}
+                                <div className={getClassName("kcFormGroupClass")}>
+                                    <div id="kc-username">
+                                        <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
+                                        <a id="reset-login" href={url.loginRestartFlowUrl}>
+                                            <div className="kc-login-tooltip">
+                                                <i className={getClassName("kcResetFlowIcon")}></i>
+                                                <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            {showUsernameNode}
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div id="kc-username">
+                                    <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
+                                    <a id="reset-login" href={url.loginRestartFlowUrl}>
+                                        <div className="kc-login-tooltip">
+                                            <i className={getClassName("kcResetFlowIcon")}></i>
+                                            <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </header>
+                <div id="kc-content">
+                    <div id="kc-content-wrapper">
+                        {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
+                        {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
+                            <div className={clsx("alert", `alert-${message.type}`)}>
+                                {message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
+                                {message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
+                                {message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
+                                {message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
+                                <span
+                                    className="kc-feedback-text"
+                                    dangerouslySetInnerHTML={{
+                                        "__html": message.summary
+                                    }}
+                                />
+                            </div>
+                        )}
+                        {formNode}
+                        {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
+                            <form
+                                id="kc-select-try-another-way-form"
+                                action={url.loginAction}
+                                method="post"
+                                className={clsx(displayWide && getClassName("kcContentWrapperClass"))}
+                            >
+                                <div
+                                    className={clsx(
+                                        displayWide && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
+                                    )}
+                                >
+                                    <div className={getClassName("kcFormGroupClass")}>
+                                        <input type="hidden" name="tryAnotherWay" value="on" />
+                                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                        <a
+                                            href="#"
+                                            id="try-another-way"
+                                            onClick={() => {
+                                                document.forms["kc-select-try-another-way-form" as never].submit();
+                                                return false;
+                                            }}
+                                        >
+                                            {msg("doTryAnotherWay")}
+                                        </a>
+                                    </div>
+                                </div>
+                            </form>
+                        )}
+                        {displayInfo && (
+                            <div id="kc-info" className={getClassName("kcSignUpClass")}>
+                                <div id="kc-info-wrapper" className={getClassName("kcInfoAreaWrapperClass")}>
+                                    {infoNode}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/TemplateProps.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import type { KcContext } from "./kcContext";
+import type { I18n } from "./i18n";
+
+export type TemplateProps<KcContext extends KcContext.Common, I18nExtended extends I18n> = {
+    kcContext: KcContext;
+    i18n: I18nExtended;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<TemplateClassKey, string>>;
+
+    formNode: ReactNode;
+    displayInfo?: boolean;
+    displayMessage?: boolean;
+    displayRequiredFields?: boolean;
+    displayWide?: boolean;
+    showAnotherWayIfPresent?: boolean;
+    headerNode: ReactNode;
+    showUsernameNode?: ReactNode;
+    infoNode?: ReactNode;
+};
+
+export type TemplateClassKey =
+    | "kcHtmlClass"
+    | "kcLoginClass"
+    | "kcHeaderClass"
+    | "kcHeaderWrapperClass"
+    | "kcFormCardClass"
+    | "kcFormCardAccountClass"
+    | "kcFormHeaderClass"
+    | "kcLocaleWrapperClass"
+    | "kcContentWrapperClass"
+    | "kcLabelWrapperClass"
+    | "kcFormGroupClass"
+    | "kcResetFlowIcon"
+    | "kcFeedbackSuccessIcon"
+    | "kcFeedbackWarningIcon"
+    | "kcFeedbackErrorIcon"
+    | "kcFeedbackInfoIcon"
+    | "kcFormSocialAccountContentClass"
+    | "kcFormSocialAccountClass"
+    | "kcSignUpClass"
+    | "kcInfoAreaWrapperClass";
+
+export const defaultTemplateClasses: Record<TemplateClassKey, string | undefined> = {
+    "kcHtmlClass": "login-pf",
+    "kcLoginClass": "login-pf-page",
+    "kcContentWrapperClass": "row",
+    "kcHeaderClass": "login-pf-page-header",
+    "kcHeaderWrapperClass": undefined,
+    "kcFormCardClass": "card-pf",
+    "kcFormCardAccountClass": "login-pf-accounts",
+    "kcFormSocialAccountClass": "login-pf-social-section",
+    "kcFormSocialAccountContentClass": "col-xs-12 col-sm-6",
+    "kcFormHeaderClass": "login-pf-header",
+    "kcLocaleWrapperClass": undefined,
+    "kcFeedbackErrorIcon": "pficon pficon-error-circle-o",
+    "kcFeedbackWarningIcon": "pficon pficon-warning-triangle-o",
+    "kcFeedbackSuccessIcon": "pficon pficon-ok",
+    "kcFeedbackInfoIcon": "pficon pficon-info",
+    "kcResetFlowIcon": "pficon pficon-arrow fa-2x",
+    "kcFormGroupClass": "form-group",
+    "kcLabelWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+    "kcSignUpClass": "login-pf-signup",
+    "kcInfoAreaWrapperClass": undefined
+};

package/src/bin/eject-keycloak-page.ts

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+import { getProjectRoot } from "./tools/getProjectRoot";
+import cliSelect from "cli-select";
+import { loginThemePageIds, type PageId } from "./keycloakify/generateFtl/generateFtl";
+import { capitalize } from "tsafe/capitalize";
+import { readFile, writeFile } from "fs/promises";
+import { existsSync } from "fs";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+
+(async () => {
+    const projectRootDir = getProjectRoot();
+
+    const { value: pageId } = await cliSelect<PageId>({
+        "values": [...loginThemePageIds]
+    }).catch(() => {
+        console.log("Aborting");
+
+        process.exit(-1);
+    });
+
+    const pageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx");
+
+    console.log(pageId);
+
+    const targetFilePath = pathJoin(process.cwd(), "src", "keycloak-theme", "pages", pageBasename);
+
+    if (existsSync(targetFilePath)) {
+        console.log(`${pageId} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`);
+
+        process.exit(-1);
+    }
+
+    writeFile(targetFilePath, await readFile(pathJoin(projectRootDir, "src", "pages", pageBasename)));
+
+    console.log(`${pathRelative(process.cwd(), targetFilePath)} created`);
+})();

package/src/bin/keycloakify/BuildOptions.ts

@@ -13,7 +13,10 @@ type ParsedPackageJson = {
     version: string;
     homepage?: string;
     keycloakify?: {
+        /** @deprecated: use extraLoginPages instead */
         extraPages?: string[];
+        extraLoginPages?: string[];
+        extraAccountPages?: string[];
         extraThemeProperties?: string[];
         areAppAndKeycloakServerSharingSameDomain?: boolean;
         artifactId?: string;
@@ -29,6 +32,8 @@ const zParsedPackageJson = z.object({
     "keycloakify": z
         .object({
             "extraPages": z.array(z.string()).optional(),
+            "extraLoginPages": z.array(z.string()).optional(),
+            "extraAccountPages": z.array(z.string()).optional(),
             "extraThemeProperties": z.array(z.string()).optional(),
             "areAppAndKeycloakServerSharingSameDomain": z.boolean().optional(),
             "artifactId": z.string().optional(),
@@ -48,7 +53,8 @@ export namespace BuildOptions {
         isSilent: boolean;
         version: string;
         themeName: string;
-        extraPages?: string[];
+        extraLoginPages: string[] | undefined;
+        extraAccountPages: string[] | undefined;
         extraThemeProperties?: string[];
         groupId: string;
         artifactId: string;
@@ -119,7 +125,7 @@ export function readBuildOptions(params: {
     const common: BuildOptions.Common = (() => {
         const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
 
-        const { extraPages, extraThemeProperties, groupId, artifactId, bundler } = keycloakify ?? {};
+        const { extraPages, extraLoginPages, extraAccountPages, extraThemeProperties, groupId, artifactId, bundler } = keycloakify ?? {};
 
         const themeName = name
             .replace(/^@(.*)/, "$1")
@@ -158,7 +164,8 @@ export function readBuildOptions(params: {
                 );
             })(),
             "version": process.env.KEYCLOAKIFY_VERSION ?? version,
-            extraPages,
+            "extraLoginPages": [...(extraPages ?? []), ...(extraLoginPages ?? [])],
+            extraAccountPages,
             extraThemeProperties,
             isSilent
         };

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -10,8 +10,11 @@ import type { BuildOptions } from "../BuildOptions";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 
-// https://github.com/keycloak/keycloak/blob/main/services/src/main/java/org/keycloak/forms/login/freemarker/Templates.java
-export const pageIds = [
+export const themeTypes = ["login", "account"] as const;
+
+export type ThemeType = (typeof themeTypes)[number];
+
+export const loginThemePageIds = [
     "login.ftl",
     "login-username.ftl",
     "login-password.ftl",
@@ -35,6 +38,11 @@ export const pageIds = [
     "idp-review-user-profile.ftl"
 ] as const;
 
+export const accountThemePageIds = ["password.ftl"] as const;
+
+export type PageId = (typeof loginThemePageIds)[number];
+export type AccountThemePageId = (typeof accountThemePageIds)[number];
+
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
 
 export namespace BuildOptionsLike {
@@ -68,8 +76,6 @@ export namespace BuildOptionsLike {
     assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
 }
 
-export type PageId = (typeof pageIds)[number];
-
 export function generateFtlFilesCodeFactory(params: {
     indexHtmlCode: string;
     //NOTE: Expected to be an empty object if external assets mode is enabled.

package/src/bin/keycloakify/generateJavaStackFiles.ts

@@ -1,5 +1,6 @@
 import * as fs from "fs";
 import { join as pathJoin, dirname as pathDirname } from "path";
+import { themeTypes } from "./generateFtl/generateFtl";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 import type { BuildOptions } from "./BuildOptions";
@@ -69,7 +70,7 @@ export function generateJavaStackFiles(params: {
                         "themes": [
                             {
                                 "name": themeName,
-                                "types": ["login", ...(doBundlesEmailTemplate ? ["email"] : [])]
+                                "types": [...themeTypes, ...(doBundlesEmailTemplate ? ["email"] : [])]
                             }
                         ]
                     },