Bump version

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "11.3.28",
+    "version": "11.3.31",
     "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

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,7 +52,6 @@ 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}`)}
@@ -73,7 +72,6 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                                         </li>
                                     )}
                                 </ul>
-                                </p>
                             </li>
                         </>
                     ) : (