keycloakify 7.0.0-rc.4 → 7.0.0-rc.6

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

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
+import { keycloakThemeEmailDirPath } from "./keycloakify";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { transformCodebase } from "./tools/transformCodebase";
+import { promptKeycloakVersion } from "./promptKeycloakVersion";
+import * as fs from "fs";
+import { getCliOptions } from "./tools/cliOptions";
+import { getLogger } from "./tools/logger";
+
+(async () => {
+    const { isSilent } = getCliOptions(process.argv.slice(2));
+    const logger = getLogger({ isSilent });
+
+    if (fs.existsSync(keycloakThemeEmailDirPath)) {
+        logger.warn(`There is already a ${pathRelative(process.cwd(), keycloakThemeEmailDirPath)} directory in your project. Aborting.`);
+
+        process.exit(-1);
+    }
+
+    const { keycloakVersion } = await promptKeycloakVersion();
+
+    const builtinKeycloakThemeTmpDirPath = pathJoin(keycloakThemeEmailDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
+
+    await downloadBuiltinKeycloakTheme({
+        keycloakVersion,
+        "destDirPath": builtinKeycloakThemeTmpDirPath,
+        isSilent
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
+        "destDirPath": keycloakThemeEmailDirPath
+    });
+
+    logger.log(`${pathRelative(process.cwd(), keycloakThemeEmailDirPath)} ready to be customized`);
+
+    fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
+})();

package/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -2,8 +2,7 @@
 <#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 (()=>{
 
-    const out = 
-${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+    const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
     out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
     out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
@@ -113,6 +112,13 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
     out["pageId"] = "${pageId}";
 
+    out["url"]["getLogoutUrl"] = function () {
+        <#attempt>
+            return "${url.getLogoutUrl()}";
+        <#recover>
+        </#attempt>
+    };
+
     return out;
 
 })()

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

@@ -38,9 +38,9 @@ export const loginThemePageIds = [
     "idp-review-user-profile.ftl"
 ] as const;
 
-export const accountThemePageIds = ["password.ftl"] as const;
+export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;
 
-export type PageId = (typeof loginThemePageIds)[number];
+export type LoginThemePageId = (typeof loginThemePageIds)[number];
 export type AccountThemePageId = (typeof accountThemePageIds)[number];
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;

package/src/bin/keycloakify/generateKeycloakThemeResources.ts

@@ -3,7 +3,7 @@ import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename } from "path";
 import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFromStaticInJsCode";
 import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, loginThemePageIds, themeTypes, ThemeType } from "./generateFtl";
+import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "./generateFtl";
 import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
 import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
 import { isInside } from "../tools/isInside";
