keycloakify 6.7.2 → 6.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.7.2",
+    "version": "6.8.1",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -1290,12 +1290,12 @@
         "@octokit/rest": "^18.12.0",
         "cheerio": "^1.0.0-rc.5",
         "cli-select": "^1.1.2",
-        "evt": "^2.4.5",
+        "evt": "^2.4.6",
         "memoizee": "^0.4.15",
         "minimal-polyfills": "^2.2.2",
         "minimist": "^1.2.6",
         "path-browserify": "^1.0.1",
-        "powerhooks": "^0.20.22",
+        "powerhooks": "^0.20.23",
         "react-markdown": "^5.0.3",
         "rfc4648": "^1.5.2",
         "scripting-tools": "^0.19.13",

package/src/lib/components/Error.tsx

@@ -1,40 +1,43 @@
 import React, { memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const Error = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.Error; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { message, client } = kcContext;
+export type ErrorProps = KcProps & {
+    kcContext: KcContextBase.Error;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg } = i18n;
+const Error = memo((props: ErrorProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayMessage={false}
-                headerNode={msg("errorTitle")}
-                formNode={
-                    <div id="kc-error-message">
-                        <p className="instruction">{message.summary}</p>
-                        {client !== undefined && client.baseUrl !== undefined && (
-                            <p>
-                                <a id="backToApplication" href={client.baseUrl}>
-                                    {msg("backToApplication")}
-                                </a>
-                            </p>
-                        )}
-                    </div>
-                }
-            />
-        );
-    }
-);
+    const { message, client } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("errorTitle")}
+            formNode={
+                <div id="kc-error-message">
+                    <p className="instruction">{message.summary}</p>
+                    {client !== undefined && client.baseUrl !== undefined && (
+                        <p>
+                            <a id="backToApplication" href={client.baseUrl}>
+                                {msg("backToApplication")}
+                            </a>
+                        </p>
+                    )}
+                </div>
+            }
+        />
+    );
+});
 
 export default Error;

package/src/lib/components/IdpReviewUserProfile.tsx

@@ -1,57 +1,60 @@
 import React, { useState, memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
 
-const IdpReviewUserProfile = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.IdpReviewUserProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { cx } = useCssAndCx();
-
-        const { msg, msgStr } = i18n;
-
-        const { url } = kcContext;
-
-        const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                headerNode={msg("loginIdpReviewProfileTitle")}
-                formNode={
-                    <form id="kc-idp-review-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-                        <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
-
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                                <div className={cx(props.kcFormOptionsWrapperClass)} />
-                            </div>
-                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                                <input
-                                    className={cx(
-                                        props.kcButtonClass,
-                                        props.kcButtonPrimaryClass,
-                                        props.kcButtonBlockClass,
-                                        props.kcButtonLargeClass
-                                    )}
-                                    type="submit"
-                                    value={msgStr("doSubmit")}
-                                    disabled={!isFomSubmittable}
-                                />
-                            </div>
+export type IdpReviewUserProfileProps = KcProps & {
+    kcContext: KcContextBase.IdpReviewUserProfile;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
+
+const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    const { url } = kcContext;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            headerNode={msg("loginIdpReviewProfileTitle")}
+            formNode={
+                <form id="kc-idp-review-profile-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
+
+                    <div className={cx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
+                            <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
+                        </div>
+                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                            <input
+                                className={cx(
+                                    kcProps.kcButtonClass,
+                                    kcProps.kcButtonPrimaryClass,
+                                    kcProps.kcButtonBlockClass,
+                                    kcProps.kcButtonLargeClass
+                                )}
+                                type="submit"
+                                value={msgStr("doSubmit")}
+                                disabled={!isFomSubmittable}
+                            />
                         </div>
-                    </form>
-                }
-            />
-        );
-    }
-);
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
 export default IdpReviewUserProfile;

package/src/lib/components/Info.tsx

@@ -1,57 +1,60 @@
 import React, { memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 import type { KcProps } from "./KcProps";
 import { assert } from "../tools/assert";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const Info = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.Info; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { msgStr, msg } = i18n;
-
-        assert(kcContext.message !== undefined);
-
-        const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
-
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayMessage={false}
-                headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
-                formNode={
-                    <div id="kc-info-message">
-                        <p className="instruction">
-                            {message.summary}
-
-                            {requiredActions !== undefined && (
-                                <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
-                            )}
+export type InfoProps = KcProps & {
+    kcContext: KcContextBase.Info;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
+
+const Info = memo((props: InfoProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+
+    const { msgStr, msg } = i18n;
+
+    assert(kcContext.message !== undefined);
+
+    const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
+            formNode={
+                <div id="kc-info-message">
+                    <p className="instruction">
+                        {message.summary}
+
+                        {requiredActions !== undefined && (
+                            <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
+                        )}
+                    </p>
+                    {!skipLink && pageRedirectUri !== undefined ? (
+                        <p>
+                            <a href={pageRedirectUri}>{msg("backToApplication")}</a>
                         </p>
-                        {!skipLink && pageRedirectUri !== undefined ? (
-                            <p>
-                                <a href={pageRedirectUri}>{msg("backToApplication")}</a>
-                            </p>
-                        ) : actionUri !== undefined ? (
+                    ) : actionUri !== undefined ? (
+                        <p>
+                            <a href={actionUri}>{msg("proceedWithAction")}</a>
+                        </p>
+                    ) : (
+                        client.baseUrl !== undefined && (
                             <p>
-                                <a href={actionUri}>{msg("proceedWithAction")}</a>
+                                <a href={client.baseUrl}>{msg("backToApplication")}</a>
                             </p>
-                        ) : (
-                            client.baseUrl !== undefined && (
-                                <p>
-                                    <a href={client.baseUrl}>{msg("backToApplication")}</a>
-                                </p>
-                            )
-                        )}
-                    </div>
-                }
-            />
-        );
-    }
-);
+                        )
+                    )}
+                </div>
+            }
+        />
+    );
+});
 
 export default Info;

