keycloakify 5.9.0 → 6.0.0-beta.11

package/src/lib/components/Login.tsx

@@ -1,16 +1,16 @@
-import { useState, memo } from "react";
-import { Template } from "./Template";
+import React, { useState, memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { FormEventHandler } from "react";
+import type { I18n } from "../i18n";
 
-export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login } & KcProps) => {
+const Login = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Login; i18n: I18n } & KcProps) => {
     const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     const { cx } = useCssAndCx();
 
@@ -32,7 +32,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
@@ -74,7 +74,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
                                                         ? { "disabled": true }
                                                         : {
                                                               "autoFocus": true,
-                                                              "autoComplete": "off",
+                                                              "autoComplete": "off"
                                                           })}
                                                 />
                                             </>
@@ -106,7 +106,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
                                                         type="checkbox"
                                                         {...(login.rememberMe
                                                             ? {
-                                                                  "checked": true,
+                                                                  "checked": true
                                                               }
                                                             : {})}
                                                     />
@@ -132,7 +132,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
                                         name="credentialId"
                                         {...(auth?.selectedCredential !== undefined
                                             ? {
-                                                  "value": auth.selectedCredential,
+                                                  "value": auth.selectedCredential
                                               }
                                             : {})}
                                     />
@@ -142,7 +142,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
                                             props.kcButtonClass,
                                             props.kcButtonPrimaryClass,
                                             props.kcButtonBlockClass,
-                                            props.kcButtonLargeClass,
+                                            props.kcButtonLargeClass
                                         )}
                                         name="login"
                                         id="kc-login"
@@ -159,7 +159,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
                             <ul
                                 className={cx(
                                     props.kcFormSocialAccountListClass,
-                                    social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass,
+                                    social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass
                                 )}
                             >
                                 {social.providers.map(p => (
@@ -191,3 +191,5 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.L
         />
     );
 });
+
+export default Login;

package/src/lib/components/LoginConfigTotp.tsx

@@ -1,25 +1,26 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginConfigTotp } & KcProps) => {
+const LoginConfigTotp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginConfigTotp; i18n: I18n } & KcProps) => {
     const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
     const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
+
     const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
         HmacSHA1: "SHA1",
         HmacSHA256: "SHA256",
-        HmacSHA512: "SHA512",
+        HmacSHA512: "SHA512"
     };
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("loginTotpTitle")}
             formNode={
@@ -158,7 +159,7 @@ export const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcCon
                                         props.kcButtonClass,
                                         props.kcButtonDefaultClass,
                                         props.kcButtonLargeClass,
-                                        props.kcButtonLargeClass,
+                                        props.kcButtonLargeClass
                                     )}
                                     id="cancelTOTPBtn"
                                     name="cancel-aia"
@@ -181,3 +182,5 @@ export const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcCon
         />
     );
 });
+
+export default LoginConfigTotp;

package/src/lib/components/LoginIdpLinkConfirm.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm } & KcProps) => {
+const LoginIdpLinkConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; i18n: I18n } & KcProps) => {
     const { url, idpAlias } = kcContext;
 
-    const { msg } = getMsg(kcContext);
+    const { msg } = i18n;
 
     const { cx } = useCssAndCx();
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("confirmLinkIdpTitle")}
             formNode={
@@ -44,3 +44,5 @@ export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: K
         />
     );
 });
+
+export default LoginIdpLinkConfirm;

package/src/lib/components/LoginIdpLinkEmail.tsx

@@ -1,17 +1,17 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
+import type { I18n } from "../i18n";
 
