keycloakify 6.0.0-beta.0 → 6.0.0-beta.12

package/src/lib/components/LoginUpdateProfile.tsx

@@ -1,128 +1,122 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
-import { useCssAndCx } from "tss-react";
 
-export const LoginUpdateProfile = memo(
-    ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; useI18n: () => I18n } & KcProps) => {
-        const { cx } = useCssAndCx();
+const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n } & KcProps) => {
+    const { cx } = useCssAndCx();
 
-        const { msg, msgStr } = useI18n();
+    const { msg, msgStr } = i18n;
 
-        const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
+    const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
 
-        return (
-            <Template
-                {...{ kcContext, useI18n, ...props }}
-                doFetchDefaultThemeResources={true}
-                headerNode={msg("loginProfileTitle")}
-                formNode={
-                    <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-                        {user.editUsernameAllowed && (
-                            <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
-                                <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor="username" className={cx(props.kcLabelClass)}>
-                                        {msg("username")}
-                                    </label>
-                                </div>
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    <input
-                                        type="text"
-                                        id="username"
-                                        name="username"
-                                        defaultValue={user.username ?? ""}
-                                        className={cx(props.kcInputClass)}
-                                    />
-                                </div>
-                            </div>
-                        )}
-
-                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("loginProfileTitle")}
+            formNode={
+                <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    {user.editUsernameAllowed && (
+                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
                             <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor="email" className={cx(props.kcLabelClass)}>
-                                    {msg("email")}
-                                </label>
-                            </div>
-                            <div className={cx(props.kcInputWrapperClass)}>
-                                <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(props.kcInputClass)} />
-                            </div>
-                        </div>
-
-                        <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 htmlFor="username" className={cx(props.kcLabelClass)}>
+                                    {msg("username")}
                                 </label>
                             </div>
                             <div className={cx(props.kcInputWrapperClass)}>
                                 <input
                                     type="text"
-                                    id="firstName"
-                                    name="firstName"
-                                    defaultValue={user.firstName ?? ""}
+                                    id="username"
+                                    name="username"
+                                    defaultValue={user.username ?? ""}
                                     className={cx(props.kcInputClass)}
                                 />
                             </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"
-                                    name="lastName"
-                                    defaultValue={user.lastName ?? ""}
-                                    className={cx(props.kcInputClass)}
-                                />
-                            </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")}
+                            </label>
                         </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(props.kcInputClass)} />
+                        </div>
+                    </div>
 
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                                <div className={cx(props.kcFormOptionsWrapperClass)} />
-                            </div>
+                    <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"
+                                name="firstName"
+                                defaultValue={user.firstName ?? ""}
+                                className={cx(props.kcInputClass)}
+                            />
+                        </div>
+                    </div>
 
-                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                                {isAppInitiatedAction ? (
-                                    <>
-                                        <input
-                                            className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
-                                            type="submit"
-                                            defaultValue={msgStr("doSubmit")}
-                                        />
-                                        <button
-                                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
-                                            type="submit"
-                                            name="cancel-aia"
-                                            value="true"
-                                        >
-                                            {msg("doCancel")}
-                                        </button>
-                                    </>
-                                ) : (
+                    <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" name="lastName" defaultValue={user.lastName ?? ""} className={cx(props.kcInputClass)} />
+                        </div>
+                    </div>
+
+                    <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)}>
+                            {isAppInitiatedAction ? (
+                                <>
                                     <input
-                                        className={cx(
-                                            props.kcButtonClass,
-                                            props.kcButtonPrimaryClass,
-                                            props.kcButtonBlockClass,
-                                            props.kcButtonLargeClass,
-                                        )}
+                                        className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
                                         type="submit"
                                         defaultValue={msgStr("doSubmit")}
                                     />
-                                )}
-                            </div>
+                                    <button
+                                        className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        name="cancel-aia"
+                                        value="true"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </>
+                            ) : (
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
+                                    type="submit"
+                                    defaultValue={msgStr("doSubmit")}
+                                />
+                            )}
                         </div>
-                    </form>
-                }
-            />
-        );
-    },
-);
+                    </div>
+                </form>
+            }
+        />
+    );
+});
+
+export default LoginUpdateProfile;

package/src/lib/components/LoginVerifyEmail.tsx

@@ -1,32 +1,34 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-export const LoginVerifyEmail = memo(
-    ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; useI18n: () => I18n } & KcProps) => {
-        const { msg } = useI18n();
+const LoginVerifyEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n } & KcProps) => {
+    const { msg } = i18n;
 
-        const { url } = kcContext;
+    const { url, user } = kcContext;
 
-        return (
-            <Template
-                {...{ kcContext, useI18n, ...props }}
-                doFetchDefaultThemeResources={true}
-                displayMessage={false}
-                headerNode={msg("emailVerifyTitle")}
-                formNode={
-                    <>
-                        <p className="instruction">{msg("emailVerifyInstruction1")}</p>
-                        <p className="instruction">
-                            {msg("emailVerifyInstruction2")}
-                            <a href={url.loginAction}>{msg("doClickHere")}</a>
-                            {msg("emailVerifyInstruction3")}
-                        </p>
-                    </>
-                }
-            />
-        );
-    },
-);
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            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

