agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Use hook instead of Context for i18n

Browse Source
This commit is contained in:
garronej 2022-07-31 22:30:32 +02:00
parent 0641151ca1
commit 7a0a046596
22 changed files with 238 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/Error.tsx
View File

@ -2,16 +2,16 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
const Error = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Error } & KcProps) => {
const { msg } = useI18n();
import type { I18n } from "../i18n";
const Error = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Error; i18n: I18n } & KcProps) => {
const { message, client } = kcContext;
const { msg } = i18n;
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayMessage={false}
headerNode={msg("errorTitle")}

8
src/lib/components/Info.tsx
View File

@ -3,10 +3,10 @@ import Template from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info } & KcProps) => {
const { msg, msgStr } = useI18n();
const Info = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Info; i18n: I18n } & KcProps) => {
const { msgStr, msg } = i18n;
assert(kcContext.message !== undefined);
@ -14,7 +14,7 @@ const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info } &
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayMessage={false}
headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}

53
src/lib/components/KcApp.tsx
View File

@ -1,7 +1,8 @@
import React, { lazy, memo, Suspense } from "react";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import type { KcProps } from "./KcProps";
import { I18nProvider } from "../i18n";
import { __unsafe_useI18n as useI18n } from "../i18n";
import type { I18n } from "../i18n";
const Login = lazy(() => import("./Login"));
const Register = lazy(() => import("./Register"));
@ -20,48 +21,60 @@ const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase } & KcProps) => {
const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...props }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
const i18n = (function useClosure() {
const i18n = useI18n({
kcContext,
"extraMessages": {},
"doSkip": userProvidedI18n !== undefined,
});
return userProvidedI18n ?? i18n;
})();
if (i18n === undefined) {
return null;
}
return (
<I18nProvider kcContext={kcContext}>
<Suspense>
{(() => {
switch (kcContext.pageId) {
case "login.ftl":
return <Login {...{ kcContext, ...props }} />;
return <Login {...{ kcContext, i18n, ...props }} />;
case "register.ftl":
return <Register {...{ kcContext, ...props }} />;
return <Register {...{ kcContext, i18n, ...props }} />;
case "register-user-profile.ftl":
return <RegisterUserProfile {...{ kcContext, ...props }} />;
return <RegisterUserProfile {...{ kcContext, i18n, ...props }} />;
case "info.ftl":
return <Info {...{ kcContext, ...props }} />;
return <Info {...{ kcContext, i18n, ...props }} />;
case "error.ftl":
return <Error {...{ kcContext, ...props }} />;
return <Error {...{ kcContext, i18n, ...props }} />;
case "login-reset-password.ftl":
return <LoginResetPassword {...{ kcContext, ...props }} />;
return <LoginResetPassword {...{ kcContext, i18n, ...props }} />;
case "login-verify-email.ftl":
return <LoginVerifyEmail {...{ kcContext, ...props }} />;
return <LoginVerifyEmail {...{ kcContext, i18n, ...props }} />;
case "terms.ftl":
return <Terms {...{ kcContext, ...props }} />;
return <Terms {...{ kcContext, i18n, ...props }} />;
case "login-otp.ftl":
return <LoginOtp {...{ kcContext, ...props }} />;
return <LoginOtp {...{ kcContext, i18n, ...props }} />;
case "login-update-password.ftl":
return <LoginUpdatePassword {...{ kcContext, ...props }} />;
return <LoginUpdatePassword {...{ kcContext, i18n, ...props }} />;
case "login-update-profile.ftl":
return <LoginUpdateProfile {...{ kcContext, ...props }} />;
return <LoginUpdateProfile {...{ kcContext, i18n, ...props }} />;
case "login-idp-link-confirm.ftl":
return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
return <LoginIdpLinkConfirm {...{ kcContext, i18n, ...props }} />;
case "login-idp-link-email.ftl":
return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
return <LoginIdpLinkEmail {...{ kcContext, i18n, ...props }} />;
case "login-page-expired.ftl":
return <LoginPageExpired {...{ kcContext, ...props }} />;
return <LoginPageExpired {...{ kcContext, i18n, ...props }} />;
case "login-config-totp.ftl":
return <LoginConfigTotp {...{ kcContext, ...props }} />;
return <LoginConfigTotp {...{ kcContext, i18n, ...props }} />;
case "logout-confirm.ftl":
return <LogoutConfirm {...{ kcContext, ...props }} />;
return <LogoutConfirm {...{ kcContext, i18n, ...props }} />;
}
})()}
</Suspense>
</I18nProvider>
);
});

