keycloakify 6.13.2 → 7.0.0-rc.3

package/src/pages/LoginVerifyEmail.tsx

@@ -0,0 +1,31 @@
+import { type PageProps } from "keycloakify/pages/PageProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { msg } = i18n;
+
+    const { url, user } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            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>
+                </>
+            }
+        />
+    );
+}

package/src/pages/LogoutConfirm.tsx

@@ -0,0 +1,63 @@
+import { clsx } from "keycloakify/tools/clsx";
+import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
+import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        classes
+    });
+
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            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={getClassName("kcFormGroupClass")}>
+                                <div id="kc-form-options">
+                                    <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                                </div>
+                                <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                                    <input
+                                        tabIndex={4}
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonPrimaryClass"),
+                                            getClassName("kcButtonBlockClass"),
+                                            getClassName("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>
+                </>
+            }
+        />
+    );
+}

package/src/pages/PageProps.ts

@@ -0,0 +1,144 @@
+import type { LazyExoticComponent } from "react";
+import type { I18n } from "keycloakify/i18n";
+import { type TemplateProps, type TemplateClassKey, defaultTemplateClasses } from "keycloakify/TemplateProps";
+
+export type PageProps<KcContext, I18nExtended extends I18n> = {
+    Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    kcContext: KcContext;
+    i18n: I18nExtended;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<TemplateClassKey | ClassKey, string>>;
+};
+
+export type ClassKey =
+    | TemplateClassKey
+    | "kcLogoClass"
+    | "kcContainerClass"
+    | "kcContentClass"
+    | "kcFeedbackAreaClass"
+    | "kcLocaleClass"
+    | "kcAlertIconClasserror"
+    | "kcFormAreaClass"
+    | "kcFormSocialAccountListClass"
+    | "kcFormSocialAccountDoubleListClass"
+    | "kcFormSocialAccountListLinkClass"
+    | "kcWebAuthnKeyIcon"
+    | "kcWebAuthnDefaultIcon"
+    | "kcFormClass"
+    | "kcFormGroupErrorClass"
+    | "kcLabelClass"
+    | "kcInputClass"
+    | "kcInputErrorMessageClass"
+    | "kcInputWrapperClass"
+    | "kcFormOptionsClass"
+    | "kcFormButtonsClass"
+    | "kcFormSettingClass"
+    | "kcTextareaClass"
+    | "kcInfoAreaClass"
+    | "kcFormGroupHeader"
+    | "kcButtonClass"
+    | "kcButtonPrimaryClass"
+    | "kcButtonDefaultClass"
+    | "kcButtonLargeClass"
+    | "kcButtonBlockClass"
+    | "kcInputLargeClass"
+    | "kcSrOnlyClass"
+    | "kcSelectAuthListClass"
+    | "kcSelectAuthListItemClass"
+    | "kcSelectAuthListItemFillClass"
+    | "kcSelectAuthListItemInfoClass"
+    | "kcSelectAuthListItemLeftClass"
+    | "kcSelectAuthListItemBodyClass"
+    | "kcSelectAuthListItemDescriptionClass"
+    | "kcSelectAuthListItemHeadingClass"
+    | "kcSelectAuthListItemHelpTextClass"
+    | "kcSelectAuthListItemIconPropertyClass"
+    | "kcSelectAuthListItemIconClass"
+    | "kcSelectAuthListItemTitle"
+    | "kcAuthenticatorDefaultClass"
+    | "kcAuthenticatorPasswordClass"
+    | "kcAuthenticatorOTPClass"
+    | "kcAuthenticatorWebAuthnClass"
+    | "kcAuthenticatorWebAuthnPasswordlessClass"
+    | "kcSelectOTPListClass"
+    | "kcSelectOTPListItemClass"
+    | "kcAuthenticatorOtpCircleClass"
+    | "kcSelectOTPItemHeadingClass"
+    | "kcFormOptionsWrapperClass";
+
+export const defaultClasses: Record<ClassKey, string | undefined> = {
+    ...defaultTemplateClasses,
+
+    "kcLogoClass": "login-pf-brand",
+    "kcContainerClass": "container-fluid",
+    "kcContentClass": "col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3",
+    "kcFeedbackAreaClass": "col-md-12",
+    "kcLocaleClass": "col-xs-12 col-sm-1",
+    "kcAlertIconClasserror": "pficon pficon-error-circle-o",
+
+    "kcFormAreaClass": "col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2",
+    "kcFormSocialAccountListClass": "login-pf-social list-unstyled login-pf-social-all",
+    "kcFormSocialAccountDoubleListClass": "login-pf-social-double-col",
+    "kcFormSocialAccountListLinkClass": "login-pf-social-link",
+    "kcWebAuthnKeyIcon": "pficon pficon-key",
+    "kcWebAuthnDefaultIcon": "pficon pficon-key",
+
+    "kcFormClass": "form-horizontal",
+    "kcFormGroupErrorClass": "has-error",
+    "kcLabelClass": "control-label",
+    "kcInputClass": "form-control",
+    "kcInputErrorMessageClass": "pf-c-form__helper-text pf-m-error required kc-feedback-text",
+    "kcInputWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+    "kcFormOptionsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+    "kcFormButtonsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+    "kcFormSettingClass": "login-pf-settings",
+    "kcTextareaClass": "form-control",
+
+    "kcInfoAreaClass": "col-xs-12 col-sm-4 col-md-4 col-lg-5 details",
+
+    // user-profile grouping
+    "kcFormGroupHeader": "pf-c-form__group",
+
+    // css classes for form buttons main class used for all buttons
+    "kcButtonClass": "btn",
+    // classes defining priority of the button - primary or default (there is typically only one priority button for the form)
+    "kcButtonPrimaryClass": "btn-primary",
+    "kcButtonDefaultClass": "btn-default",
+    // classes defining size of the button
+    "kcButtonLargeClass": "btn-lg",
+    "kcButtonBlockClass": "btn-block",
+
+    // css classes for input
+    "kcInputLargeClass": "input-lg",
+
+    // css classes for form accessability
+    "kcSrOnlyClass": "sr-only",
+
+    // css classes for select-authenticator form
+    "kcSelectAuthListClass": "list-group list-view-pf",
+    "kcSelectAuthListItemClass": "list-group-item list-view-pf-stacked",
+    "kcSelectAuthListItemFillClass": "pf-l-split__item pf-m-fill",
+    "kcSelectAuthListItemIconPropertyClass": "fa-2x select-auth-box-icon-properties",
+    "kcSelectAuthListItemIconClass": "pf-l-split__item select-auth-box-icon",
+    "kcSelectAuthListItemTitle": "select-auth-box-paragraph",
+    "kcSelectAuthListItemInfoClass": "list-view-pf-main-info",
+    "kcSelectAuthListItemLeftClass": "list-view-pf-left",
+    "kcSelectAuthListItemBodyClass": "list-view-pf-body",
+    "kcSelectAuthListItemDescriptionClass": "list-view-pf-description",
+    "kcSelectAuthListItemHeadingClass": "list-group-item-heading",
+    "kcSelectAuthListItemHelpTextClass": "list-group-item-text",
+
+    // css classes for the authenticators
+    "kcAuthenticatorDefaultClass": "fa list-view-pf-icon-lg",
+    "kcAuthenticatorPasswordClass": "fa fa-unlock list-view-pf-icon-lg",
+    "kcAuthenticatorOTPClass": "fa fa-mobile list-view-pf-icon-lg",
+    "kcAuthenticatorWebAuthnClass": "fa fa-key list-view-pf-icon-lg",
+    "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
+
+    //css classes for the OTP Login Form
+    "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
+    "kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
+    "kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
+    "kcSelectOTPItemHeadingClass": "card-pf-title text-center",
+    "kcFormOptionsWrapperClass": undefined
+};

