Bump version

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.1.0",
+    "version": "6.3.2",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -27,7 +27,9 @@ export const pageIds = [
     "login-idp-link-email.ftl",
     "login-page-expired.ftl",
     "login-config-totp.ftl",
-    "logout-confirm.ftl"
+    "logout-confirm.ftl",
+    "update-user-profile.ftl",
+    "idp-review-user-profile.ftl"
 ] as const;
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;

src/lib/components/IdpReviewUserProfile.tsx

@@ -0,0 +1,46 @@
+import React, { useState, memo } from "react";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
+
+const IdpReviewUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.IdpReviewUserProfile; i18n: I18n } & KcProps) => {
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    const { url } = kcContext;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("loginIdpReviewProfileTitle")}
+            formNode={
+                <form id="kc-idp-review-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
+
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)} />
+                        </div>
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                type="submit"
+                                value={msgStr("doSubmit")}
+                                disabled={!isFomSubmittable}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+});
+
+export default IdpReviewUserProfile;

src/lib/components/KcApp.tsx

@@ -20,6 +20,8 @@ const LoginPageExpired = lazy(() => import("./LoginPageExpired"));
 const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
 const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
 const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
+const UpdateUserProfile = lazy(() => import("./UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("./IdpReviewUserProfile"));
 
 const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
     const i18n = (function useClosure() {
@@ -74,6 +76,10 @@ const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcConte
                         return <LoginConfigTotp {...{ kcContext, ...props }} />;
                     case "logout-confirm.ftl":
                         return <LogoutConfirm {...{ kcContext, ...props }} />;
+                    case "update-user-profile.ftl":
+                        return <UpdateUserProfile {...{ kcContext, ...props }} />;
+                    case "idp-review-user-profile.ftl":
+                        return <IdpReviewUserProfile {...{ kcContext, ...props }} />;
                 }
             })()}
         </Suspense>

src/lib/components/RegisterUserProfile.tsx

@@ -1,12 +1,10 @@
-import React, { useMemo, memo, useEffect, useState, Fragment } from "react";
+import React, { useMemo, memo, useState } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
-import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
-import type { ReactComponent } from "../tools/ReactComponent";
-import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { useFormValidationSlice } from "../useFormValidationSlice";
 import type { I18n } from "../i18n";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
 
 const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps) => {
     const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
@@ -66,155 +64,4 @@ const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: K
     );
 });
 
