keycloakify 6.7.2 → 6.8.1

package/src/lib/components/LoginUsername.tsx

@@ -1,5 +1,6 @@
 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";
@@ -7,162 +8,164 @@ import { useConstCallback } from "powerhooks/useConstCallback";
 import type { FormEventHandler } from "react";
 import type { I18n } from "../i18n";
 
-const LoginUsername = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.LoginUsername; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;
+export type LoginUsernameProps = KcProps & {
+    kcContext: KcContextBase.LoginUsername;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg, msgStr } = i18n;
+const LoginUsername = memo((props: LoginUsernameProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { cx } = useCssAndCx();
+    const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;
 
-        const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+    const { msg, msgStr } = i18n;
 
-        const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
-            e.preventDefault();
+    const { cx } = useCssAndCx();
 
-            setIsLoginButtonDisabled(true);
+    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
-            const formElement = e.target as HTMLFormElement;
+    const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
+        e.preventDefault();
 
-            //NOTE: Even if we login with email Keycloak expect username and password in
-            //the POST request.
-            formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
+        setIsLoginButtonDisabled(true);
 
-            formElement.submit();
-        });
+        const formElement = e.target as HTMLFormElement;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayInfo={social.displayInfo}
-                displayWide={realm.password && social.providers !== undefined}
-                headerNode={msg("doLogIn")}
-                formNode={
-                    <div id="kc-form" className={cx(realm.password && social.providers !== undefined && props.kcContentWrapperClass)}>
-                        <div
-                            id="kc-form-wrapper"
-                            className={cx(
-                                realm.password && social.providers && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass]
-                            )}
-                        >
-                            {realm.password && (
-                                <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                    <div className={cx(props.kcFormGroupClass)}>
-                                        {!usernameHidden &&
-                                            (() => {
-                                                const label = !realm.loginWithEmailAllowed
-                                                    ? "username"
-                                                    : realm.registrationEmailAsUsername
-                                                    ? "email"
-                                                    : "usernameOrEmail";
+        //NOTE: Even if we login with email Keycloak expect username and password in
+        //the POST request.
+        formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
 
-                                                const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+        formElement.submit();
+    });
 
-                                                return (
-                                                    <>
-                                                        <label htmlFor={autoCompleteHelper} className={cx(props.kcLabelClass)}>
-                                                            {msg(label)}
-                                                        </label>
-                                                        <input
-                                                            tabIndex={1}
-                                                            id={autoCompleteHelper}
-                                                            className={cx(props.kcInputClass)}
-                                                            //NOTE: This is used by Google Chrome auto fill so we use it to tell
-                                                            //the browser how to pre fill the form but before submit we put it back
-                                                            //to username because it is what keycloak expects.
-                                                            name={autoCompleteHelper}
-                                                            defaultValue={login.username ?? ""}
-                                                            type="text"
-                                                            autoFocus={true}
-                                                            autoComplete="off"
-                                                        />
-                                                    </>
-                                                );
-                                            })()}
-                                    </div>
-                                    <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
-                                        <div id="kc-form-options">
-                                            {realm.rememberMe && !usernameHidden && (
-                                                <div className="checkbox">
-                                                    <label>
-                                                        <input
-                                                            tabIndex={3}
-                                                            id="rememberMe"
-                                                            name="rememberMe"
-                                                            type="checkbox"
-                                                            {...(login.rememberMe
-                                                                ? {
-                                                                      "checked": true
-                                                                  }
-                                                                : {})}
-                                                        />
-                                                        {msg("rememberMe")}
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayInfo={social.displayInfo}
+            displayWide={realm.password && social.providers !== undefined}
+            headerNode={msg("doLogIn")}
+            formNode={
+                <div id="kc-form" className={cx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
+                    <div
+                        id="kc-form-wrapper"
+                        className={cx(
+                            realm.password && social.providers && [kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass]
+                        )}
+                    >
+                        {realm.password && (
+                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                                <div className={cx(kcProps.kcFormGroupClass)}>
+                                    {!usernameHidden &&
+                                        (() => {
+                                            const label = !realm.loginWithEmailAllowed
+                                                ? "username"
+                                                : realm.registrationEmailAsUsername
+                                                ? "email"
+                                                : "usernameOrEmail";
+
+                                            const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+
+                                            return (
+                                                <>
+                                                    <label htmlFor={autoCompleteHelper} className={cx(kcProps.kcLabelClass)}>
+                                                        {msg(label)}
                                                     </label>
-                                                </div>
-                                            )}
-                                        </div>
+                                                    <input
+                                                        tabIndex={1}
+                                                        id={autoCompleteHelper}
+                                                        className={cx(kcProps.kcInputClass)}
+                                                        //NOTE: This is used by Google Chrome auto fill so we use it to tell
+                                                        //the browser how to pre fill the form but before submit we put it back
+                                                        //to username because it is what keycloak expects.
+                                                        name={autoCompleteHelper}
+                                                        defaultValue={login.username ?? ""}
+                                                        type="text"
+                                                        autoFocus={true}
+                                                        autoComplete="off"
+                                                    />
+                                                </>
+                                            );
+                                        })()}
+                                </div>
+                                <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
+                                    <div id="kc-form-options">
+                                        {realm.rememberMe && !usernameHidden && (
+                                            <div className="checkbox">
+                                                <label>
+                                                    <input
+                                                        tabIndex={3}
+                                                        id="rememberMe"
+                                                        name="rememberMe"
+                                                        type="checkbox"
+                                                        {...(login.rememberMe
+                                                            ? {
+                                                                  "checked": true
+                                                              }
+                                                            : {})}
+                                                    />
+                                                    {msg("rememberMe")}
+                                                </label>
+                                            </div>
+                                        )}
                                     </div>
-                                    <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
-                                        <input
-                                            tabIndex={4}
-                                            className={cx(
-                                                props.kcButtonClass,
-                                                props.kcButtonPrimaryClass,
-                                                props.kcButtonBlockClass,
-                                                props.kcButtonLargeClass
-                                            )}
-                                            name="login"
-                                            id="kc-login"
-                                            type="submit"
-                                            value={msgStr("doLogIn")}
-                                            disabled={isLoginButtonDisabled}
-                                        />
-                                    </div>
-                                </form>
-                            )}
-                        </div>
-                        {realm.password && social.providers !== undefined && (
-                            <div id="kc-social-providers" className={cx(props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass)}>
-                                <ul
-                                    className={cx(
-                                        props.kcFormSocialAccountListClass,
-                                        social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass
-                                    )}
-                                >
-                                    {social.providers.map(p => (
-                                        <li key={p.providerId} className={cx(props.kcFormSocialAccountListLinkClass)}>
-                                            <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
-                                                <span>{p.displayName}</span>
-                                            </a>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
+                                </div>
+                                <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
+                                    <input
+                                        tabIndex={4}
+                                        className={cx(
+                                            kcProps.kcButtonClass,
+                                            kcProps.kcButtonPrimaryClass,
+                                            kcProps.kcButtonBlockClass,
+                                            kcProps.kcButtonLargeClass
+                                        )}
+                                        name="login"
+                                        id="kc-login"
+                                        type="submit"
+                                        value={msgStr("doLogIn")}
+                                        disabled={isLoginButtonDisabled}
+                                    />
+                                </div>
+                            </form>
                         )}
                     </div>
-                }
-                infoNode={
-                    realm.password &&
-                    realm.registrationAllowed &&
-                    !registrationDisabled && (
-                        <div id="kc-registration">
-                            <span>
-                                {msg("noAccount")}
-                                <a tabIndex={6} href={url.registrationUrl}>
-                                    {msg("doRegister")}
-                                </a>
-                            </span>
+                    {realm.password && social.providers !== undefined && (
+                        <div id="kc-social-providers" className={cx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
+                            <ul
+                                className={cx(
+                                    kcProps.kcFormSocialAccountListClass,
+                                    social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
+                                )}
+                            >
+                                {social.providers.map(p => (
+                                    <li key={p.providerId} className={cx(kcProps.kcFormSocialAccountListLinkClass)}>
+                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
+                                            <span>{p.displayName}</span>
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
                         </div>
-                    )
-                }
-            />
-        );
-    }
-);
+                    )}
+                </div>
+            }
+            infoNode={
+                realm.password &&
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            {msg("noAccount")}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        />
+    );
+});
 
 export default LoginUsername;

package/src/lib/components/LoginVerifyEmail.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 LoginVerifyEmail = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { msg } = i18n;
+export type LoginVerifyEmailProps = KcProps & {
+    kcContext: KcContextBase.LoginVerifyEmail;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { url, user } = kcContext;
+const LoginVerifyEmail = memo((props: LoginVerifyEmailProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayMessage={false}
-                headerNode={msg("emailVerifyTitle")}
-                formNode={
-                    <>
-                        <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
-                        <p className="instruction">
-                            {msg("emailVerifyInstruction2")}
-                            <br />
-                            <a href={url.loginAction}>{msg("doClickHere")}</a>
-                            &nbsp;
-                            {msg("emailVerifyInstruction3")}
-                        </p>
-                    </>
-                }
-            />
-        );
-    }
-);
+    const { msg } = i18n;
+
+    const { url, user } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("emailVerifyTitle")}
+            formNode={
+                <>
+                    <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
+                    <p className="instruction">
+                        {msg("emailVerifyInstruction2")}
+                        <br />
+                        <a href={url.loginAction}>{msg("doClickHere")}</a>
+                        &nbsp;
+                        {msg("emailVerifyInstruction3")}
+                    </p>
+                </>
+            }
+        />
+    );
+});
 
 export default LoginVerifyEmail;

