Use children prop for Template

src/login/Template.tsx

@@ -15,12 +15,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         showAnotherWayIfPresent = true,
         headerNode,
         showUsernameNode = null,
-        formNode,
         infoNode = null,
         kcContext,
         i18n,
         doUseDefaultCss,
-        classes
+        classes,
+        children
     } = props;
 
     const { getClassName } = useGetClassName({
@@ -153,7 +153,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 />
                             </div>
                         )}
-                        {formNode}
+                        {children}
                         {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
                             <form
                                 id="kc-select-try-another-way-form"

src/login/TemplateProps.ts

@@ -8,7 +8,6 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     doUseDefaultCss: boolean;
     classes?: Partial<Record<TemplateClassKey, string>>;
 
-    formNode: ReactNode;
     displayInfo?: boolean;
     displayMessage?: boolean;
     displayRequiredFields?: boolean;
@@ -17,6 +16,8 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     headerNode: ReactNode;
     showUsernameNode?: ReactNode;
     infoNode?: ReactNode;
+
+    children: ReactNode;
 };
 
 export type TemplateClassKey =

src/login/pages/Error.tsx

@@ -10,11 +10,7 @@ export default function Error(props: PageProps<Extract<KcContext, { pageId: "err
     const { msg } = i18n;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("errorTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("errorTitle")}
-            formNode={
             <div id="kc-error-message">
                 <p className="instruction">{message.summary}</p>
                 {client !== undefined && client.baseUrl !== undefined && (
@@ -25,7 +21,6 @@ export default function Error(props: PageProps<Extract<KcContext, { pageId: "err
                     </p>
                 )}
             </div>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/IdpReviewUserProfile.tsx

@@ -21,10 +21,7 @@ export default function IdpReviewUserProfile(props: PageProps<Extract<KcContext,
     const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginIdpReviewProfileTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginIdpReviewProfileTitle")}
-            formNode={
             <form id="kc-idp-review-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
@@ -51,7 +48,6 @@ export default function IdpReviewUserProfile(props: PageProps<Extract<KcContext,
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/Info.tsx

@@ -17,7 +17,7 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={false}
             headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
-            formNode={
+        >
             <div id="kc-info-message">
                 <p className="instruction">
                     {message.summary}
@@ -42,7 +42,6 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
                     )
                 )}
             </div>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/Login.tsx

@@ -40,7 +40,21 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
-            formNode={
+            infoNode={
+                realm.password &&
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            {msg("noAccount")}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        >
             <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
                 <div
                     id="kc-form-wrapper"
@@ -182,21 +196,6 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                     </div>
                 )}
             </div>
-            }
+        </Template>
-            infoNode={
-                realm.password &&
-                realm.registrationAllowed &&
-                !registrationDisabled && (
-                    <div id="kc-registration">
-                        <span>
-                            {msg("noAccount")}
-                            <a tabIndex={6} href={url.registrationUrl}>
-                                {msg("doRegister")}
-                            </a>
-                        </span>
-                    </div>
-                )
-            }
-        />
     );
 }

src/login/pages/LoginConfigTotp.tsx

@@ -23,10 +23,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
     };
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginTotpTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginTotpTitle")}
-            formNode={
             <>
                 <ol id="kc-totp-settings">
                     <li>
@@ -178,18 +175,13 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                     ) : (
                         <input
                             type="submit"
-                                className={clsx(
+                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
                             id="saveTOTPBtn"
                             value={msgStr("doSubmit")}
                         />
                     )}
                 </form>
             </>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/LoginIdpLinkConfirm.tsx

@@ -17,10 +17,7 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
     const { msg } = i18n;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("confirmLinkIdpTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("confirmLinkIdpTitle")}
-            formNode={
             <form id="kc-register-form" action={url.loginAction} method="post">
                 <div className={getClassName("kcFormGroupClass")}>
                     <button
@@ -53,7 +50,6 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
                     </button>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/LoginIdpLinkEmail.tsx

@@ -10,11 +10,7 @@ export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, {
     const { msg } = i18n;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("emailLinkIdpTitle", idpAlias)}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("emailLinkIdpTitle", idpAlias)}
-            formNode={
-                <>
             <p id="instruction1" className="instruction">
                 {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
             </p>
@@ -24,8 +20,6 @@ export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, {
             <p id="instruction3" className="instruction">
                 {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
             </p>
-                </>
+        </Template>
-            }
-        />
     );
 }

src/login/pages/LoginOtp.tsx

@@ -37,10 +37,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
     }, []);
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("doLogIn")}
-            formNode={
             <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 {otpLogin.userOtpCredentials.length > 1 && (
                     <div className={getClassName("kcFormGroupClass")}>
@@ -90,8 +87,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }
 

src/login/pages/LoginPageExpired.tsx

@@ -10,12 +10,7 @@ export default function LoginPageExpired(props: PageProps<Extract<KcContext, { p
     const { msg } = i18n;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("pageExpiredTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("pageExpiredTitle")}
-            formNode={
-                <>
             <p id="instruction1" className="instruction">
                 {msg("pageExpiredMsg1")}
                 <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
@@ -28,8 +23,6 @@ export default function LoginPageExpired(props: PageProps<Extract<KcContext, { p
                 </a>{" "}
                 .
             </p>
-                </>
+        </Template>
-            }
-        />
     );
 }

src/login/pages/LoginPassword.tsx

@@ -32,10 +32,7 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { "pag
     });
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("doLogIn")}
-            formNode={
             <div id="kc-form">
                 <div id="kc-form-wrapper">
                     <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
@@ -86,7 +83,6 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { "pag
                     </form>
                 </div>
             </div>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/LoginResetPassword.tsx

@@ -21,7 +21,8 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={false}
             headerNode={msg("emailForgotTitle")}
-            formNode={
+            infoNode={msg("emailInstruction")}
+        >
             <form id="kc-reset-password-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 <div className={getClassName("kcFormGroupClass")}>
                     <div className={getClassName("kcLabelWrapperClass")}>
@@ -67,8 +68,6 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-            infoNode={msg("emailInstruction")}
-        />
     );
 }

src/login/pages/LoginUpdatePassword.tsx

@@ -17,10 +17,7 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
     const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("updatePasswordTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("updatePasswordTitle")}
-            formNode={
             <form id="kc-passwd-update-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 <input
                     type="text"
@@ -132,7 +129,6 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/LoginUpdateProfile.tsx

@@ -17,10 +17,7 @@ export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, {
     const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("loginProfileTitle")}
-            formNode={
             <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 {user.editUsernameAllowed && (
                     <div
@@ -47,10 +44,7 @@ export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, {
                 )}
 
                 <div
-                        className={clsx(
+                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
-                        )}
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="email" className={getClassName("kcLabelClass")}>
@@ -151,7 +145,6 @@ export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, {
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/LoginUsername.tsx

@@ -41,7 +41,21 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
-            formNode={
+            infoNode={
+                realm.password &&
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            {msg("noAccount")}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        >
             <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
                 <div
                     id="kc-form-wrapper"
@@ -148,21 +162,6 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                     </div>
                 )}
             </div>
-            }
+        </Template>
-            infoNode={
-                realm.password &&
-                realm.registrationAllowed &&
-                !registrationDisabled && (
-                    <div id="kc-registration">
-                        <span>
-                            {msg("noAccount")}
-                            <a tabIndex={6} href={url.registrationUrl}>
-                                {msg("doRegister")}
-                            </a>
-                        </span>
-                    </div>
-                )
-            }
-        />
     );
 }

src/login/pages/LoginVerifyEmail.tsx

@@ -10,12 +10,7 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
     const { url, user } = kcContext;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("emailVerifyTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayMessage={false}
-            headerNode={msg("emailVerifyTitle")}
-            formNode={
-                <>
             <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
             <p className="instruction">
                 {msg("emailVerifyInstruction2")}
@@ -24,8 +19,6 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
                 &nbsp;
                 {msg("emailVerifyInstruction3")}
             </p>
-                </>
+        </Template>
-            }
-        />
     );
 }

src/login/pages/LogoutConfirm.tsx

@@ -17,12 +17,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
     const { msg, msgStr } = i18n;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("logoutConfirmTitle")}>
-            {...{ 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">
@@ -56,8 +51,6 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                     )}
                 </div>
             </div>
-                </>
+        </Template>
-            }
-        />
     );
 }

src/login/pages/Register.tsx

@@ -17,10 +17,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
     const { msg, msgStr } = i18n;
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("registerTitle")}
-            formNode={
             <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
                 <div
                     className={clsx(
@@ -67,10 +64,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                 </div>
 
                 <div
-                        className={clsx(
+                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
-                            getClassName("kcFormGroupClass"),
-                            messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
-                        )}
                 >
                     <div className={getClassName("kcLabelWrapperClass")}>
                         <label htmlFor="email" className={getClassName("kcLabelClass")}>
@@ -183,7 +177,6 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/RegisterUserProfile.tsx

@@ -26,7 +26,7 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
             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}
@@ -65,7 +65,6 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/Terms.tsx

@@ -26,12 +26,7 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
     }
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
-            {...{ 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
@@ -56,8 +51,6 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
                 />
             </form>
             <div className="clearfix" />
-                </>
+        </Template>
-            }
-        />
     );
 }

src/login/pages/UpdateUserProfile.tsx

@@ -21,10 +21,7 @@ export default function UpdateUserProfile(props: PageProps<Extract<KcContext, {
     const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
-            {...{ 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}
@@ -80,7 +77,6 @@ export default function UpdateUserProfile(props: PageProps<Extract<KcContext, {
                     </div>
                 </div>
             </form>
-            }
+        </Template>
-        />
     );
 }

src/login/pages/WebauthnAuthenticate.tsx

@@ -94,10 +94,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     const [error, setError] = useState("");
 
     return (
-        <Template
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("webauthn-login-title")}>
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            headerNode={msg("webauthn-login-title")}
-            formNode={
             <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
                 <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
                     <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
@@ -112,12 +109,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                         (() => (
                             <form id="authn_select" className={getClassName("kcFormClass")}>
                                 {authenticators.authenticators.map(authenticator => (
-                                        <input
+                                    <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} key={authenticator.credentialId} />
-                                            type="hidden"
-                                            name="authn_use_chk"
-                                            value={authenticator.credentialId}
-                                            key={authenticator.credentialId}
-                                        />
                                 ))}
                             </form>
                         ))()}
@@ -198,7 +190,6 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                     </div>
                 </div>
             </div>
-            }
+        </Template>
-        />
     );
 }