keycloakify 10.0.0-rc.37 → 10.0.0-rc.38

package/src/login/pages/LoginUsername.tsx

@@ -1,27 +1,29 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr } = useI18n({ kcContext });
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={!messagesPerField.existsError("username")}
             displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
             infoNode={
@@ -38,32 +40,23 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
             socialProvidersNode={
                 <>
                     {realm.password && social.providers?.length && (
-                        <div id="kc-social-providers" className={getClassName("kcFormSocialAccountSectionClass")}>
+                        <div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
                             <hr />
                             <h2>{msg("identity-provider-login-label")}</h2>
-                            <ul
-                                className={clsx(
-                                    getClassName("kcFormSocialAccountListClass"),
-                                    social.providers.length > 3 && getClassName("kcFormSocialAccountListGridClass")
-                                )}
-                            >
+                            <ul className={kcClsx("kcFormSocialAccountListClass", social.providers.length > 3 && "kcFormSocialAccountListGridClass")}>
                                 {social.providers.map((...[p, , providers]) => (
                                     <li key={p.alias}>
                                         <a
                                             id={`social-${p.alias}`}
-                                            className={clsx(
-                                                getClassName("kcFormSocialAccountListButtonClass"),
-                                                providers.length > 3 && getClassName("kcFormSocialAccountGridItem")
+                                            className={kcClsx(
+                                                "kcFormSocialAccountListButtonClass",
+                                                providers.length > 3 && "kcFormSocialAccountGridItem"
                                             )}
                                             type="button"
                                             href={p.loginUrl}
                                         >
-                                            {p.iconClasses && (
-                                                <i className={clsx(getClassName("kcCommonLogoIdP"), p.iconClasses)} aria-hidden="true"></i>
-                                            )}
-                                            <span
-                                                className={clsx(getClassName("kcFormSocialAccountNameClass"), p.iconClasses && "kc-social-icon-text")}
-                                            >
+                                            {p.iconClasses && <i className={clsx(kcClsx("kcCommonLogoIdP"), p.iconClasses)} aria-hidden="true"></i>}
+                                            <span className={clsx(kcClsx("kcFormSocialAccountNameClass"), p.iconClasses && "kc-social-icon-text")}>
                                                 {p.displayName}
                                             </span>
                                         </a>
@@ -88,8 +81,8 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                             method="post"
                         >
                             {!usernameHidden && (
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                                <div className={kcClsx("kcFormGroupClass")}>
+                                    <label htmlFor="username" className={kcClsx("kcLabelClass")}>
                                         {!realm.loginWithEmailAllowed
                                             ? msg("username")
                                             : !realm.registrationEmailAsUsername
@@ -99,7 +92,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                                     <input
                                         tabIndex={2}
                                         id="username"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         name="username"
                                         defaultValue={login.username ?? ""}
                                         type="text"
@@ -108,14 +101,14 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                                         aria-invalid={messagesPerField.existsError("username")}
                                     />
                                     {messagesPerField.existsError("username") && (
-                                        <span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                        <span id="input-error" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                             {messagesPerField.getFirstError("username")}
                                         </span>
                                     )}
                                 </div>
                             )}
 
-                            <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                            <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
                                 <div id="kc-form-options">
                                     {realm.rememberMe && !usernameHidden && (
                                         <div className="checkbox">
@@ -134,16 +127,11 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                                 </div>
                             </div>
 
-                            <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                            <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
                                 <input
                                     tabIndex={4}
                                     disabled={isLoginButtonDisabled}
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
+                                    className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                                     name="login"
                                     id="kc-login"
                                     type="submit"

package/src/login/pages/LoginVerifyEmail.tsx

@@ -1,17 +1,19 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { msg } = i18n;
+    const { msg } = useI18n({ kcContext });
 
     const { url, user } = kcContext;
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayInfo
             headerNode={msg("emailVerifyTitle")}
             infoNode={

package/src/login/pages/LoginX509Info.tsx

@@ -1,72 +1,67 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function LoginX509Info(props: PageProps<Extract<KcContext, { pageId: "login-x509-info.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function LoginX509Info(props: PageProps<Extract<KcContext, { pageId: "login-x509-info.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { url, x509 } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr } = useI18n({ kcContext });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
-            <form id="kc-x509-login-info" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="certificate_subjectDN" className={getClassName("kcLabelClass")}>
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("doLogIn")}>
+            <form id="kc-x509-login-info" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="certificate_subjectDN" className={kcClsx("kcLabelClass")}>
                             {msg("clientCertificate")}
                         </label>
                     </div>
                     {x509.formData.subjectDN ? (
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label id="certificate_subjectDN" className={getClassName("kcLabelClass")}>
+                        <div className={kcClsx("kcLabelWrapperClass")}>
+                            <label id="certificate_subjectDN" className={kcClsx("kcLabelClass")}>
                                 {x509.formData.subjectDN}
                             </label>
                         </div>
                     ) : (
-                        <div className={getClassName("kcLabelWrapperClass")}>
-                            <label id="certificate_subjectDN" className={getClassName("kcLabelClass")}>
+                        <div className={kcClsx("kcLabelWrapperClass")}>
+                            <label id="certificate_subjectDN" className={kcClsx("kcLabelClass")}>
                                 {msg("noCertificate")}
                             </label>
                         </div>
                     )}
                 </div>
-                <div className={getClassName("kcFormGroupClass")}>
+                <div className={kcClsx("kcFormGroupClass")}>
                     {x509.formData.isUserEnabled && (
                         <>
-                            <div className={getClassName("kcLabelWrapperClass")}>
-                                <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                            <div className={kcClsx("kcLabelWrapperClass")}>
+                                <label htmlFor="username" className={kcClsx("kcLabelClass")}>
                                     {msg("doX509Login")}
                                 </label>
                             </div>
-                            <div className={getClassName("kcLabelWrapperClass")}>
-                                <label id="username" className={getClassName("kcLabelClass")}>
+                            <div className={kcClsx("kcLabelWrapperClass")}>
+                                <label id="username" className={kcClsx("kcLabelClass")}>
                                     {x509.formData.username}
                                 </label>
                             </div>
                         </>
                     )}
                 </div>
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")} />
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
                     </div>
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                        <div className={getClassName("kcFormButtonsWrapperClass")}>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <div className={kcClsx("kcFormButtonsWrapperClass")}>
                             <input
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="login"
                                 id="kc-login"
                                 type="submit"
@@ -74,11 +69,7 @@ export default function LoginX509Info(props: PageProps<Extract<KcContext, { page
                             />
                             {x509.formData.isUserEnabled && (
                                 <input
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonDefaultClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
+                                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                                     name="cancel"
                                     id="kc-cancel"
                                     type="submit"

package/src/login/pages/LogoutConfirm.tsx

@@ -1,40 +1,34 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { url, client, logoutConfirm } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr } = useI18n({ kcContext });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("logoutConfirmTitle")}>
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} 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">
                     <input type="hidden" name="session_code" value={logoutConfirm.code} />
-                    <div className={getClassName("kcFormGroupClass")}>
+                    <div className={kcClsx("kcFormGroupClass")}>
                         <div id="kc-form-options">
-                            <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                            <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
                         </div>
-                        <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
                             <input
                                 tabIndex={4}
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                                 name="confirmLogout"
                                 id="kc-logout"
                                 type="submit"

package/src/login/pages/PageProps.ts

@@ -1,12 +1,10 @@
-import type { I18n } from "keycloakify/login/i18n";
 import { type TemplateProps, type ClassKey } from "keycloakify/login/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 import type { KcContext } from "keycloakify/account/KcContext";
 
-export type PageProps<NarowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
-    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
+export type PageProps<NarowedKcContext = KcContext> = {
+    Template: LazyOrNot<(props: TemplateProps<any>) => JSX.Element | null>;
     kcContext: NarowedKcContext;
-    i18n: I18nExtended;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
 };

package/src/login/pages/Register.tsx

@@ -1,77 +1,56 @@
 import { useState } from "react";
-import { clsx } from "keycloakify/tools/clsx";
 import { Markdown } from "keycloakify/tools/Markdown";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 import { useTermsMarkdown } from "keycloakify/login/lib/useDownloadTerms";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n, type I18n } from "../i18n";
 
-type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n> & {
+type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
 };
 
 export default function Register(props: RegisterProps) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey, termsAcceptanceRequired } = kcContext;
 
+    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")} displayRequiredFields>
-            <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
-                <UserProfileFormFields
-                    {...{
-                        kcContext,
-                        i18n,
-                        getClassName,
-                        messagesPerField
-                    }}
-                    onIsFormSubmittableValueChange={setIsFormSubmittable}
-                />
-                {termsAcceptanceRequired && (
-                    <TermsAcceptance
-                        {...{
-                            i18n,
-                            getClassName,
-                            messagesPerField
-                        }}
-                    />
-                )}
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("registerTitle")} displayRequiredFields>
+            <form id="kc-register-form" className={kcClsx("kcFormClass")} action={url.registrationAction} method="post">
+                <UserProfileFormFields kcContext={kcContext} kcClsx={kcClsx} onIsFormSubmittableValueChange={setIsFormSubmittable} />
+                {termsAcceptanceRequired && <TermsAcceptance i18n={i18n} kcClsx={kcClsx} messagesPerField={messagesPerField} />}
                 {recaptchaRequired && (
                     <div className="form-group">
-                        <div className={getClassName("kcInputWrapperClass")}>
+                        <div className={kcClsx("kcInputWrapperClass")}>
                             <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
                         </div>
                     </div>
                 )}
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")}>
                             <span>
                                 <a href={url.loginUrl}>{msg("backToLogin")}</a>
                             </span>
                         </div>
                     </div>
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <input
                             disabled={!isFormSubmittable}
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                             type="submit"
                             value={msgStr("doRegister")}
                         />
@@ -82,12 +61,8 @@ export default function Register(props: RegisterProps) {
     );
 }
 
-function TermsAcceptance(props: {
-    i18n: I18n;
-    getClassName: ReturnType<typeof useGetClassName>["getClassName"];
-    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
-}) {
-    const { i18n, getClassName, messagesPerField } = props;
+function TermsAcceptance(props: { i18n: I18n; kcClsx: KcClsx; messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get"> }) {
+    const { i18n, kcClsx, messagesPerField } = props;
 
     const { msg } = i18n;
 
@@ -101,7 +76,7 @@ function TermsAcceptance(props: {
     return (
         <>
             <div className="form-group">
-                <div className={getClassName("kcInputWrapperClass")}>
+                <div className={kcClsx("kcInputWrapperClass")}>
                     {msg("termsTitle")}
                     <div id="kc-registration-terms-text">
                         <Markdown>{termsMarkdown}</Markdown>
@@ -109,21 +84,21 @@ function TermsAcceptance(props: {
                 </div>
             </div>
             <div className="form-group">
-                <div className={getClassName("kcLabelWrapperClass")}>
+                <div className={kcClsx("kcLabelWrapperClass")}>
                     <input
                         type="checkbox"
                         id="termsAccepted"
                         name="termsAccepted"
-                        className={getClassName("kcCheckboxInputClass")}
+                        className={kcClsx("kcCheckboxInputClass")}
                         aria-invalid={messagesPerField.existsError("termsAccepted")}
                     />
-                    <label htmlFor="termsAccepted" className={getClassName("kcLabelClass")}>
+                    <label htmlFor="termsAccepted" className={kcClsx("kcLabelClass")}>
                         {msg("acceptTerms")}
                     </label>
                 </div>
                 {messagesPerField.existsError("termsAccepted") && (
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <span id="input-error-terms-accepted" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <span id="input-error-terms-accepted" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                             {messagesPerField.get("termsAccepted")}
                         </span>
                     </div>

package/src/login/pages/SamlPostForm.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { msgStr, msg } = i18n;
+    const { msgStr, msg } = useI18n({ kcContext });
 
     const { samlPost } = kcContext;
 
@@ -26,7 +26,7 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
         htmlFormElement.submit();
     }, [htmlFormElement]);
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("saml.post-form.title")}>
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("saml.post-form.title")}>
             <p>{msg("saml.post-form.message")}</p>
             <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement}>
                 {samlPost.SAMLRequest && <input type="hidden" name="SAMLRequest" value={samlPost.SAMLRequest} />}

package/src/login/pages/SelectAuthenticator.tsx

@@ -1,45 +1,43 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
     const { url, auth } = kcContext;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
-    const { msg } = i18n;
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+    const { msg } = useI18n({ kcContext });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
-            <form id="kc-select-credential-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcSelectAuthListClass")}>
+        <Template
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayInfo={false}
+            headerNode={msg("loginChooseAuthenticator")}
+        >
+            <form id="kc-select-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcSelectAuthListClass")}>
                     {auth.authenticationSelections.map((authenticationSelection, i) => (
                         <button
                             key={i}
-                            className={getClassName("kcSelectAuthListItemClass")}
+                            className={kcClsx("kcSelectAuthListItemClass")}
                             type="submit"
                             name="authenticationExecution"
                             value={authenticationSelection.authExecId}
                         >
-                            <div className={getClassName("kcSelectAuthListItemIconClass")}>
-                                <i
-                                    className={clsx(
-                                        // @ts-expect-error: iconCssClass is a string and not a class key
-                                        // however getClassName gracefully handles this case at runtime
-                                        getClassName(authenticationSelection.iconCssClass),
-                                        getClassName("kcSelectAuthListItemIconPropertyClass")
-                                    )}
-                                />
+                            <div className={kcClsx("kcSelectAuthListItemIconClass")}>
+                                <i className={kcClsx(authenticationSelection.iconCssClass, "kcSelectAuthListItemIconPropertyClass")} />
                             </div>
-                            <div className={getClassName("kcSelectAuthListItemBodyClass")}>
-                                <div className={getClassName("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div>
-                                <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div>
+                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
+                                <div className={kcClsx("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div>
+                                <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div>
                             </div>
-                            <div className={getClassName("kcSelectAuthListItemFillClass")} />
-                            <div className={getClassName("kcSelectAuthListItemArrowClass")}>
-                                <i className={getClassName("kcSelectAuthListItemArrowIconClass")} />
+                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
+                            <div className={kcClsx("kcSelectAuthListItemArrowClass")}>
+                                <i className={kcClsx("kcSelectAuthListItemArrowIconClass")} />
                             </div>
                         </button>
                     ))}