@@ -0,0 +1,62 @@
+import React, { memo } from "react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import type { I18n } from "../i18n";
+
+const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n } & KcProps) => {
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            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>
+                            </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;

package/src/lib/components/Register.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
-import { useCssAndCx } from "tss-react";
 
-export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Register; useI18n: () => I18n } & KcProps) => {
+const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Register; i18n: I18n } & KcProps) => {
     const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-    const { msg, msgStr } = useI18n();
+    const { msg, msgStr } = i18n;
 
     const { cx } = useCssAndCx();
 
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("registerTitle")}
             formNode={
@@ -111,7 +111,7 @@ export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcC
                             <div
                                 className={cx(
                                     props.kcFormGroupClass,
-                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass),
+                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass)
                                 )}
                             >
                                 <div className={cx(props.kcLabelWrapperClass)}>
@@ -154,3 +154,5 @@ export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcC
         />
     );
 });
+
+export default Register;

package/src/lib/components/RegisterUserProfile.tsx

@@ -1,100 +1,88 @@
-import { useMemo, memo, useEffect, useState, Fragment } from "react";
-import { Template } from "./Template";
+import React, { useMemo, memo, useEffect, useState, Fragment } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { ReactComponent } from "../tools/ReactComponent";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { useFormValidationSlice } from "../useFormValidationSlice";
+import type { I18n } from "../i18n";
 
-export const RegisterUserProfile = memo(
-    ({ kcContext, useI18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; useI18n: () => I18n } & KcProps) => {
-        const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
-
-        const { msg, msgStr } = useI18n();
-
-        const { cx, css } = useCssAndCx();
-
-        const props = useMemo(
-            () => ({
-                ...props_,
-                "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 })),
-            }),
-            [cx, css],
-        );
-
-        const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-        return (
-            <Template
-                {...{ kcContext, useI18n, ...props }}
-                displayMessage={messagesPerField.exists("global")}
-                displayRequiredFields={true}
-                doFetchDefaultThemeResources={true}
-                headerNode={msg("registerTitle")}
-                formNode={
-                    <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                        <UserProfileFormFields
-                            kcContext={kcContext}
-                            onIsFormSubmittableValueChange={setIsFomSubmittable}
-                            useI18n={useI18n}
-                            {...props}
-                        />
-                        {recaptchaRequired && (
-                            <div className="form-group">
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
-                                </div>
+const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps) => {
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { cx, css } = useCssAndCx();
+
+    const props = useMemo(
+        () => ({
+            ...props_,
+            "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 }))
+        }),
+        [cx, css]
+    );
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            doFetchDefaultThemeResources={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>
-                        )}
-                        <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(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 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(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                                disabled={!isFomSubmittable}
+                            />
                         </div>
-                    </form>
-                }
-            />
-        );
-    },
-);
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
-type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; useI18n: () => I18n } & KcProps &
+type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps &
     Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
         onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
     };
 
-const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableValueChange, ...props }: UserProfileFormFieldsProps) => {
+const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, i18n, ...props }: UserProfileFormFieldsProps) => {
     const { cx, css } = useCssAndCx();
 
-    const { advancedMsg } = useI18n();
+    const { advancedMsg } = i18n;
 
     const {
         formValidationState: { fieldStateByAttributeName, isFormSubmittable },
         formValidationReducer,
-        attributesWithPassword,
+        attributesWithPassword
     } = useFormValidationSlice({
         kcContext,
-        useI18n,
+        i18n
     });
 
     useEffect(() => {
@@ -106,22 +94,22 @@ const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableVal
             [name]: [string],
             [
                 {
-                    target: { value },
-                },
-            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>],
+                    target: { value }
+                }
+            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
         ) =>
             formValidationReducer({
                 "action": "update value",
                 name,
-                "newValue": value,
-            }),
+                "newValue": value
+            })
     );
 
     const onBlurFactory = useCallbackFactory(([name]: [string]) =>
         formValidationReducer({
             "action": "focus lost",
-            name,
-        }),
+            name
+        })
     );
 
     let currentGroup = "";
@@ -212,8 +200,8 @@ const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableVal
                                             props.kcInputErrorMessageClass,
                                             css({
                                                 "position": displayableErrors.length === 1 ? "absolute" : undefined,
-                                                "& > span": { "display": "block" },
-                                            }),
+                                                "& > span": { "display": "block" }
+                                            })
                                         )}
                                         aria-live="polite"
                                     >
@@ -228,3 +216,5 @@ const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableVal
         </>
     );
 });
+
+export default RegisterUserProfile;