-export const LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail } & KcProps) => {
+const LoginIdpLinkEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail; i18n: I18n } & KcProps) => {
     const { url, realm, brokerContext, idpAlias } = kcContext;
 
-    const { msg } = getMsg(kcContext);
+    const { msg } = i18n;
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("emailLinkIdpTitle", idpAlias)}
             formNode={
@@ -30,3 +30,5 @@ export const LoginIdpLinkEmail = memo(({ kcContext, ...props }: { kcContext: KcC
         />
     );
 });
+
+export default LoginIdpLinkEmail;

package/src/lib/components/LoginOtp.tsx

@@ -1,25 +1,25 @@
-import { useEffect, memo } from "react";
-import { Template } from "./Template";
+import React, { useEffect, memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
 import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../tools/pathJoin";
-import { useCssAndCx } from "tss-react";
+import { pathJoin } from "../../bin/tools/pathJoin";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp } & KcProps) => {
+const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginOtp; i18n: I18n } & KcProps) => {
     const { otpLogin, url } = kcContext;
 
     const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     useEffect(() => {
         let isCleanedUp = false;
 
         headInsert({
             "type": "javascript",
-            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js"),
+            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
         }).then(() => {
             if (isCleanedUp) return;
 
@@ -33,7 +33,7 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("doLogIn")}
             formNode={
@@ -109,3 +109,5 @@ function evaluateInlineScript() {
         }
     });
 }
+
+export default LoginOtp;

package/src/lib/components/LoginPageExpired.tsx

@@ -1,17 +1,17 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
+import type { I18n } from "../i18n";
 
-export const LoginPageExpired = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginPageExpired } & KcProps) => {
+const LoginPageExpired = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginPageExpired; i18n: I18n } & KcProps) => {
     const { url } = kcContext;
 
-    const { msg } = getMsg(kcContext);
+    const { msg } = i18n;
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("pageExpiredTitle")}
@@ -34,3 +34,5 @@ export const LoginPageExpired = memo(({ kcContext, ...props }: { kcContext: KcCo
         />
     );
 });
+
+export default LoginPageExpired;

package/src/lib/components/LoginResetPassword.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword } & KcProps) => {
+const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n } & KcProps) => {
     const { url, realm, auth } = kcContext;
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     const { cx } = useCssAndCx();
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("emailForgotTitle")}
@@ -64,3 +64,5 @@ export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: Kc
         />
     );
 });
+
+export default LoginResetPassword;

package/src/lib/components/LoginUpdatePassword.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdatePassword } & KcProps) => {
+const LoginUpdatePassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdatePassword; i18n: I18n } & KcProps) => {
     const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("updatePasswordTitle")}
             formNode={
@@ -102,7 +102,7 @@ export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: K
                                         props.kcButtonClass,
                                         props.kcButtonPrimaryClass,
                                         props.kcButtonBlockClass,
-                                        props.kcButtonLargeClass,
+                                        props.kcButtonLargeClass
                                     )}
                                     type="submit"
                                     defaultValue={msgStr("doSubmit")}
@@ -115,3 +115,5 @@ export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: K
         />
     );
 });
+
+export default LoginUpdatePassword;

package/src/lib/components/LoginUpdateProfile.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile } & KcProps) => {
+const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n } & KcProps) => {
     const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("loginProfileTitle")}
             formNode={
@@ -105,7 +105,7 @@ export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: Kc
                                         props.kcButtonClass,
                                         props.kcButtonPrimaryClass,
                                         props.kcButtonBlockClass,
-                                        props.kcButtonLargeClass,
+                                        props.kcButtonLargeClass
                                     )}
                                     type="submit"
                                     defaultValue={msgStr("doSubmit")}
@@ -118,3 +118,5 @@ export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: Kc
         />
     );
 });
+
+export default LoginUpdateProfile;

package/src/lib/components/LoginVerifyEmail.tsx

@@ -1,17 +1,17 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
+import type { I18n } from "../i18n";
 
-export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail } & KcProps) => {
-    const { msg } = getMsg(kcContext);
+const LoginVerifyEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n } & KcProps) => {
+    const { msg } = i18n;
 
     const { url, user } = kcContext;
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("emailVerifyTitle")}
@@ -30,3 +30,5 @@ export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcCo
         />
     );
 });
+
+export default LoginVerifyEmail;

package/src/lib/components/LogoutConfirm.tsx

@@ -1,21 +1,20 @@
-import { memo } from "react";
-import { useCssAndCx } from "tss-react";
-
-import { Template } from "./Template";
+import React, { memo } from "react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
+import type { I18n } from "../i18n";
 
-export const LogoutConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LogoutConfirm } & KcProps) => {
+const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n } & KcProps) => {
     const { url, client, logoutConfirm } = kcContext;
 
     const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("logoutConfirmTitle")}
