keycloakify 10.0.0-rc.2 → 10.0.0-rc.21

package/src/login/UserProfileFormFields.tsx

@@ -43,7 +43,7 @@ export default function UserProfileFormFields(props: UserProfileFormFieldsProps)
         onIsFormSubmittableValueChange(isFormSubmittable);
     }, [isFormSubmittable]);
 
-    const groupNameRef = { "current": "" };
+    const groupNameRef = { current: "" };
 
     return (
         <>
@@ -62,7 +62,9 @@ export default function UserProfileFormFields(props: UserProfileFormFieldsProps)
                         )}
                         <div
                             className={getClassName("kcFormGroupClass")}
-                            style={{ "display": attribute.name === "password-confirm" && !doMakeUserConfirmPassword ? "none" : undefined }}
+                            style={{
+                                display: attribute.name === "password-confirm" && !doMakeUserConfirmPassword ? "none" : undefined
+                            }}
                         >
                             <div className={getClassName("kcLabelWrapperClass")}>
                                 <label htmlFor={attribute.name} className={getClassName("kcLabelClass")}>
@@ -201,18 +203,15 @@ function FieldErrors(props: {
         <span
             id={`input-error-${attribute.name}${fieldIndex === undefined ? "" : `-${fieldIndex}`}`}
             className={getClassName("kcInputErrorMessageClass")}
-            style={{
-                "position": displayableErrors.length === 1 ? "absolute" : undefined
-            }}
             aria-live="polite"
         >
             {displayableErrors
                 .filter(error => error.fieldIndex === fieldIndex)
                 .map(({ errorMessage }, i, arr) => (
-                    <>
+                    <Fragment key={i}>
                         <span key={i}>{errorMessage}</span>
                         {arr.length - 1 !== i && <br />}
-                    </>
+                    </Fragment>
                 ))}
         </span>
     );
@@ -345,9 +344,9 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine
                 {...Object.fromEntries(Object.entries(attribute.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]))}
                 onChange={event =>
                     formValidationDispatch({
-                        "action": "update",
-                        "name": attribute.name,
-                        "valueOrValues": (() => {
+                        action: "update",
+                        name: attribute.name,
+                        valueOrValues: (() => {
                             if (fieldIndex !== undefined) {
                                 assert(valueOrValues instanceof Array);
 
@@ -366,9 +365,9 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine
                 }
                 onBlur={() =>
                     props.formValidationDispatch({
-                        "action": "focus lost",
-                        "name": attribute.name,
-                        "fieldIndex": fieldIndex
+                        action: "focus lost",
+                        name: attribute.name,
+                        fieldIndex: fieldIndex
                     })
                 }
             />
@@ -487,9 +486,9 @@ function AddRemoveButtonsMultiValuedAttribute(props: {
                     className="pf-c-button pf-m-inline pf-m-link"
                     onClick={() =>
                         dispatchFormAction({
-                            "action": "update",
-                            "name": attribute.name,
-                            "valueOrValues": values.filter((_, i) => i !== fieldIndex)
+                            action: "update",
+                            name: attribute.name,
+                            valueOrValues: values.filter((_, i) => i !== fieldIndex)
                         })
                     }
                 >
@@ -504,9 +503,9 @@ function AddRemoveButtonsMultiValuedAttribute(props: {
                     className="pf-c-button pf-m-inline pf-m-link"
                     onClick={() =>
                         dispatchFormAction({
-                            "action": "update",
-                            "name": attribute.name,
-                            "valueOrValues": [...values, ""]
+                            action: "update",
+                            name: attribute.name,
+                            valueOrValues: [...values, ""]
                         })
                     }
                 >
@@ -530,17 +529,17 @@ function InputTagSelects(props: InputFiledByTypeProps) {
         switch (inputType) {
             case "select-radiobuttons":
                 return {
-                    "inputType": "radio",
-                    "classDiv": getClassName("kcInputClassRadio"),
-                    "classInput": getClassName("kcInputClassRadioInput"),
-                    "classLabel": getClassName("kcInputClassRadioLabel")
+                    inputType: "radio",
+                    classDiv: getClassName("kcInputClassRadio"),
+                    classInput: getClassName("kcInputClassRadioInput"),
+                    classLabel: getClassName("kcInputClassRadioLabel")
                 };
             case "multiselect-checkboxes":
                 return {
-                    "inputType": "checkbox",
-                    "classDiv": getClassName("kcInputClassCheckbox"),
-                    "classInput": getClassName("kcInputClassCheckboxInput"),
-                    "classLabel": getClassName("kcInputClassCheckboxLabel")
+                    inputType: "checkbox",
+                    classDiv: getClassName("kcInputClassCheckbox"),
+                    classInput: getClassName("kcInputClassCheckboxInput"),
+                    classLabel: getClassName("kcInputClassCheckboxLabel")
                 };
         }
     })();
@@ -584,9 +583,9 @@ function InputTagSelects(props: InputFiledByTypeProps) {
                         checked={valueOrValues.includes(option)}
                         onChange={event =>
                             formValidationDispatch({
-                                "action": "update",
-                                "name": attribute.name,
-                                "valueOrValues": (() => {
+                                action: "update",
+                                name: attribute.name,
+                                valueOrValues: (() => {
                                     const isChecked = event.target.checked;
 
                                     if (valueOrValues instanceof Array) {
@@ -607,9 +606,9 @@ function InputTagSelects(props: InputFiledByTypeProps) {
                         }
                         onBlur={() =>
                             formValidationDispatch({
-                                "action": "focus lost",
-                                "name": attribute.name,
-                                "fieldIndex": undefined
+                                action: "focus lost",
+                                name: attribute.name,
+                                fieldIndex: undefined
                             })
                         }
                     />
@@ -645,16 +644,16 @@ function TextareaTag(props: InputFiledByTypeProps) {
             value={value}
             onChange={event =>
                 formValidationDispatch({
-                    "action": "update",
-                    "name": attribute.name,
-                    "valueOrValues": event.target.value
+                    action: "update",
+                    name: attribute.name,
+                    valueOrValues: event.target.value
                 })
             }
             onBlur={() =>
                 formValidationDispatch({
-                    "action": "focus lost",
-                    "name": attribute.name,
-                    "fieldIndex": undefined
+                    action: "focus lost",
+                    name: attribute.name,
+                    fieldIndex: undefined
                 })
             }
         />
@@ -680,9 +679,9 @@ function SelectTag(props: InputFiledByTypeProps) {
             value={valueOrValues}
             onChange={event =>
                 formValidationDispatch({
-                    "action": "update",
-                    "name": attribute.name,
-                    "valueOrValues": (() => {
+                    action: "update",
+                    name: attribute.name,
+                    valueOrValues: (() => {
                         if (isMultiple) {
                             return Array.from(event.target.selectedOptions).map(option => option.value);
                         }
@@ -693,9 +692,9 @@ function SelectTag(props: InputFiledByTypeProps) {
             }
             onBlur={() =>
                 formValidationDispatch({
-                    "action": "focus lost",
-                    "name": attribute.name,
-                    "fieldIndex": undefined
+                    action: "focus lost",
+                    name: attribute.name,
+                    fieldIndex: undefined
                 })
             }
         >
@@ -705,12 +704,12 @@ function SelectTag(props: InputFiledByTypeProps) {
                     walk: {
                         const { inputOptionsFromValidation } = attribute.annotations;
 
-                        assert(typeof inputOptionsFromValidation === "string");
-
                         if (inputOptionsFromValidation === undefined) {
                             break walk;
                         }
 
+                        assert(typeof inputOptionsFromValidation === "string");
+
                         const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
 
                         if (validator === undefined) {

package/src/login/i18n/baseMessages/ca.ts

@@ -342,7 +342,7 @@ const messages= {
   "locale_nl": "neerlandès",
   "locale_no": "noruec",
   "locale_pl": "polonès",
-  "locale_pt_BR": "portuguès (Brasil)",
+  "locale_pt-BR": "portuguès (Brasil)",
   "locale_ru": "rus",
   "locale_sk": "eslovè",
   "locale_sv": "suec",

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

@@ -337,7 +337,6 @@ const messages= {
   "locale_nl": "Nederlands",
   "locale_no": "Norsk",
   "locale_pl": "Polski",
-  "locale_pt_BR": "Português (Brasil)",
   "locale_pt-BR": "Português (Brasil)",
   "locale_ru": "Русский",
   "locale_sk": "Slovenčina",

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

@@ -349,7 +349,7 @@ const messages= {
   "locale_nl": "Nederlands",
   "locale_no": "Norsk",
   "locale_pl": "Polski",
-  "locale_pt_BR": "Português (Brasil)",
+  "locale_pt-BR": "Português (Brasil)",
   "locale_ru": "Русский",
   "locale_sk": "Slovenčina",
   "locale_sv": "Svenska",

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

@@ -376,7 +376,7 @@ const messages= {
   "locale_nl": "Nederlands",
   "locale_no": "Norsk",
   "locale_pl": "Polski",
-  "locale_pt_BR": "Português (Brasil)",
+  "locale_pt-BR": "Português (Brasil)",
   "locale_ru": "Русский",
   "locale_sk": "Slovenčina",
   "locale_sv": "Svenska",

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

@@ -338,7 +338,6 @@ const messages= {
   "locale_nl": "Nederlands",
   "locale_no": "Norsk",
   "locale_pl": "Polski",
-  "locale_pt_BR": "Português (Brasil)",
   "locale_pt-BR": "Português (Brasil)",
   "locale_ru": "Русский",
   "locale_sk": "Slovenčina",

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

@@ -342,7 +342,7 @@ const messages= {
   "locale_nl": "Nederlands",
   "locale_no": "Norsk",
   "locale_pl": "Polski",
-  "locale_pt_BR": "Português (Brasil)",
+  "locale_pt-BR": "Português (Brasil)",
   "locale_ru": "Русский",
   "locale_sk": "Slovenčina",
   "locale_sv": "Svenska",

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

@@ -346,7 +346,7 @@ const messages= {
   "locale_nl": "Nederlands",
   "locale_no": "Norsk",
   "locale_pl": "Polski",
-  "locale_pt_BR": "Português (Brasil)",
+  "locale_pt-BR": "Português (Brasil)",
   "locale_ru": "Русский",
   "locale_sk": "Slovenčina",
   "locale_sv": "Svenska",

package/src/login/i18n/i18n.tsx

@@ -1,11 +1,9 @@
 import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 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";
 
 export const fallbackLanguageTag = "en";
 
@@ -14,6 +12,7 @@ export type KcContextLike = {
         currentLanguageTag: string;
         supported: { languageTag: string; url: string; label: string }[];
     };
+    __localizationRealmOverridesUserProfile: Record<string, string>;
 };
 
 assert<KcContext extends KcContextLike ? true : false>();
@@ -28,11 +27,10 @@ export type GenericI18n<MessageKey extends string> = {
      */
     currentLanguageTag: string;
     /**
-     * To call when the user switch language.
-     * This will cause the page to be reloaded,
-     * on next load currentLanguageTag === newLanguageTag
+     * Redirect to this url to change the language.
+     * After reload currentLanguageTag === newLanguageTag
      */
-    changeLocale: (newLanguageTag: string) => never;
+    getChangeLocalUrl: (newLanguageTag: string) => string;
     /**
      * e.g. "en" => "English", "fr" => "Français", ...
      *
@@ -63,7 +61,7 @@ export type GenericI18n<MessageKey extends string> = {
     /**
      * 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"
+     * advancedMsg("${not-a-message-key}") === advancedMsg("not-a-message-key") === "not-a-message-key"
      */
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
 };
@@ -92,19 +90,20 @@ 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
+                        } as any,
+                        __localizationRealmOverridesUserProfile: kcContext.__localizationRealmOverridesUserProfile
                     }),
                     currentLanguageTag,
-                    "changeLocale": newLanguageTag => {
+                    getChangeLocalUrl: newLanguageTag => {
                         const { locale } = kcContext;
 
                         assert(locale !== undefined, "Internationalization not enabled");
@@ -113,11 +112,9 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
                         assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
 
-                        window.location.href = targetSupportedLocale.url;
-
-                        assert(false, "never");
+                        return targetSupportedLocale.url;
                     },
-                    "labelBySupportedLanguageTag": Object.fromEntries(
+                    labelBySupportedLanguageTag: Object.fromEntries(
                         (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
                     )
                 });
@@ -133,11 +130,12 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 function createI18nTranslationFunctions<MessageKey extends string>(params: {
     fallbackMessages: Record<MessageKey, string>;
     messages: Record<MessageKey, string>;
+    __localizationRealmOverridesUserProfile: Record<string, string>;
 }): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-    const { fallbackMessages, messages } = params;
+    const { fallbackMessages, messages /*__localizationRealmOverridesUserProfile*/ } = 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];
 
@@ -166,70 +164,95 @@ 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;
+
+        // TODO:
+        /*
+        if( key in __localizationRealmOverridesUserProfile ){
+
+
+
+        }
+        */
 
         const match = key.match(/^\$\{([^{]+)\}$/);
 
         const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
 
         const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
+            key: keyUnwrappedFromCurlyBraces,
             args,
-            doRenderMarkdown
+            doRenderAsHtml
         });
 
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+        return (out !== undefined ? out : doRenderAsHtml ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
     }
 
     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",
-        "selectAnOption": "Select an option",
-        "remove": "Remove",
-        "addValue": "Add value"
+    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",
+        selectAnOption: "Select an option",
+        remove: "Remove",
+        addValue: "Add value"
     },
-    "fr": {
+    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",
-        "selectAnOption": "Sélectionner une option",
-        "remove": "Supprimer",
-        "addValue": "Ajouter une valeur"
+        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",
+        selectAnOption: "Sélectionner une option",
+        remove: "Supprimer",
+        addValue: "Ajouter une valeur"
         /* spell-checker: enable */
     }
 };

package/src/login/index.ts

@@ -5,7 +5,7 @@ export default Fallback;
 export { useDownloadTerms } from "keycloakify/login/lib/useDownloadTerms";
 export { getKcContext } from "keycloakify/login/kcContext/getKcContext";
 export { createGetKcContext } from "keycloakify/login/kcContext/createGetKcContext";
-export type { LoginThemePageId as PageId } from "keycloakify/bin/keycloakify/generateFtl";
+export type { LoginThemePageId as PageId } from "keycloakify/bin/shared/constants";
 export { createUseI18n } from "keycloakify/login/i18n/i18n";
 
 export type { PageProps } from "keycloakify/login/pages/PageProps";

package/src/login/kcContext/KcContext.ts

@@ -1,10 +1,16 @@
-import type { LoginThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
-import { type ThemeType } from "keycloakify/bin/constants";
+import type {
+    ThemeType,
+    LoginThemePageId,
+    nameOfTheLocalizationRealmOverridesUserProfileProperty
+} from "keycloakify/bin/shared/constants";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { MessageKey } from "../i18n/i18n";
 
-type ExtractAfterStartingWith<Prefix extends string, StrEnum> = StrEnum extends `${Prefix}${infer U}` ? U : never;
+type ExtractAfterStartingWith<
+    Prefix extends string,
+    StrEnum
+> = StrEnum extends `${Prefix}${infer U}` ? U : never;
 
 /** Take theses type definition with a grain of salt.
  * Some values might be undefined on some pages.
@@ -104,7 +110,10 @@ export declare namespace KcContext {
              * @param text to return
              * @return text if message exists for given field, else undefined
              */
-            printIfExists: <T extends string>(fieldName: string, text: T) => T | undefined;
+            printIfExists: <T extends string>(
+                fieldName: string,
+                text: T
+            ) => T | undefined;
             /**
              * Check if exists error message for given fields
              *
@@ -135,6 +144,7 @@ export declare namespace KcContext {
             tabId: string;
             ssoLoginInOtherTabsUrl: string;
         };
+        __localizationRealmOverridesUserProfile: Record<string, string>;
     };
 
     export type SamlPostForm = Common & {
@@ -745,3 +755,12 @@ export type PasswordPolicies = {
     /** Whether the password can be the email address */
     notEmail?: boolean;
 };
+
+assert<
+    KcContext.Common extends Record<
+        typeof nameOfTheLocalizationRealmOverridesUserProfileProperty,
+        unknown
+    >
+        ? true
+        : false
+>();