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

Refactor of the main component and i18n

Browse Source
This commit is contained in:
garronej 2023-03-18 18:54:33 +01:00
parent 5631ae1b6c
commit 16d18f23a1
29 changed files with 65 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/KcApp.tsx → src/Fallback.tsx
View File

@ -1,11 +1,7 @@
import { lazy, Suspense } from "react";
import { __unsafe_useI18n as useI18n } from "./i18n";
import type { KcContext } from "./kcContext/KcContext";
import type { KcContext } from "keycloakify/kcContext";
import type { PageProps } from "keycloakify/pages/PageProps";
import type { I18nBase } from "./i18n";
import type { SetOptional } from "./tools/SetOptional";
const DefaultTemplate = lazy(() => import("keycloakify/Template"));
import type { I18n } from "keycloakify/i18n";
const Login = lazy(() => import("keycloakify/pages/Login"));
const Register = lazy(() => import("keycloakify/pages/Register"));
@ -29,71 +25,55 @@ const LogoutConfirm = lazy(() => import("keycloakify/pages/LogoutConfirm"));
const UpdateUserProfile = lazy(() => import("keycloakify/pages/UpdateUserProfile"));
const IdpReviewUserProfile = lazy(() => import("keycloakify/pages/IdpReviewUserProfile"));
export default function KcApp(props_: SetOptional<PageProps<KcContext, I18nBase>, "Template">) {
const { kcContext, i18n: userProvidedI18n, Template = DefaultTemplate, ...kcProps } = props_;
const i18n = (function useClosure() {
const i18n = useI18n({
kcContext,
"extraMessages": {},
"doSkip": userProvidedI18n !== undefined
});
return userProvidedI18n ?? i18n;
})();
if (i18n === null) {
return null;
}
const commonProps = { i18n, Template, ...kcProps };
export default function Fallback(props: PageProps<KcContext, I18n>) {
const { kcContext, ...rest } = props;
return (
<Suspense>
{(() => {
switch (kcContext.pageId) {
case "login.ftl":
return <Login {...{ kcContext, ...commonProps }} />;
return <Login kcContext={kcContext} {...rest} />;
case "register.ftl":
return <Register {...{ kcContext, ...commonProps }} />;
return <Register kcContext={kcContext} {...rest} />;
case "register-user-profile.ftl":
return <RegisterUserProfile {...{ kcContext, ...commonProps }} />;
return <RegisterUserProfile kcContext={kcContext} {...rest} />;
case "info.ftl":
return <Info {...{ kcContext, ...commonProps }} />;
return <Info kcContext={kcContext} {...rest} />;
case "error.ftl":
return <Error {...{ kcContext, ...commonProps }} />;
return <Error kcContext={kcContext} {...rest} />;
case "login-reset-password.ftl":
return <LoginResetPassword {...{ kcContext, ...commonProps }} />;
return <LoginResetPassword kcContext={kcContext} {...rest} />;
case "login-verify-email.ftl":
return <LoginVerifyEmail {...{ kcContext, ...commonProps }} />;
return <LoginVerifyEmail kcContext={kcContext} {...rest} />;
case "terms.ftl":
return <Terms {...{ kcContext, ...commonProps }} />;
return <Terms kcContext={kcContext} {...rest} />;
case "login-otp.ftl":
return <LoginOtp {...{ kcContext, ...commonProps }} />;
return <LoginOtp kcContext={kcContext} {...rest} />;
case "login-username.ftl":
return <LoginUsername {...{ kcContext, ...commonProps }} />;
return <LoginUsername kcContext={kcContext} {...rest} />;
case "login-password.ftl":
return <LoginPassword {...{ kcContext, ...commonProps }} />;
return <LoginPassword kcContext={kcContext} {...rest} />;
case "webauthn-authenticate.ftl":
return <WebauthnAuthenticate {...{ kcContext, ...commonProps }} />;
return <WebauthnAuthenticate kcContext={kcContext} {...rest} />;
case "login-update-password.ftl":
return <LoginUpdatePassword {...{ kcContext, ...commonProps }} />;
return <LoginUpdatePassword kcContext={kcContext} {...rest} />;
case "login-update-profile.ftl":
return <LoginUpdateProfile {...{ kcContext, ...commonProps }} />;
return <LoginUpdateProfile kcContext={kcContext} {...rest} />;
case "login-idp-link-confirm.ftl":
return <LoginIdpLinkConfirm {...{ kcContext, ...commonProps }} />;
return <LoginIdpLinkConfirm kcContext={kcContext} {...rest} />;
case "login-idp-link-email.ftl":
return <LoginIdpLinkEmail {...{ kcContext, ...commonProps }} />;
return <LoginIdpLinkEmail kcContext={kcContext} {...rest} />;
case "login-page-expired.ftl":
return <LoginPageExpired {...{ kcContext, ...commonProps }} />;
return <LoginPageExpired kcContext={kcContext} {...rest} />;
case "login-config-totp.ftl":
return <LoginConfigTotp {...{ kcContext, ...commonProps }} />;
return <LoginConfigTotp kcContext={kcContext} {...rest} />;
case "logout-confirm.ftl":
return <LogoutConfirm {...{ kcContext, ...commonProps }} />;
return <LogoutConfirm kcContext={kcContext} {...rest} />;
case "update-user-profile.ftl":
return <UpdateUserProfile {...{ kcContext, ...commonProps }} />;
return <UpdateUserProfile kcContext={kcContext} {...rest} />;
case "idp-review-user-profile.ftl":
return <IdpReviewUserProfile {...{ kcContext, ...commonProps }} />;
return <IdpReviewUserProfile kcContext={kcContext} {...rest} />;
}
})()}
</Suspense>

2
src/Template.tsx
View File

@ -4,7 +4,7 @@ import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
import { type TemplateProps, defaultTemplateClasses } from "keycloakify/TemplateProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
type KcContext = import("./kcContext/KcContext").KcContext.Common;
import type { I18nBase as I18n } from "./i18n";
import type { I18n } from "./i18n";
export default function Template(props: TemplateProps<KcContext, I18n>) {
const {

6
src/TemplateProps.ts
View File

@ -1,10 +1,10 @@
import type { ReactNode } from "react";
import type { KcContext } from "keycloakify/kcContext";
import type { I18nBase } from "keycloakify/i18n";
import type { I18n } from "keycloakify/i18n";
export type TemplateProps<KcContext extends KcContext.Common, I18n extends I18nBase> = {
export type TemplateProps<KcContext extends KcContext.Common, I18nExtended extends I18n> = {
kcContext: KcContext;
i18n: I18n;
i18n: I18nExtended;
doUseDefaultCss: boolean;
classes?: Partial<Record<TemplateClassKey, string>>;

29
src/i18n/i18n.tsx
View File

@ -19,7 +19,7 @@ assert<KcContext extends KcContextLike ? true : false>();
export type MessageKeyBase = keyof typeof baseMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
export type I18n<MessageKey extends string> = {
export type GenericI18n<MessageKey extends string> = {
/**
* e.g: "en", "fr", "zh-CN"
*
@ -67,21 +67,20 @@ export type I18n<MessageKey extends string> = {
advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
};
export type I18nBase = I18n<MessageKeyBase>;
export type I18n = GenericI18n<MessageKeyBase>;
export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
export function useI18n<ExtraMessageKey extends string = never>(params: {
kcContext: KcContextLike;
extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
doSkip: boolean;
}): I18n<MessageKeyBase | ExtraMessageKey> | null {
const { kcContext, extraMessages, doSkip } = params;
}): GenericI18n<MessageKeyBase | ExtraMessageKey> | null {
const { kcContext, extraMessages } = params;
const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
const refHasStartedFetching = useRef(false);
useEffect(() => {
if (doSkip || refHasStartedFetching.current) {
if (refHasStartedFetching.current) {
return;
}
@ -181,22 +180,10 @@ export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params:
return i18n ?? null;
}
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> | null {
return useI18n_private({
...params,
"doSkip": false
});
}
function createI18nTranslationFunctions<MessageKey extends string>(params: {
fallbackMessages: Record<MessageKey, string>;
messages: Record<MessageKey, string>;
}): Pick<I18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
const { fallbackMessages, messages } = params;
function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {

4
src/index.ts
View File

@ -1,3 +1,3 @@
import KcApp from "./KcApp";
import Fallback from "./Fallback";
export default KcApp;
export default Fallback;

2
src/lib/useFormValidation.tsx
View File

@ -6,7 +6,7 @@ import type { Attribute, Validators } from "keycloakify/kcContext";
import { useConstCallback } from "keycloakify/tools/useConstCallback";
import { emailRegexp } from "keycloakify/tools/emailRegExp";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
/**
* NOTE: The attributesWithPassword returned is actually augmented with

2
src/pages/Error.tsx
View File

@ -1,6 +1,6 @@
import { type PageProps } from "keycloakify/pages/PageProps";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function Error(props: PageProps<Extract<KcContext, { pageId: "error.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/IdpReviewUserProfile.tsx
View File

@ -4,7 +4,7 @@ import { UserProfileFormFields } from "./shared/UserProfileCommons";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function IdpReviewUserProfile(props: PageProps<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/Info.tsx
View File

@ -1,7 +1,7 @@
import { assert } from "../tools/assert";
import { type PageProps } from "keycloakify/pages/PageProps";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/Login.tsx
View File

@ -4,7 +4,7 @@ import { useConstCallback } from "../tools/useConstCallback";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginConfigTotp.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginIdpLinkConfirm.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginIdpLinkEmail.tsx
View File

@ -1,6 +1,6 @@
import type { KcContext } from "keycloakify/kcContext";
import { type PageProps } from "keycloakify/pages/PageProps";
import type { I18nBase as I18n } from "keycloakify/i18n";
import type { I18n } from "keycloakify/i18n";
export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginOtp.tsx
View File

@ -5,7 +5,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginPageExpired.tsx
View File

@ -1,6 +1,6 @@
import { type PageProps } from "keycloakify/pages/PageProps";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginPassword.tsx
View File

@ -5,7 +5,7 @@ import type { FormEventHandler } from "react";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginPassword(props: PageProps<Extract<KcContext, { "pageId": "login-password.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginResetPassword.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginUpdatePassword.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginUpdatePassword(props: PageProps<Extract<KcContext, { pageId: "login-update-password.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginUpdateProfile.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginUpdateProfile(props: PageProps<Extract<KcContext, { pageId: "login-update-profile.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginUsername.tsx
View File

@ -5,7 +5,7 @@ import type { FormEventHandler } from "react";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LoginVerifyEmail.tsx
View File

@ -1,6 +1,6 @@
import { type PageProps } from "keycloakify/pages/PageProps";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/LogoutConfirm.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

6
src/pages/PageProps.ts
View File

@ -1,11 +1,11 @@
import type { LazyExoticComponent } from "react";
import type { I18nBase } from "keycloakify/i18n";
import type { I18n } from "keycloakify/i18n";
import { type TemplateProps, type TemplateClassKey, defaultTemplateClasses } from "keycloakify/TemplateProps";
export type PageProps<KcContext, I18n extends I18nBase> = {
export type PageProps<KcContext, I18nExtended extends I18n> = {
Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
kcContext: KcContext;
i18n: I18n;
i18n: I18nExtended;
doUseDefaultCss: boolean;
classes?: Partial<Record<TemplateClassKey | ClassKey, string>>;
};

2
src/pages/Register.tsx
View File

@ -2,7 +2,7 @@ import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/RegisterUserProfile.tsx
View File

@ -4,7 +4,7 @@ import { UserProfileFormFields } from "./shared/UserProfileCommons";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function RegisterUserProfile(props: PageProps<Extract<KcContext, { pageId: "register-user-profile.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/Terms.tsx
View File

@ -5,7 +5,7 @@ import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import { evtTermMarkdown } from "keycloakify/lib/useDownloadTerms";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/UpdateUserProfile.tsx
View File

@ -4,7 +4,7 @@ import { UserProfileFormFields } from "./shared/UserProfileCommons";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function UpdateUserProfile(props: PageProps<Extract<KcContext, { pageId: "update-user-profile.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/WebauthnAuthenticate.tsx
View File

@ -6,7 +6,7 @@ import { useConstCallback } from "../tools/useConstCallback";
import { type PageProps, defaultClasses } from "keycloakify/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
import type { KcContext } from "../kcContext";
import type { I18nBase as I18n } from "../i18n";
import type { I18n } from "../i18n";
export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

2
src/pages/shared/UserProfileCommons.tsx
View File

@ -3,7 +3,7 @@ import type { ClassKey } from "keycloakify/pages/PageProps";
import { clsx } from "keycloakify/tools/clsx";
import { useFormValidation } from "keycloakify/lib/useFormValidation";
import type { Attribute } from "keycloakify/kcContext";
import type { I18nBase as I18n } from "../../i18n";
import type { I18n } from "../../i18n";
export type UserProfileFormFieldsProps = {
kcContext: Parameters<typeof useFormValidation>[0]["kcContext"];