From b3acecdceae34c73fdc16802af95dcdcdadec0b5 Mon Sep 17 00:00:00 2001 From: garronej Date: Tue, 21 Mar 2023 02:36:13 +0100 Subject: [PATCH] Use children prop for Template --- src/login/Template.tsx | 6 +- src/login/TemplateProps.ts | 3 +- src/login/pages/Error.tsx | 29 +-- src/login/pages/IdpReviewUserProfile.tsx | 58 +++-- src/login/pages/Info.tsx | 49 ++-- src/login/pages/Login.tsx | 287 +++++++++++------------ src/login/pages/LoginConfigTotp.tsx | 280 +++++++++++----------- src/login/pages/LoginIdpLinkConfirm.tsx | 72 +++--- src/login/pages/LoginIdpLinkEmail.tsx | 28 +-- src/login/pages/LoginOtp.tsx | 96 ++++---- src/login/pages/LoginPageExpired.tsx | 35 ++- src/login/pages/LoginPassword.tsx | 104 ++++---- src/login/pages/LoginResetPassword.tsx | 95 ++++---- src/login/pages/LoginUpdatePassword.tsx | 202 ++++++++-------- src/login/pages/LoginUpdateProfile.tsx | 235 +++++++++---------- src/login/pages/LoginUsername.tsx | 217 +++++++++-------- src/login/pages/LoginVerifyEmail.tsx | 27 +-- src/login/pages/LogoutConfirm.tsx | 73 +++--- src/login/pages/Register.tsx | 249 ++++++++++---------- src/login/pages/RegisterUserProfile.tsx | 77 +++--- src/login/pages/Terms.tsx | 59 ++--- src/login/pages/UpdateUserProfile.tsx | 96 ++++---- src/login/pages/WebauthnAuthenticate.tsx | 197 ++++++++-------- 23 files changed, 1238 insertions(+), 1336 deletions(-) diff --git a/src/login/Template.tsx b/src/login/Template.tsx index d188f7c1..44ff7444 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -15,12 +15,12 @@ export default function Template(props: TemplateProps) { 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) { /> )} - {formNode} + {children} {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
>; - formNode: ReactNode; displayInfo?: boolean; displayMessage?: boolean; displayRequiredFields?: boolean; @@ -17,6 +16,8 @@ export type TemplateProps -

{message.summary}

- {client !== undefined && client.baseUrl !== undefined && ( -

- - {msg("backToApplication")} - -

- )} - - } - /> + ); } diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx index ec7b9725..80c5f870 100644 --- a/src/login/pages/IdpReviewUserProfile.tsx +++ b/src/login/pages/IdpReviewUserProfile.tsx @@ -21,37 +21,33 @@ export default function IdpReviewUserProfile(props: PageProps - -
-
-
-
-
- -
+ ); } diff --git a/src/login/pages/Info.tsx b/src/login/pages/Info.tsx index 4e283bc8..84fb6c5b 100644 --- a/src/login/pages/Info.tsx +++ b/src/login/pages/Info.tsx @@ -17,32 +17,31 @@ export default function Info(props: PageProps{messageHeader} : <>{message.summary}} - formNode={ -
-

- {message.summary} + > +

+

+ {message.summary} - {requiredActions !== undefined && ( - {requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")} - )} -

- {!skipLink && pageRedirectUri !== undefined ? ( -

- {msg("backToApplication")} -

- ) : actionUri !== undefined ? ( -

- {msg("proceedWithAction")} -

- ) : ( - client.baseUrl !== undefined && ( -

- {msg("backToApplication")} -

- ) + {requiredActions !== undefined && ( + {requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")} )} -
- } - /> +

+ {!skipLink && pageRedirectUri !== undefined ? ( +

+ {msg("backToApplication")} +

+ ) : actionUri !== undefined ? ( +

+ {msg("proceedWithAction")} +

+ ) : ( + client.baseUrl !== undefined && ( +

+ {msg("backToApplication")} +

+ ) + )} +
+ ); } diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx index 4f6497ce..f89c2597 100644 --- a/src/login/pages/Login.tsx +++ b/src/login/pages/Login.tsx @@ -40,149 +40,6 @@ export default function Login(props: PageProps -
- {realm.password && ( - -
- {(() => { - const label = !realm.loginWithEmailAllowed - ? "username" - : realm.registrationEmailAsUsername - ? "email" - : "usernameOrEmail"; - - const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label; - - return ( - <> - - - - ); - })()} -
-
- - -
-
-
- {realm.rememberMe && !usernameEditDisabled && ( -
- -
- )} -
-
- {realm.resetPasswordAllowed && ( - - - {msg("doForgotPassword")} - - - )} -
-
-
- - -
- - )} -
- {realm.password && social.providers !== undefined && ( -
-
    4 && getClassName("kcFormSocialAccountDoubleListClass") - )} - > - {social.providers.map(p => ( -
  • - - {p.displayName} - -
    • - ))} -
-
- )} -
- } infoNode={ realm.password && realm.registrationAllowed && @@ -197,6 +54,148 @@ export default function Login(props: PageProps ) } - /> + > +
+
+ {realm.password && ( +
+
+ {(() => { + const label = !realm.loginWithEmailAllowed + ? "username" + : realm.registrationEmailAsUsername + ? "email" + : "usernameOrEmail"; + + const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label; + + return ( + <> + + + + ); + })()} +
+
+ + +
+
+
+ {realm.rememberMe && !usernameEditDisabled && ( +
+ +
+ )} +
+
+ {realm.resetPasswordAllowed && ( + + + {msg("doForgotPassword")} + + + )} +
+
+
+ + +
+
+ )} +
+ {realm.password && social.providers !== undefined && ( +
+
    4 && getClassName("kcFormSocialAccountDoubleListClass") + )} + > + {social.providers.map(p => ( +
  • + + {p.displayName} + +
    • + ))} +
+
+ )} +
+ ); } diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx index c51fc452..5f1a5f31 100644 --- a/src/login/pages/LoginConfigTotp.tsx +++ b/src/login/pages/LoginConfigTotp.tsx @@ -23,159 +23,130 @@ export default function LoginConfigTotp(props: PageProps -
    -
  1. -

    {msg("loginTotpStep1")}

    + ); } diff --git a/src/login/pages/LoginIdpLinkConfirm.tsx b/src/login/pages/LoginIdpLinkConfirm.tsx index a5f3af4a..1cd1de13 100644 --- a/src/login/pages/LoginIdpLinkConfirm.tsx +++ b/src/login/pages/LoginIdpLinkConfirm.tsx @@ -17,43 +17,39 @@ export default function LoginIdpLinkConfirm(props: PageProps -
    - - -
    - - } - /> + ); } diff --git a/src/login/pages/LoginIdpLinkEmail.tsx b/src/login/pages/LoginIdpLinkEmail.tsx index ac60f5aa..b2b2b11a 100644 --- a/src/login/pages/LoginIdpLinkEmail.tsx +++ b/src/login/pages/LoginIdpLinkEmail.tsx @@ -10,22 +10,16 @@ export default function LoginIdpLinkEmail(props: PageProps -

    - {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)} -

    -

    - {msg("emailLinkIdp2")} {msg("doClickHere")} {msg("emailLinkIdp3")} -

    -

    - {msg("emailLinkIdp4")} {msg("doClickHere")} {msg("emailLinkIdp5")} -

    - - } - /> + ); } diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx index 315a3d30..0701bdfa 100644 --- a/src/login/pages/LoginOtp.tsx +++ b/src/login/pages/LoginOtp.tsx @@ -37,61 +37,57 @@ export default function LoginOtp(props: PageProps - {otpLogin.userOtpCredentials.length > 1 && ( -
    -
    - {otpLogin.userOtpCredentials.map(otpCredential => ( -
    - -
    - -

    {otpCredential.userLabel}

    -
    -
    - ))} -
    -
    - )} + ); } diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx index 2ba5492d..b8eadfd6 100644 --- a/src/login/pages/LoginPageExpired.tsx +++ b/src/login/pages/LoginPageExpired.tsx @@ -10,26 +10,19 @@ export default function LoginPageExpired(props: PageProps -

    - {msg("pageExpiredMsg1")} - - {msg("doClickHere")} - {" "} - .
    - {msg("pageExpiredMsg2")}{" "} - - {msg("doClickHere")} - {" "} - . -

    - - } - /> + ); } diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx index e6784946..186e24b4 100644 --- a/src/login/pages/LoginPassword.tsx +++ b/src/login/pages/LoginPassword.tsx @@ -32,61 +32,57 @@ export default function LoginPassword(props: PageProps -
    -
    -
    -
    - - + ); } diff --git a/src/login/pages/LoginResetPassword.tsx b/src/login/pages/LoginResetPassword.tsx index 15ab17d6..36ebc248 100644 --- a/src/login/pages/LoginResetPassword.tsx +++ b/src/login/pages/LoginResetPassword.tsx @@ -21,54 +21,53 @@ export default function LoginResetPassword(props: PageProps -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    - -
    - -
    -
    - - } infoNode={msg("emailInstruction")} - /> + > +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    + ); } diff --git a/src/login/pages/LoginUpdatePassword.tsx b/src/login/pages/LoginUpdatePassword.tsx index fcd35f5e..52b091fa 100644 --- a/src/login/pages/LoginUpdatePassword.tsx +++ b/src/login/pages/LoginUpdatePassword.tsx @@ -17,122 +17,118 @@ export default function LoginUpdatePassword(props: PageProps - - + ); } diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx index 4f8c51bc..3c487bd8 100644 --- a/src/login/pages/LoginUpdateProfile.tsx +++ b/src/login/pages/LoginUpdateProfile.tsx @@ -17,141 +17,134 @@ export default function LoginUpdateProfile(props: PageProps - {user.editUsernameAllowed && ( -
    -
    - -
    -
    - -
    + ); } diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx index ec192d13..858c68dc 100644 --- a/src/login/pages/LoginUsername.tsx +++ b/src/login/pages/LoginUsername.tsx @@ -41,114 +41,6 @@ export default function LoginUsername(props: PageProps -
    - {realm.password && ( -
    -
    - {!usernameHidden && - (() => { - const label = !realm.loginWithEmailAllowed - ? "username" - : realm.registrationEmailAsUsername - ? "email" - : "usernameOrEmail"; - - const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label; - - return ( - <> - - - - ); - })()} -
    -
    -
    - {realm.rememberMe && !usernameHidden && ( -
    - -
    - )} -
    -
    -
    - -
    -
    - )} -
    - {realm.password && social.providers !== undefined && ( -
    -
      4 && getClassName("kcFormSocialAccountDoubleListClass") - )} - > - {social.providers.map(p => ( -
    • - - {p.displayName} - -
      • - ))} -
    -
    - )} -
    - } infoNode={ realm.password && realm.registrationAllowed && @@ -163,6 +55,113 @@ export default function LoginUsername(props: PageProps ) } - /> + > +
    +
    + {realm.password && ( +
    +
    + {!usernameHidden && + (() => { + const label = !realm.loginWithEmailAllowed + ? "username" + : realm.registrationEmailAsUsername + ? "email" + : "usernameOrEmail"; + + const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label; + + return ( + <> + + + + ); + })()} +
    +
    +
    + {realm.rememberMe && !usernameHidden && ( +
    + +
    + )} +
    +
    +
    + +
    +
    + )} +
    + {realm.password && social.providers !== undefined && ( +
    +
      4 && getClassName("kcFormSocialAccountDoubleListClass") + )} + > + {social.providers.map(p => ( +
    • + + {p.displayName} + +
      • + ))} +
    +
    + )} +
    + ); } diff --git a/src/login/pages/LoginVerifyEmail.tsx b/src/login/pages/LoginVerifyEmail.tsx index ef68df06..5dc7ba28 100644 --- a/src/login/pages/LoginVerifyEmail.tsx +++ b/src/login/pages/LoginVerifyEmail.tsx @@ -10,22 +10,15 @@ export default function LoginVerifyEmail(props: PageProps -

    {msg("emailVerifyInstruction1", user?.email)}

    -

    - {msg("emailVerifyInstruction2")} -
    - {msg("doClickHere")} -   - {msg("emailVerifyInstruction3")} -

    - - } - /> + ); } diff --git a/src/login/pages/LogoutConfirm.tsx b/src/login/pages/LogoutConfirm.tsx index b03c7b09..818b588a 100644 --- a/src/login/pages/LogoutConfirm.tsx +++ b/src/login/pages/LogoutConfirm.tsx @@ -17,47 +17,40 @@ export default function LogoutConfirm(props: PageProps -
    -

    {msg("logoutConfirmHeader")}

    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - {!logoutConfirm.skipLink && client.baseUrl && ( -

    - -

    - )} + ); } diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx index 8ae5edc3..20fbed0b 100644 --- a/src/login/pages/Register.tsx +++ b/src/login/pages/Register.tsx @@ -17,173 +17,166 @@ export default function Register(props: PageProps -
    -
    - -
    -
    - -
    + ); } diff --git a/src/login/pages/RegisterUserProfile.tsx b/src/login/pages/RegisterUserProfile.tsx index f873208c..1955845e 100644 --- a/src/login/pages/RegisterUserProfile.tsx +++ b/src/login/pages/RegisterUserProfile.tsx @@ -26,46 +26,45 @@ export default function RegisterUserProfile(props: PageProps - - {recaptchaRequired && ( -
    -
    -
    -
    -
    - )} -
    - - -
    - + > +
    + + {recaptchaRequired && ( +
    +
    +
    - - } - /> + )} +
    +
    + +
    + +
    + +
    +
    + + ); } diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx index dff76ab9..819db533 100644 --- a/src/login/pages/Terms.tsx +++ b/src/login/pages/Terms.tsx @@ -26,38 +26,31 @@ export default function Terms(props: PageProps -
    {evtTermMarkdown.state && {evtTermMarkdown.state}}
    -
    - - -
    -
    - - } - /> + ); } diff --git a/src/login/pages/UpdateUserProfile.tsx b/src/login/pages/UpdateUserProfile.tsx index 1f28a3b7..ee567027 100644 --- a/src/login/pages/UpdateUserProfile.tsx +++ b/src/login/pages/UpdateUserProfile.tsx @@ -21,66 +21,62 @@ export default function UpdateUserProfile(props: PageProps - + ); } diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx index 92ff3e33..eb0591cd 100644 --- a/src/login/pages/WebauthnAuthenticate.tsx +++ b/src/login/pages/WebauthnAuthenticate.tsx @@ -94,111 +94,102 @@ export default function WebauthnAuthenticate(props: PageProps -
    - - - - - - -
    -
    - {authenticators && - (() => ( -
    - {authenticators.authenticators.map(authenticator => ( - - ))} -
    - ))()} - {authenticators && - shouldDisplayAuthenticators && - (() => ( - <> - {authenticators.authenticators.length > 1 && ( -

    {msg("webauthn-available-authenticators")}

    - )} -
    - {authenticators.authenticators.map(authenticator => ( -
    -
    - { - const className = getClassName(authenticator.transports.iconClass as any); - return className.includes(" ") - ? className - : [className, getClassName("kcWebAuthnDefaultIcon")]; - })(), - getClassName("kcSelectAuthListItemIconPropertyClass") - )} - /> -
    -
    -
    - {authenticator.label} -
    - - {authenticator.transports && authenticator.transports.displayNameProperties.length && ( -
    - {authenticator.transports.displayNameProperties.map( - (transport: MessageKey, index: number) => ( - <> - {msg(transport)} - {index < authenticator.transports.displayNameProperties.length - 1 && ( - {", "} - )} - - ) - )} -
    - )} - -
    - {msg("webauthn-createdAt-label")} - {authenticator.createdAt} -
    -
    -
    -
    - ))} -
    - - ))()} -
    - +
    +
    + + + + + + +
    +
    + {authenticators && + (() => ( +
    + {authenticators.authenticators.map(authenticator => ( + + ))} +
    + ))()} + {authenticators && + shouldDisplayAuthenticators && + (() => ( + <> + {authenticators.authenticators.length > 1 && ( +

    {msg("webauthn-available-authenticators")}

    )} - /> -
    +
    + {authenticators.authenticators.map(authenticator => ( +
    +
    + { + const className = getClassName(authenticator.transports.iconClass as any); + return className.includes(" ") + ? className + : [className, getClassName("kcWebAuthnDefaultIcon")]; + })(), + getClassName("kcSelectAuthListItemIconPropertyClass") + )} + /> +
    +
    +
    + {authenticator.label} +
    + + {authenticator.transports && authenticator.transports.displayNameProperties.length && ( +
    + {authenticator.transports.displayNameProperties.map( + (transport: MessageKey, index: number) => ( + <> + {msg(transport)} + {index < authenticator.transports.displayNameProperties.length - 1 && ( + {", "} + )} + + ) + )} +
    + )} + +
    + {msg("webauthn-createdAt-label")} + {authenticator.createdAt} +
    +
    +
    +
    + ))} +
    + + ))()} +
    +
    - } - /> +
    + ); }