package/src/lib/components/LogoutConfirm.tsx

@@ -1,68 +1,71 @@
 import React, { memo } from "react";
 import { useCssAndCx } from "../tools/useCssAndCx";
-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 LogoutConfirm = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url, client, logoutConfirm } = kcContext;
+export type LogoutConfirmProps = KcProps & {
+    kcContext: KcContextBase.LogoutConfirm;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { cx } = useCssAndCx();
+const LogoutConfirm = memo((props: LogoutConfirmProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { msg, msgStr } = i18n;
+    const { url, client, logoutConfirm } = kcContext;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                displayMessage={false}
-                headerNode={msg("logoutConfirmTitle")}
-                formNode={
-                    <>
-                        <div id="kc-logout-confirm" className="content-area">
-                            <p className="instruction">{msg("logoutConfirmHeader")}</p>
-                            <form className="form-actions" action={url.logoutConfirmAction} method="POST">
-                                <input type="hidden" name="session_code" value={logoutConfirm.code} />
-                                <div className={cx(props.kcFormGroupClass)}>
-                                    <div id="kc-form-options">
-                                        <div className={cx(props.kcFormOptionsWrapperClass)}></div>
-                                    </div>
-                                    <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
-                                        <input
-                                            tabIndex={4}
-                                            className={cx(
-                                                props.kcButtonClass,
-                                                props.kcButtonPrimaryClass,
-                                                props.kcButtonBlockClass,
-                                                props.kcButtonLargeClass
-                                            )}
-                                            name="confirmLogout"
-                                            id="kc-logout"
-                                            type="submit"
-                                            value={msgStr("doLogout")}
-                                        />
-                                    </div>
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("logoutConfirmTitle")}
+            formNode={
+                <>
+                    <div id="kc-logout-confirm" className="content-area">
+                        <p className="instruction">{msg("logoutConfirmHeader")}</p>
+                        <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                            <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                            <div className={cx(kcProps.kcFormGroupClass)}>
+                                <div id="kc-form-options">
+                                    <div className={cx(kcProps.kcFormOptionsWrapperClass)}></div>
+                                </div>
+                                <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
+                                    <input
+                                        tabIndex={4}
+                                        className={cx(
+                                            kcProps.kcButtonClass,
+                                            kcProps.kcButtonPrimaryClass,
+                                            kcProps.kcButtonBlockClass,
+                                            kcProps.kcButtonLargeClass
+                                        )}
+                                        name="confirmLogout"
+                                        id="kc-logout"
+                                        type="submit"
+                                        value={msgStr("doLogout")}
+                                    />
                                 </div>
-                            </form>
-                            <div id="kc-info-message">
-                                {!logoutConfirm.skipLink && client.baseUrl && (
-                                    <p>
-                                        <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
-                                    </p>
-                                )}
                             </div>
+                        </form>
+                        <div id="kc-info-message">
+                            {!logoutConfirm.skipLink && client.baseUrl && (
+                                <p>
+                                    <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
+                                </p>
+                            )}
                         </div>
-                    </>
-                }
-            />
-        );
-    }
-);
+                    </div>
+                </>
+            }
+        />
+    );
+});
 
 export default LogoutConfirm;