Bump version

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "11.3.27",
+    "version": "11.3.32",
     "description": "Framework to create custom Keycloak UIs",
     "repository": {
         "type": "git",

src/bin/main.ts

@@ -5,6 +5,9 @@ import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
 import * as child_process from "child_process";
 import { assertNoPnpmDlx } from "./tools/assertNoPnpmDlx";
 import { getBuildContext } from "./shared/buildContext";
+import { SemVer } from "./tools/SemVer";
+import { assert, is } from "tsafe/assert";
+import chalk from "chalk";
 
 type CliCommandOptions = {
     projectDirPath: string | undefined;
@@ -80,7 +83,7 @@ program
 program
     .command<{
         port: number | undefined;
-        keycloakVersion: string | undefined;
+        keycloakVersion: string | number | undefined;
         realmJsonFilePath: string | undefined;
     }>({
         name: "start-keycloak",
@@ -134,9 +137,50 @@ program
         handler: async ({ projectDirPath, keycloakVersion, port, realmJsonFilePath }) => {
             const { command } = await import("./start-keycloak");
 
+            validate_keycloak_version: {
+                if (keycloakVersion === undefined) {
+                    break validate_keycloak_version;
+                }
+
+                const isValidVersion = (() => {
+                    if (typeof keycloakVersion === "number") {
+                        return false;
+                    }
+
+                    try {
+                        SemVer.parse(keycloakVersion);
+                    } catch {
+                        return false;
+                    }
+
+                    return;
+                })();
+
+                if (isValidVersion) {
+                    break validate_keycloak_version;
+                }
+
+                console.log(
+                    chalk.red(
+                        [
+                            `Invalid Keycloak version: ${keycloakVersion}`,
+                            "It should be a valid semver version example: 26.0.4"
+                        ].join(" ")
+                    )
+                );
+
+                process.exit(1);
+            }
+
+            assert(is<string | undefined>(keycloakVersion));
+
             await command({
                 buildContext: getBuildContext({ projectDirPath }),
-                cliCommandOptions: { keycloakVersion, port, realmJsonFilePath }
+                cliCommandOptions: {
+                    keycloakVersion,
+                    port,
+                    realmJsonFilePath
+                }
             });
         }
     });
@@ -201,7 +245,7 @@ program
     .command({
         name: "copy-keycloak-resources-to-public",
         description:
-            "(Webpack/Create-React-App only) Copy Keycloak default theme resources to the public directory."
+            "(Internal) Copy Keycloak default theme resources to the public directory."
     })
     .task({
         skip,

src/bin/update-kc-gen.ts

@@ -9,6 +9,16 @@ import { getIsPrettierAvailable, runPrettier } from "./tools/runPrettier";
 export async function command(params: { buildContext: BuildContext }) {
     const { buildContext } = params;
 
+    run_copy_assets_to_public: {
+        if (buildContext.bundler !== "webpack") {
+            break run_copy_assets_to_public;
+        }
+
+        const { command } = await import("./copy-keycloak-resources-to-public");
+
+        await command({ buildContext });
+    }
+
     const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
         commandName: "update-kc-gen",
         buildContext
@@ -52,7 +62,12 @@ export async function command(params: { buildContext: BuildContext }) {
             2
         )};`,
         ``,
-        `type KcContext =`,
+        `/**`,
+        ` * NOTE: Do not import this type except maybe in your entrypoint. `,
+        ` * If you need to import the KcContext import it either from src/login/KcContext.ts or src/account/KcContext.ts.`,
+        ` * Depending on the theme type you are working on.`,
+        ` */`,
+        `export type KcContext =`,
         hasLoginTheme && `    | import("./login/KcContext").KcContext`,
         hasAccountTheme && `    | import("./account/KcContext").KcContext`,
         hasAdminTheme && `    | import("./admin/KcContext").KcContext`,

src/login/i18n/noJsx/getI18n.tsx

@@ -1,5 +1,6 @@
 import "keycloakify/tools/Object.fromEntries";
 import { assert, is } from "tsafe/assert";
+import { extractLastParenthesisContent } from "keycloakify/tools/extractLastParenthesisContent";
 import messages_defaultSet_fallbackLanguage from "../messages_defaultSet/en";
 import { fetchMessages_defaultSet } from "../messages_defaultSet";
 import type { KcContext } from "../../KcContext";
@@ -168,12 +169,10 @@ export function createGetI18n<
                     break from_server;
                 }
 
-                // cspell: disable-next-line
-                // from "Espagnol (Español)" we want to extract "Español"
-                const match = supportedEntry.label.match(/[^(]+\(([^)]+)\)/);
+                const lastParenthesisContent = extractLastParenthesisContent(supportedEntry.label);
 
-                if (match !== null) {
-                    return match[1];
+                if (lastParenthesisContent !== undefined) {
+                    return lastParenthesisContent;
                 }
 
                 return supportedEntry.label;

src/login/i18n/withJsx/useI18n.tsx

@@ -47,11 +47,25 @@ export function createUseI18n<
 
         function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
             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 (
-                <div
+                <Element
                     data-kc-msg={msgKey}
                     dangerouslySetInnerHTML={{
-                        __html: kcSanitize(htmlString)
+                        __html: htmlString_sanitized
                     }}
                 />
             );
@@ -83,7 +97,7 @@ export function createUseI18n<
     })();
 
     add_style: {
-        const attributeName = "data-kc-i18n";
+        const attributeName = "data-kc-msg";
 
         // Check if already exists in head
         if (document.querySelector(`style[${attributeName}]`) !== null) {
@@ -92,7 +106,7 @@ export function createUseI18n<
 
         const styleElement = document.createElement("style");
         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);
     }
 

src/login/pages/LoginConfigTotp.tsx

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

src/tools/extractLastParenthesisContent.ts

@@ -0,0 +1,43 @@
+/**
+ * "Hello (world)" => "world"
+ * "Hello (world) (foo)" => "foo"
+ * "Hello (world (foo))" => "world (foo)"
+ */
+export function extractLastParenthesisContent(str: string): string | undefined {
+    const chars: string[] = [];
+
+    for (const char of str) {
+        chars.push(char);
+    }
+
+    const extractedChars: string[] = [];
+    let openingCount = 0;
+
+    loop_through_char: for (let i = chars.length - 1; i >= 0; i--) {
+        const char = chars[i];
+
+        if (i === chars.length - 1) {
+            if (char !== ")") {
+                return undefined;
+            }
+
+            continue;
+        }
+
+        switch (char) {
+            case ")":
+                openingCount++;
+                break;
+            case "(":
+                if (openingCount === 0) {
+                    return extractedChars.join("");
+                }
+                openingCount--;
+                break;
+        }
+
+        extractedChars.unshift(char);
+    }
+
+    return undefined;
+}