diff options
| -rw-r--r-- | .storybook/data.ts | 20 | ||||
| -rw-r--r-- | src/keycloak-theme/kcContext.ts | 23 |
2 files changed, 16 insertions, 27 deletions
diff --git a/.storybook/data.ts b/.storybook/data.ts index a073225..337e207 100644 --- a/.storybook/data.ts +++ b/.storybook/data.ts @@ -1,28 +1,16 @@ import { KcContextBase, getKcContext } from "keycloakify/lib/getKcContext"; import type { DeepPartial } from "keycloakify/lib/tools/DeepPartial"; import type { ExtendsKcContextBase } from "keycloakify/lib/getKcContext/getKcContextFromWindow"; +import type { KcContextExtension } from "keycloak-theme/kcContext"; -type KcContextExt = - | { pageId: "my-extra-page-1.ftl"; } - | { pageId: "my-extra-page-2.ftl"; someCustomValue: string; } - // NOTE: register.ftl is deprecated in favor of register-user-profile.ftl - // but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting - // keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here. - | { pageId: "register.ftl"; authorizedMailDomains: string[]; } export const useKcStoryData = (mockData: ( - { pageId: KcContextBase['pageId'] | KcContextExt['pageId'] } & DeepPartial<ExtendsKcContextBase<KcContextExt>> + { pageId: KcContextBase['pageId'] | KcContextExtension['pageId'] } & DeepPartial<ExtendsKcContextBase<KcContextExtension>> )) => { - - const { kcContext } = getKcContext<KcContextExt>({ - mockPageId: mockData.pageId, - mockData: [mockData] - }) - if (!kcContext) throw new Error("no kcContext") - return { kcContext } + const { kcContext } = getKcContext<KcContextExtension>({ mockPageId: mockData.pageId, mockData: [mockData] }) + return { kcContext: kcContext as NonNullable<typeof kcContext> } } - export const socialProviders = [ { loginUrl: 'google', alias: 'google', providerId: 'google', displayName: 'Google' }, { loginUrl: 'microsoft', alias: 'microsoft', providerId: 'microsoft', displayName: 'Microsoft' }, diff --git a/src/keycloak-theme/kcContext.ts b/src/keycloak-theme/kcContext.ts index ad7ab6d..078efeb 100644 --- a/src/keycloak-theme/kcContext.ts +++ b/src/keycloak-theme/kcContext.ts @@ -1,11 +1,6 @@ import { getKcContext } from "keycloakify/lib/getKcContext"; -//NOTE: In most of the cases you do not need to overload the KcContext, you can -// just call getKcContext(...) without type arguments. -// You want to overload the KcContext only if: -// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains) -// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page -export const { kcContext } = getKcContext< +export type KcContextExtension = // NOTE: A 'keycloakify' field must be added // in the package.json to generate theses extra pages // https://docs.keycloakify.dev/build-options#keycloakify.extrapages @@ -14,8 +9,14 @@ export const { kcContext } = getKcContext< // NOTE: register.ftl is deprecated in favor of register-user-profile.ftl // but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting // keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here. - | { pageId: "register.ftl"; authorizedMailDomains: string[]; } ->({ + | { pageId: "register.ftl"; authorizedMailDomains: string[]; }; + +//NOTE: In most of the cases you do not need to overload the KcContext, you can +// just call getKcContext(...) without type arguments. +// You want to overload the KcContext only if: +// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains) +// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page +export const { kcContext } = getKcContext<KcContextExtension>({ // Uncomment to test the login page for development. //mockPageId: "login.ftl", mockData: [ @@ -83,12 +84,12 @@ export const { kcContext } = getKcContext< ], // Simulate we got an error with the email field messagesPerField: { - printIfExists: <T>(fieldName: string, className: T) => { console.log({ fieldName}); return fieldName === "email" ? className : undefined; }, - existsError: (fieldName: string)=> fieldName === "email", + printIfExists: <T>(fieldName: string, className: T) => { console.log({ fieldName }); return fieldName === "email" ? className : undefined; }, + existsError: (fieldName: string) => fieldName === "email", get: (fieldName: string) => `Fake error for ${fieldName}`, exists: (fieldName: string) => fieldName === "email" }, - + } ] }); |