8
src/lib/components/Login.tsx
View File

@ -5,12 +5,12 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useCssAndCx } from "tss-react";
import { useConstCallback } from "powerhooks/useConstCallback";
import type { FormEventHandler } from "react";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const { cx } = useCssAndCx();
@ -32,7 +32,7 @@ const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login }
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayInfo={social.displayInfo}
displayWide={realm.password && social.providers !== undefined}

9
src/lib/components/LoginConfigTotp.tsx
View File

@ -2,15 +2,16 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
HmacSHA1: "SHA1",
HmacSHA256: "SHA256",
@ -19,7 +20,7 @@ const LoginConfigTotp = memo(({ kcContext, ...props }: { kcContext: KcContextBas
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("loginTotpTitle")}
formNode={

8
src/lib/components/LoginIdpLinkConfirm.tsx
View File

@ -2,19 +2,19 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg } = i18n;
const { cx } = useCssAndCx();
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("confirmLinkIdpTitle")}
formNode={

8
src/lib/components/LoginIdpLinkEmail.tsx
View File

@ -2,16 +2,16 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg } = i18n;
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("emailLinkIdpTitle", idpAlias)}
formNode={

8
src/lib/components/LoginOtp.tsx
View File

@ -2,17 +2,17 @@ import React, { useEffect, memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { headInsert } from "../tools/headInsert";
import { pathJoin } from "../../bin/tools/pathJoin";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
useEffect(() => {
let isCleanedUp = false;
@ -33,7 +33,7 @@ const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("doLogIn")}
formNode={

8
src/lib/components/LoginPageExpired.tsx
View File

@ -2,16 +2,16 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg } = i18n;
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayMessage={false}
headerNode={msg("pageExpiredTitle")}

8
src/lib/components/LoginResetPassword.tsx
View File

@ -2,19 +2,19 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const { cx } = useCssAndCx();
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayMessage={false}
headerNode={msg("emailForgotTitle")}

8
src/lib/components/LoginUpdatePassword.tsx
View File

@ -2,19 +2,19 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("updatePasswordTitle")}
formNode={

8
src/lib/components/LoginUpdateProfile.tsx
View File

@ -2,19 +2,19 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("loginProfileTitle")}
formNode={

8
src/lib/components/LoginVerifyEmail.tsx
View File

@ -2,16 +2,16 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail } & KcProps) => {
const { msg } = useI18n();
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")}

9
src/lib/components/LogoutConfirm.tsx
View File

@ -1,21 +1,20 @@
import React, { memo } from "react";
import { useCssAndCx } from "tss-react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayMessage={false}
headerNode={msg("logoutConfirmTitle")}

8
src/lib/components/Register.tsx
View File

@ -2,19 +2,19 @@ import React, { memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const { cx } = useCssAndCx();
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("registerTitle")}
formNode={

17
src/lib/components/RegisterUserProfile.tsx
View File

@ -2,16 +2,16 @@ 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 { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import type { ReactComponent } from "../tools/ReactComponent";
import { useCallbackFactory } from "powerhooks/useCallbackFactory";
import { useFormValidationSlice } from "../useFormValidationSlice";
import type { I18n } from "../i18n";
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 } = useI18n();
const { msg, msgStr } = i18n;
const { cx, css } = useCssAndCx();
@ -27,14 +27,14 @@ const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcConte
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,15 +66,15 @@ const RegisterUserProfile = memo(({ kcContext, ...props_ }: { kcContext: KcConte
);
});
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 } = useI18n();
const { advancedMsg } = i18n;
const {
formValidationState: { fieldStateByAttributeName, isFormSubmittable },
@ -82,6 +82,7 @@ const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange,
attributesWithPassword,
} = useFormValidationSlice({
kcContext,
i18n,
});
useEffect(() => {

7
src/lib/components/Template.tsx
View File

@ -8,7 +8,7 @@ import { pathJoin } from "../../bin/tools/pathJoin";
import { useConstCallback } from "powerhooks/useConstCallback";
import type { KcTemplateProps } from "./KcProps";
import { useCssAndCx } from "tss-react";
import { useI18n } from "../i18n";
import type { I18n } from "../i18n";
export type TemplateProps = {
displayInfo?: boolean;
@ -24,7 +24,7 @@ export type TemplateProps = {
* to avoid pulling the default theme assets.
*/
doFetchDefaultThemeResources: boolean;
} & { kcContext: KcContextBase } & KcTemplateProps;
} & { kcContext: KcContextBase; i18n: I18n } & KcTemplateProps;
const Template = memo((props: TemplateProps) => {
const {
@ -38,6 +38,7 @@ const Template = memo((props: TemplateProps) => {
formNode,
infoNode = null,
kcContext,
i18n,
doFetchDefaultThemeResources,
} = props;
@ -47,7 +48,7 @@ const Template = memo((props: TemplateProps) => {
console.log("Rendering this page with react using keycloakify");
}, []);
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = useI18n();
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));

31
src/lib/components/Terms.tsx
View File

@ -2,23 +2,36 @@ import React, { useEffect, memo } from "react";
import Template from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useI18n } from "../i18n";
import { useCssAndCx } from "tss-react";
import { Evt } from "evt";
import { useRerenderOnStateChange } from "evt/hooks";
import { assert } from "tsafe/assert";
import { fallbackLanguageTag } from "../i18n";
import type { I18n } from "../i18n";
export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
/** Allow to avoid bundling the terms and download it on demand*/
export function useDownloadTerms(params: { downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string> }) {
const { downloadTermMarkdown } = params;
export type KcContextLike = {
locale?: {
currentLanguageTag: string;
};
};
const { currentLanguageTag } = useI18n();
assert<KcContextBase extends KcContextLike ? true : false>();
/** Allow to avoid bundling the terms and download it on demand*/
export function useDownloadTerms(params: {
kcContext: KcContextLike;
downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
}) {
const { kcContext, downloadTermMarkdown } = params;
useEffect(() => {
let isMounted = true;
downloadTermMarkdown({ currentLanguageTag }).then(thermMarkdown => {
downloadTermMarkdown({
"currentLanguageTag": kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag,
}).then(thermMarkdown => {
if (!isMounted) {
return;
}
@ -32,8 +45,8 @@ export function useDownloadTerms(params: { downloadTermMarkdown: (params: { curr
}, []);
}
const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms } & KcProps) => {
const { msg, msgStr } = useI18n();
const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Terms; i18n: I18n } & KcProps) => {
const { msg, msgStr } = i18n;
useRerenderOnStateChange(evtTermMarkdown);
@ -47,7 +60,7 @@ const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms }
return (
<Template
{...{ kcContext, ...props }}
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
displayMessage={false}
headerNode={msg("termsTitle")}

4
src/lib/getKcContext/KcContextBase.ts
View File

@ -1,7 +1,7 @@
import type { PageId } from "../../bin/build-keycloak-theme/generateFtl";
import { assert } from "tsafe/assert";
import type { Equals } from "tsafe";
import type { BaseMessageKey } from "../i18n/createI18nApi";
import type { MessageKeyBase } from "../i18n";
type ExtractAfterStartingWith<Prefix extends string, StrEnum> = StrEnum extends `${Prefix}${infer U}` ? U : never;
@ -153,7 +153,7 @@ export declare namespace KcContextBase {
export type Info = Common & {
pageId: "info.ftl";
messageHeader?: string;
requiredActions?: ExtractAfterStartingWith<"requiredAction.", BaseMessageKey>[];
requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKeyBase>[];
skipLink: boolean;
pageRedirectUri?: string;
actionUri?: string;

8
src/lib/i18n/index.ts
View File

@ -1,8 +0,0 @@
import { createI18nApi } from "./createI18nApi";
import type { I18n } from "./createI18nApi";
export const { I18nProvider, useI18n } = createI18nApi({
"extraMessages": {},
});
export type MessageKey = ReturnType<typeof useI18n> extends I18n<infer U> ? U : never;

81
src/lib/i18n/createI18nApi.tsx → src/lib/i18n/index.tsx
View File

@ -1,15 +1,25 @@
import "minimal-polyfills/Object.fromEntries";
//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
import React, { createContext, useContext, useEffect, useState, memo } from "react";
import type { ReactNode } from "react";
import React, { useEffect, useState } 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";
const fallbackLanguageTag = "en";
export const fallbackLanguageTag = "en";
export type I18n<MessageKey extends string> = {
export type KcContextLike = {
locale?: {
currentLanguageTag: string;
supported: { languageTag: string; url: string; label: string }[];
};
};
assert<KcContextBase extends KcContextLike ? true : false>();
export type MessageKeyBase = keyof typeof baseMessages | keyof typeof keycloakifyExtraMessages[typeof fallbackLanguageTag];
export type I18n<MessageKey extends string = MessageKeyBase> = {
msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
/** advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") */
@ -22,46 +32,20 @@ export type I18n<MessageKey extends string> = {
labelBySupportedLanguageTag: Record<string, string>;
};
export type KcContextLike = {
locale?: {
currentLanguageTag: string;
supported: { languageTag: string; url: string; label: string }[];
};
};
assert<KcContextBase extends KcContextLike ? true : false>();
export type I18nProviderProps = {
children: ReactNode;
fallback?: ReactNode;
export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
kcContext: KcContextLike;
};
const allExtraMessages: { [languageTag: string]: { [key: string]: string } } = {};
export function createI18nApi<ExtraMessageKey extends string = never>(params: {
extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
}) {
Object.assign(allExtraMessages, params.extraMessages);
doSkip: boolean;
}): I18n<MessageKeyBase | ExtraMessageKey> | undefined {
const { kcContext, extraMessages, doSkip } = params;
type MessageKey = ExtraMessageKey | keyof typeof baseMessages | keyof typeof keycloakifyExtraMessages[typeof fallbackLanguageTag];
const context = createContext<I18n<MessageKey> | undefined>(undefined);
function useI18n(): I18n<MessageKey> {
const i18n = useContext(context);
assert(i18n !== undefined, "Now Wrapped in <I18nProvider>");
return i18n;
}
const I18nProvider = memo((props: I18nProviderProps) => {
const { children, fallback, kcContext } = props;
const [i18n, setI18n] = useState<I18n<MessageKey> | undefined>(undefined);
const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
useEffect(() => {
if (doSkip) {
return;
}
let isMounted = true;
(async () => {
@ -81,12 +65,12 @@ export function createI18nApi<ExtraMessageKey extends string = never>(params: {
"fallbackMessages": {
...fallbackMessages,
...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
...(allExtraMessages[fallbackLanguageTag] ?? {}),
...(extraMessages[fallbackLanguageTag] ?? {}),
} as any,
"messages": {
...messages,
...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
...(allExtraMessages[currentLanguageTag] ?? {}),
...(extraMessages[currentLanguageTag] ?? {}),
} as any,
}),
currentLanguageTag,
@ -114,10 +98,19 @@ export function createI18nApi<ExtraMessageKey extends string = never>(params: {
};
}, []);
return <context.Provider value={i18n}>{i18n === undefined ? fallback ?? null : children}</context.Provider>;
});
return i18n;
}
return { useI18n, I18nProvider };
const useI18n_private = __unsafe_useI18n;
export function useI18n<ExtraMessageKey extends string = never>(params: {
kcContext: KcContextLike;
extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
}): I18n<MessageKeyBase | ExtraMessageKey> | undefined {
return useI18n_private({
...params,
"doSkip": false,
});
}
function createI18nTranslationFunctions<MessageKey extends string>(params: {

25
src/lib/useFormValidationSlice.tsx
View File

@ -1,8 +1,7 @@
import "./tools/Array.prototype.every";
import React, { useMemo, useReducer, Fragment } from "react";
import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
import { useI18n } from "./i18n";
import type { MessageKey } from "./i18n";
import type { I18n, MessageKeyBase } from "./i18n";
import { useConstCallback } from "powerhooks/useConstCallback";
import { id } from "tsafe/id";
import { emailRegexp } from "./tools/emailRegExp";
@ -15,15 +14,16 @@ export function useGetErrors(params: {
attributes: { name: string; value?: string; validators: Validators }[];
};
};
i18n: I18n;
}) {
const { kcContext } = params;
const { kcContext, i18n } = params;
const {
messagesPerField,
profile: { attributes },
} = kcContext;
const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n();
const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
const { name, fieldValueByAttributeName } = params;
@ -134,7 +134,7 @@ export function useGetErrors(params: {
const msgArg = [
errorMessageKey ??
id<MessageKey>(
id<MessageKeyBase>(
(() => {
switch (shouldBe) {
case "equal":
@ -175,7 +175,7 @@ export function useGetErrors(params: {
break scope;
}
const msgArgs = [errorMessageKey ?? id<MessageKey>("shouldMatchPattern"), pattern] as const;
const msgArgs = [errorMessageKey ?? id<MessageKeyBase>("shouldMatchPattern"), pattern] as const;
errors.push({
validatorName,
@ -207,7 +207,7 @@ export function useGetErrors(params: {
break scope;
}
const msgArgs = [id<MessageKey>("invalidEmailMessage")] as const;
const msgArgs = [id<MessageKeyBase>("invalidEmailMessage")] as const;
errors.push({
validatorName,
@ -287,7 +287,7 @@ export function useGetErrors(params: {
break scope;
}
const msgArgs = [id<MessageKey>("notAValidOption")] as const;
const msgArgs = [id<MessageKeyBase>("notAValidOption")] as const;
errors.push({
validatorName,
@ -315,6 +315,7 @@ export function useFormValidationSlice(params: {
};
/** NOTE: Try to avoid passing a new ref every render for better performances. */
passwordValidators?: Validators;
i18n: I18n;
}) {
const {
kcContext,
@ -324,6 +325,7 @@ export function useFormValidationSlice(params: {
"min": "4",
},
},
i18n,
} = params;
const attributesWithPassword = useMemo(
@ -342,7 +344,7 @@ export function useFormValidationSlice(params: {
curr,
id<Attribute>({
"name": "password",
"displayName": id<`\${${MessageKey}}`>("${password}"),
"displayName": id<`\${${MessageKeyBase}}`>("${password}"),
"required": true,
"readOnly": false,
"validators": passwordValidators,
@ -352,7 +354,7 @@ export function useFormValidationSlice(params: {
}),
id<Attribute>({
"name": "password-confirm",
"displayName": id<`\${${MessageKey}}`>("${passwordConfirm}"),
"displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
"required": true,
"readOnly": false,
"validators": {
@ -360,7 +362,7 @@ export function useFormValidationSlice(params: {
"name": "password",
"ignore.empty.value": true,
"shouldBe": "equal",
"error-message": id<`\${${MessageKey}}`>("${invalidPasswordConfirmMessage}"),
"error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}"),
},
},
"annotations": {},
@ -382,6 +384,7 @@ export function useFormValidationSlice(params: {
"attributes": attributesWithPassword,
},
},
i18n,
});
const initialInternalState = useMemo(