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

Includes in the kcContext missing realm defined translations #582

Browse Source
This commit is contained in:
Joseph Garrone 2024-07-10 22:18:24 +02:00
parent ca7821cfad
commit 24bb4902c2
12 changed files with 157 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl
View File

@ -42,37 +42,84 @@ if( kcContext.resourceUrl && !kcContext.url ){
enumerable: false enumerable: false
}); });
} }
kcContext["x-keycloakify"] = {}; kcContext["x-keycloakify"] = {
messages: {}
};
<#if profile?? && profile.attributes??> <#if profile?? && profile.attributes??>
kcContext["x-keycloakify"].realmMessageBundleUserProfile = { {
<#list profile.attributes as attribute> var messages = {
<#if attribute.annotations?? && attribute.displayName??> <#list profile.attributes as attribute>
"${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"), <#if attribute.displayName??>
</#if> "${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"),
<#if attribute.annotations.inputHelperTextBefore??> </#if>
"${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"), <#if attribute.annotations??>
</#if> <#if attribute.annotations.inputHelperTextBefore??>
<#if attribute.annotations.inputHelperTextAfter??> "${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"),
"${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"), </#if>
</#if> <#if attribute.annotations.inputHelperTextAfter??>
<#if attribute.annotations.inputTypePlaceholder??> "${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"),
"${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"), </#if>
</#if> <#if attribute.annotations.inputTypePlaceholder??>
<!-- Loop through the options that are in attribute.validators.options.options --> "${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"),
<#if ( </#if>
attribute.annotations.inputOptionLabelsI18nPrefix?? && <!-- Loop through the options that are in attribute.validators.options.options -->
attribute.validators?? && <#if (
attribute.validators.options?? attribute.annotations.inputOptionLabelsI18nPrefix?? &&
)> attribute.validators?? &&
<#list attribute.validators.options.options as option> attribute.validators.options??
"${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}": decodeHtmlEntities("${msg(attribute.annotations.inputOptionLabelsI18nPrefix + "." + option)?js_string}"), )>
</#list> <#list attribute.validators.options.options as option>
</#if> "${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}": decodeHtmlEntities("${msg(attribute.annotations.inputOptionLabelsI18nPrefix + "." + option)?js_string}"),
</#list> </#list>
}; </#if>
</#if>
</#list>
};
Object.assign(kcContext["x-keycloakify"].messages, messages);
}
</#if> </#if>
<#if pageId == "terms.ftl" || termsAcceptanceRequired?? && termsAcceptanceRequired> <#if pageId == "terms.ftl" || termsAcceptanceRequired?? && termsAcceptanceRequired>
kcContext["x-keycloakify"].realmMessageBundleTermsText= decodeHtmlEntities("${msg("termsText")?js_string}"); kcContext["x-keycloakify"].messages["termsText"]= decodeHtmlEntities("${msg("termsText")?js_string}");
</#if>
<#if auth?? && auth.authenticationSelections??>
{
var messages = {
<#list auth.authenticationSelections as authenticationSelection>
<#if authenticationSelection.displayName??>
"${authenticationSelection.displayName}": decodeHtmlEntities("${advancedMsg(authenticationSelection.displayName)?js_string}"),
</#if>
<#if authenticationSelection.helpText??>
"${authenticationSelection.helpText}": decodeHtmlEntities("${advancedMsg(authenticationSelection.helpText)?js_string}"),
</#if>
</#list>
};
Object.assign(kcContext["x-keycloakify"].messages, messages);
}
</#if>
<#if themeType == "login" && pageId == "info.ftl" && requiredActions??>
{
var messages = {
<#list requiredActions as requiredAction>
"requiredAction.${requiredAction}": decodeHtmlEntities("${advancedMsg("requiredAction." + requiredAction)?js_string}"),
</#list>
};
Object.assign(kcContext["x-keycloakify"].messages, messages);
}
</#if>
<#if authenticators?? && authenticators.authenticators??>
{
var messages = {
<#list authenticators.authenticators as authenticator>
"${authenticator.label}": decodeHtmlEntities("${advancedMsg(authenticator.label)?js_string}"),
<#if authenticator.transports?? && authenticator.transports.displayNameProperties??>
<#list authenticator.transports.displayNameProperties as displayNameProperty>
"${displayNameProperty}": decodeHtmlEntities("${advancedMsg(displayNameProperty)?js_string}"),
</#list>
</#if>
</#list>
};
Object.assign(kcContext["x-keycloakify"].messages, messages);
}
</#if> </#if>
attributes_to_attributesByName: { attributes_to_attributesByName: {
if( !kcContext.profile ){ if( !kcContext.profile ){

33
src/login/KcContext/KcContext.ts
View File

@ -1,9 +1,8 @@
import type { ThemeType, LoginThemePageId } from "keycloakify/bin/shared/constants"; import type { ThemeType, LoginThemePageId } from "keycloakify/bin/shared/constants";
import type { ExtractAfterStartingWith } from "keycloakify/tools/ExtractAfterStartingWith";
import type { ValueOf } from "keycloakify/tools/ValueOf"; import type { ValueOf } from "keycloakify/tools/ValueOf";
import { assert } from "tsafe/assert"; import { assert } from "tsafe/assert";
import type { Equals } from "tsafe"; import type { Equals } from "tsafe";
import type { MessageKey } from "../i18n/i18n"; import type { ClassKey } from "keycloakify/login/TemplateProps";
export type ExtendKcContext< export type ExtendKcContext<
KcContextExtension extends { properties?: Record<string, string | undefined> }, KcContextExtension extends { properties?: Record<string, string | undefined> },
@ -155,8 +154,7 @@ export declare namespace KcContext {
}; };
properties: {}; properties: {};
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleUserProfile: Record<string, string> | undefined; messages: Record<string, string>;
realmMessageBundleTermsText: string | undefined;
}; };
}; };
@ -221,7 +219,7 @@ export declare namespace KcContext {
export type Info = Common & { export type Info = Common & {
pageId: "info.ftl"; pageId: "info.ftl";
messageHeader?: string; messageHeader?: string;
requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[]; requiredActions?: string[];
skipLink: boolean; skipLink: boolean;
pageRedirectUri?: string; pageRedirectUri?: string;
actionUri?: string; actionUri?: string;
@ -384,7 +382,7 @@ export declare namespace KcContext {
credentialId: string; credentialId: string;
transports: { transports: {
iconClass: string; iconClass: string;
displayNameProperties?: MessageKey[]; displayNameProperties?: string[];
}; };
label: string; label: string;
createdAt: string; createdAt: string;
@ -501,26 +499,9 @@ export declare namespace KcContext {
export namespace SelectAuthenticator { export namespace SelectAuthenticator {
export type AuthenticationSelection = { export type AuthenticationSelection = {
authExecId: string; authExecId: string;
displayName: displayName: string;
| "otp-display-name" helpText: string;
| "password-display-name" iconCssClass?: ClassKey;
| "auth-username-form-display-name"
| "auth-username-password-form-display-name"
| "webauthn-display-name"
| "webauthn-passwordless-display-name";
helpText:
| "otp-help-text"
| "password-help-text"
| "auth-username-form-help-text"
| "auth-username-password-form-help-text"
| "webauthn-help-text"
| "webauthn-passwordless-help-text";
iconCssClass?:
| "kcAuthenticatorDefaultClass"
| "kcAuthenticatorPasswordClass"
| "kcAuthenticatorOTPClass"
| "kcAuthenticatorWebAuthnClass"
| "kcAuthenticatorWebAuthnPasswordlessClass";
}; };
} }

3
src/login/KcContext/kcContextMocks.ts
View File

@ -162,8 +162,7 @@ export const kcContextCommonMock: KcContext.Common = {
isAppInitiatedAction: false, isAppInitiatedAction: false,
properties: {}, properties: {},
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleUserProfile: undefined, messages: {}
realmMessageBundleTermsText: undefined
} }
}; };

36
src/login/i18n/i18n.tsx
View File

@ -11,8 +11,7 @@ export type KcContextLike = {
supported: { languageTag: string; url: string; label: string }[]; supported: { languageTag: string; url: string; label: string }[];
}; };
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleUserProfile: Record<string, string> | undefined; messages: Record<string, string>;
realmMessageBundleTermsText: string | undefined;
}; };
}; };
@ -131,8 +130,7 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
messages_fallbackLanguage, messages_fallbackLanguage,
messageBundle_fallbackLanguage: messageBundle[fallbackLanguageTag], messageBundle_fallbackLanguage: messageBundle[fallbackLanguageTag],
messageBundle_currentLanguage: messageBundle[partialI18n.currentLanguageTag], messageBundle_currentLanguage: messageBundle[partialI18n.currentLanguageTag],
realmMessageBundleUserProfile: kcContext["x-keycloakify"].realmMessageBundleUserProfile, messageBundle_realm: kcContext["x-keycloakify"].messages
realmMessageBundleTermsText: kcContext["x-keycloakify"].realmMessageBundleTermsText
}); });
const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag; const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
@ -179,10 +177,9 @@ function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraM
messages_fallbackLanguage: Record<MessageKey, string>; messages_fallbackLanguage: Record<MessageKey, string>;
messageBundle_fallbackLanguage: Record<ExtraMessageKey, string> | undefined; messageBundle_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
messageBundle_currentLanguage: Partial<Record<ExtraMessageKey, string>> | undefined; messageBundle_currentLanguage: Partial<Record<ExtraMessageKey, string>> | undefined;
realmMessageBundleUserProfile: Record<string, string> | undefined; messageBundle_realm: Record<string, string>;
realmMessageBundleTermsText: string | undefined;
}) { }) {
const { messageBundle_currentLanguage, realmMessageBundleUserProfile, realmMessageBundleTermsText } = params; const { messageBundle_currentLanguage, messageBundle_realm } = params;
const messages_fallbackLanguage = { const messages_fallbackLanguage = {
...params.messages_fallbackLanguage, ...params.messages_fallbackLanguage,
@ -201,12 +198,21 @@ function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraM
const { key, args, doRenderAsHtml } = props; const { key, args, doRenderAsHtml } = props;
const messageOrUndefined: string | undefined = (() => { const messageOrUndefined: string | undefined = (() => {
const messageOrUndefined = (messages_currentLanguage as any)[key] ?? (messages_fallbackLanguage as any)[key]; terms_text: {
if (key !== "termsText") {
break terms_text;
}
const termsTextMessage = messageBundle_realm[key];
if (key === "termsText" && realmMessageBundleTermsText !== undefined) { if (termsTextMessage === undefined) {
return realmMessageBundleTermsText; break terms_text;
}
return termsTextMessage;
} }
const messageOrUndefined = (messages_currentLanguage as any)[key] ?? (messages_fallbackLanguage as any)[key];
return messageOrUndefined; return messageOrUndefined;
})(); })();
@ -259,15 +265,11 @@ function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraM
function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string { function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
const { key, args, doRenderAsHtml } = props; const { key, args, doRenderAsHtml } = props;
user_profile: { realm_messages: {
if (realmMessageBundleUserProfile === undefined) { const resolvedMessage = messageBundle_realm[key] ?? messageBundle_realm["${" + key + "}"];
break user_profile;
}
const resolvedMessage = realmMessageBundleUserProfile[key] ?? realmMessageBundleUserProfile["${" + key + "}"];
if (resolvedMessage === undefined) { if (resolvedMessage === undefined) {
break user_profile; break realm_messages;
} }
return doRenderAsHtml ? ( return doRenderAsHtml ? (

4
src/login/pages/Info.tsx
View File

@ -5,7 +5,7 @@ import type { I18n } from "../i18n";
export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) { export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { msgStr, msg } = i18n; const { advancedMsgStr, msg } = i18n;
const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext; const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
@ -34,7 +34,7 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
if (requiredActions) { if (requiredActions) {
html += "<b>"; html += "<b>";
html += requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(","); html += requiredActions.map(requiredAction => advancedMsgStr(`requiredAction.${requiredAction}`)).join(",");
html += "</b>"; html += "</b>";
} }

8
src/login/pages/SelectAuthenticator.tsx
View File

@ -8,7 +8,7 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
const { url, auth } = kcContext; const { url, auth } = kcContext;
const { kcClsx } = getKcClsx({ doUseDefaultCss, classes }); const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
const { msg } = i18n; const { msg, advancedMsg } = i18n;
return ( return (
<Template <Template
@ -30,11 +30,11 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
value={authenticationSelection.authExecId} value={authenticationSelection.authExecId}
> >
<div className={kcClsx("kcSelectAuthListItemIconClass")}> <div className={kcClsx("kcSelectAuthListItemIconClass")}>
<i className={kcClsx(authenticationSelection.iconCssClass, "kcSelectAuthListItemIconPropertyClass")} /> <i className={kcClsx("kcSelectAuthListItemIconPropertyClass", authenticationSelection.iconCssClass)} />
</div> </div>
<div className={kcClsx("kcSelectAuthListItemBodyClass")}> <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
<div className={kcClsx("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div> <div className={kcClsx("kcSelectAuthListItemHeadingClass")}>{advancedMsg(authenticationSelection.displayName)}</div>
<div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div> <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>{advancedMsg(authenticationSelection.helpText)}</div>
</div> </div>
<div className={kcClsx("kcSelectAuthListItemFillClass")} /> <div className={kcClsx("kcSelectAuthListItemFillClass")} />
<div className={kcClsx("kcSelectAuthListItemArrowClass")}> <div className={kcClsx("kcSelectAuthListItemArrowClass")}>

10
src/login/pages/WebauthnAuthenticate.tsx
View File

@ -204,13 +204,13 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
className={kcClsx("kcSelectAuthListItemDescriptionClass")} className={kcClsx("kcSelectAuthListItemDescriptionClass")}
> >
{authenticator.transports.displayNameProperties {authenticator.transports.displayNameProperties
.map((nameProperty, i, arr) => ({ .map((displayNameProperty, i, arr) => ({
nameProperty, displayNameProperty,
hasNext: i !== arr.length - 1 hasNext: i !== arr.length - 1
})) }))
.map(({ nameProperty, hasNext }) => ( .map(({ displayNameProperty, hasNext }) => (
<Fragment key={nameProperty}> <Fragment key={displayNameProperty}>
<span>{msg(nameProperty)}</span> {advancedMsg(displayNameProperty)}
{hasNext && <span>, </span>} {hasNext && <span>, </span>}
</Fragment> </Fragment>
))} ))}

4
src/tools/ExtractAfterStartingWith.ts
View File

@ -1,4 +0,0 @@
export type ExtractAfterStartingWith<
Prefix extends string,
StrEnum
> = StrEnum extends `${Prefix}${infer U}` ? U : never;

9
stories/login/pages/Info.stories.tsx
View File

@ -43,9 +43,14 @@ export const WithRequiredActions: Story = {
<KcPageStory <KcPageStory
kcContext={{ kcContext={{
message: { message: {
summary: "Server message" summary: "Required actions: "
}, },
requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"] requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL", "CUSTOM_ACTION"],
"x-keycloakify": {
messages: {
"requiredAction.CUSTOM_ACTION": "Custom action"
}
}
}} }}
/> />
) )

8
stories/login/pages/Register.stories.tsx
View File

@ -69,7 +69,7 @@ export const WithRestrictedToMITStudents: Story = {
} }
}, },
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleUserProfile: { messages: {
"${profile.attributes.email.inputHelperTextBefore}": "Please use your MIT or Berkeley email.", "${profile.attributes.email.inputHelperTextBefore}": "Please use your MIT or Berkeley email.",
"${profile.attributes.email.pattern.error}": "${profile.attributes.email.pattern.error}":
"This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email." "This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email."
@ -103,7 +103,7 @@ export const WithFavoritePet: Story = {
} }
}, },
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleUserProfile: { messages: {
"${profile.attributes.favoritePet}": "Favorite Pet", "${profile.attributes.favoritePet}": "Favorite Pet",
"${profile.attributes.favoritePet.options.cat}": "Fluffy Cat", "${profile.attributes.favoritePet.options.cat}": "Fluffy Cat",
"${profile.attributes.favoritePet.options.dog}": "Loyal Dog", "${profile.attributes.favoritePet.options.dog}": "Loyal Dog",
@ -177,7 +177,9 @@ export const WithTermsAcceptance: Story = {
kcContext={{ kcContext={{
termsAcceptanceRequired: true, termsAcceptanceRequired: true,
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleTermsText: "<a href='https://example.com/terms'>Service Terms of Use</a>" messages: {
termsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
}
} }
}} }}
/> />

26
stories/login/pages/SelectAuthenticator.stories.tsx
View File

@ -41,3 +41,29 @@ export const WithDifferentAuthenticationMethods: Story = {
/> />
) )
}; };
export const WithRealmTranslations: Story = {
render: () => (
<KcPageStory
kcContext={{
auth: {
authenticationSelections: [
{
authExecId: "f0c22855-eda7-4092-8565-0c22f77d2ffb",
displayName: "home-idp-discovery-display-name",
helpText: "home-idp-discovery-help-text",
iconCssClass: "kcAuthenticatorDefaultClass"
}
]
},
["x-keycloakify"]: {
messages: {
"${home-idp-discovery-display-name}": "Home identity provider",
"${home-idp-discovery-help-text}":
"Sign in via your home identity provider which will be automatically determined based on your provided email address."
}
}
}}
/>
)
};

8
stories/login/pages/Terms.stories.tsx
View File

@ -18,7 +18,9 @@ export const Default: Story = {
<KcPageStory <KcPageStory
kcContext={{ kcContext={{
"x-keycloakify": { "x-keycloakify": {
realmMessageBundleTermsText: "<p>My terms in <strong>English</strong></p>" messages: {
termsText: "<p>My terms in <strong>English</strong></p>"
}
} }
}} }}
/> />
@ -34,7 +36,9 @@ export const French: Story = {
}, },
"x-keycloakify": { "x-keycloakify": {
// cSpell: disable // cSpell: disable
realmMessageBundleTermsText: "<p>Mes terme en <strong>Français</strong></p>" messages: {
termsText: "<p>Mes terme en <strong>Français</strong></p>"
}
// cSpell: enable // cSpell: enable
} }
}} }}