package/src/pages/Register.tsx

@@ -0,0 +1,189 @@
+import { clsx } from "keycloakify/tools/clsx";
+import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
+import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        classes
+    });
+
+    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            headerNode={msg("registerTitle")}
+            formNode={
+                <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+                    <div
+                        className={clsx(
+                            getClassName("kcFormGroupClass"),
+                            messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
+                        )}
+                    >
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
+                                {msg("firstName")}
+                            </label>
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="firstName"
+                                className={getClassName("kcInputClass")}
+                                name="firstName"
+                                defaultValue={register.formData.firstName ?? ""}
+                            />
+                        </div>
+                    </div>
+
+                    <div
+                        className={clsx(
+                            getClassName("kcFormGroupClass"),
+                            messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
+                        )}
+                    >
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
+                                {msg("lastName")}
+                            </label>
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="lastName"
+                                className={getClassName("kcInputClass")}
+                                name="lastName"
+                                defaultValue={register.formData.lastName ?? ""}
+                            />
+                        </div>
+                    </div>
+
+                    <div
+                        className={clsx(
+                            getClassName("kcFormGroupClass"),
+                            messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
+                        )}
+                    >
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="email" className={getClassName("kcLabelClass")}>
+                                {msg("email")}
+                            </label>
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="email"
+                                className={getClassName("kcInputClass")}
+                                name="email"
+                                defaultValue={register.formData.email ?? ""}
+                                autoComplete="email"
+                            />
+                        </div>
+                    </div>
+                    {!realm.registrationEmailAsUsername && (
+                        <div
+                            className={clsx(
+                                getClassName("kcFormGroupClass"),
+                                messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
+                            )}
+                        >
+                            <div className={getClassName("kcLabelWrapperClass")}>
+                                <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                                    {msg("username")}
+                                </label>
+                            </div>
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                <input
+                                    type="text"
+                                    id="username"
+                                    className={getClassName("kcInputClass")}
+                                    name="username"
+                                    defaultValue={register.formData.username ?? ""}
+                                    autoComplete="username"
+                                />
+                            </div>
+                        </div>
+                    )}
+                    {passwordRequired && (
+                        <>
+                            <div
+                                className={clsx(
+                                    getClassName("kcFormGroupClass"),
+                                    messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
+                                )}
+                            >
+                                <div className={getClassName("kcLabelWrapperClass")}>
+                                    <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                                        {msg("password")}
+                                    </label>
+                                </div>
+                                <div className={getClassName("kcInputWrapperClass")}>
+                                    <input
+                                        type="password"
+                                        id="password"
+                                        className={getClassName("kcInputClass")}
+                                        name="password"
+                                        autoComplete="new-password"
+                                    />
+                                </div>
+                            </div>
+
+                            <div
+                                className={clsx(
+                                    getClassName("kcFormGroupClass"),
+                                    messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
+                                )}
+                            >
+                                <div className={getClassName("kcLabelWrapperClass")}>
+                                    <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
+                                        {msg("passwordConfirm")}
+                                    </label>
+                                </div>
+                                <div className={getClassName("kcInputWrapperClass")}>
+                                    <input type="password" id="password-confirm" className={getClassName("kcInputClass")} name="password-confirm" />
+                                </div>
+                            </div>
+                        </>
+                    )}
+                    {recaptchaRequired && (
+                        <div className="form-group">
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
+                            </div>
+                        </div>
+                    )}
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                            <div className={getClassName("kcFormOptionsWrapperClass")}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+}

