keycloakify 10.0.0-rc.12 → 10.0.0-rc.120

package/src/login/pages/Code.tsx

@@ -1,12 +1,12 @@
+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 Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -17,14 +17,17 @@ export default function Code(props: PageProps<Extract<KcContext, { pageId: "code
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             headerNode={code.success ? msg("codeSuccessTitle") : msg("codeErrorTitle", code.error)}
         >
             <div id="kc-code">
                 {code.success ? (
                     <>
                         <p>{msg("copyCodeInstruction")}</p>
-                        <input id="code" className={getClassName("kcTextareaClass")} defaultValue={code.code} />
+                        <input id="code" className={kcClsx("kcTextareaClass")} defaultValue={code.code} />
                     </>
                 ) : (
                     <p id="error">{code.error}</p>

package/src/login/pages/DeleteAccountConfirm.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 DeleteAccountConfirm(props: PageProps<Extract<KcContext, { pageId: "delete-account-confirm.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -17,28 +16,34 @@ export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext,
     const { msg, msgStr } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("deleteAccountConfirm")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("deleteAccountConfirm")}>
             <form action={url.loginAction} className="form-vertical" method="post">
-                <div className="alert alert-warning" style={{ "marginTop": "0", "marginBottom": "30px" }}>
+                <div className="alert alert-warning" style={{ marginTop: "0", marginBottom: "30px" }}>
                     <span className="pficon pficon-warning-triangle-o"></span>
                     {msg("irreversibleAction")}
                 </div>
                 <p>{msg("deletingImplies")}</p>
-                <ul style={{ "color": "#72767b", "listStyle": "disc", "listStylePosition": "inside" }}>
+                <ul
+                    style={{
+                        color: "#72767b",
+                        listStyle: "disc",
+                        listStylePosition: "inside"
+                    }}
+                >
                     <li>{msg("loggingOutImmediately")}</li>
                     <li>{msg("errasingData")}</li>
                 </ul>
                 <p className="delete-account-text">{msg("finalDeletionConfirmation")}</p>
                 <div id="kc-form-buttons">
                     <input
-                        className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                         type="submit"
                         value={msgStr("doConfirmDelete")}
                     />
                     {triggered_from_aia && (
                         <button
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
-                            style={{ "marginLeft": "calc(100% - 220px)" }}
+                            className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                            style={{ marginLeft: "calc(100% - 220px)" }}
                             type="submit"
                             name="cancel-aia"
                             value="true"

package/src/login/pages/DeleteCredential.tsx

@@ -1,15 +1,14 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 
 export default function DeleteCredential(props: PageProps<Extract<KcContext, { pageId: "delete-credential.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { msgStr, msg } = i18n;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -18,21 +17,24 @@ export default function DeleteCredential(props: PageProps<Extract<KcContext, { p
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={false}
             headerNode={msg("deleteCredentialTitle", credentialLabel)}
         >
             <div id="kc-delete-text">{msg("deleteCredentialMessage", credentialLabel)}</div>
             <form className="form-actions" action={url.loginAction} method="POST">
                 <input
-                    className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                    className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                     name="accept"
                     id="kc-accept"
                     type="submit"
                     value={msgStr("doConfirmDelete")}
                 />
                 <input
-                    className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                     name="cancel-aia"
                     value={msgStr("doCancel")}
                     id="kc-decline"

package/src/login/pages/Error.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 Error(props: PageProps<Extract<KcContext, { pageId: "error.ftl" }>, I18n>) {
@@ -10,9 +10,16 @@ export default function Error(props: PageProps<Extract<KcContext, { pageId: "err
     const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("errorTitle")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("errorTitle")}
+        >
             <div id="kc-error-message">
-                <p className="instruction">{message.summary}</p>
+                <p className="instruction" dangerouslySetInnerHTML={{ __html: message.summary }} />
                 {!skipLink && client !== undefined && client.baseUrl !== undefined && (
                     <p>
                         <a id="backToApplication" href={client.baseUrl}>

package/src/login/pages/FrontchannelLogout.tsx

@@ -1,6 +1,6 @@
 import { useEffect } 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 FrontchannelLogout(props: PageProps<Extract<KcContext, { pageId: "frontchannel-logout.ftl" }>, I18n>) {
@@ -18,7 +18,10 @@ export default function FrontchannelLogout(props: PageProps<Extract<KcContext, {
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             documentTitle={msgStr("frontchannel-logout.title")}
             headerNode={msg("frontchannel-logout.title")}
         >
@@ -27,7 +30,7 @@ export default function FrontchannelLogout(props: PageProps<Extract<KcContext, {
                 {logout.clients.map(client => (
                     <li key={client.name}>
                         {client.name}
-                        <iframe src={client.frontChannelLogoutUrl} style={{ "display": "none" }} />
+                        <iframe src={client.frontChannelLogoutUrl} style={{ display: "none" }} />
                     </li>
                 ))}
             </ul>

package/src/login/pages/IdpReviewUserProfile.tsx

@@ -1,20 +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 type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
-import type { KcContext } from "../kcContext";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 type IdpReviewUserProfileProps = PageProps<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
-    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,30 +27,29 @@ export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={messagesPerField.exists("global")}
             displayRequiredFields
             headerNode={msg("loginIdpReviewProfileTitle")}
         >
-            <form id="kc-idp-review-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+            <form id="kc-idp-review-profile-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
-                    onIsFormSubmittableValueChange={setIsFomSubmittable}
                     i18n={i18n}
-                    getClassName={getClassName}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    kcClsx={kcClsx}
+                    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>
-                    <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")}
                             disabled={!isFomSubmittable}

package/src/login/pages/Info.tsx

@@ -1,31 +1,48 @@
-import { assert } from "keycloakify/tools/assert";
 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 Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { msgStr, msg } = i18n;
-
-    assert(
-        kcContext.message !== undefined,
-        "No message in kcContext.message, there will always be a message in production context, add it in your mock"
-    );
+    const { advancedMsgStr, msg } = i18n;
 
     const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={false}
-            headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
+            headerNode={
+                <span
+                    dangerouslySetInnerHTML={{
+                        __html: messageHeader ?? message.summary
+                    }}
+                />
+            }
         >
             <div id="kc-info-message">
-                <p className="instruction">
-                    {message.summary}
-                    {requiredActions && <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>}
-                </p>
+                <p
+                    className="instruction"
+                    dangerouslySetInnerHTML={{
+                        __html: (() => {
+                            let html = message.summary;
+
+                            if (requiredActions) {
+                                html += "<b>";
+
+                                html += requiredActions.map(requiredAction => advancedMsgStr(`requiredAction.${requiredAction}`)).join(", ");
+
+                                html += "</b>";
+                            }
+
+                            return html;
+                        })()
+                    }}
+                />
                 {(() => {
                     if (skipLink) {
                         return null;

package/src/login/pages/Login.tsx

@@ -1,15 +1,15 @@
 import { useState, useEffect, useReducer } from "react";
-import { assert } from "tsafe/assert";
+import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -22,7 +22,10 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={!messagesPerField.existsError("username", "password")}
             headerNode={msg("loginAccountTitle")}
             displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
@@ -41,34 +44,26 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
             socialProvidersNode={
                 <>
                     {realm.password && social.providers?.length && (
-                        <div id="kc-social-providers" className={getClassName("kcFormSocialAccountSectionClass")}>
+                        <div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
                             <hr />
                             <h2>{msg("identity-provider-login-label")}</h2>
-                            <ul
-                                className={clsx(
-                                    getClassName("kcFormSocialAccountListClass"),
-                                    social.providers.length > 3 && getClassName("kcFormSocialAccountListGridClass")
-                                )}
-                            >
+                            <ul className={kcClsx("kcFormSocialAccountListClass", social.providers.length > 3 && "kcFormSocialAccountListGridClass")}>
                                 {social.providers.map((...[p, , providers]) => (
                                     <li key={p.alias}>
                                         <a
                                             id={`social-${p.alias}`}
-                                            className={clsx(
-                                                getClassName("kcFormSocialAccountListButtonClass"),
-                                                providers.length > 3 && getClassName("kcFormSocialAccountGridItem")
+                                            className={kcClsx(
+                                                "kcFormSocialAccountListButtonClass",
+                                                providers.length > 3 && "kcFormSocialAccountGridItem"
                                             )}
                                             type="button"
                                             href={p.loginUrl}
                                         >
-                                            {p.iconClasses && (
-                                                <i className={clsx(getClassName("kcCommonLogoIdP"), p.iconClasses)} aria-hidden="true"></i>
-                                            )}
+                                            {p.iconClasses && <i className={clsx(kcClsx("kcCommonLogoIdP"), p.iconClasses)} aria-hidden="true"></i>}
                                             <span
-                                                className={clsx(getClassName("kcFormSocialAccountNameClass"), p.iconClasses && "kc-social-icon-text")}
-                                            >
-                                                {p.displayName}
-                                            </span>
+                                                className={clsx(kcClsx("kcFormSocialAccountNameClass"), p.iconClasses && "kc-social-icon-text")}
+                                                dangerouslySetInnerHTML={{ __html: p.displayName }}
+                                            ></span>
                                         </a>
                                     </li>
                                 ))}
@@ -91,18 +86,18 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                             method="post"
                         >
                             {!usernameHidden && (
-                                <div className={getClassName("kcFormGroupClass")}>
-                                    <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                                <div className={kcClsx("kcFormGroupClass")}>
+                                    <label htmlFor="username" className={kcClsx("kcLabelClass")}>
                                         {!realm.loginWithEmailAllowed
                                             ? msg("username")
                                             : !realm.registrationEmailAsUsername
-                                            ? msg("usernameOrEmail")
-                                            : msg("email")}
+                                              ? msg("usernameOrEmail")
+                                              : msg("email")}
                                     </label>
                                     <input
                                         tabIndex={2}
                                         id="username"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         name="username"
                                         defaultValue={login.username ?? ""}
                                         type="text"
@@ -111,22 +106,27 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                         aria-invalid={messagesPerField.existsError("username", "password")}
                                     />
                                     {messagesPerField.existsError("username", "password") && (
-                                        <span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
-                                            {messagesPerField.getFirstError("username", "password")}
-                                        </span>
+                                        <span
+                                            id="input-error"
+                                            className={kcClsx("kcInputErrorMessageClass")}
+                                            aria-live="polite"
+                                            dangerouslySetInnerHTML={{
+                                                __html: messagesPerField.getFirstError("username", "password")
+                                            }}
+                                        />
                                     )}
                                 </div>
                             )}
 
-                            <div className={getClassName("kcFormGroupClass")}>
-                                <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                            <div className={kcClsx("kcFormGroupClass")}>
+                                <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={3}
                                         id="password"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         name="password"
                                         type="password"
                                         autoComplete="current-password"
@@ -134,13 +134,18 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                     />
                                 </PasswordWrapper>
                                 {usernameHidden && messagesPerField.existsError("username", "password") && (
-                                    <span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
-                                        {messagesPerField.getFirstError("username", "password")}
-                                    </span>
+                                    <span
+                                        id="input-error"
+                                        className={kcClsx("kcInputErrorMessageClass")}
+                                        aria-live="polite"
+                                        dangerouslySetInnerHTML={{
+                                            __html: messagesPerField.getFirstError("username", "password")
+                                        }}
+                                    />
                                 )}
                             </div>
 
-                            <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
+                            <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
                                 <div id="kc-form-options">
                                     {realm.rememberMe && !usernameHidden && (
                                         <div className="checkbox">
@@ -157,7 +162,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                         </div>
                                     )}
                                 </div>
-                                <div className={getClassName("kcFormOptionsWrapperClass")}>
+                                <div className={kcClsx("kcFormOptionsWrapperClass")}>
                                     {realm.resetPasswordAllowed && (
                                         <span>
                                             <a tabIndex={6} href={url.loginResetCredentialsUrl}>
@@ -168,17 +173,12 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                 </div>
                             </div>
 
-                            <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                            <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
                                 <input type="hidden" id="id-hidden-input" name="credentialId" value={auth.selectedCredential} />
                                 <input
                                     tabIndex={7}
                                     disabled={isLoginButtonDisabled}
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonBlockClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
+                                    className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                                     name="login"
                                     id="kc-login"
                                     type="submit"
@@ -193,13 +193,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
     );
 }
 
-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;
 
@@ -214,19 +209,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>
     );