keycloakify 7.0.0-rc.3 → 7.0.0-rc.6

package/src/pages/LogoutConfirm.tsx

@@ -1,63 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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>
-            }
-        />
-    );
-}