keycloakify 10.0.0-rc.13 → 10.0.0-rc.131

package/src/account/i18n/messages_defaultSet/zh-CN.ts

@@ -0,0 +1,154 @@
+//This code was automatically generated by running scripts/generate-i18n-messages.ts
+//PLEASE DO NOT EDIT MANUALLY
+
+/* spell-checker: disable */
+const messages= {
+  "doSave": "保存",
+  "doCancel": "取消",
+  "doLogOutAllSessions": "登出所有会话",
+  "doRemove": "删除",
+  "doAdd": "添加",
+  "doSignOut": "登出",
+  "personalInfoSidebarTitle": "个人信息",
+  "accountSecuritySidebarTitle": "帐户安全",
+  "signingInSidebarTitle": "访问凭证管理",
+  "deviceActivitySidebarTitle": "设备活动",
+  "linkedAccountsSidebarTitle": "关联账户",
+  "editAccountHtmlTitle": "编辑账户",
+  "federatedIdentitiesHtmlTitle": "链接的身份",
+  "accountLogHtmlTitle": "账户日志",
+  "changePasswordHtmlTitle": "更改密码",
+  "sessionsHtmlTitle": "会话",
+  "accountManagementTitle": "Keycloak账户管理",
+  "authenticatorTitle": "认证者",
+  "applicationsHtmlTitle": "应用",
+  "personalInfoIntroMessage": "管理您的基本信息",
+  "accountSecurityIntroMessage": "控制您的密码和帐户访问",
+  "applicationsIntroMessage": "跟踪和管理您的应用程序访问您帐户的权限",
+  "personalSubMessage": "管理您的基本信息。",
+  "authenticatorCode": "一次性认证码",
+  "email": "电子邮件",
+  "firstName": "名",
+  "givenName": "姓",
+  "fullName": "全名",
+  "lastName": "姓",
+  "familyName": "姓",
+  "password": "密码",
+  "passwordConfirm": "确认",
+  "passwordNew": "新密码",
+  "username": "用户名",
+  "address": "地址",
+  "street": "街道",
+  "locality": "城市住所",
+  "region": "省，自治区，直辖市",
+  "postal_code": "邮政编码",
+  "country": "国家",
+  "emailVerified": "验证过的Email",
+  "gssDelegationCredential": "GSS Delegation Credential",
+  "role_admin": "管理员",
+  "role_realm-admin": "域管理员",
+  "role_create-realm": "创建域",
+  "role_view-realm": "查看域",
+  "role_view-users": "查看用户",
+  "role_view-applications": "查看应用",
+  "role_view-clients": "查看客户",
+  "role_view-events": "查看事件",
+  "role_view-identity-providers": "查看身份提供者",
+  "role_manage-realm": "管理域",
+  "role_manage-users": "管理用户",
+  "role_manage-applications": "管理应用",
+  "role_manage-identity-providers": "管理身份提供者",
+  "role_manage-clients": "管理客户",
+  "role_manage-events": "管理事件",
+  "role_view-profile": "查看用户信息",
+  "role_manage-account": "管理账户",
+  "role_read-token": "读取 token",
+  "role_offline-access": "离线访问",
+  "role_uma_authorization": "获取授权",
+  "client_account": "账户",
+  "client_security-admin-console": "安全管理终端",
+  "client_admin-cli": "管理命令行",
+  "client_realm-management": "域管理",
+  "client_broker": "代理",
+  "requiredFields": "必填项",
+  "allFieldsRequired": "所有项必填",
+  "backToApplication": "« 回到应用",
+  "backTo": "回到 {0}",
+  "date": "日期",
+  "event": "事件",
+  "ip": "IP",
+  "client": "客户端",
+  "clients": "客户端",
+  "details": "详情",
+  "started": "开始",
+  "lastAccess": "最后一次访问",
+  "expires": "过期时间",
+  "applications": "应用",
+  "account": "账户",
+  "federatedIdentity": "关联身份",
+  "authenticator": "认证方",
+  "device-activity": "设备活动",
+  "sessions": "会话",
+  "log": "日志",
+  "application": "应用",
+  "availablePermissions": "可用权限",
+  "grantedPermissions": "授予权限",
+  "grantedPersonalInfo": "授权的个人信息",
+  "additionalGrants": "可授予的权限",
+  "action": "操作",
+  "inResource": "in",
+  "fullAccess": "所有权限",
+  "offlineToken": "离线 token",
+  "revoke": "收回授权",
+  "configureAuthenticators": "配置的认证者",
+  "mobile": "手机",
+  "totpStep1": "在你的设备上安装 <a href=\"https://fedorahosted.org/freeotp/\" target=\"_blank\">FreeOTP</a> 或者 Google Authenticator.两个应用可以从 <a href=\"https://play.google.com\">Google Play</a> 和 Apple App Store下载。",
+  "totpStep2": "打开应用扫描二维码输入验证码",
+  "totpStep3": "输入应用提供的一次性验证码单击保存",
+  "missingUsernameMessage": "请指定用户名",
+  "missingFirstNameMessage": "请指定名",
+  "invalidEmailMessage": "无效的电子邮箱地址",
+  "missingLastNameMessage": "请指定姓",
+  "missingEmailMessage": "请指定邮件地址",
+  "missingPasswordMessage": "请输入密码",
+  "notMatchPasswordMessage": "密码不匹配",
+  "missingTotpMessage": "请指定认证者代码",
+  "invalidPasswordExistingMessage": "无效的旧密码",
+  "invalidPasswordConfirmMessage": "确认密码不相符",
+  "invalidTotpMessage": "无效的认证码",
+  "usernameExistsMessage": "用户名已经存在",
+  "emailExistsMessage": "电子邮箱已经存在",
+  "readOnlyUserMessage": "无法修改账户，因为它是只读的。",
+  "readOnlyPasswordMessage": "不可以更该账户因为它是只读的。",
+  "successTotpMessage": "手机认证者配置完毕",
+  "successTotpRemovedMessage": "手机认证者已删除",
+  "successGrantRevokedMessage": "授权成功回收",
+  "accountUpdatedMessage": "您的账户已经更新",
+  "accountPasswordUpdatedMessage": "您的密码已经修改",
+  "missingIdentityProviderMessage": "身份提供者未指定",
+  "invalidFederatedIdentityActionMessage": "无效或者缺少操作",
+  "identityProviderNotFoundMessage": "指定的身份提供者未找到",
+  "federatedIdentityLinkNotActiveMessage": "这个身份不再使用了。",
+  "federatedIdentityRemovingLastProviderMessage": "你不可以移除最后一个身份提供者因为你没有设置密码",
+  "identityProviderRedirectErrorMessage": "尝试重定向到身份提供商失败",
+  "identityProviderRemovedMessage": "身份提供商成功删除",
+  "identityProviderAlreadyLinkedMessage": "链接的身份 {0} 已经连接到已有用户。",
+  "staleCodeAccountMessage": "页面过期。请再试一次。",
+  "consentDenied": "不同意",
+  "accountDisabledMessage": "账户已经关闭，请联系管理员",
+  "accountTemporarilyDisabledMessage": "账户暂时关闭，请联系管理员或稍后再试。",
+  "invalidPasswordMinLengthMessage": "无效的密码:最短长度 {0}.",
+  "invalidPasswordMinLowerCaseCharsMessage": "无效的密码: 至少包含 {0} 小写字母。",
+  "invalidPasswordMinDigitsMessage": "无效的密码:  至少包含 {0} 数字。",
+  "invalidPasswordMinUpperCaseCharsMessage": "无效的密码: 至少包含 {0} 大写字母",
+  "invalidPasswordMinSpecialCharsMessage": "无效的密码: 至少包含 {0} 个特殊字符",
+  "invalidPasswordNotUsernameMessage": "无效的密码: 不能与用户名相同",
+  "invalidPasswordRegexPatternMessage": "无效的密码:  无法与正则表达式匹配",
+  "invalidPasswordHistoryMessage": "无效的密码: 不能与之前的{0} 个旧密码相同",
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "新密码必须与旧密码不同",
+  "passwordConfirmNotMatch": "密码确认不匹配"
+};
+
+export default messages;
+/* spell-checker: enable */

