keycloakify 6.13.2 → 7.0.0-rc.3

package/src/lib/pages/LoginUpdatePassword.tsx

@@ -1,117 +0,0 @@
-import React from "react";
-import { clsx } from "../tools/clsx";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function LoginUpdatePassword(props: PageProps<Extract<KcContextBase, { pageId: "login-update-password.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { msg, msgStr } = i18n;
-
-    const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            headerNode={msg("updatePasswordTitle")}
-            formNode={
-                <form id="kc-passwd-update-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
-                    <input
-                        type="text"
-                        id="username"
-                        name="username"
-                        value={username}
-                        readOnly={true}
-                        autoComplete="username"
-                        style={{ display: "none" }}
-                    />
-                    <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
-
-                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}>
-                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="password-new" className={clsx(kcProps.kcLabelClass)}>
-                                {msg("passwordNew")}
-                            </label>
-                        </div>
-                        <div className={clsx(kcProps.kcInputWrapperClass)}>
-                            <input
-                                type="password"
-                                id="password-new"
-                                name="password-new"
-                                autoFocus
-                                autoComplete="new-password"
-                                className={clsx(kcProps.kcInputClass)}
-                            />
-                        </div>
-                    </div>
-
-                    <div
-                        className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass))}
-                    >
-                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="password-confirm" className={clsx(kcProps.kcLabelClass)}>
-                                {msg("passwordConfirm")}
-                            </label>
-                        </div>
-                        <div className={clsx(kcProps.kcInputWrapperClass)}>
-                            <input
-                                type="password"
-                                id="password-confirm"
-                                name="password-confirm"
-                                autoComplete="new-password"
-                                className={clsx(kcProps.kcInputClass)}
-                            />
-                        </div>
-                    </div>
-
-                    <div className={clsx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
-                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
-                                {isAppInitiatedAction && (
-                                    <div className="checkbox">
-                                        <label>
-                                            <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
-                                            {msgStr("logoutOtherSessions")}
-                                        </label>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-
-                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
-                            {isAppInitiatedAction ? (
-                                <>
-                                    <input
-                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
-                                        type="submit"
-                                        defaultValue={msgStr("doSubmit")}
-                                    />
-                                    <button
-                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
-                                <input
-                                    className={clsx(
-                                        kcProps.kcButtonClass,
-                                        kcProps.kcButtonPrimaryClass,
-                                        kcProps.kcButtonBlockClass,
-                                        kcProps.kcButtonLargeClass
-                                    )}
-                                    type="submit"
-                                    defaultValue={msgStr("doSubmit")}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-}

package/src/lib/pages/LoginUpdateProfile.tsx

@@ -1,124 +0,0 @@
-import React from "react";
-import { clsx } from "../tools/clsx";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function LoginUpdateProfile(props: PageProps<Extract<KcContextBase, { pageId: "login-update-profile.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { msg, msgStr } = i18n;
-
-    const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            headerNode={msg("loginProfileTitle")}
-            formNode={
-                <form id="kc-update-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
-                    {user.editUsernameAllowed && (
-                        <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
-                            <div className={clsx(kcProps.kcLabelWrapperClass)}>
-                                <label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
-                                    {msg("username")}
-                                </label>
-                            </div>
-                            <div className={clsx(kcProps.kcInputWrapperClass)}>
-                                <input
-                                    type="text"
-                                    id="username"
-                                    name="username"
-                                    defaultValue={user.username ?? ""}
-                                    className={clsx(kcProps.kcInputClass)}
-                                />
-                            </div>
-                        </div>
-                    )}
-
-                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
-                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="email" className={clsx(kcProps.kcLabelClass)}>
-                                {msg("email")}
-                            </label>
-                        </div>
-                        <div className={clsx(kcProps.kcInputWrapperClass)}>
-                            <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={clsx(kcProps.kcInputClass)} />
-                        </div>
-                    </div>
-
-                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
-                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="firstName" className={clsx(kcProps.kcLabelClass)}>
-                                {msg("firstName")}
-                            </label>
-                        </div>
-                        <div className={clsx(kcProps.kcInputWrapperClass)}>
-                            <input
-                                type="text"
-                                id="firstName"
-                                name="firstName"
-                                defaultValue={user.firstName ?? ""}
-                                className={clsx(kcProps.kcInputClass)}
-                            />
-                        </div>
-                    </div>
-
-                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
-                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="lastName" className={clsx(kcProps.kcLabelClass)}>
-                                {msg("lastName")}
-                            </label>
-                        </div>
-                        <div className={clsx(kcProps.kcInputWrapperClass)}>
-                            <input
-                                type="text"
-                                id="lastName"
-                                name="lastName"
-                                defaultValue={user.lastName ?? ""}
-                                className={clsx(kcProps.kcInputClass)}
-                            />
-                        </div>
-                    </div>
-
-                    <div className={clsx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
-                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
-                        </div>
-
-                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
-                            {isAppInitiatedAction ? (
-                                <>
-                                    <input
-                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
-                                        type="submit"
-                                        defaultValue={msgStr("doSubmit")}
-                                    />
-                                    <button
-                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
-                                <input
-                                    className={clsx(
-                                        kcProps.kcButtonClass,
-                                        kcProps.kcButtonPrimaryClass,
-                                        kcProps.kcButtonBlockClass,
-                                        kcProps.kcButtonLargeClass
-                                    )}
-                                    type="submit"
-                                    defaultValue={msgStr("doSubmit")}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-}

package/src/lib/pages/LoginUsername.tsx

@@ -1,158 +0,0 @@
-import React, { useState } from "react";
-import { clsx } from "../tools/clsx";
-import { useConstCallback } from "../tools/useConstCallback";
-import type { FormEventHandler } from "react";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function LoginUsername(props: PageProps<Extract<KcContextBase, { pageId: "login-username.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;
-
-    const { msg, msgStr } = i18n;
-
-    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
-
-    const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
-        e.preventDefault();
-
-        setIsLoginButtonDisabled(true);
-
-        const formElement = e.target as HTMLFormElement;
-
-        //NOTE: Even if we login with email Keycloak expect username and password in
-        //the POST request.
-        formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
-
-        formElement.submit();
-    });
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            displayInfo={social.displayInfo}
-            displayWide={realm.password && social.providers !== undefined}
-            headerNode={msg("doLogIn")}
-            formNode={
-                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
-                    <div
-                        id="kc-form-wrapper"
-                        className={clsx(
-                            realm.password && social.providers && [kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass]
-                        )}
-                    >
-                        {realm.password && (
-                            <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                <div className={clsx(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={clsx(kcProps.kcLabelClass)}>
-                                                        {msg(label)}
-                                                    </label>
-                                                    <input
-                                                        tabIndex={1}
-                                                        id={autoCompleteHelper}
-                                                        className={clsx(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={clsx(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>
-                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
-                                    <input
-                                        tabIndex={4}
-                                        className={clsx(
-                                            kcProps.kcButtonClass,
-                                            kcProps.kcButtonPrimaryClass,
-                                            kcProps.kcButtonBlockClass,
-                                            kcProps.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={clsx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
-                            <ul
-                                className={clsx(
-                                    kcProps.kcFormSocialAccountListClass,
-                                    social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
-                                )}
-                            >
-                                {social.providers.map(p => (
-                                    <li key={p.providerId} className={clsx(kcProps.kcFormSocialAccountListLinkClass)}>
-                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("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>
-                )
-            }
-        />
-    );
-}

package/src/lib/pages/LoginVerifyEmail.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function LoginVerifyEmail(props: PageProps<Extract<KcContextBase, { pageId: "login-verify-email.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    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>
-                </>
-            }
-        />
-    );
-}

package/src/lib/pages/LogoutConfirm.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { clsx } from "../tools/clsx";
-import type { PageProps } from "../KcProps";
-import type { KcContextBase } from "../getKcContext";
-import type { I18nBase } from "../i18n";
-
-export default function LogoutConfirm(props: PageProps<Extract<KcContextBase, { pageId: "logout-confirm.ftl" }>, I18nBase>) {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
-
-    const { url, client, logoutConfirm } = kcContext;
-
-    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={clsx(kcProps.kcFormGroupClass)}>
-                                <div id="kc-form-options">
-                                    <div className={clsx(kcProps.kcFormOptionsWrapperClass)}></div>
-                                </div>
-                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
-                                    <input
-                                        tabIndex={4}
-                                        className={clsx(
-                                            kcProps.kcButtonClass,
-                                            kcProps.kcButtonPrimaryClass,
-                                            kcProps.kcButtonBlockClass,
-                                            kcProps.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/lib/pages/Register.tsx

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