@@ -72,10 +72,6 @@ export async function generateKeycloakThemeResources(params: {
     let generateFtlFilesCode_glob: ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"] | undefined = undefined;
 
     for (const themeType of themeTypes) {
-        if (themeType === "account") {
-            continue;
-        }
-
         const themeDirPath = getThemeDirPath(themeType);
 
         copy_app_resources_to_theme_path: {
@@ -155,7 +151,24 @@ export async function generateKeycloakThemeResources(params: {
             return generateFtlFilesCode;
         })();
 
-        [...loginThemePageIds, ...(buildOptions.extraLoginPages ?? [])].forEach(pageId => {
+        [
+            ...(() => {
+                switch (themeType) {
+                    case "login":
+                        return loginThemePageIds;
+                    case "account":
+                        return accountThemePageIds;
+                }
+            })(),
+            ...((() => {
+                switch (themeType) {
+                    case "login":
+                        return buildOptions.extraLoginPages;
+                    case "account":
+                        return buildOptions.extraAccountPages;
+                }
+            })() ?? [])
+        ].forEach(pageId => {
             const { ftlCode } = generateFtlFilesCode({ pageId });
 
             fs.mkdirSync(themeDirPath, { "recursive": true });

package/src/bin/keycloakify/keycloakify.ts

@@ -14,7 +14,7 @@ import type { Equals } from "tsafe";
 const reactProjectDirPath = process.cwd();
 
 export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
-export const keycloakThemeEmailDirPath = pathJoin(keycloakThemeBuildingDirPath, "..", "keycloak_email");
+export const keycloakThemeEmailDirPath = pathJoin(reactProjectDirPath, "src", "keycloak-theme", "email");
 
 export async function main() {
     const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));

package/src/index.ts

@@ -1,10 +1 @@
-import Fallback from "keycloakify/Fallback";
-
-export default Fallback;
-
 export { createKeycloakAdapter } from "keycloakify/lib/keycloakJsAdapter";
-export { useDownloadTerms } from "keycloakify/lib/useDownloadTerms";
-export { getKcContext } from "keycloakify/kcContext/getKcContext";
-export { createUseI18n } from "keycloakify/i18n/i18n";
-
-export type { PageProps } from "keycloakify/pages/PageProps";

package/src/lib/usePrepareTemplate.ts

@@ -1,7 +1,7 @@
 import { useReducer, useEffect } from "react";
-import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../bin/tools/pathJoin";
-import { clsx } from "../tools/clsx";
+import { headInsert } from "keycloakify/tools/headInsert";
+import { pathJoin } from "keycloakify/bin/tools/pathJoin";
+import { clsx } from "keycloakify/tools/clsx";
 
 export function usePrepareTemplate(params: {
     doFetchDefaultThemeResources: boolean;
@@ -12,9 +12,10 @@ export function usePrepareTemplate(params: {
         resourcesCommonPath: string;
         resourcesPath: string;
     };
-    htmlClassName: string;
+    htmlClassName: string | undefined;
+    bodyClassName: string | undefined;
 }) {
-    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, htmlClassName } = params;
+    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, htmlClassName, bodyClassName } = params;
 
     const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
 
@@ -58,17 +59,35 @@ export function usePrepareTemplate(params: {
         };
     }, []);
 
+    useSetClassName({
+        "target": "html",
+        "className": htmlClassName
+    });
+
+    useSetClassName({
+        "target": "body",
+        "className": bodyClassName
+    });
+
+    return { isReady };
+}
+
+function useSetClassName(params: { target: "html" | "body"; className: string | undefined }) {
+    const { target, className } = params;
+
     useEffect(() => {
+        if (className === undefined) {
+            return;
+        }
+
         const htmlClassList = document.getElementsByTagName("html")[0].classList;
 
-        const tokens = clsx(htmlClassName).split(" ");
+        const tokens = clsx(target).split(" ");
 
         htmlClassList.add(...tokens);
 
         return () => {
             htmlClassList.remove(...tokens);
         };
-    }, [htmlClassName]);
-
-    return { isReady };
+    }, [className]);
 }

package/src/login/Fallback.tsx

@@ -0,0 +1,83 @@
+import { lazy, Suspense } from "react";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { assert, type Equals } from "tsafe/assert";
+import type { I18n } from "./i18n";
+import type { KcContext } from "./kcContext";
+
+const Login = lazy(() => import("keycloakify/login/pages/Login"));
+const Register = lazy(() => import("keycloakify/login/pages/Register"));
+const RegisterUserProfile = lazy(() => import("keycloakify/login/pages/RegisterUserProfile"));
+const Info = lazy(() => import("keycloakify/login/pages/Info"));
+const Error = lazy(() => import("keycloakify/login/pages/Error"));
+const LoginResetPassword = lazy(() => import("keycloakify/login/pages/LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("keycloakify/login/pages/LoginVerifyEmail"));
+const Terms = lazy(() => import("keycloakify/login/pages/Terms"));
+const LoginOtp = lazy(() => import("keycloakify/login/pages/LoginOtp"));
+const LoginPassword = lazy(() => import("keycloakify/login/pages/LoginPassword"));
+const LoginUsername = lazy(() => import("keycloakify/login/pages/LoginUsername"));
+const WebauthnAuthenticate = lazy(() => import("keycloakify/login/pages/WebauthnAuthenticate"));
+const LoginUpdatePassword = lazy(() => import("keycloakify/login/pages/LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("keycloakify/login/pages/LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("keycloakify/login/pages/LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("keycloakify/login/pages/LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("keycloakify/login/pages/LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("keycloakify/login/pages/LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("keycloakify/login/pages/LogoutConfirm"));
+const UpdateUserProfile = lazy(() => import("keycloakify/login/pages/UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("keycloakify/login/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} />;
+                }
+                assert<Equals<typeof kcContext, never>>(false);
+            })()}
+        </Suspense>
+    );
+}

package/src/login/Template.tsx

@@ -0,0 +1,198 @@
+import { assert } from "keycloakify/tools/assert";
+import { clsx } from "keycloakify/tools/clsx";
+import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
+import { type TemplateProps, defaultTemplateClasses } from "keycloakify/login/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"),
+        "bodyClassName": undefined
+    });
+
+    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>
+    );
+}