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

package/src/login/pages/Register.tsx

@@ -1,22 +1,20 @@
 import { useState } from "react";
-import { clsx } from "keycloakify/tools/clsx";
-import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import { useTermsMarkdown } from "keycloakify/login/lib/useDownloadTerms";
-import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
-import { Markdown } from "keycloakify/tools/Markdown";
-import type { KcContext } from "../kcContext";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function Register(props: RegisterProps) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -26,52 +24,54 @@ export default function Register(props: RegisterProps) {
     const { msg, msgStr } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+    const [areTermsAccepted, setAreTermsAccepted] = useState(false);
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
-            <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("registerTitle")}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields
+        >
+            <form id="kc-register-form" className={kcClsx("kcFormClass")} action={url.registrationAction} method="post">
                 <UserProfileFormFields
-                    {...{
-                        kcContext,
-                        i18n,
-                        getClassName,
-                        messagesPerField
-                    }}
+                    kcContext={kcContext}
+                    i18n={i18n}
+                    kcClsx={kcClsx}
                     onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                 />
                 {termsAcceptanceRequired && (
                     <TermsAcceptance
-                        {...{
-                            i18n,
-                            getClassName,
-                            messagesPerField
-                        }}
+                        i18n={i18n}
+                        kcClsx={kcClsx}
+                        messagesPerField={messagesPerField}
+                        areTermsAccepted={areTermsAccepted}
+                        onAreTermsAcceptedValueChange={setAreTermsAccepted}
                     />
                 )}
                 {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")
-                            )}
+                            disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                             type="submit"
                             value={msgStr("doRegister")}
                         />
@@ -84,46 +84,41 @@ export default function Register(props: RegisterProps) {
 
 function TermsAcceptance(props: {
     i18n: I18n;
-    getClassName: ReturnType<typeof useGetClassName>["getClassName"];
+    kcClsx: KcClsx;
     messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
 }) {
-    const { i18n, getClassName, messagesPerField } = props;
+    const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
 
     const { msg } = i18n;
 
-    // NOTE: Refer to https://docs.keycloakify.dev/terms-and-conditions to load your terms and conditions.
-    const { termsMarkdown } = useTermsMarkdown();
-
-    if (termsMarkdown === undefined) {
-        return null;
-    }
-
     return (
         <>
             <div className="form-group">
-                <div className={getClassName("kcInputWrapperClass")}>
+                <div className={kcClsx("kcInputWrapperClass")}>
                     {msg("termsTitle")}
-                    <div id="kc-registration-terms-text">
-                        <Markdown>{termsMarkdown}</Markdown>
-                    </div>
+                    <div id="kc-registration-terms-text">{msg("termsText")}</div>
                 </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")}
+                        checked={areTermsAccepted}
+                        onChange={e => onAreTermsAcceptedValueChange(e.target.checked)}
                         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,6 +1,6 @@
 import { useEffect, useState } from "react";
 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 SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>, I18n>) {
@@ -18,7 +18,7 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
         }
 
         // Storybook
-        if (samlPost.url === "") {
+        if (samlPost.url === "#") {
             alert("In a real Keycloak the user would be redirected immediately");
             return;
         }
@@ -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} i18n={i18n} 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,44 @@
-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 "keycloakify/login/kcContext";
-import type { I18n } from "keycloakify/login/i18n";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
 
 export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
     const { url, auth } = kcContext;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
     const { msg } = i18n;
 
     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}
+            i18n={i18n}
+            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>
                     ))}

package/src/login/pages/Terms.tsx

@@ -1,15 +1,12 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { Markdown } from "keycloakify/tools/Markdown";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { useTermsMarkdown } from "keycloakify/login/lib/useDownloadTerms";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -18,33 +15,26 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
 
     const { url } = kcContext;
 