@@ -36,7 +35,7 @@ export const LogoutConfirm = memo(({ kcContext, ...props }: { kcContext: KcConte
                                             props.kcButtonClass,
                                             props.kcButtonPrimaryClass,
                                             props.kcButtonBlockClass,
-                                            props.kcButtonLargeClass,
+                                            props.kcButtonLargeClass
                                         )}
                                         name="confirmLogout"
                                         id="kc-logout"
@@ -59,3 +58,5 @@ export const LogoutConfirm = memo(({ kcContext, ...props }: { kcContext: KcConte
         />
     );
 });
+
+export default LogoutConfirm;

package/src/lib/components/Register.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register } & KcProps) => {
+const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Register; i18n: I18n } & KcProps) => {
     const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     const { cx } = useCssAndCx();
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("registerTitle")}
             formNode={
@@ -111,7 +111,7 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBas
                             <div
                                 className={cx(
                                     props.kcFormGroupClass,
-                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass),
+                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass)
                                 )}
                             >
                                 <div className={cx(props.kcLabelWrapperClass)}>
@@ -154,3 +154,5 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBas
         />
     );
 });
+
+export default Register;

package/src/lib/components/RegisterUserProfile.tsx

@@ -1,40 +1,40 @@
-import { useMemo, memo, useEffect, useState, Fragment } from "react";
-import { Template } from "./Template";
+import React, { useMemo, memo, useEffect, useState, Fragment } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
-import { getMsg } from "../i18n";
-import { useCssAndCx } from "tss-react";
+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";
 
-export const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
+const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps) => {
     const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-    const { msg, msgStr } = getMsg(kcContext);
+    const { msg, msgStr } = i18n;
 
     const { cx, css } = useCssAndCx();
 
     const props = useMemo(
         () => ({
             ...props_,
-            "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 })),
+            "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 }))
         }),
-        [cx, css],
+        [cx, css]
     );
 
     const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
         <Template
-            {...{ kcContext, ...props }}
+            {...{ kcContext, i18n, ...props }}
             displayMessage={messagesPerField.exists("global")}
             displayRequiredFields={true}
             doFetchDefaultThemeResources={true}
             headerNode={msg("registerTitle")}
             formNode={
                 <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} {...props} />
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
                     {recaptchaRequired && (
                         <div className="form-group">
                             <div className={cx(props.kcInputWrapperClass)}>
@@ -66,22 +66,23 @@ export const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext:
     );
 });
 
-type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile } & KcProps &
+type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps &
     Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
         onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
     };
 
-const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, ...props }: UserProfileFormFieldsProps) => {
+const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, i18n, ...props }: UserProfileFormFieldsProps) => {
     const { cx, css } = useCssAndCx();
 
-    const { advancedMsg } = getMsg(kcContext);
+    const { advancedMsg } = i18n;
 
     const {
         formValidationState: { fieldStateByAttributeName, isFormSubmittable },
         formValidationReducer,
-        attributesWithPassword,
+        attributesWithPassword
     } = useFormValidationSlice({
         kcContext,
+        i18n
     });
 
     useEffect(() => {
@@ -93,22 +94,22 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
             [name]: [string],
             [
                 {
-                    target: { value },
-                },
-            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>],
+                    target: { value }
+                }
+            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
         ) =>
             formValidationReducer({
                 "action": "update value",
                 name,
-                "newValue": value,
-            }),
+                "newValue": value
+            })
     );
 
     const onBlurFactory = useCallbackFactory(([name]: [string]) =>
         formValidationReducer({
             "action": "focus lost",
-            name,
-        }),
+            name
+        })
     );
 
     let currentGroup = "";
@@ -199,8 +200,8 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
                                             props.kcInputErrorMessageClass,
                                             css({
                                                 "position": displayableErrors.length === 1 ? "absolute" : undefined,
-                                                "& > span": { "display": "block" },
-                                            }),
+                                                "& > span": { "display": "block" }
+                                            })
                                         )}
                                         aria-live="polite"
                                     >
@@ -215,3 +216,5 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
         </>
     );
 });
+
+export default RegisterUserProfile;