keycloakify 10.0.0-rc.3 → 10.0.0-rc.30

package/src/account/i18n/baseMessages/el.ts

@@ -357,7 +357,9 @@ const messages= {
   "allApps": "Όλες οι εφαρμογές",
   "authorizedProviderMessage": "Πιστοποιημένοι Πάροχοι που είναι συνδεδεμένοι με το λογαριασμό σας",
   "removeAccessMessage": "Πρέπει να χορηγήσετε ξανά πρόσβαση, αν θέλετε να χρησιμοποιήσετε αυτό το λογαριασμό εφαρμογής.",
-  "error-invalid-length-too-long": "Το χαρακτηριστικό {0} πρέπει να έχει μέγιστο μήκος {2}."
+  "error-invalid-length-too-long": "Το χαρακτηριστικό {0} πρέπει να έχει μέγιστο μήκος {2}.",
+  "newPasswordSameAsOld": "Ο νέος κωδικός πρόσβασης πρέπει να διαφέρει από τον παλιό",
+  "passwordConfirmNotMatch": "Η επιβεβαίωση του κωδικού πρόσβασης δεν ταιριάζει"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/en.ts

@@ -361,7 +361,9 @@ const messages= {
   "error-invalid-date": "Invalid date.",
   "error-user-attribute-read-only": "The field {0} is read only.",
   "error-username-invalid-character": "Username contains invalid character.",
-  "error-person-name-invalid-character": "Name contains invalid character."
+  "error-person-name-invalid-character": "Name contains invalid character.",
+  "newPasswordSameAsOld": "New password must be different from the old one",
+  "passwordConfirmNotMatch": "Password confirmation does not match"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/es.ts

@@ -360,7 +360,9 @@ const messages= {
   "error-invalid-date": "Fecha inválida.",
   "error-user-attribute-read-only": "El campo {0} es de solo lectura.",
   "error-username-invalid-character": "El nombre de usuario contiene algún carácter inválido.",
-  "error-person-name-invalid-character": "El nombre contiene algún carácter inválido."
+  "error-person-name-invalid-character": "El nombre contiene algún carácter inválido.",
+  "newPasswordSameAsOld": "La nueva contraseña debe ser diferente de la anterior",
+  "passwordConfirmNotMatch": "La confirmación de la contraseña no coincide"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/fa.ts

@@ -358,7 +358,9 @@ const messages= {
   "error-invalid-date": "تاریخ نامعتبر است.",
   "error-user-attribute-read-only": "فیلد {0} فقط قابل رویت است.",
   "error-username-invalid-character": "نام کاربری حاوی نویسه نامعتبر است.",
-  "error-person-name-invalid-character": "نام حاوی نویسه نامعتبر است."
+  "error-person-name-invalid-character": "نام حاوی نویسه نامعتبر است.",
+  "newPasswordSameAsOld": "رمز عبور جدید باید با رمز عبور قبلی متفاوت باشد",
+  "passwordConfirmNotMatch": "تأیید رمز عبور مطابقت ندارد"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/fi.ts

@@ -354,7 +354,9 @@ const messages= {
   "error-invalid-date": "Väärä päivämäärä.",
   "error-user-attribute-read-only": "Kenttä {0} on \"vain luku\"-tilassa.",
   "error-username-invalid-character": "Käyttäjänimi sisältää vääriä merkkejä.",
-  "error-person-name-invalid-character": "Nimi sisältää vääriä merkkejä."
+  "error-person-name-invalid-character": "Nimi sisältää vääriä merkkejä.",
+  "newPasswordSameAsOld": "Uusi salasana on oltava erilainen kuin vanha",
+  "passwordConfirmNotMatch": "Salasanan vahvistus ei täsmää"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/fr.ts

@@ -161,7 +161,9 @@ const messages= {
   "accountSecurityIntroMessage": "Gérez votre mot de passe et l'accès à votre compte",
   "applicationsIntroMessage": "Auditez et gérez les permissions d'accès des applications aux données de votre compte",
   "applicationType": "Type d'application",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Le nouveau mot de passe doit être différent de l'ancien",
+  "passwordConfirmNotMatch": "La confirmation du mot de passe ne correspond pas"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/hu.ts

@@ -358,7 +358,9 @@ const messages= {
   "error-invalid-date": "Érvénytelen dátum.",
   "error-user-attribute-read-only": "A(z) {0} mező csak olvasható.",
   "error-username-invalid-character": "A felhasználónév érvénytelen karaktert tartalmaz.",
-  "error-person-name-invalid-character": "A név érvénytelen karaktert tartalmaz."
+  "error-person-name-invalid-character": "A név érvénytelen karaktert tartalmaz.",
+  "newPasswordSameAsOld": "Az új jelszónak különböznie kell az előzőtől",
+  "passwordConfirmNotMatch": "A jelszó megerősítése nem egyezik"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/it.ts

@@ -298,7 +298,9 @@ const messages= {
   "openshift.scope.user_info": "Informazioni utente",
   "openshift.scope.user_check-access": "Informazioni per l'accesso dell'utente",
   "openshift.scope.user_full": "Accesso completo",
-  "openshift.scope.list-projects": "Elenca progetti"
+  "openshift.scope.list-projects": "Elenca progetti",
+  "newPasswordSameAsOld": "La nuova password deve essere diversa da quella precedente",
+  "passwordConfirmNotMatch": "La conferma della password non corrisponde"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/ja.ts

@@ -292,7 +292,9 @@ const messages= {
   "openshift.scope.user_check-access": "ユーザーアクセス情報",
   "openshift.scope.user_full": "フルアクセス",
   "openshift.scope.list-projects": "プロジェクトの一覧表示",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "新しいパスワードは古いパスワードと異なる必要があります",
+  "passwordConfirmNotMatch": "パスワード確認が一致しません"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/lt.ts

@@ -135,7 +135,9 @@ const messages= {
   "invalidPasswordNotUsernameMessage": "Neteisingas slaptažodis: slaptažodis negali sutapti su naudotojo vardu.",
   "invalidPasswordRegexPatternMessage": "Neteisingas slaptažodis: slaptažodis netenkina regex taisyklės(ių).",
   "invalidPasswordHistoryMessage": "Neteisingas slaptažodis: slaptažodis negali sutapti su prieš tai buvusiais {0} slaptažodžiais.",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Naujas slaptažodis turi skirtis nuo seno",
+  "passwordConfirmNotMatch": "Slaptažodžio patvirtinimas neatitinka"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/lv.ts

@@ -179,7 +179,9 @@ const messages= {
   "allApps": "Visas lietojumprogrammas",
   "internalApps": "Iekšējās lietojumprogrammas",
   "thirdpartyApps": "Trešās puses lietojumprogrammas",
-  "appResults": "Rezultāti"
+  "appResults": "Rezultāti",
+  "newPasswordSameAsOld": "Jaunajam parolam jābūt atšķirīgam no vecā",
+  "passwordConfirmNotMatch": "Paroles apstiprināšana neatbilst"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/nl.ts

@@ -327,7 +327,9 @@ const messages= {
   "error-user-attribute-read-only": "Het veld {0} staat op alleen-lezen.",
   "error-username-invalid-character": "Gebruikersnaam bevat een ongeldig karakter.",
   "error-person-name-invalid-character": "Naam bevat een ongeldig karakter.",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Het nieuwe wachtwoord moet verschillend zijn van het oude",
+  "passwordConfirmNotMatch": "Wachtwoordbevestiging komt niet overeen"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/no.ts

@@ -135,7 +135,9 @@ const messages= {
   "invalidPasswordNotUsernameMessage": "Ugyldig passord: kan ikke være likt brukernavn.",
   "invalidPasswordRegexPatternMessage": "Ugyldig passord: tilfredsstiller ikke kravene for passord-mønster.",
   "invalidPasswordHistoryMessage": "Ugyldig passord: kan ikke være likt noen av de {0} foregående passordene.",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Det nye passordet må være forskjellig fra det gamle",
+  "passwordConfirmNotMatch": "Passordbekreftelsen stemmer ikke"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/pl.ts

@@ -336,7 +336,9 @@ const messages= {
   "error-invalid-date": "Nieprawidłowa data.",
   "error-user-attribute-read-only": "Pole {0} jest tylko do odczytu.",
   "error-username-invalid-character": "Login zawiera nieprawidłowy znak.",
-  "error-person-name-invalid-character": "Nazwa zawiera nieprawidłowy znak."
+  "error-person-name-invalid-character": "Nazwa zawiera nieprawidłowy znak.",
+  "newPasswordSameAsOld": "Nowe hasło musi być inne niż stare",
+  "passwordConfirmNotMatch": "Potwierdzenie hasła nie pasuje"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/pt-BR.ts

@@ -306,7 +306,9 @@ const messages= {
   "openshift.scope.user_check-access": "Informações de acesso do usuário",
   "openshift.scope.user_full": "Acesso Completo",
   "openshift.scope.list-projects": "Listar projetos",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "A nova senha deve ser diferente da antiga",
+  "passwordConfirmNotMatch": "A confirmação da senha não corresponde"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/ru.ts

@@ -203,7 +203,9 @@ const messages= {
   "invalidPasswordRegexPatternMessage": "Некорректный пароль: пароль не удовлетворяет регулярному выражению.",
   "invalidPasswordHistoryMessage": "Некорректный пароль: пароль не должен совпадать с последним(и) {0} паролями.",
   "invalidPasswordGenericMessage": "Некорректный пароль: новый пароль не соответствует правилам пароля.",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Новый пароль должен отличаться от старого",
+  "passwordConfirmNotMatch": "Подтверждение пароля не совпадает"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/sk.ts

@@ -173,7 +173,9 @@ const messages= {
   "permissionRequestion": "Žiadosti o povolenie",
   "permission": "Oprávnenie",
   "shares": "podiel (y)",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Nové heslo musí byť odlišné od starého",
+  "passwordConfirmNotMatch": "Potvrdenie hesla sa nezhoduje"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/sv.ts

@@ -132,7 +132,9 @@ const messages= {
   "invalidPasswordRegexPatternMessage": "Ogiltigt lösenord: matchar inte kravet för lösenordsmönster.",
   "invalidPasswordHistoryMessage": "Ogiltigt lösenord: Får inte vara samma som de senaste {0} lösenorden.",
   "invalidPasswordGenericMessage": "Ogiltigt lösenord: Det nya lösenordet stämmer inte med lösenordspolicyn.",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Det nya lösenordet måste skilja sig från det gamla",
+  "passwordConfirmNotMatch": "Lösenordsbekräftelsen matchar inte"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/th.ts

@@ -336,7 +336,9 @@ const messages= {
   "error-invalid-date": "วันที่ไม่ถูกต้อง",
   "error-user-attribute-read-only": "เขตข้อมูล {0} เป็นแบบอ่านอย่างเดียว",
   "error-username-invalid-character": "ชื่อผู้ใช้งานมีอักขระไม่ถูกต้อง",
-  "error-person-name-invalid-character": "ชื่อมีอักขระไม่ถูกต้อง"
+  "error-person-name-invalid-character": "ชื่อมีอักขระไม่ถูกต้อง",
+  "newPasswordSameAsOld": "รหัสผ่านใหม่ต้องต่างจากรหัสผ่านเดิม",
+  "passwordConfirmNotMatch": "การยืนยันรหัสผ่านไม่ตรงกัน"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/tr.ts

@@ -275,7 +275,9 @@ const messages= {
   "myPermissions": "İzinlerim",
   "waitingforApproval": "Onay bekleniyor",
   "anyPermission": "Herhangi bir izin",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "Yeni şifre eskisinden farklı olmalıdır",
+  "passwordConfirmNotMatch": "Şifre doğrulama eşleşmiyor"
 };
 
 export default messages;

package/src/account/i18n/baseMessages/uk.ts

@@ -336,7 +336,9 @@ const messages= {
   "error-invalid-date": "Невірна дата.",
   "error-user-attribute-read-only": "Поле {0} лише для читання.",
   "error-username-invalid-character": "Ім'я користувача містить невірний символ.",
-  "error-person-name-invalid-character": "Ім'я містить невірний символ."
+  "error-person-name-invalid-character": "Ім'я містить невірний символ.",
+  "newPasswordSameAsOld": "Новий пароль повинен відрізнятися від старого",
+  "passwordConfirmNotMatch": "Підтвердження пароля не співпадає"
 };
 
 export default messages;

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

@@ -145,7 +145,9 @@ const messages= {
   "invalidPasswordNotUsernameMessage": "无效的密码: 不能与用户名相同",
   "invalidPasswordRegexPatternMessage": "无效的密码:  无法与正则表达式匹配",
   "invalidPasswordHistoryMessage": "无效的密码: 不能与之前的{0} 个旧密码相同",
-  "locale_fa": "فارسی"
+  "locale_fa": "فارسی",
+  "newPasswordSameAsOld": "新密码必须与旧密码不同",
+  "passwordConfirmNotMatch": "密码确认不匹配"
 };
 
 export default messages;

package/src/account/i18n/i18n.tsx

@@ -1,11 +1,10 @@
-import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
+import "keycloakify/tools/Object.fromEntries";
 import { useEffect, useState, useRef } from "react";
 import fallbackMessages from "./baseMessages/en";
 import { getMessages } from "./baseMessages";
 import { assert } from "tsafe/assert";
-import type { KcContext } from "../kcContext/KcContext";
-import { Markdown } from "keycloakify/tools/Markdown";
+import type { KcContext } from "../KcContext";
+import { Reflect } from "tsafe/Reflect";
 
 export const fallbackLanguageTag = "en";
 
@@ -18,7 +17,7 @@ export type KcContextLike = {
 
 assert<KcContext extends KcContextLike ? true : false>();
 
-export type MessageKey = keyof typeof fallbackMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
+export type MessageKey = keyof typeof fallbackMessages;
 
 export type GenericI18n<MessageKey extends string> = {
     /**
@@ -53,16 +52,31 @@ export type GenericI18n<MessageKey extends string> = {
      */
     msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
     /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
      * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "foo": "Foo {0} {1}",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
      * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
      * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     * advancedMsg("${bar}", "<strong>c</strong>")
+     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
+     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
+     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
+     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
+     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
      */
     advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
     /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
      */
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
 };
@@ -91,19 +105,17 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
                 setI18n({
                     ...createI18nTranslationFunctions({
-                        "fallbackMessages": {
+                        fallbackMessages: {
                             ...fallbackMessages,
-                            ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
                             ...(extraMessages[fallbackLanguageTag] ?? {})
                         } as any,
-                        "messages": {
+                        messages: {
                             ...(await getMessages(currentLanguageTag)),
-                            ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
                             ...(extraMessages[currentLanguageTag] ?? {})
                         } as any
                     }),
                     currentLanguageTag,
-                    "getChangeLocalUrl": newLanguageTag => {
+                    getChangeLocalUrl: newLanguageTag => {
                         const { locale } = kcContext;
 
                         assert(locale !== undefined, "Internationalization not enabled");
@@ -114,7 +126,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
                         return targetSupportedLocale.url;
                     },
-                    "labelBySupportedLanguageTag": Object.fromEntries(
+                    labelBySupportedLanguageTag: Object.fromEntries(
                         (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
                     )
                 });
@@ -124,7 +136,10 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
         return i18n ?? null;
     }
 
-    return { useI18n };
+    return {
+        useI18n,
+        ofTypeI18n: Reflect<GenericI18n<MessageKey | ExtraMessageKey>>()
+    };
 }
 
 function createI18nTranslationFunctions<MessageKey extends string>(params: {
@@ -133,8 +148,8 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
 }): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
     const { fallbackMessages, messages } = params;
 
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+        const { key, args, doRenderAsHtml } = props;
 
         const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
 
@@ -163,68 +178,67 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
                     return;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                );
             });
 
             return messageWithArgsInjected;
         })();
 
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
+        return doRenderAsHtml ? (
+            <span
+                // NOTE: The message is trusted. The arguments are not but are escaped.
+                dangerouslySetInnerHTML={{
+                    __html: messageWithArgsInjectedIfAny
+                }}
+            />
         ) : (
             messageWithArgsInjectedIfAny
         );
     }
 
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+        const { key, args, doRenderAsHtml } = props;
+
+        if (!/\$\{[^}]+\}/.test(key)) {
+            const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
+
+            if (resolvedMessage === undefined) {
+                return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+            }
+
+            return resolvedMessage;
+        }
+
+        let isFirstMatch = true;
 
-        const match = key.match(/^\$\{([^{]+)\}$/);
+        const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+            const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
 
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+            isFirstMatch = false;
 
-        const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
+            return replaceBy;
         });
 
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+        return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
     }
 
     return {
-        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
-        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
+        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+        msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
+        advancedMsg: (key, ...args) =>
+            resolveMsgAdvanced({
+                key,
+                args,
+                doRenderAsHtml: true
+            }) as JSX.Element,
+        advancedMsgStr: (key, ...args) =>
+            resolveMsgAdvanced({
+                key,
+                args,
+                doRenderAsHtml: false
+            }) as string
     };
 }
-
-const keycloakifyExtraMessages = {
-    "en": {
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option",
-        "newPasswordSameAsOld": "New password must be different from the old one",
-        "passwordConfirmNotMatch": "Password confirmation does not match"
-    },
-    "fr": {
-        /* spell-checker: disable */
-        "shouldBeEqual": "{0} doit être égal à {1}",
-        "shouldBeDifferent": "{0} doit être différent de {1}",
-        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
-        "mustBeAnInteger": "Doit être un nombre entier",
-        "notAValidOption": "N'est pas une option valide",
-
-        "logoutConfirmTitle": "Déconnexion",
-        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter",
-        "newPasswordSameAsOld": "Le nouveau mot de passe doit être différent de l'ancien",
-        "passwordConfirmNotMatch": "La confirmation du mot de passe ne correspond pas"
-        /* spell-checker: enable */
-    }
-};

package/src/account/i18n/index.ts

@@ -1 +1,2 @@
 export type { I18n } from "./i18n";
+export { createUseI18n } from "./i18n";

package/src/account/index.ts

@@ -1,10 +1,4 @@
-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/keycloakify/generateFtl";
-export { createUseI18n } from "keycloakify/account/i18n/i18n";
-
+export type { ExtendKcContext } from "keycloakify/account/KcContext";
 export type { PageProps } from "keycloakify/account/pages/PageProps";
+export { createGetKcContextMock } from "keycloakify/account/KcContext";
+export { createUseI18n } from "keycloakify/account/i18n";

package/src/account/lib/useGetClassName.ts

@@ -2,19 +2,20 @@ import { createUseClassName } from "keycloakify/lib/useGetClassName";
 import type { ClassKey } from "keycloakify/account/TemplateProps";
 
 export const { useGetClassName } = createUseClassName<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"
+    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"
     }
 });

package/src/account/pages/Account.tsx

@@ -1,7 +1,7 @@
 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 type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
@@ -9,9 +9,9 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
 
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
-        "classes": {
+        classes: {
             ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
+            kcBodyClass: clsx(classes?.kcBodyClass, "user")
         }
     });
 

package/src/account/pages/Applications.tsx

@@ -1,13 +1,9 @@
 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 type { PageProps } from "keycloakify/account/pages/PageProps";
+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;
 
@@ -61,10 +57,10 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
 
                                     <td>
                                         {!isArrayWithEmptyObject(application.realmRolesAvailable) &&
-                                            application.realmRolesAvailable.map(role => (
+                                            application.realmRolesAvailable.map((role, index) => (
                                                 <span key={role.name}>
                                                     {role.description ? advancedMsg(role.description) : advancedMsg(role.name)}
-                                                    {role !== application.realmRolesAvailable[application.realmRolesAvailable.length - 1] && ", "}
+                                                    {index < application.realmRolesAvailable.length - 1 && ", "}
                                                 </span>
                                             ))}
                                         {!isArrayWithEmptyObject(application.realmRolesAvailable) && application.resourceRolesAvailable && ", "}
@@ -136,3 +132,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;
+}