-    const { termsMarkdown } = useTermsMarkdown();
-
-    if (termsMarkdown === undefined) {
-        return null;
-    }
-
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
-            <div id="kc-terms-text">
-                <Markdown>{termsMarkdown}</Markdown>
-            </div>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("termsTitle")}
+        >
+            <div id="kc-terms-text">{msg("termsText")}</div>
             <form className="form-actions" action={url.loginAction} method="POST">
                 <input
-                    className={clsx(
-                        getClassName("kcButtonClass"),
-                        getClassName("kcButtonClass"),
-                        getClassName("kcButtonClass"),
-                        getClassName("kcButtonPrimaryClass"),
-                        getClassName("kcButtonLargeClass")
-                    )}
+                    className={kcClsx("kcButtonClass", "kcButtonClass", "kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                     name="accept"
                     id="kc-accept"
                     type="submit"
                     value={msgStr("doAccept")}
                 />
                 <input
-                    className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                     name="cancel"
                     id="kc-decline"
                     type="submit"

package/src/login/pages/UpdateEmail.tsx

@@ -1,20 +1,20 @@
 import { useState } from "react";
-import { clsx } from "keycloakify/tools/clsx";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
 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";
 
 type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function UpdateEmail(props: UpdateEmailProps) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -27,48 +27,45 @@ export default function UpdateEmail(props: UpdateEmailProps) {
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields={true}
+            displayRequiredFields
             headerNode={msg("updateEmailTitle")}
         >
-            <form id="kc-update-email-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+            <form id="kc-update-email-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
-                    {...{
-                        kcContext,
-                        i18n,
-                        getClassName,
-                        messagesPerField
-                    }}
+                    kcContext={kcContext}
+                    i18n={i18n}
+                    kcClsx={kcClsx}
                     onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                 />
 
-                <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>
 
-                    <LogoutOtherSessions {...{ getClassName, i18n }} />
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
 
-                    <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"),
-                                isAppInitiatedAction && getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                isAppInitiatedAction && "kcButtonBlockClass",
+                                "kcButtonLargeClass"
                             )}
                             type="submit"
                             value={msgStr("doSubmit")}
                         />
                         {isAppInitiatedAction && (
                             <button
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                                 type="submit"
                                 name="cancel-aia"
                                 value="true"
@@ -83,14 +80,14 @@ export default function UpdateEmail(props: UpdateEmailProps) {
     );
 }
 
-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/WebauthnAuthenticate.tsx

@@ -1,19 +1,16 @@
 import { useEffect, Fragment } from "react";
+import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
-import type { MessageKey } from "keycloakify/login/i18n/i18n";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { assert } from "tsafe/assert";
-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 WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
     const {
         url,
@@ -29,21 +26,22 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
         shouldDisplayAuthenticators
     } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        "scriptTags": [
+        componentOrHookName: "WebauthnAuthenticate",
+        scriptTags: [
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+                type: "text/javascript",
+                src: `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
             },
             {
-                "type": "text/javascript",
-                "src": `${url.resourcesPath}/js/base64url.js`
+                type: "text/javascript",
+                src: `${url.resourcesPath}/js/base64url.js`
             },
             {
-                "type": "text/javascript",
-                "textContent": `
+                type: "text/javascript",
+                textContent: `
 
                     function webAuthnAuthenticate() {
                         let isUserIdentified = ${isUserIdentified};
@@ -138,7 +136,10 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={!messagesPerField.existsError("username")}
             displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
             infoNode={
@@ -153,7 +154,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
             }
             headerNode={msg("webauthn-login-title")}
         >
-            <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
+            <div id="kc-form-webauthn" className={kcClsx("kcFormClass")}>
                 <form id="webauth" action={url.loginAction} method="post">
                     <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
                     <input type="hidden" id="authenticatorData" name="authenticatorData" />
@@ -162,10 +163,10 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                     <input type="hidden" id="userHandle" name="userHandle" />
                     <input type="hidden" id="error" name="error" />
                 </form>
-                <div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
+                <div className={clsx(kcClsx("kcFormGroupClass"), "no-bottom-margin")}>
                     {authenticators && (
                         <>
-                            <form id="authn_select" className={getClassName("kcFormClass")}>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
                                 {authenticators.authenticators.map(authenticator => (
                                     <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} />
                                 ))}
@@ -174,39 +175,39 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                             {shouldDisplayAuthenticators && (
                                 <>
                                     {authenticators.authenticators.length > 1 && (
-                                        <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
+                                        <p className={kcClsx("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
                                     )}
-                                    <div className={getClassName("kcFormOptionsClass")}>
+                                    <div className={kcClsx("kcFormOptionsClass")}>
                                         {authenticators.authenticators.map((authenticator, i) => (
-                                            <div key={i} id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
-                                                <div className={getClassName("kcSelectAuthListItemIconClass")}>
+                                            <div key={i} id="kc-webauthn-authenticator" className={kcClsx("kcSelectAuthListItemClass")}>
+                                                <div className={kcClsx("kcSelectAuthListItemIconClass")}>
                                                     <i
                                                         className={clsx(
                                                             (() => {
-                                                                const className = getClassName(authenticator.transports.iconClass as any);
+                                                                const className = kcClsx(authenticator.transports.iconClass as any);
                                                                 if (className === authenticator.transports.iconClass) {
-                                                                    return getClassName("kcWebAuthnDefaultIcon");
+                                                                    return kcClsx("kcWebAuthnDefaultIcon");
                                                                 }
                                                                 return className;
                                                             })(),
-                                                            getClassName("kcSelectAuthListItemIconPropertyClass")
+                                                            kcClsx("kcSelectAuthListItemIconPropertyClass")
                                                         )}
                                                     />
                                                 </div>
-                                                <div className={getClassName("kcSelectAuthListItemArrowIconClass")}>
-                                                    <div
-                                                        id="kc-webauthn-authenticator-label"
-                                                        className={getClassName("kcSelectAuthListItemHeadingClass")}
-                                                    >
-                                                        {msg(authenticator.label as MessageKey)}
+                                                <div className={kcClsx("kcSelectAuthListItemArrowIconClass")}>
+                                                    <div id="kc-webauthn-authenticator-label" className={kcClsx("kcSelectAuthListItemHeadingClass")}>
+                                                        {advancedMsg(authenticator.label)}
                                                     </div>
                                                     {authenticator.transports.displayNameProperties?.length && (
                                                         <div
                                                             id="kc-webauthn-authenticator-transport"
-                                                            className={getClassName("kcSelectAuthListItemDescriptionClass")}
+                                                            className={kcClsx("kcSelectAuthListItemDescriptionClass")}
                                                         >
                                                             {authenticator.transports.displayNameProperties
-                                                                .map((nameProperty, i, arr) => ({ nameProperty, "hasNext": i !== arr.length - 1 }))
+                                                                .map((nameProperty, i, arr) => ({
+                                                                    nameProperty,
+                                                                    hasNext: i !== arr.length - 1
+                                                                }))
                                                                 .map(({ nameProperty, hasNext }) => (
                                                                     <Fragment key={nameProperty}>
                                                                         <span>{msg(nameProperty)}</span>
@@ -215,11 +216,11 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                                 ))}
                                                         </div>
                                                     )}
-                                                    <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
+                                                    <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
                                                         <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
                                                         <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
                                                     </div>
-                                                    <div className={getClassName("kcSelectAuthListItemFillClass")} />
+                                                    <div className={kcClsx("kcSelectAuthListItemFillClass")} />
                                                 </div>
                                             </div>
                                         ))}
@@ -229,7 +230,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                         </>
                     )}
 
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <input
                             id="authenticateWebAuthnButton"
                             type="button"
@@ -240,12 +241,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                             }}
                             autoFocus
                             value={msgStr("webauthn-doAuthenticate")}
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         />
                     </div>
                 </div>