keycloakify 10.0.0-rc.1 → 10.0.0-rc.100

package/src/login/pages/LoginConfigTotp.tsx

@@ -1,32 +1,29 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx, KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { MessageKey } from "keycloakify/login/i18n/i18n";
 
 export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
-    const { msg, msgStr } = i18n;
-
-    // NOTE: We should edit the ftl_object_to_js_code_declaring_an_object.ftl
-    // so that we have access to getAlgorithmKey()
-    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
-        "HmacSHA1": "SHA1",
-        "HmacSHA256": "SHA256",
-        "HmacSHA512": "SHA512"
-    };
+    const { msg, msgStr, advancedMsg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginTotpTitle")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("loginTotpTitle")}
+            displayMessage={!messagesPerField.existsError("totp", "userLabel")}
+        >
             <>
                 <ol id="kc-totp-settings">
                     <li>
@@ -34,7 +31,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
                         <ul id="kc-totp-supported-apps">
                             {totp.supportedApplications.map(app => (
-                                <li>{msg(app as MessageKey)}</li>
+                                <li key={app}>{advancedMsg(app)}</li>
                             ))}
                         </ul>
                     </li>
@@ -60,7 +57,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                                             {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
                                         </li>
                                         <li id="kc-totp-algorithm">
-                                            {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                            {msg("loginTotpAlgorithm")}: {totp.policy.getAlgorithmKey()}
                                         </li>
                                         <li id="kc-totp-digits">
                                             {msg("loginTotpDigits")}: {totp.policy.digits}
@@ -96,26 +93,26 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                     </li>
                 </ol>
 
-                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <label htmlFor="totp" className={getClassName("kcLabelClass")}>
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-totp-settings-form" method="post">
+                    <div className={kcClsx("kcFormGroupClass")}>
+                        <div className={kcClsx("kcInputWrapperClass")}>
+                            <label htmlFor="totp" className={kcClsx("kcLabelClass")}>
                                 {msg("authenticatorCode")}
                             </label>{" "}
                             <span className="required">*</span>
                         </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
+                        <div className={kcClsx("kcInputWrapperClass")}>
                             <input
                                 type="text"
                                 id="totp"
                                 name="totp"
                                 autoComplete="off"
-                                className={getClassName("kcInputClass")}
+                                className={kcClsx("kcInputClass")}
                                 aria-invalid={messagesPerField.existsError("totp")}
                             />
 
                             {messagesPerField.existsError("totp") && (
-                                <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                <span id="input-error-otp-code" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                     {messagesPerField.get("totp")}
                                 </span>
                             )}
@@ -124,54 +121,45 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                         {mode && <input type="hidden" id="mode" value={mode} />}
                     </div>
 
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                    <div className={kcClsx("kcFormGroupClass")}>
+                        <div className={kcClsx("kcInputWrapperClass")}>
+                            <label htmlFor="userLabel" className={kcClsx("kcLabelClass")}>
                                 {msg("loginTotpDeviceName")}
                             </label>{" "}
                             {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
                         </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
+                        <div className={kcClsx("kcInputWrapperClass")}>
                             <input
                                 type="text"
                                 id="userLabel"
                                 name="userLabel"
                                 autoComplete="off"
-                                className={getClassName("kcInputClass")}
+                                className={kcClsx("kcInputClass")}
                                 aria-invalid={messagesPerField.existsError("userLabel")}
                             />
                             {messagesPerField.existsError("userLabel") && (
-                                <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                <span id="input-error-otp-label" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                     {messagesPerField.get("userLabel")}
                                 </span>
                             )}
                         </div>
                     </div>
 
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <LogoutOtherSessions {...{ getClassName, i18n }} />
+                    <div className={kcClsx("kcFormGroupClass")}>
+                        <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
                     </div>
 
                     {isAppInitiatedAction ? (
                         <>
                             <input
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 id="saveTOTPBtn"
                                 value={msgStr("doSubmit")}
                             />
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonLargeClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass", "kcButtonLargeClass")}
                                 id="cancelTOTPBtn"
                                 name="cancel-aia"
                                 value="true"
@@ -182,7 +170,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                     ) : (
                         <input
                             type="submit"
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                             id="saveTOTPBtn"
                             value={msgStr("doSubmit")}
                         />
@@ -193,14 +181,14 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
     );
 }
 
-function LogoutOtherSessions(props: { getClassName: ReturnType<typeof useGetClassName>["getClassName"]; i18n: I18n }) {
-    const { getClassName, i18n } = props;
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
 
     const { msg } = i18n;
 
     return (
-        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-            <div className={getClassName("kcFormOptionsWrapperClass")}>
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
                 <div className="checkbox">
                     <label>
                         <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />

package/src/login/pages/LoginIdpLinkConfirm.tsx

@@ -1,13 +1,12 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -17,17 +16,12 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
     const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("confirmLinkIdpTitle")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("confirmLinkIdpTitle")}>
             <form id="kc-register-form" action={url.loginAction} method="post">
-                <div className={getClassName("kcFormGroupClass")}>
+                <div className={kcClsx("kcFormGroupClass")}>
                     <button
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonDefaultClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         name="submitAction"
                         id="updateProfile"
                         value="updateProfile"
@@ -36,12 +30,7 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
                     </button>
                     <button
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonDefaultClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         name="submitAction"
                         id="linkAccount"
                         value="linkAccount"

package/src/login/pages/LoginIdpLinkEmail.tsx

@@ -1,6 +1,6 @@
-import type { KcContext } from "keycloakify/login/kcContext";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import type { I18n } from "keycloakify/login/i18n";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
 
 export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -10,7 +10,13 @@ export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, {
     const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("emailLinkIdpTitle", idpAlias)}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("emailLinkIdpTitle", idpAlias)}
+        >
             <p id="instruction1" className="instruction">
                 {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
             </p>

package/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx

@@ -1,8 +1,7 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { I18n } from "../i18n";
-import { KcContext } from "../kcContext";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { PageProps } from "./PageProps";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { PageProps } from "keycloakify/login/pages/PageProps";
+import { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
 
 export default function LoginOauth2DeviceVerifyUserCode(
     props: PageProps<Extract<KcContext, { pageId: "login-oauth2-device-verify-user-code.ftl" }>, I18n>
@@ -12,51 +11,53 @@ export default function LoginOauth2DeviceVerifyUserCode(
 
     const { msg, msgStr } = i18n;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("oauth2DeviceVerificationTitle")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("oauth2DeviceVerificationTitle")}
+        >
             <form
                 id="kc-user-verify-device-user-code-form"
-                className={getClassName("kcFormClass")}
+                className={kcClsx("kcFormClass")}
                 action={url.oauth2DeviceVerificationAction}
                 method="post"
             >
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="device-user-code" className={getClassName("kcLabelClass")}>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="device-user-code" className={kcClsx("kcLabelClass")}>
                             {msg("verifyOAuth2DeviceUserCode")}
                         </label>
                     </div>
 
-                    <div className={getClassName("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcInputWrapperClass")}>
                         <input
                             id="device-user-code"
                             name="device_user_code"
                             autoComplete="off"
                             type="text"
-                            className={getClassName("kcInputClass")}
+                            className={kcClsx("kcInputClass")}
                             autoFocus
                         />
                     </div>
                 </div>
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
                     </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")}
                                 type="submit"
                                 value={msgStr("doSubmit")}
                             />

package/src/login/pages/LoginOauthGrant.tsx

@@ -1,8 +1,7 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { PageProps } from "./PageProps";
-import { KcContext } from "../kcContext";
-import { I18n } from "../i18n";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { PageProps } from "keycloakify/login/pages/PageProps";
+import { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
 
 export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pageId: "login-oauth-grant.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
@@ -10,14 +9,17 @@ export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pa
 
     const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             bodyClassName="oauth"
             headerNode={
                 <>
@@ -68,30 +70,22 @@ export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pa
 
                 <form className="form-actions" action={url.oauthAction} method="POST">
                     <input type="hidden" name="code" value={oauth.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">
-                            <div className={getClassName("kcFormButtonsWrapperClass")}>
+                            <div className={kcClsx("kcFormButtonsWrapperClass")}>
                                 <input
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
+                                    className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                     name="accept"
                                     id="kc-login"
                                     type="submit"
                                     value={msgStr("doYes")}
                                 />
                                 <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/LoginOtp.tsx

@@ -1,14 +1,13 @@
 import { Fragment } from "react";
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -19,30 +18,33 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={!messagesPerField.existsError("totp")}
             headerNode={msg("doLogIn")}
         >
-            <form id="kc-otp-login-form" className={clsx(getClassName("kcFormClass"))} action={url.loginAction} method="post">
+            <form id="kc-otp-login-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 {otpLogin.userOtpCredentials.length > 1 && (
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcFormGroupClass")}>
+                        <div className={kcClsx("kcInputWrapperClass")}>
                             {otpLogin.userOtpCredentials.map((otpCredential, index) => (
                                 <Fragment key={index}>
                                     <input
                                         id={`kc-otp-credential-${index}`}
-                                        className={getClassName("kcLoginOTPListInputClass")}
+                                        className={kcClsx("kcLoginOTPListInputClass")}
                                         type="radio"
                                         name="selectedCredentialId"
                                         value={otpCredential.id}
                                         defaultChecked={otpCredential.id === otpLogin.selectedCredentialId}
                                     />
-                                    <label htmlFor={`kc-otp-credential-${index}`} className={getClassName("kcLoginOTPListClass")} tabIndex={index}>
-                                        <span className={getClassName("kcLoginOTPListItemHeaderClass")}>
-                                            <span className={getClassName("kcLoginOTPListItemIconBodyClass")}>
-                                                <i className={getClassName("kcLoginOTPListItemIconClass")} aria-hidden="true"></i>
+                                    <label htmlFor={`kc-otp-credential-${index}`} className={kcClsx("kcLoginOTPListClass")} tabIndex={index}>
+                                        <span className={kcClsx("kcLoginOTPListItemHeaderClass")}>
+                                            <span className={kcClsx("kcLoginOTPListItemIconBodyClass")}>
+                                                <i className={kcClsx("kcLoginOTPListItemIconClass")} aria-hidden="true"></i>
                                             </span>
-                                            <span className={getClassName("kcLoginOTPListItemTitleClass")}>{otpCredential.userLabel}</span>
+                                            <span className={kcClsx("kcLoginOTPListItemTitleClass")}>{otpCredential.userLabel}</span>
                                         </span>
                                     </label>
                                 </Fragment>
@@ -51,42 +53,37 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
                 )}
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="otp" className={getClassName("kcLabelClass")}>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="otp" className={kcClsx("kcLabelClass")}>
                             {msg("loginOtpOneTime")}
                         </label>
                     </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcInputWrapperClass")}>
                         <input
                             id="otp"
                             name="otp"
                             autoComplete="off"
                             type="text"
-                            className={getClassName("kcInputClass")}
+                            className={kcClsx("kcInputClass")}
                             autoFocus
                             aria-invalid={messagesPerField.existsError("totp")}
                         />
                         {messagesPerField.existsError("totp") && (
-                            <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                            <span id="input-error-otp-code" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                 {messagesPerField.get("totp")}
                             </span>
                         )}
                     </div>
                 </div>
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
                     </div>
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <input
-                            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/LoginPageExpired.tsx

@@ -1,5 +1,5 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
@@ -10,7 +10,7 @@ export default function LoginPageExpired(props: PageProps<Extract<KcContext, { p
     const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("pageExpiredTitle")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("pageExpiredTitle")}>
             <p id="instruction1" className="instruction">
                 {msg("pageExpiredMsg1")}
                 <a id="loginRestartLink" href={url.loginRestartFlowUrl}>