agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use children prop for Template

Browse Source
This commit is contained in:
garronej 2023-03-21 02:36:13 +01:00
parent ec479c7e91
commit b3acecdcea
23 changed files with 1238 additions and 1336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/login/Template.tsx
View File

@ -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"

3
src/login/TemplateProps.ts
View File

@ -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 =

9
src/login/pages/Error.tsx
View File

@ -10,11 +10,7 @@ export default function Error(props: PageProps<Extract<KcContext, { pageId: "err
const { msg } = i18n;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
displayMessage={false}
headerNode={msg("errorTitle")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("errorTitle")}>
<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>
);
}

8
src/login/pages/IdpReviewUserProfile.tsx
View File

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

5
src/login/pages/Info.tsx
View File

@ -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>
);
}

33
src/login/pages/Login.tsx
View File

@ -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>
}
infoNode={
realm.password &&
realm.registrationAllowed &&
!registrationDisabled && (
<div id="kc-registration">
<span>
{msg("noAccount")}
<a tabIndex={6} href={url.registrationUrl}>
{msg("doRegister")}
</a>
</span>
</div>
)
}
/>
</Template>
);
}

14
src/login/pages/LoginConfigTotp.tsx
View File

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

8
src/login/pages/LoginIdpLinkConfirm.tsx
View File

@ -17,10 +17,7 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
const { msg } = i18n;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("confirmLinkIdpTitle")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("confirmLinkIdpTitle")}>
<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>
);
}

10
src/login/pages/LoginIdpLinkEmail.tsx
View File

@ -10,11 +10,7 @@ export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, {
const { msg } = i18n;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("emailLinkIdpTitle", idpAlias)}
formNode={
<>
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("emailLinkIdpTitle", idpAlias)}>
<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>
);
}

8
src/login/pages/LoginOtp.tsx
View File

@ -37,10 +37,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
}, []);
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("doLogIn")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
<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>
);
}

11
src/login/pages/LoginPageExpired.tsx
View File

@ -10,12 +10,7 @@ export default function LoginPageExpired(props: PageProps<Extract<KcContext, { p
const { msg } = i18n;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
displayMessage={false}
headerNode={msg("pageExpiredTitle")}
formNode={
<>
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("pageExpiredTitle")}>
<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>
);
}

8
src/login/pages/LoginPassword.tsx
View File

@ -32,10 +32,7 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { "pag
});
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("doLogIn")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
<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>
);
}

7
src/login/pages/LoginResetPassword.tsx
View File

@ -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>
}
infoNode={msg("emailInstruction")}
/>
</Template>
);
}

8
src/login/pages/LoginUpdatePassword.tsx
View File

@ -17,10 +17,7 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("updatePasswordTitle")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("updatePasswordTitle")}>
<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>
);
}

13
src/login/pages/LoginUpdateProfile.tsx
View File

@ -17,10 +17,7 @@ export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, {
const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("loginProfileTitle")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
<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(
getClassName("kcFormGroupClass"),
messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
)}
className={clsx(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>
);
}

33
src/login/pages/LoginUsername.tsx
View File

@ -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>
}
infoNode={
realm.password &&
realm.registrationAllowed &&
!registrationDisabled && (
<div id="kc-registration">
<span>
{msg("noAccount")}
<a tabIndex={6} href={url.registrationUrl}>
{msg("doRegister")}
</a>
</span>
</div>
)
}
/>
</Template>
);
}

11
src/login/pages/LoginVerifyEmail.tsx
View File

@ -10,12 +10,7 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
const { url, user } = kcContext;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
displayMessage={false}
headerNode={msg("emailVerifyTitle")}
formNode={
<>
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("emailVerifyTitle")}>
<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>
);
}

11
src/login/pages/LogoutConfirm.tsx
View File

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

13
src/login/pages/Register.tsx
View File

@ -17,10 +17,7 @@ export default function Register(props: PageProps<Extract<KcContext, { pageId: "
const { msg, msgStr } = i18n;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("registerTitle")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
<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(
getClassName("kcFormGroupClass"),
messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass"))
)}
className={clsx(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>
);
}

5
src/login/pages/RegisterUserProfile.tsx
View File

@ -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>
);
}

11
src/login/pages/Terms.tsx
View File

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

8
src/login/pages/UpdateUserProfile.tsx
View File

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

15
src/login/pages/WebauthnAuthenticate.tsx
View File

@ -94,10 +94,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
const [error, setError] = useState("");
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
headerNode={msg("webauthn-login-title")}
formNode={
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("webauthn-login-title")}>
<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
type="hidden"
name="authn_use_chk"
value={authenticator.credentialId}
key={authenticator.credentialId}
/>
<input 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>
);
}