package/src/account/i18n/useI18n.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { createGetI18n, type GenericI18n_noJsx, type KcContextLike, type MessageKey_defaultSet } from "./i18n";
+import { GenericI18n } from "./GenericI18n";
+import { Reflect } from "tsafe/Reflect";
+
+export function createUseI18n<MessageKey_themeDefined extends string = never>(messagesByLanguageTag: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
+}) {
+    type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+
+    type I18n = GenericI18n<MessageKey>;
+
+    const { withJsx } = (() => {
+        const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
+
+        function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
+            const { htmlString, msgKey } = params;
+            return (
+                <div
+                    data-kc-msg={msgKey}
+                    dangerouslySetInnerHTML={{
+                        __html: htmlString
+                    }}
+                />
+            );
+        }
+
+        function withJsx(i18n_noJsx: GenericI18n_noJsx<MessageKey>): I18n {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+
+                return i18n;
+            }
+
+            const i18n: I18n = {
+                ...i18n_noJsx,
+                msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+                advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey })
+            };
+
+            cache.set(i18n_noJsx, i18n);
+
+            return i18n;
+        }
+
+        return { withJsx };
+    })();
+
+    add_style: {
+        const attributeName = "data-kc-i18n";
+
+        // Check if already exists in head
+        if (document.querySelector(`style[${attributeName}]`) !== null) {
+            break add_style;
+        }
+
+        const styleElement = document.createElement("style");
+        styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+        (styleElement.textContent = `[data-kc-msg] { display: inline-block; }`), document.head.prepend(styleElement);
+    }
+
+    const { getI18n } = createGetI18n(messagesByLanguageTag);
+
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
+        const { kcContext } = params;
+
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(withJsx(i18n));
+
+        useEffect(() => {
+            let isActive = true;
+
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
+                    return;
+                }
+
+                setI18n_toReturn(withJsx(i18n));
+            });
+
+            return () => {
+                isActive = false;
+            };
+        }, []);
+
+        return { i18n: i18n_toReturn };
+    }
+
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}

