keycloakify 6.7.2 → 6.8.1

package/src/lib/components/Register.tsx

@@ -1,169 +1,172 @@
 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 { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const Register = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.Register; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
+export type RegisterProps = KcProps & {
+    kcContext: KcContextBase.Register;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg, msgStr } = i18n;
+const Register = memo((props: RegisterProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { cx } = useCssAndCx();
+    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                headerNode={msg("registerTitle")}
-                formNode={
-                    <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
-                            <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor="firstName" className={cx(props.kcLabelClass)}>
-                                    {msg("firstName")}
-                                </label>
-                            </div>
-                            <div className={cx(props.kcInputWrapperClass)}>
-                                <input
-                                    type="text"
-                                    id="firstName"
-                                    className={cx(props.kcInputClass)}
-                                    name="firstName"
-                                    defaultValue={register.formData.firstName ?? ""}
-                                />
-                            </div>
+    const { msg, msgStr } = i18n;
+
+    const { cx } = useCssAndCx();
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            headerNode={msg("registerTitle")}
+            formNode={
+                <form id="kc-register-form" className={cx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
+                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
+                        <div className={cx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="firstName" className={cx(kcProps.kcLabelClass)}>
+                                {msg("firstName")}
+                            </label>
+                        </div>
+                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <input
+                                type="text"
+                                id="firstName"
+                                className={cx(kcProps.kcInputClass)}
+                                name="firstName"
+                                defaultValue={register.formData.firstName ?? ""}
+                            />
                         </div>
+                    </div>
 
-                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
-                            <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor="lastName" className={cx(props.kcLabelClass)}>
-                                    {msg("lastName")}
-                                </label>
-                            </div>
-                            <div className={cx(props.kcInputWrapperClass)}>
-                                <input
-                                    type="text"
-                                    id="lastName"
-                                    className={cx(props.kcInputClass)}
-                                    name="lastName"
-                                    defaultValue={register.formData.lastName ?? ""}
-                                />
-                            </div>
+                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
+                        <div className={cx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="lastName" className={cx(kcProps.kcLabelClass)}>
+                                {msg("lastName")}
+                            </label>
+                        </div>
+                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <input
+                                type="text"
+                                id="lastName"
+                                className={cx(kcProps.kcInputClass)}
+                                name="lastName"
+                                defaultValue={register.formData.lastName ?? ""}
+                            />
                         </div>
+                    </div>
 
-                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
-                            <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor="email" className={cx(props.kcLabelClass)}>
-                                    {msg("email")}
+                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
+                        <div className={cx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="email" className={cx(kcProps.kcLabelClass)}>
+                                {msg("email")}
+                            </label>
+                        </div>
+                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <input
+                                type="text"
+                                id="email"
+                                className={cx(kcProps.kcInputClass)}
+                                name="email"
+                                defaultValue={register.formData.email ?? ""}
+                                autoComplete="email"
+                            />
+                        </div>
+                    </div>
+                    {!realm.registrationEmailAsUsername && (
+                        <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
+                            <div className={cx(kcProps.kcLabelWrapperClass)}>
+                                <label htmlFor="username" className={cx(kcProps.kcLabelClass)}>
+                                    {msg("username")}
                                 </label>
                             </div>
-                            <div className={cx(props.kcInputWrapperClass)}>
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
                                 <input
                                     type="text"
-                                    id="email"
-                                    className={cx(props.kcInputClass)}
-                                    name="email"
-                                    defaultValue={register.formData.email ?? ""}
-                                    autoComplete="email"
+                                    id="username"
+                                    className={cx(kcProps.kcInputClass)}
+                                    name="username"
+                                    defaultValue={register.formData.username ?? ""}
+                                    autoComplete="username"
                                 />
                             </div>
                         </div>
-                        {!realm.registrationEmailAsUsername && (
-                            <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
-                                <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor="username" className={cx(props.kcLabelClass)}>
-                                        {msg("username")}
+                    )}
+                    {passwordRequired && (
+                        <>
+                            <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}>
+                                <div className={cx(kcProps.kcLabelWrapperClass)}>
+                                    <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
+                                        {msg("password")}
                                     </label>
                                 </div>
-                                <div className={cx(props.kcInputWrapperClass)}>
+                                <div className={cx(kcProps.kcInputWrapperClass)}>
                                     <input
-                                        type="text"
-                                        id="username"
-                                        className={cx(props.kcInputClass)}
-                                        name="username"
-                                        defaultValue={register.formData.username ?? ""}
-                                        autoComplete="username"
+                                        type="password"
+                                        id="password"
+                                        className={cx(kcProps.kcInputClass)}
+                                        name="password"
+                                        autoComplete="new-password"
                                     />
                                 </div>
                             </div>
-                        )}
-                        {passwordRequired && (
-                            <>
-                                <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
-                                    <div className={cx(props.kcLabelWrapperClass)}>
-                                        <label htmlFor="password" className={cx(props.kcLabelClass)}>
-                                            {msg("password")}
-                                        </label>
-                                    </div>
-                                    <div className={cx(props.kcInputWrapperClass)}>
-                                        <input
-                                            type="password"
-                                            id="password"
-                                            className={cx(props.kcInputClass)}
-                                            name="password"
-                                            autoComplete="new-password"
-                                        />
-                                    </div>
-                                </div>
 
-                                <div
-                                    className={cx(
-                                        props.kcFormGroupClass,
-                                        messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass)
-                                    )}
-                                >
-                                    <div className={cx(props.kcLabelWrapperClass)}>
-                                        <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
-                                            {msg("passwordConfirm")}
-                                        </label>
-                                    </div>
-                                    <div className={cx(props.kcInputWrapperClass)}>
-                                        <input type="password" id="password-confirm" className={cx(props.kcInputClass)} name="password-confirm" />
-                                    </div>
+                            <div
+                                className={cx(
+                                    kcProps.kcFormGroupClass,
+                                    messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass)
+                                )}
+                            >
+                                <div className={cx(kcProps.kcLabelWrapperClass)}>
+                                    <label htmlFor="password-confirm" className={cx(kcProps.kcLabelClass)}>
+                                        {msg("passwordConfirm")}
+                                    </label>
                                 </div>
-                            </>
-                        )}
-                        {recaptchaRequired && (
-                            <div className="form-group">
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
+                                <div className={cx(kcProps.kcInputWrapperClass)}>
+                                    <input type="password" id="password-confirm" className={cx(kcProps.kcInputClass)} name="password-confirm" />
                                 </div>
                             </div>
-                        )}
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                                <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                    <span>
-                                        <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                    </span>
-                                </div>
+                        </>
+                    )}
+                    {recaptchaRequired && (
+                        <div className="form-group">
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
                             </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("doRegister")}
-                                />
+                        </div>
+                    )}
+                    <div className={cx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
+                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
                             </div>
                         </div>
-                    </form>
-                }
-            />
-        );
-    }
-);
+
+                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                            <input
+                                className={cx(
+                                    kcProps.kcButtonClass,
+                                    kcProps.kcButtonPrimaryClass,
+                                    kcProps.kcButtonBlockClass,
+                                    kcProps.kcButtonLargeClass
+                                )}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
 export default Register;

package/src/lib/components/RegisterUserProfile.tsx

@@ -1,78 +1,81 @@
 import React, { useMemo, memo, useState } 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 RegisterUserProfile = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props_
-    }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+export type RegisterUserProfileProps = KcProps & {
+    kcContext: KcContextBase.RegisterUserProfile;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg, msgStr } = i18n;
+const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps_ } = props;
 