package/src/lib/components/KcApp.tsx

@@ -3,6 +3,8 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { KcProps } from "./KcProps";
 import { __unsafe_useI18n as useI18n } from "../i18n";
 import type { I18n } from "../i18n";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 
 const Login = lazy(() => import("./Login"));
 const Register = lazy(() => import("./Register"));
@@ -26,79 +28,82 @@ const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
 const UpdateUserProfile = lazy(() => import("./UpdateUserProfile"));
 const IdpReviewUserProfile = lazy(() => import("./IdpReviewUserProfile"));
 
-const KcApp = memo(
-    ({
-        kcContext,
-        i18n: userProvidedI18n,
-        ...kcProps
-    }: { kcContext: KcContextBase; i18n?: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const i18n = (function useClosure() {
-            const i18n = useI18n({
-                kcContext,
-                "extraMessages": {},
-                "doSkip": userProvidedI18n !== undefined
-            });
+export type KcAppProps = KcProps & {
+    kcContext: KcContextBase;
+    i18n?: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template: (props: TemplateProps) => JSX.Element | null;
+};
 
-            return userProvidedI18n ?? i18n;
-        })();
+const KcApp = memo((props_: KcAppProps) => {
+    const { kcContext, i18n: userProvidedI18n, Template = DefaultTemplate, ...kcProps } = props_;
 
-        if (i18n === null) {
-            return null;
-        }
+    const i18n = (function useClosure() {
+        const i18n = useI18n({
+            kcContext,
+            "extraMessages": {},
+            "doSkip": userProvidedI18n !== undefined
+        });
 
-        const props = { i18n, ...kcProps };
+        return userProvidedI18n ?? i18n;
+    })();
 
-        return (
-            <Suspense>
-                {(() => {
-                    switch (kcContext.pageId) {
-                        case "login.ftl":
-                            return <Login {...{ kcContext, ...props }} />;
-                        case "register.ftl":
-                            return <Register {...{ kcContext, ...props }} />;
-                        case "register-user-profile.ftl":
-                            return <RegisterUserProfile {...{ kcContext, ...props }} />;
-                        case "info.ftl":
-                            return <Info {...{ kcContext, ...props }} />;
-                        case "error.ftl":
-                            return <Error {...{ kcContext, ...props }} />;
-                        case "login-reset-password.ftl":
-                            return <LoginResetPassword {...{ kcContext, ...props }} />;
-                        case "login-verify-email.ftl":
-                            return <LoginVerifyEmail {...{ kcContext, ...props }} />;
-                        case "terms.ftl":
-                            return <Terms {...{ kcContext, ...props }} />;
-                        case "login-otp.ftl":
-                            return <LoginOtp {...{ kcContext, ...props }} />;
-                        case "login-username.ftl":
-                            return <LoginUsername {...{ kcContext, ...props }} />;
-                        case "login-password.ftl":
-                            return <LoginPassword {...{ kcContext, ...props }} />;
-                        case "webauthn-authenticate.ftl":
-                            return <WebauthnAuthenticate {...{ kcContext, ...props }} />;
-                        case "login-update-password.ftl":
-                            return <LoginUpdatePassword {...{ kcContext, ...props }} />;
-                        case "login-update-profile.ftl":
-                            return <LoginUpdateProfile {...{ kcContext, ...props }} />;
-                        case "login-idp-link-confirm.ftl":
-                            return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
-                        case "login-idp-link-email.ftl":
-                            return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
-                        case "login-page-expired.ftl":
-                            return <LoginPageExpired {...{ kcContext, ...props }} />;
-                        case "login-config-totp.ftl":
-                            return <LoginConfigTotp {...{ kcContext, ...props }} />;
-                        case "logout-confirm.ftl":
-                            return <LogoutConfirm {...{ kcContext, ...props }} />;
-                        case "update-user-profile.ftl":
-                            return <UpdateUserProfile {...{ kcContext, ...props }} />;
-                        case "idp-review-user-profile.ftl":
-                            return <IdpReviewUserProfile {...{ kcContext, ...props }} />;
-                    }
-                })()}
-            </Suspense>
-        );
+    if (i18n === null) {
+        return null;
     }
-);
+
+    const commonProps = { i18n, Template, ...kcProps };
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "login.ftl":
+                        return <Login {...{ kcContext, ...commonProps }} />;
+                    case "register.ftl":
+                        return <Register {...{ kcContext, ...commonProps }} />;
+                    case "register-user-profile.ftl":
+                        return <RegisterUserProfile {...{ kcContext, ...commonProps }} />;
+                    case "info.ftl":
+                        return <Info {...{ kcContext, ...commonProps }} />;
+                    case "error.ftl":
+                        return <Error {...{ kcContext, ...commonProps }} />;
+                    case "login-reset-password.ftl":
+                        return <LoginResetPassword {...{ kcContext, ...commonProps }} />;
+                    case "login-verify-email.ftl":
+                        return <LoginVerifyEmail {...{ kcContext, ...commonProps }} />;
+                    case "terms.ftl":
+                        return <Terms {...{ kcContext, ...commonProps }} />;
+                    case "login-otp.ftl":
+                        return <LoginOtp {...{ kcContext, ...commonProps }} />;
+                    case "login-username.ftl":
+                        return <LoginUsername {...{ kcContext, ...commonProps }} />;
+                    case "login-password.ftl":
+                        return <LoginPassword {...{ kcContext, ...commonProps }} />;
+                    case "webauthn-authenticate.ftl":
+                        return <WebauthnAuthenticate {...{ kcContext, ...commonProps }} />;
+                    case "login-update-password.ftl":
+                        return <LoginUpdatePassword {...{ kcContext, ...commonProps }} />;
+                    case "login-update-profile.ftl":
+                        return <LoginUpdateProfile {...{ kcContext, ...commonProps }} />;
+                    case "login-idp-link-confirm.ftl":
+                        return <LoginIdpLinkConfirm {...{ kcContext, ...commonProps }} />;
+                    case "login-idp-link-email.ftl":
+                        return <LoginIdpLinkEmail {...{ kcContext, ...commonProps }} />;
+                    case "login-page-expired.ftl":
+                        return <LoginPageExpired {...{ kcContext, ...commonProps }} />;
+                    case "login-config-totp.ftl":
+                        return <LoginConfigTotp {...{ kcContext, ...commonProps }} />;
+                    case "logout-confirm.ftl":
+                        return <LogoutConfirm {...{ kcContext, ...commonProps }} />;
+                    case "update-user-profile.ftl":
+                        return <UpdateUserProfile {...{ kcContext, ...commonProps }} />;
+                    case "idp-review-user-profile.ftl":
+                        return <IdpReviewUserProfile {...{ kcContext, ...commonProps }} />;
+                }
+            })()}
+        </Suspense>
+    );
+});
 
 export default KcApp;