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
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}</>}

97
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 }} />;
case "register.ftl":
return <Register {...{ kcContext, ...props }} />;
case "register-user-profile.ftl":
return <RegisterUserProfile {...{ kcContext, ...props }} />;
case "info.ftl":
return <Info {...{ kcContext, ...props }} />;
case "error.ftl":
return <Error {...{ kcContext, ...props }} />;
case "login-reset-password.ftl":
return <LoginResetPassword {...{ kcContext, ...props }} />;
case "login-verify-email.ftl":
return <LoginVerifyEmail {...{ kcContext, ...props }} />;
case "terms.ftl":
return <Terms {...{ kcContext, ...props }} />;
case "login-otp.ftl":
return <LoginOtp {...{ kcContext, ...props }} />;
case "login-update-password.ftl":
return <LoginUpdatePassword {...{ kcContext, ...props }} />;
case "login-update-profile.ftl":
return <LoginUpdateProfile {...{ kcContext, ...props }} />;
case "login-idp-link-confirm.ftl":
return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
case "login-idp-link-email.ftl":
return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
case "login-page-expired.ftl":
return <LoginPageExpired {...{ kcContext, ...props }} />;
case "login-config-totp.ftl":
return <LoginConfigTotp {...{ kcContext, ...props }} />;
case "logout-confirm.ftl":
return <LogoutConfirm {...{ kcContext, ...props }} />;
}
})()}
</Suspense>
</I18nProvider>
<Suspense>
{(() => {
switch (kcContext.pageId) {
case "login.ftl":
return <Login {...{ kcContext, i18n, ...props }} />;
case "register.ftl":
return <Register {...{ kcContext, i18n, ...props }} />;
case "register-user-profile.ftl":
return <RegisterUserProfile {...{ kcContext, i18n, ...props }} />;
case "info.ftl":
return <Info {...{ kcContext, i18n, ...props }} />;
case "error.ftl":
return <Error {...{ kcContext, i18n, ...props }} />;
case "login-reset-password.ftl":
return <LoginResetPassword {...{ kcContext, i18n, ...props }} />;
case "login-verify-email.ftl":
return <LoginVerifyEmail {...{ kcContext, i18n, ...props }} />;
case "terms.ftl":
return <Terms {...{ kcContext, i18n, ...props }} />;
case "login-otp.ftl":
return <LoginOtp {...{ kcContext, i18n, ...props }} />;
case "login-update-password.ftl":
return <LoginUpdatePassword {...{ kcContext, i18n, ...props }} />;
case "login-update-profile.ftl":
return <LoginUpdateProfile {...{ kcContext, i18n, ...props }} />;
case "login-idp-link-confirm.ftl":
return <LoginIdpLinkConfirm {...{ kcContext, i18n, ...props }} />;
case "login-idp-link-email.ftl":
return <LoginIdpLinkEmail {...{ kcContext, i18n, ...props }} />;
case "login-page-expired.ftl":
return <LoginPageExpired {...{ kcContext, i18n, ...props }} />;
case "login-config-totp.ftl":
return <LoginConfigTotp {...{ kcContext, i18n, ...props }} />;
case "logout-confirm.ftl":
return <LogoutConfirm {...{ kcContext, i18n, ...props }} />;
}
})()}
</Suspense>
);
});

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")}