keycloakify 10.0.0-rc.7 → 10.0.0-rc.70

package/src/login/pages/LoginPassword.tsx

@@ -1,15 +1,15 @@
 import { useState, useEffect, useReducer } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { assert } from "tsafe/assert";
+import { getKcClsx, type 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";
 
 export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -22,7 +22,10 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             headerNode={msg("doLogIn")}
             displayMessage={!messagesPerField.existsError("password")}
         >
@@ -37,17 +40,17 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
                         action={url.loginAction}
                         method="post"
                     >
-                        <div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
+                        <div className={clsx(kcClsx("kcFormGroupClass"), "no-bottom-margin")}>
                             <hr />
-                            <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                            <label htmlFor="password" className={kcClsx("kcLabelClass")}>
                                 {msg("password")}
                             </label>
 
-                            <PasswordWrapper getClassName={getClassName} i18n={i18n} passwordInputId="password">
+                            <PasswordWrapper kcClsx={kcClsx} i18n={i18n} passwordInputId="password">
                                 <input
                                     tabIndex={2}
                                     id="password"
-                                    className={getClassName("kcInputClass")}
+                                    className={kcClsx("kcInputClass")}
                                     name="password"
                                     type="password"
                                     autoFocus
@@ -57,14 +60,14 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
                             </PasswordWrapper>
 
                             {messagesPerField.existsError("password") && (
-                                <span id="input-error-password" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                <span id="input-error-password" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                     {messagesPerField.get("password")}
                                 </span>
                             )}
                         </div>
-                        <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                        <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
                             <div id="kc-form-options" />
-                            <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            <div className={kcClsx("kcFormOptionsWrapperClass")}>
                                 {realm.resetPasswordAllowed && (
                                     <span>
                                         <a tabIndex={5} href={url.loginResetCredentialsUrl}>
@@ -74,15 +77,10 @@ export default function LoginPassword(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}
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                                 name="login"
                                 id="kc-login"
                                 type="submit"
@@ -97,13 +95,8 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
     );
 }
 
-function PasswordWrapper(props: {
-    getClassName: ReturnType<typeof useGetClassName>["getClassName"];
-    i18n: I18n;
-    passwordInputId: string;
-    children: JSX.Element;
-}) {
-    const { getClassName, i18n, passwordInputId, children } = props;
+function PasswordWrapper(props: { kcClsx: KcClsx; i18n: I18n; passwordInputId: string; children: JSX.Element }) {
+    const { kcClsx, i18n, passwordInputId, children } = props;
 
     const { msgStr } = i18n;
 
@@ -118,19 +111,16 @@ function PasswordWrapper(props: {
     }, [isPasswordRevealed]);
 
     return (
-        <div className={getClassName("kcInputGroup")}>
+        <div className={kcClsx("kcInputGroup")}>
             {children}
             <button
                 type="button"
-                className={getClassName("kcFormPasswordVisibilityButtonClass")}
+                className={kcClsx("kcFormPasswordVisibilityButtonClass")}
                 aria-label={msgStr(isPasswordRevealed ? "hidePassword" : "showPassword")}
                 aria-controls={passwordInputId}
                 onClick={toggleIsPasswordRevealed}
             >
-                <i
-                    className={getClassName(isPasswordRevealed ? "kcFormPasswordVisibilityIconHide" : "kcFormPasswordVisibilityIconShow")}
-                    aria-hidden
-                />
+                <i className={kcClsx(isPasswordRevealed ? "kcFormPasswordVisibilityIconHide" : "kcFormPasswordVisibilityIconShow")} aria-hidden />
             </button>
         </div>
     );

package/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx

@@ -1,17 +1,15 @@
 import { useEffect } from "react";
 import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-config.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -21,17 +19,18 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
             {
-                "type": "text/javascript",
-                "textContent": `
+                type: "text/javascript",
+                textContent: `
 
                     /* copy recovery codes  */
                     function copyRecoveryCodes() {
                         var tmpTextarea = document.createElement("textarea");
                         var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
                         for (i = 0; i < codes.length; i++) {
-                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
                         }
                         document.body.appendChild(tmpTextarea);
                         tmpTextarea.select();
@@ -65,7 +64,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
 
                         for (var i = 0; i < recoveryCodes.length; i++) {
                             var recoveryCodeLiElement = recoveryCodes[i].innerText;
-                            recoveryCodeList += recoveryCodeLiElement + "\r\n";
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
                         }
 
                         return recoveryCodeList;
@@ -84,9 +83,9 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                         };
 
                         return fileBodyContent =
-                            "${msgStr("recovery-codes-download-file-header")}\n\n" +
-                            recoveryCodeList + "\n" +
-                            "${msgStr("recovery-codes-download-file-description")}\n\n" +
+                            "${msgStr("recovery-codes-download-file-header")}\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            "${msgStr("recovery-codes-download-file-description")}\\n\\n" +
                             "${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime();
                     }
 
@@ -145,8 +144,14 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
     }, []);
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("recovery-code-config-header")}>
-            <div className={clsx("pf-c-alert", "pf-m-warning", "pf-m-inline", getClassName("kcRecoveryCodesWarning"))} aria-label="Warning alert">
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("recovery-code-config-header")}
+        >
+            <div className={clsx("pf-c-alert", "pf-m-warning", "pf-m-inline", kcClsx("kcRecoveryCodesWarning"))} aria-label="Warning alert">
                 <div className="pf-c-alert__icon">
                     <i className="pficon-warning-triangle-o" aria-hidden="true" />
                 </div>