package/src/account/index.ts

@@ -1,10 +1,3 @@
-import Fallback from "keycloakify/account/Fallback";
-
-export default Fallback;
-
-export { getKcContext } from "keycloakify/account/kcContext/getKcContext";
-export { createGetKcContext } from "keycloakify/account/kcContext/createGetKcContext";
-export type { AccountThemePageId as PageId } from "keycloakify/bin/shared/constants";
-export { createUseI18n } from "keycloakify/account/i18n/i18n";
-
-export type { PageProps } from "keycloakify/account/pages/PageProps";
+export type { ExtendKcContext } from "keycloakify/account/KcContext";
+export type { ClassKey } from "keycloakify/account/TemplateProps";
+export { createUseI18n } from "keycloakify/account/i18n";

package/src/account/lib/kcClsx.ts

@@ -0,0 +1,25 @@
+import { createGetKcClsx } from "keycloakify/lib/getKcClsx";
+import type { ClassKey } from "keycloakify/account/TemplateProps";
+
+export const { getKcClsx } = createGetKcClsx<ClassKey>({
+    defaultClasses: {
+        kcHtmlClass: undefined,
+        kcBodyClass: undefined,
+        kcButtonClass: "btn",
+        kcContentWrapperClass: "row",
+        kcButtonPrimaryClass: "btn-primary",
+        kcButtonLargeClass: "btn-lg",
+        kcButtonDefaultClass: "btn-default",
+        kcFormClass: "form-horizontal",
+        kcFormGroupClass: "form-group",
+        kcInputWrapperClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcLabelClass: "control-label",
+        kcInputClass: "form-control",
+        kcInputErrorMessageClass:
+            "pf-c-form__helper-text pf-m-error required kc-feedback-text"
+    }
+});
+
+export type { ClassKey };
+
+export type KcClsx = ReturnType<typeof getKcClsx>["kcClsx"];

package/src/account/pages/Account.tsx