-        const { cx, css } = useCssAndCx();
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-        const props = useMemo(
-            () => ({
-                ...props_,
-                "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 }))
-            }),
-            [cx, css]
-        );
+    const { msg, msgStr } = i18n;
 
-        const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+    const { cx, css } = useCssAndCx();
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayMessage={messagesPerField.exists("global")}
-                displayRequiredFields={true}
-                headerNode={msg("registerTitle")}
-                formNode={
-                    <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                        <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
-                        {recaptchaRequired && (
-                            <div className="form-group">
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
-                                </div>
+    const kcProps = useMemo(
+        () => ({
+            ...kcProps_,
+            "kcFormGroupClass": cx(kcProps_.kcFormGroupClass, css({ "marginBottom": 20 }))
+        }),
+        [cx, css]
+    );
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            headerNode={msg("registerTitle")}
+            formNode={
+                <form id="kc-register-form" className={cx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
+                    {recaptchaRequired && (
+                        <div className="form-group">
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
                             </div>
-                        )}
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                                <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                    <span>
-                                        <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                    </span>
-                                </div>
+                        </div>
+                    )}
+                    <div className={cx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
+                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
                             </div>
+                        </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("doRegister")}
-                                    disabled={!isFomSubmittable}
-                                />
-                            </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("doRegister")}
+                                disabled={!isFomSubmittable}
+                            />
                         </div>
-                    </form>
-                }
-            />
-        );
-    }
-);
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
 export default RegisterUserProfile;