package/src/pages/RegisterUserProfile.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
+import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function RegisterUserProfile(props: PageProps<Extract<KcContext, { pageId: "register-user-profile.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        classes
+    });
+
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            headerNode={msg("registerTitle")}
+            formNode={
+                <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+                    <UserProfileFormFields
+                        kcContext={kcContext}
+                        onIsFormSubmittableValueChange={setIsFomSubmittable}
+                        i18n={i18n}
+                        getClassName={getClassName}
+                    />
+                    {recaptchaRequired && (
+                        <div className="form-group">
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
+                            </div>
+                        </div>
+                    )}
+                    <div className={getClassName("kcFormGroupClass")} style={{ "marginBottom": 30 }}>
+                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                            <div className={getClassName("kcFormOptionsWrapperClass")}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                                disabled={!isFomSubmittable}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+}

package/src/pages/Terms.tsx

@@ -0,0 +1,63 @@
+import { clsx } from "keycloakify/tools/clsx";
+import { useRerenderOnStateChange } from "evt/hooks";
+import { Markdown } from "keycloakify/tools/Markdown";
+import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
+import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import { evtTermMarkdown } from "keycloakify/lib/useDownloadTerms";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    useRerenderOnStateChange(evtTermMarkdown);
+
+    const { url } = kcContext;
+
+    if (evtTermMarkdown.state === undefined) {
+        return null;
+    }
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            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={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            name="accept"
+                            id="kc-accept"
+                            type="submit"
+                            value={msgStr("doAccept")}
+                        />
+                        <input
+                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                            name="cancel"
+                            id="kc-decline"
+                            type="submit"
+                            value={msgStr("doDecline")}
+                        />
+                    </form>
+                    <div className="clearfix" />
+                </>
+            }
+        />
+    );
+}

package/src/pages/UpdateUserProfile.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { UserProfileFormFields } from "keycloakify/pages/shared/UserProfileCommons";
+import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
+import { useGetClassName } from "keycloakify/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function UpdateUserProfile(props: PageProps<Extract<KcContext, { pageId: "update-user-profile.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        "defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            headerNode={msg("loginProfileTitle")}
+            formNode={
+                <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                    <UserProfileFormFields
+                        kcContext={kcContext}
+                        onIsFormSubmittableValueChange={setIsFomSubmittable}
+                        i18n={i18n}
+                        getClassName={getClassName}
+                    />
+
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                            <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                            {isAppInitiatedAction ? (
+                                <>
+                                    <input
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonPrimaryClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        type="submit"
+                                        value={msgStr("doSubmit")}
+                                    />
+                                    <button
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonDefaultClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        type="submit"
+                                        name="cancel-aia"
+                                        value="true"
+                                        formNoValidate
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </>
+                            ) : (
+                                <input
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonPrimaryClass"),
+                                        getClassName("kcButtonBlockClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    type="submit"
+                                    defaultValue={msgStr("doSubmit")}
+                                    disabled={!isFomSubmittable}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+}