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

Handle formatting in translation function

Browse Source
This commit is contained in:
Joseph Garrone
2021-03-01 13:55:58 +01:00
parent 0924a42341
commit 34902b54e4
3 changed files with 156 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/lib/Template.tsx Normal file
View File

@ -0,0 +1,126 @@
/*
export function Template() {
return (
<div className="kcLoginClass">
<div id="kc-header" className="kcHeaderClass">
<div id="kc-header-wrapper" className="kcHeaderWrapperClass">
${kcSanitize(msg("loginTitleHtml", (realm.displayNameHtml!'')))?no_esc}
</div>
</div>
<div class="${properties.kcFormCardClass!} <#if displayWide>${properties.kcFormCardAccountClass!}</#if>">
<header class="${properties.kcFormHeaderClass!}">
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div id="kc-locale">
<div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
<div class="kc-dropdown" id="kc-locale-dropdown">
<a href="#" id="kc-current-locale-link">${locale.current}</a>
<ul>
<#list locale.supported as l>
<li class="kc-dropdown-item"><a href="${l.url}">${l.label}</a></li>
</#list>
</ul>
</div>
</div>
</div>
</#if>
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
<#if displayRequiredFields>
<div class="${properties.kcContentWrapperClass!}">
<div class="${properties.kcLabelWrapperClass!} subtitle">
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
</div>
<div class="col-md-10">
<h1 id="kc-page-title"><#nested "header"></h1>
</div>
</div>
<#else>
<h1 id="kc-page-title"><#nested "header"></h1>
</#if>
<#else>
<#if displayRequiredFields>
<div class="${properties.kcContentWrapperClass!}">
<div class="${properties.kcLabelWrapperClass!} subtitle">
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
</div>
<div class="col-md-10">
<#nested "show-username">
<div class="${properties.kcFormGroupClass!}">
<div id="kc-username">
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
<a id="reset-login" href="${url.loginRestartFlowUrl}">
<div class="kc-login-tooltip">
<i class="${properties.kcResetFlowIcon!}"></i>
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
</div>
</a>
</div>
</div>
</div>
</div>
<#else>
<#nested "show-username">
<div class="${properties.kcFormGroupClass!}">
<div id="kc-username">
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
<a id="reset-login" href="${url.loginRestartFlowUrl}">
<div class="kc-login-tooltip">
<i class="${properties.kcResetFlowIcon!}"></i>
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
</div>
</a>
</div>
</div>
</#if>
</#if>
</header>
<div id="kc-content">
<div id="kc-content-wrapper">
<#-- App-initiated actions should not see warning messages about the need to complete the action -->
<#-- during login. -->
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<div class="alert alert-${message.type}">
<#if message.<span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
<#if message.<span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
<#if message.<span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
<#if message.<span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
<span class="kc-feedback-text">${kcSanitize(message.summary) ? no_esc}</span>
</div>
</#if >
<#nested "form" >
<#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent >
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" <#if displayWide>class="${properties.kcContentWrapperClass!}"</#if> >
<div <#if displayWide>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if> >
<div class="${properties.kcFormGroupClass!}">
<input type="hidden" name="tryAnotherWay" value="on" />
<a href="#" id="try-another-way" onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
</div>
</div >
</form >
</#if >
<#if displayInfo>
<div id="kc-info" class="${properties.kcSignUpClass!}">
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
<#nested "info">
</div>
</div>
</#if>
</div >
</div >
</div >
</div >
);
}
*/
export {};

28
src/lib/i18n/useKeycloakTranslation.ts
View File

@ -1,28 +0,0 @@
import { useKeycloakLanguage } from "./useKeycloakLanguage";
import { messages } from "./generated_messages/login";
import { useConstCallback } from "powerhooks";
export type MessageKey = keyof typeof messages["en"]
export function useKeycloakThemeTranslation() {
const { keycloakLanguage } = useKeycloakLanguage();
const t = useConstCallback(
(key: MessageKey): string => {
const out: string | undefined = messages[keycloakLanguage as any as "en"][key];
if (out !== undefined) {
return out;
}
return messages["en"][key];
}
);
return { t };
}

30
src/lib/i18n/useKeycloakTranslation.tsx Normal file
View File

@ -0,0 +1,30 @@
import { useKeycloakLanguage } from "./useKeycloakLanguage";
import { messages } from "./generated_messages/login";
import { useConstCallback } from "powerhooks";
import type { ReactNode } from "react";
export type MessageKey = keyof typeof messages["en"]
export function useKeycloakThemeTranslation() {
const { keycloakLanguage } = useKeycloakLanguage();
const t = useConstCallback(
(key: MessageKey, ...args: string[]): ReactNode => {
let out: string = messages[keycloakLanguage as any as "en"][key] ?? messages["en"][key];
args.forEach((arg, i)=>
out= out.replace(new RegExp(`\\{${i}\\}`, "g"), arg)
);
return <span className={key} dangerouslySetInnerHTML={{ "__html": out }} />;
}
);
return { t };
}