package/src/lib/components/Terms.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, 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";
@@ -12,6 +13,7 @@ import memoize from "memoizee";
 import { useConst } from "powerhooks/useConst";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import { Markdown } from "../tools/Markdown";
+import type { Extends } from "tsafe";
 
 export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
 
@@ -22,7 +24,7 @@ export type KcContextLike = {
     };
 };
 
-assert<KcContextBase extends KcContextLike ? true : false>();
+assert<Extends<KcContextBase, KcContextLike>>();
 
 /** Allow to avoid bundling the terms and download it on demand*/
 export function useDownloadTerms(params: {
@@ -54,61 +56,63 @@ export function useDownloadTerms(params: {
     }, []);
 }
 
-const Terms = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.Terms; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { msg, msgStr } = i18n;
+export type TermsProps = KcProps & {
+    kcContext: KcContextBase.Terms;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        useRerenderOnStateChange(evtTermMarkdown);
+const Terms = memo((props: TermsProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { cx } = useCssAndCx();
+    const { msg, msgStr } = i18n;
 
-        const { url } = kcContext;
+    useRerenderOnStateChange(evtTermMarkdown);
 
-        if (evtTermMarkdown.state === undefined) {
-            return null;
-        }
+    const { cx } = useCssAndCx();
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayMessage={false}
-                headerNode={msg("termsTitle")}
-                formNode={
-                    <>
-                        <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
-                        <form className="form-actions" action={url.loginAction} method="POST">
-                            <input
-                                className={cx(
-                                    props.kcButtonClass,
-                                    props.kcButtonClass,
-                                    props.kcButtonClass,
-                                    props.kcButtonPrimaryClass,
-                                    props.kcButtonLargeClass
-                                )}
-                                name="accept"
-                                id="kc-accept"
-                                type="submit"
-                                value={msgStr("doAccept")}
-                            />
-                            <input
-                                className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
-                                name="cancel"
-                                id="kc-decline"
-                                type="submit"
-                                value={msgStr("doDecline")}
-                            />
-                        </form>
-                        <div className="clearfix" />
-                    </>
-                }
-            />
-        );
+    const { url } = kcContext;
+
+    if (evtTermMarkdown.state === undefined) {
+        return null;
     }
-);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("termsTitle")}
+            formNode={
+                <>
+                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
+                    <form className="form-actions" action={url.loginAction} method="POST">
+                        <input
+                            className={cx(
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonPrimaryClass,
+                                kcProps.kcButtonLargeClass
+                            )}
+                            name="accept"
+                            id="kc-accept"
+                            type="submit"
+                            value={msgStr("doAccept")}
+                        />
+                        <input
+                            className={cx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
+                            name="cancel"
+                            id="kc-decline"
+                            type="submit"
+                            value={msgStr("doDecline")}
+                        />
+                    </form>
+                    <div className="clearfix" />
+                </>
+            }
+        />
+    );
+});
 
 export default Terms;