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

Fix invalid dom nesting errors

Browse Source
This commit is contained in:
Joseph Garrone 2024-11-21 07:12:23 +01:00
parent 30efd8fcf4
commit 8e4a7fed9e
2 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/login/i18n/withJsx/useI18n.tsx
View File

@ -47,11 +47,25 @@ export function createUseI18n<
function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element { function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
const { htmlString, msgKey } = params; const { htmlString, msgKey } = params;
const htmlString_sanitized = kcSanitize(htmlString);
const Element = (() => {
if (htmlString_sanitized.includes("<") && htmlString_sanitized.includes(">")) {
for (const tagName of ["div", "section", "article", "ul", "ol"]) {
if (htmlString_sanitized.includes(`<${tagName}`)) {
return "div";
}
}
}
return "span";
})();
return ( return (
<div <Element
data-kc-msg={msgKey} data-kc-msg={msgKey}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: kcSanitize(htmlString) __html: htmlString_sanitized
}} }}
/> />
); );
@ -83,7 +97,7 @@ export function createUseI18n<
})(); })();
add_style: { add_style: {
const attributeName = "data-kc-i18n"; const attributeName = "data-kc-msg";
// Check if already exists in head // Check if already exists in head
if (document.querySelector(`style[${attributeName}]`) !== null) { if (document.querySelector(`style[${attributeName}]`) !== null) {
@ -92,7 +106,7 @@ export function createUseI18n<
const styleElement = document.createElement("style"); const styleElement = document.createElement("style");
styleElement.attributes.setNamedItem(document.createAttribute(attributeName)); styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
styleElement.textContent = `[data-kc-msg] { display: inline-block; }`; styleElement.textContent = `div[${attributeName}] { display: inline-block; }`;
document.head.prepend(styleElement); document.head.prepend(styleElement);
} }

38
src/login/pages/LoginConfigTotp.tsx
View File

@ -52,28 +52,26 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
</li> </li>
<li> <li>
<p>{msg("loginTotpManualStep3")}</p> <p>{msg("loginTotpManualStep3")}</p>
<p> <ul>
<ul> <li id="kc-totp-type">
<li id="kc-totp-type"> {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
{msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)} </li>
<li id="kc-totp-algorithm">
{msg("loginTotpAlgorithm")}: {totp.policy.getAlgorithmKey()}
</li>
<li id="kc-totp-digits">
{msg("loginTotpDigits")}: {totp.policy.digits}
</li>
{totp.policy.type === "totp" ? (
<li id="kc-totp-period">
{msg("loginTotpInterval")}: {totp.policy.period}
</li> </li>
<li id="kc-totp-algorithm"> ) : (
{msg("loginTotpAlgorithm")}: {totp.policy.getAlgorithmKey()} <li id="kc-totp-counter">
{msg("loginTotpCounter")}: {totp.policy.initialCounter}
</li> </li>
<li id="kc-totp-digits"> )}
{msg("loginTotpDigits")}: {totp.policy.digits} </ul>
</li>
{totp.policy.type === "totp" ? (
<li id="kc-totp-period">
{msg("loginTotpInterval")}: {totp.policy.period}
</li>
) : (
<li id="kc-totp-counter">
{msg("loginTotpCounter")}: {totp.policy.initialCounter}
</li>
)}
</ul>
</p>
</li> </li>
</> </>
) : ( ) : (