@@ -159,7 +164,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                 </div>
             </div>
 
-            <ol id="kc-recovery-codes-list" className={getClassName("kcRecoveryCodesList")}>
+            <ol id="kc-recovery-codes-list" className={kcClsx("kcRecoveryCodesList")}>
                 {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map((code, index) => (
                     <li key={index}>
                         <span>{index + 1}:</span> {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}
@@ -168,7 +173,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
             </ol>
 
             {/* actions */}
-            <div className={getClassName("kcRecoveryCodesActions")}>
+            <div className={kcClsx("kcRecoveryCodesActions")}>
                 <button id="printRecoveryCodes" className={clsx("pf-c-button", "pf-m-link")} type="button">
                     <i className="pficon-print" aria-hidden="true" /> {msg("recovery-codes-print")}
                 </button>
@@ -181,9 +186,9 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
             </div>
 
             {/* confirmation checkbox */}
-            <div className={getClassName("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsClass")}>
                 <input
-                    className={getClassName("kcCheckInputClass")}
+                    className={kcClsx("kcCheckInputClass")}
                     type="checkbox"
                     id="kcRecoveryCodesConfirmationCheck"
                     name="kcRecoveryCodesConfirmationCheck"
@@ -195,25 +200,25 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                 <label htmlFor="kcRecoveryCodesConfirmationCheck">{msg("recovery-codes-confirmation-message")}</label>
             </div>
 
-            <form action={kcContext.url.loginAction} className={getClassName("kcFormGroupClass")} id="kc-recovery-codes-settings-form" method="post">
+            <form action={kcContext.url.loginAction} className={kcClsx("kcFormGroupClass")} id="kc-recovery-codes-settings-form" method="post">
                 <input type="hidden" name="generatedRecoveryAuthnCodes" value={recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString} />
                 <input type="hidden" name="generatedAt" value={recoveryAuthnCodesConfigBean.generatedAt} />
                 <input type="hidden" id="userLabel" name="userLabel" value={msgStr("recovery-codes-label-default")} />
 
-                <LogoutOtherSessions {...{ getClassName, i18n }} />
+                <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
 
                 {isAppInitiatedAction ? (
                     <>
                         <input
                             type="submit"
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                             id="saveRecoveryAuthnCodesBtn"
                             value={msgStr("recovery-codes-action-complete")}
                             disabled
                         />
                         <button
                             type="submit"
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                            className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                             id="cancelRecoveryAuthnCodesBtn"
                             name="cancel-aia"
                             value="true"
@@ -224,12 +229,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                 ) : (
                     <input
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonPrimaryClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         id="saveRecoveryAuthnCodesBtn"
                         value={msgStr("recovery-codes-action-complete")}
                         disabled
@@ -240,14 +240,14 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
     );
 }
 
-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/LoginRecoveryAuthnCodeInput.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 LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-input.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -18,18 +17,21 @@ export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcC
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             headerNode={msg("auth-recovery-code-header")}
             displayMessage={!messagesPerField.existsError("recoveryCodeInput")}
         >
-            <form id="kc-recovery-code-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="recoveryCodeInput" className={getClassName("kcLabelClass")}>
+            <form id="kc-recovery-code-login-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="recoveryCodeInput" className={kcClsx("kcLabelClass")}>
                             {msg("auth-recovery-code-prompt", `${recoveryAuthnCodesInputBean.codeNumber}`)}
                         </label>
                     </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcInputWrapperClass")}>
                         <input
                             tabIndex={1}
                             id="recoveryCodeInput"
@@ -37,29 +39,24 @@ export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcC
                             aria-invalid={messagesPerField.existsError("recoveryCodeInput")}
                             autoComplete="off"
                             type="text"
-                            className={getClassName("kcInputClass")}
+                            className={kcClsx("kcInputClass")}
                             autoFocus
                         />
                         {messagesPerField.existsError("recoveryCodeInput") && (
-                            <span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                            <span id="input-error" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                 {messagesPerField.get("recoveryCodeInput")}
                             </span>
                         )}
                     </div>
                 </div>
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsWrapperClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")} />
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsWrapperClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
                     </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/LoginResetOtp.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 LoginResetOtp(props: PageProps<Extract<KcContext, { pageId: "login-reset-otp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -19,44 +18,42 @@ export default function LoginResetOtp(props: PageProps<Extract<KcContext, { page
 
     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-reset-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcInputWrapperClass")}>
-                    <div className={getClassName("kcInfoAreaWrapperClass")}>
+            <form id="kc-otp-reset-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcInfoAreaWrapperClass")}>
                         <p id="kc-otp-reset-form-description">{msg("otp-reset-description")}</p>
                         {configuredOtpCredentials.userOtpCredentials.map((otpCredential, index) => (
                             <Fragment key={otpCredential.id}>
                                 <input
                                     id={`kc-otp-credential-${index}`}
-                                    className={getClassName("kcLoginOTPListInputClass")}
+                                    className={kcClsx("kcLoginOTPListInputClass")}
                                     type="radio"
                                     name="selectedCredentialId"
                                     value={otpCredential.id}
                                     defaultChecked={otpCredential.id === configuredOtpCredentials.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>
                         ))}
-                        <div className={getClassName("kcFormGroupClass")}>
-                            <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <div className={kcClsx("kcFormGroupClass")}>
+                            <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                                 <input
                                     id="kc-otp-reset-form-submit"
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
+                                    className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                                     type="submit"
                                     value={msgStr("doSubmit")}
                                 />

package/src/login/pages/LoginResetPassword.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 LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -18,57 +17,55 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayInfo
             displayMessage={!messagesPerField.existsError("username")}
             infoNode={realm.duplicateEmailsAllowed ? msg("emailInstructionUsername") : msg("emailInstruction")}
             headerNode={msg("emailForgotTitle")}
         >
-            <form id="kc-reset-password-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="username" className={getClassName("kcLabelClass")}>
+            <form id="kc-reset-password-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="username" className={kcClsx("kcLabelClass")}>
                             {!realm.loginWithEmailAllowed
                                 ? msg("username")
                                 : !realm.registrationEmailAsUsername
-                                ? msg("usernameOrEmail")
-                                : msg("email")}
+                                  ? msg("usernameOrEmail")
+                                  : msg("email")}
                         </label>
                     </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
+                    <div className={kcClsx("kcInputWrapperClass")}>
                         <input
                             type="text"
                             id="username"
                             name="username"
-                            className={getClassName("kcInputClass")}
+                            className={kcClsx("kcInputClass")}
                             autoFocus
                             defaultValue={auth.attemptedUsername ?? ""}
                             aria-invalid={messagesPerField.existsError("username")}
                         />
                         {messagesPerField.existsError("username") && (
-                            <span id="input-error-username" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                            <span id="input-error-username" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                 {messagesPerField.get("username")}
                             </span>
                         )}
                     </div>
                 </div>
-                <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
+                    <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
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                             type="submit"
                             value={msgStr("doSubmit")}
                         />