@@ -1,18 +1,20 @@
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "user")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        "classes": {
-            ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
-        }
+        classes
     });
 
     const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
@@ -102,11 +104,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                             {referrer !== undefined && <a href={referrer?.url}>{msg("backToApplication")}</a>}
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >
@@ -114,11 +112,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                             </button>
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Cancel"
                             >

package/src/account/pages/Applications.tsx

@@ -1,17 +1,12 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-function isArrayWithEmptyObject(variable: any): boolean {
-    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
-}
-
 export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -67,7 +62,6 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
                                                     {index < application.realmRolesAvailable.length - 1 && ", "}
                                                 </span>
                                             ))}
-                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) && application.resourceRolesAvailable && ", "}
                                         {application.resourceRolesAvailable &&
                                             Object.keys(application.resourceRolesAvailable).map(resource => (
                                                 <span key={resource}>
@@ -118,7 +112,7 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
                                         application.additionalGrants.length > 0 ? (
                                             <button
                                                 type="submit"
-                                                className={clsx(getClassName("kcButtonPrimaryClass"), getClassName("kcButtonClass"))}
+                                                className={kcClsx("kcButtonPrimaryClass", "kcButtonClass")}
                                                 id={`revoke-${application.client.clientId}`}
                                                 name="clientId"
                                                 value={application.client.id}
@@ -136,3 +130,7 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
         </Template>
     );
 }
+
+function isArrayWithEmptyObject(variable: any): boolean {
+    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
+}

package/src/account/pages/FederatedIdentity.tsx

@@ -1,6 +1,6 @@
-import { PageProps } from "keycloakify/account";
-import { I18n } from "keycloakify/account/i18n";
-import { KcContext } from "keycloakify/account/kcContext";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
 
 export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
@@ -8,7 +8,7 @@ export default function FederatedIdentity(props: PageProps<Extract<KcContext, {
     const { url, federatedIdentity, stateChecker } = kcContext;
     const { msg } = i18n;
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="federatedIdentity">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="social">
             <div className="main-layout social">
                 <div className="row">
                     <div className="col-md-10">

package/src/account/pages/Log.tsx

@@ -1,13 +1,13 @@
+import type { Key } from "react";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { Key } from "react";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 
 export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -18,7 +18,7 @@ export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.f
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="log">
-            <div className={getClassName("kcContentWrapperClass")}>
+            <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("accountLogHtmlTitle")}</h2>
                 </div>

package/src/account/pages/PageProps.ts

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

package/src/account/pages/Password.tsx

@@ -1,19 +1,21 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "password")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        "classes": {
-            ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
-        }
+        classes
     });
 
     const { url, password, account, stateChecker } = kcContext;
@@ -57,18 +59,18 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
             {...{
                 kcContext: {
                     ...kcContext,
-                    "message": (() => {
+                    message: (() => {
                         if (newPasswordError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordError
+                                type: "error",
+                                summary: newPasswordError
                             };
                         }
 
                         if (newPasswordConfirmError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordConfirmError
+                                type: "error",
+                                summary: newPasswordConfirmError
                             };
                         }
 
@@ -98,7 +100,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     value={account.username ?? ""}
                     autoComplete="username"
                     readOnly
-                    style={{ "display": "none" }}
+                    style={{ display: "none" }}
                 />
 
                 {password.passwordSet && (
@@ -192,11 +194,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                             <button
                                 disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >

package/src/account/pages/Sessions.tsx

@@ -1,13 +1,12 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -17,7 +16,7 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
     const { msg } = i18n;
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
-            <div className={getClassName("kcContentWrapperClass")}>
+            <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("sessionsHtmlTitle")}</h2>
                 </div>
@@ -56,7 +55,7 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
 
             <form action={url.sessionsUrl} method="post">
                 <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
-                <button id="logout-all-sessions" type="submit" className={clsx(getClassName("kcButtonDefaultClass"), getClassName("kcButtonClass"))}>
+                <button id="logout-all-sessions" type="submit" className={kcClsx("kcButtonDefaultClass", "kcButtonClass")}>
                     {msg("doLogOutAllSessions")}
                 </button>
             </form>