-type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps &
-    Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
-        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
-    };
-
-const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, i18n, ...props }: UserProfileFormFieldsProps) => {
-    const { cx, css } = useCssAndCx();
-
-    const { advancedMsg } = i18n;
-
-    const {
-        formValidationState: { fieldStateByAttributeName, isFormSubmittable },
-        formValidationReducer,
-        attributesWithPassword
-    } = useFormValidationSlice({
-        kcContext,
-        i18n
-    });
-
-    useEffect(() => {
-        onIsFormSubmittableValueChange(isFormSubmittable);
-    }, [isFormSubmittable]);
-
-    const onChangeFactory = useCallbackFactory(
-        (
-            [name]: [string],
-            [
-                {
-                    target: { value }
-                }
-            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
-        ) =>
-            formValidationReducer({
-                "action": "update value",
-                name,
-                "newValue": value
-            })
-    );
-
-    const onBlurFactory = useCallbackFactory(([name]: [string]) =>
-        formValidationReducer({
-            "action": "focus lost",
-            name
-        })
-    );
-
-    let currentGroup = "";
-
-    return (
-        <>
-            {attributesWithPassword.map((attribute, i) => {
-                const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
-
-                const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
-
-                const formGroupClassName = cx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
-
-                return (
-                    <Fragment key={i}>
-                        {group !== currentGroup && (currentGroup = group) !== "" && (
-                            <div className={formGroupClassName}>
-                                <div className={cx(props.kcContentWrapperClass)}>
-                                    <label id={`header-${group}`} className={cx(props.kcFormGroupHeader)}>
-                                        {advancedMsg(groupDisplayHeader) || currentGroup}
-                                    </label>
-                                </div>
-                                {groupDisplayDescription !== "" && (
-                                    <div className={cx(props.kcLabelWrapperClass)}>
-                                        <label id={`description-${group}`} className={`${cx(props.kcLabelClass)}`}>
-                                            {advancedMsg(groupDisplayDescription)}
-                                        </label>
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                        <div className={formGroupClassName}>
-                            <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor={attribute.name} className={cx(props.kcLabelClass)}>
-                                    {advancedMsg(attribute.displayName ?? "")}
-                                </label>
-                                {attribute.required && <>*</>}
-                            </div>
-                            <div className={cx(props.kcInputWrapperClass)}>
-                                {(() => {
-                                    const { options } = attribute.validators;
-
-                                    if (options !== undefined) {
-                                        return (
-                                            <select
-                                                id={attribute.name}
-                                                name={attribute.name}
-                                                onChange={onChangeFactory(attribute.name)}
-                                                onBlur={onBlurFactory(attribute.name)}
-                                                value={value}
-                                            >
-                                                {options.options.map(option => (
-                                                    <option key={option} value={option}>
-                                                        {option}
-                                                    </option>
-                                                ))}
-                                            </select>
-                                        );
-                                    }
-
-                                    return (
-                                        <input
-                                            type={(() => {
-                                                switch (attribute.name) {
-                                                    case "password-confirm":
-                                                    case "password":
-                                                        return "password";
-                                                    default:
-                                                        return "text";
-                                                }
-                                            })()}
-                                            id={attribute.name}
-                                            name={attribute.name}
-                                            value={value}
-                                            onChange={onChangeFactory(attribute.name)}
-                                            className={cx(props.kcInputClass)}
-                                            aria-invalid={displayableErrors.length !== 0}
-                                            disabled={attribute.readOnly}
-                                            autoComplete={attribute.autocomplete}
-                                            onBlur={onBlurFactory(attribute.name)}
-                                        />
-                                    );
-                                })()}
-                                {displayableErrors.length !== 0 && (
-                                    <span
-                                        id={`input-error-${attribute.name}`}
-                                        className={cx(
-                                            props.kcInputErrorMessageClass,
-                                            css({
-                                                "position": displayableErrors.length === 1 ? "absolute" : undefined,
-                                                "& > span": { "display": "block" }
-                                            })
-                                        )}
-                                        aria-live="polite"
-                                    >
-                                        {displayableErrors.map(({ errorMessage }) => errorMessage)}
-                                    </span>
-                                )}
-                            </div>
-                        </div>
-                    </Fragment>
-                );
-            })}
-        </>
-    );
-});
-
 export default RegisterUserProfile;

src/lib/components/Terms.tsx

@@ -11,6 +11,7 @@ import type { I18n } from "../i18n";
 import memoize from "memoizee";
 import { useConst } from "powerhooks/useConst";
 import { useConstCallback } from "powerhooks/useConstCallback";
+import { Markdown } from "../tools/Markdown";
 
 export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
 
@@ -74,7 +75,7 @@ const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Te
             headerNode={msg("termsTitle")}
             formNode={
                 <>
-                    <div id="kc-terms-text">{evtTermMarkdown.state}</div>
+                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
                     <form className="form-actions" action={url.loginAction} method="POST">
                         <input
                             className={cx(

src/lib/components/UpdateUserProfile.tsx

@@ -0,0 +1,71 @@
+import React, { useState, memo } from "react";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
+
+const UpdateUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.UpdateUserProfile; i18n: I18n } & KcProps) => {
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("loginProfileTitle")}
+            formNode={
+                <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
+
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)}></div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            {isAppInitiatedAction ? (
+                                <>
+                                    <input
+                                        className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        value={msgStr("doSubmit")}
+                                    />
+                                    <button
+                                        className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        name="cancel-aia"
+                                        value="true"
+                                        formNoValidate
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </>
+                            ) : (
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
+                                    type="submit"
+                                    defaultValue={msgStr("doSubmit")}
+                                    disabled={!isFomSubmittable}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+});
+
+export default UpdateUserProfile;

src/lib/components/shared/UserProfileCommons.tsx

@@ -0,0 +1,170 @@
+import React, { memo, useEffect, Fragment } from "react";
+import type { KcProps } from "../KcProps";
+import type { Attribute } from "../../getKcContext/KcContextBase";
+import { useCssAndCx } from "../../tools/useCssAndCx";
+import type { ReactComponent } from "../../tools/ReactComponent";
+import { useCallbackFactory } from "powerhooks/useCallbackFactory";
+import { useFormValidationSlice } from "../../useFormValidationSlice";
+import type { I18n } from "../../i18n";
+import type { Param0 } from "tsafe/Param0";
+
+export type UserProfileFormFieldsProps = {
+    kcContext: Param0<typeof useFormValidationSlice>["kcContext"];
+    i18n: I18n;
+} & KcProps &
+    Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
+        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    };
+
+export const UserProfileFormFields = memo(
+    ({ kcContext, onIsFormSubmittableValueChange, i18n, BeforeField, AfterField, ...props }: UserProfileFormFieldsProps) => {
+        const { cx, css } = useCssAndCx();
+
+        const { advancedMsg } = i18n;
+
+        const {
+            formValidationState: { fieldStateByAttributeName, isFormSubmittable },
+            formValidationReducer,
+            attributesWithPassword
+        } = useFormValidationSlice({
+            kcContext,
+            i18n
+        });
+
+        useEffect(() => {
+            onIsFormSubmittableValueChange(isFormSubmittable);
+        }, [isFormSubmittable]);
+
+        const onChangeFactory = useCallbackFactory(
+            (
+                [name]: [string],
+                [
+                    {
+                        target: { value }
+                    }
+                ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
+            ) =>
+                formValidationReducer({
+                    "action": "update value",
+                    name,
+                    "newValue": value
+                })
+        );
+
+        const onBlurFactory = useCallbackFactory(([name]: [string]) =>
+            formValidationReducer({
+                "action": "focus lost",
+                name
+            })
+        );
+
+        let currentGroup = "";
+
+        return (
+            <>
+                {attributesWithPassword.map((attribute, i) => {
+                    const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
+
+                    const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
+
+                    const formGroupClassName = cx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
+
+                    return (
+                        <Fragment key={i}>
+                            {group !== currentGroup && (currentGroup = group) !== "" && (
+                                <div className={formGroupClassName}>
+                                    <div className={cx(props.kcContentWrapperClass)}>
+                                        <label id={`header-${group}`} className={cx(props.kcFormGroupHeader)}>
+                                            {advancedMsg(groupDisplayHeader) || currentGroup}
+                                        </label>
+                                    </div>
+                                    {groupDisplayDescription !== "" && (
+                                        <div className={cx(props.kcLabelWrapperClass)}>
+                                            <label id={`description-${group}`} className={`${cx(props.kcLabelClass)}`}>
+                                                {advancedMsg(groupDisplayDescription)}
+                                            </label>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+
+                            {BeforeField && <BeforeField attribute={attribute} />}
+
+                            <div className={formGroupClassName}>
+                                <div className={cx(props.kcLabelWrapperClass)}>
+                                    <label htmlFor={attribute.name} className={cx(props.kcLabelClass)}>
+                                        {advancedMsg(attribute.displayName ?? "")}
+                                    </label>
+                                    {attribute.required && <>*</>}
+                                </div>
+                                <div className={cx(props.kcInputWrapperClass)}>
+                                    {(() => {
+                                        const { options } = attribute.validators;
+
+                                        if (options !== undefined) {
+                                            return (
+                                                <select
+                                                    id={attribute.name}
+                                                    name={attribute.name}
+                                                    onChange={onChangeFactory(attribute.name)}
+                                                    onBlur={onBlurFactory(attribute.name)}
+                                                    value={value}
+                                                >
+                                                    {options.options.map(option => (
+                                                        <option key={option} value={option}>
+                                                            {option}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            );
+                                        }
+
+                                        return (
+                                            <input
+                                                type={(() => {
+                                                    switch (attribute.name) {
+                                                        case "password-confirm":
+                                                        case "password":
+                                                            return "password";
+                                                        default:
+                                                            return "text";
+                                                    }
+                                                })()}
+                                                id={attribute.name}
+                                                name={attribute.name}
+                                                value={value}
+                                                onChange={onChangeFactory(attribute.name)}
+                                                className={cx(props.kcInputClass)}
+                                                aria-invalid={displayableErrors.length !== 0}
+                                                disabled={attribute.readOnly}
+                                                autoComplete={attribute.autocomplete}
+                                                onBlur={onBlurFactory(attribute.name)}
+                                            />
+                                        );
+                                    })()}
+                                    {displayableErrors.length !== 0 && (
+                                        <span
+                                            id={`input-error-${attribute.name}`}
+                                            className={cx(
+                                                props.kcInputErrorMessageClass,
+                                                css({
+                                                    "position": displayableErrors.length === 1 ? "absolute" : undefined,
+                                                    "& > span": { "display": "block" }
+                                                })
+                                            )}
+                                            aria-live="polite"
+                                        >
+                                            {displayableErrors.map(({ errorMessage }) => errorMessage)}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+
+                            {AfterField && <AfterField attribute={attribute} />}
+                        </Fragment>
+                    );
+                })}
+            </>
+        );
+    }
+);

src/lib/getKcContext/KcContextBase.ts

@@ -25,7 +25,9 @@ export type KcContextBase =
     | KcContextBase.LoginIdpLinkEmail
     | KcContextBase.LoginPageExpired
     | KcContextBase.LoginConfigTotp
-    | KcContextBase.LogoutConfirm;
+    | KcContextBase.LogoutConfirm
+    | KcContextBase.UpdateUserProfile
+    | KcContextBase.IdpReviewUserProfile;
 
 export declare namespace KcContextBase {
     export type Common = {
@@ -270,6 +272,23 @@ export declare namespace KcContextBase {
             skipLink?: boolean;
         };
     };
+
+    export type UpdateUserProfile = Common & {
+        pageId: "update-user-profile.ftl";
+        profile: {
+            attributes: Attribute[];
+            attributesByName: Record<string, Attribute>;
+        };
+    };
+
+    export type IdpReviewUserProfile = Common & {
+        pageId: "idp-review-user-profile.ftl";
+        profile: {
+            context: "IDP_REVIEW";
+            attributes: Attribute[];
+            attributesByName: Record<string, Attribute>;
+        };
+    };
 }
 
 export type Attribute = {

src/lib/getKcContext/getKcContext.ts

@@ -47,8 +47,16 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                 "source": partialKcContextCustomMock
             });
 
-            if (partialKcContextCustomMock.pageId === "register-user-profile.ftl") {
-                assert(kcContextDefaultMock?.pageId === "register-user-profile.ftl");
+            if (
+                partialKcContextCustomMock.pageId === "register-user-profile.ftl" ||
+                partialKcContextCustomMock.pageId === "update-user-profile.ftl" ||
+                partialKcContextCustomMock.pageId === "idp-review-user-profile.ftl"
+            ) {
+                assert(
+                    kcContextDefaultMock?.pageId === "register-user-profile.ftl" ||
+                        kcContextDefaultMock?.pageId === "update-user-profile.ftl" ||
+                        kcContextDefaultMock?.pageId === "idp-review-user-profile.ftl"
+                );
 
                 const { attributes } = kcContextDefaultMock.profile;
 
@@ -60,8 +68,6 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                 ].filter(exclude(undefined));
 
                 attributes.forEach(attribute => {
-                    console.log("====>", attribute);
-
                     const partialAttribute = partialAttributes.find(({ name }) => name === attribute.name);
 
                     const augmentedAttribute: Attribute = {} as any;

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -7,6 +7,100 @@ import { pathJoin } from "../../../bin/tools/pathJoin";
 
 const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 
+const attributes: Attribute[] = [
+    {
+        "validators": {
+            "username-prohibited-characters": {
+                "ignore.empty.value": true
+            },
+            "up-username-has-value": {},
+            "length": {
+                "ignore.empty.value": true,
+                "min": "3",
+                "max": "255"
+            },
+            "up-duplicate-username": {},
+            "up-username-mutation": {}
+        },
+        "displayName": "${username}",
+        "annotations": {},
+        "required": true,
+        "groupAnnotations": {},
+        "autocomplete": "username",
+        "readOnly": false,
+        "name": "username",
+        "value": "xxxx"
+    },
+    {
+        "validators": {
+            "up-email-exists-as-username": {},
+            "length": {
+                "max": "255",
+                "ignore.empty.value": true
+            },
+            "up-blank-attribute-value": {
+                "error-message": "missingEmailMessage",
+                "fail-on-null": false
+            },
+            "up-duplicate-email": {},
+            "email": {
+                "ignore.empty.value": true
+            },
+            "pattern": {
+                "ignore.empty.value": true,
+                "pattern": "gmail\\.com$"
+            }
+        },
+        "displayName": "${email}",
+        "annotations": {},
+        "required": true,
+        "groupAnnotations": {},
+        "autocomplete": "email",
+        "readOnly": false,
+        "name": "email"
+    },
+    {
+        "validators": {
+            "length": {
+                "max": "255",
+                "ignore.empty.value": true
+            },
+            "person-name-prohibited-characters": {
+                "ignore.empty.value": true
+            },
+            "up-immutable-attribute": {},
+            "up-attribute-required-by-metadata-value": {}
+        },
+        "displayName": "${firstName}",
+        "annotations": {},
+        "required": true,
+        "groupAnnotations": {},
+        "readOnly": false,
+        "name": "firstName"
+    },
+    {
+        "validators": {
+            "length": {
+                "max": "255",
+                "ignore.empty.value": true
+            },
+            "person-name-prohibited-characters": {
+                "ignore.empty.value": true
+            },
+            "up-immutable-attribute": {},
+            "up-attribute-required-by-metadata-value": {}
+        },
+        "displayName": "${lastName}",
+        "annotations": {},
+        "required": true,
+        "groupAnnotations": {},
+        "readOnly": false,
+        "name": "lastName"
+    }
+];
+
+const attributesByName = Object.fromEntries(attributes.map(attribute => [attribute.name, attribute])) as any;
+
 export const kcContextCommonMock: KcContextBase.Common = {
     "url": {
         "loginAction": "#",
@@ -200,104 +294,8 @@ export const kcContextMocks: KcContextBase[] = [
                 ...registerCommon,
                 "profile": {
                     "context": "REGISTRATION_PROFILE" as const,
-                    ...(() => {
-                        const attributes: Attribute[] = [
-                            {
-                                "validators": {
-                                    "username-prohibited-characters": {
-                                        "ignore.empty.value": true
-                                    },
-                                    "up-username-has-value": {},
-                                    "length": {
-                                        "ignore.empty.value": true,
-                                        "min": "3",
-                                        "max": "255"
-                                    },
-                                    "up-duplicate-username": {},
-                                    "up-username-mutation": {}
-                                },
-                                "displayName": "${username}",
-                                "annotations": {},
-                                "required": true,
-                                "groupAnnotations": {},
-                                "autocomplete": "username",
-                                "readOnly": false,
-                                "name": "username",
-                                "value": "xxxx"
-                            },
-                            {
-                                "validators": {
-                                    "up-email-exists-as-username": {},
-                                    "length": {
-                                        "max": "255",
-                                        "ignore.empty.value": true
-                                    },
-                                    "up-blank-attribute-value": {
-                                        "error-message": "missingEmailMessage",
-                                        "fail-on-null": false
-                                    },
-                                    "up-duplicate-email": {},
-                                    "email": {
-                                        "ignore.empty.value": true
-                                    },
-                                    "pattern": {
-                                        "ignore.empty.value": true,
-                                        "pattern": "gmail\\.com$"
-                                    }
-                                },
-                                "displayName": "${email}",
-                                "annotations": {},
-                                "required": true,
-                                "groupAnnotations": {},
-                                "autocomplete": "email",
-                                "readOnly": false,
-                                "name": "email"
-                            },
-                            {
-                                "validators": {
-                                    "length": {
-                                        "max": "255",
-                                        "ignore.empty.value": true
-                                    },
-                                    "person-name-prohibited-characters": {
-                                        "ignore.empty.value": true
-                                    },
-                                    "up-immutable-attribute": {},
-                                    "up-attribute-required-by-metadata-value": {}
-                                },
-                                "displayName": "${firstName}",
-                                "annotations": {},
-                                "required": true,
-                                "groupAnnotations": {},
-                                "readOnly": false,
-                                "name": "firstName"
-                            },
-                            {
-                                "validators": {
-                                    "length": {
-                                        "max": "255",
-                                        "ignore.empty.value": true
-                                    },
-                                    "person-name-prohibited-characters": {
-                                        "ignore.empty.value": true
-                                    },
-                                    "up-immutable-attribute": {},
-                                    "up-attribute-required-by-metadata-value": {}
-                                },
-                                "displayName": "${lastName}",
-                                "annotations": {},
-                                "required": true,
-                                "groupAnnotations": {},
-                                "readOnly": false,
-                                "name": "lastName"
-                            }
-                        ];
-
-                        return {
-                            attributes,
-                            "attributesByName": Object.fromEntries(attributes.map(attribute => [attribute.name, attribute])) as any
-                        } as any;
-                    })()
+                    attributes,
+                    attributesByName
                 }
             })
         ];
@@ -423,5 +421,22 @@ export const kcContextMocks: KcContextBase[] = [
             "baseUrl": "#"
         },
         "logoutConfirm": { "code": "123", skipLink: false }
+    }),
+    id<KcContextBase.UpdateUserProfile>({
+        ...kcContextCommonMock,
+        "pageId": "update-user-profile.ftl",
+        "profile": {
+            attributes,
+            attributesByName
+        }
+    }),
+    id<KcContextBase.IdpReviewUserProfile>({
+        ...kcContextCommonMock,
+        "pageId": "idp-review-user-profile.ftl",
+        "profile": {
+            context: "IDP_REVIEW",
+            attributes,
+            attributesByName
+        }
     })
 ];

src/lib/i18n/index.tsx

@@ -1,10 +1,10 @@
 import "minimal-polyfills/Object.fromEntries";
 //NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 import React, { useEffect, useState, useRef } from "react";
-import ReactMarkdown from "react-markdown";
 import type baseMessages from "./generated_messages/18.0.1/login/en";
 import { assert } from "tsafe/assert";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { Markdown } from "../tools/Markdown";
 
 export const fallbackLanguageTag = "en";
 
@@ -234,9 +234,9 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
         })();
 
         return doRenderMarkdown ? (
-            <ReactMarkdown allowDangerousHtml renderers={key === "termsText" ? undefined : { "paragraph": "span" }}>
+            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
                 {messageWithArgsInjectedIfAny}
-            </ReactMarkdown>
+            </Markdown>
         ) : (
             messageWithArgsInjectedIfAny
         );

src/lib/tools/Markdown.ts

@@ -0,0 +1,3 @@
+import Markdown from "react-markdown";
+
+export { Markdown };

src/lib/useFormValidationSlice.tsx

@@ -304,13 +304,17 @@ export function useGetErrors(params: {
     return { getErrors };
 }
 
+/**
+ * NOTE: The attributesWithPassword returned is actually augmented with
+ * artificial password related attributes only if kcContext.passwordRequired === true
+ */
 export function useFormValidationSlice(params: {
     kcContext: {
         messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
         profile: {
             attributes: Attribute[];
         };
-        passwordRequired: boolean;
+        passwordRequired?: boolean;
         realm: { registrationEmailAsUsername: boolean };
     };
     /** NOTE: Try to avoid passing a new ref every render for better performances. */