Bump version

docs: add tripheo0412 as a contributor for doc

.all-contributorsrc

@@ -309,6 +309,24 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "zvn2060",
+      "name": "HI_OuO",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45450852?v=4",
+      "profile": "https://github.com/zvn2060",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "tripheo0412",
+      "name": "Tri Hoang",
+      "avatar_url": "https://avatars.githubusercontent.com/u/25382052?v=4",
+      "profile": "https://github.com/tripheo0412",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -165,6 +165,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/luca-peruzzo"><img src="https://avatars.githubusercontent.com/u/69015314?v=4?s=100" width="100px;" alt="Luca Peruzzo"/><br /><sub><b>Luca Peruzzo</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=luca-peruzzo" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=luca-peruzzo" title="Tests">⚠️</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/nima70"><img src="https://avatars.githubusercontent.com/u/5094767?v=4?s=100" width="100px;" alt="Nima Shokouhfar"/><br /><sub><b>Nima Shokouhfar</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=nima70" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=nima70" title="Tests">⚠️</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://mruder.dev"><img src="https://avatars.githubusercontent.com/u/18495294?v=4?s=100" width="100px;" alt="Marvin A. Ruder"/><br /><sub><b>Marvin A. Ruder</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/issues?q=author%3Amarvinruder" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/zvn2060"><img src="https://avatars.githubusercontent.com/u/45450852?v=4?s=100" width="100px;" alt="HI_OuO"/><br /><sub><b>HI_OuO</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=zvn2060" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tripheo0412"><img src="https://avatars.githubusercontent.com/u/25382052?v=4?s=100" width="100px;" alt="Tri Hoang"/><br /><sub><b>Tri Hoang</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=tripheo0412" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "11.3.23",
+    "version": "11.3.31",
     "description": "Framework to create custom Keycloak UIs",
     "repository": {
         "type": "git",
@@ -64,7 +64,7 @@
     ],
     "homepage": "https://www.keycloakify.dev",
     "dependencies": {
-        "tsafe": "^1.7.5"
+        "tsafe": "^1.8.5"
     },
     "devDependencies": {
         "@babel/core": "^7.24.5",
@@ -95,14 +95,14 @@
         "cli-select": "^1.1.2",
         "dompurify": "^3.1.6",
         "eslint-plugin-storybook": "^0.6.7",
-        "evt": "^2.5.7",
+        "evt": "^2.5.8",
         "html-entities": "^2.5.2",
         "husky": "^4.3.8",
         "isomorphic-dompurify": "^2.15.0",
         "lint-staged": "^11.0.0",
         "magic-string": "^0.30.7",
         "make-fetch-happen": "^11.0.3",
-        "powerhooks": "^1.0.10",
+        "powerhooks": "^1.0.19",
         "prettier": "^3.2.5",
         "properties-parser": "^0.3.1",
         "react": "^18.2.0",

scripts/dump-keycloak-realm.ts

@@ -4,8 +4,7 @@ import { SemVer } from "../src/bin/tools/SemVer";
 import { join as pathJoin, relative as pathRelative } from "path";
 import chalk from "chalk";
 import { Deferred } from "evt/tools/Deferred";
-import { assert } from "tsafe/assert";
-import { is } from "tsafe/is";
+import { assert, is } from "tsafe/assert";
 import { run } from "./shared/run";
 
 (async () => {

src/bin/initialize-account-theme/initializeAccountTheme_singlePage.ts

@@ -9,8 +9,7 @@ import {
 import { SemVer } from "../tools/SemVer";
 import fetch from "make-fetch-happen";
 import { z } from "zod";
-import { assert, type Equals } from "tsafe/assert";
-import { is } from "tsafe/is";
+import { assert, type Equals, is } from "tsafe/assert";
 import { id } from "tsafe/id";
 import { npmInstall } from "../tools/npmInstall";
 import { copyBoilerplate } from "./copyBoilerplate";

src/bin/initialize-account-theme/updateAccountThemeImplementationInConfig.ts

@@ -1,11 +1,10 @@
 import { join as pathJoin } from "path";
-import { assert, type Equals } from "tsafe/assert";
+import { assert, type Equals, is } from "tsafe/assert";
 import type { BuildContext } from "../shared/buildContext";
 import * as fs from "fs";
 import chalk from "chalk";
 import { z } from "zod";
 import { id } from "tsafe/id";
-import { is } from "tsafe/is";
 
 export type BuildContextLike = {
     bundler: BuildContext["bundler"];

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/postinstall/getUiModuleFileSourceCodeReadyToBeCopied.ts

@@ -56,7 +56,8 @@ export async function getUiModuleFileSourceCodeReadyToBeCopied(params: {
                   ``,
                   `$ npx keycloakify eject-file --file ${fileRelativePath.split(pathSep).join("/")}`,
                   ``,
-                  `This file comes from ${uiModuleName} version ${uiModuleVersion}.`
+                  `This file comes from ${uiModuleName} version ${uiModuleVersion}.`,
+                  `This file has been copied over to your repo by your postinstall script: \`npx keycloakify postinstall\``
               ]
     );
 

src/bin/postinstall/installUiModulesPeerDependencies.ts

@@ -1,5 +1,4 @@
-import { assert, type Equals } from "tsafe/assert";
-import { is } from "tsafe/is";
+import { assert, type Equals, is } from "tsafe/assert";
 import type { BuildContext } from "../shared/buildContext";
 import type { UiModuleMeta } from "./uiModuleMeta";
 import { z } from "zod";

src/bin/postinstall/postinstall.ts

@@ -9,6 +9,8 @@ import { dirname as pathDirname } from "path";
 import { join as pathJoin } from "path";
 import { existsAsync } from "../tools/fs.existsAsync";
 import * as fsPr from "fs/promises";
+import { getIsTrackedByGit } from "../tools/isTrackedByGit";
+import { untrackFromGit } from "../tools/untrackFromGit";
 
 export async function command(params: { buildContext: BuildContext }) {
     const { buildContext } = params;
@@ -45,8 +47,10 @@ export async function command(params: { buildContext: BuildContext }) {
                                 fileRelativePath
                             );
 
+                            const doesFileExist = await existsAsync(destFilePath);
+
                             skip_condition: {
-                                if (!(await existsAsync(destFilePath))) {
+                                if (!doesFileExist) {
                                     break skip_condition;
                                 }
 
@@ -61,6 +65,24 @@ export async function command(params: { buildContext: BuildContext }) {
                                 return;
                             }
 
+                            git_untrack: {
+                                if (!doesFileExist) {
+                                    break git_untrack;
+                                }
+
+                                const isTracked = await getIsTrackedByGit({
+                                    filePath: destFilePath
+                                });
+
+                                if (!isTracked) {
+                                    break git_untrack;
+                                }
+
+                                await untrackFromGit({
+                                    filePath: destFilePath
+                                });
+                            }
+
                             {
                                 const dirName = pathDirname(destFilePath);
 

src/bin/postinstall/uiModuleMeta.ts

@@ -1,10 +1,9 @@
-import { assert, type Equals } from "tsafe/assert";
+import { assert, type Equals, is } from "tsafe/assert";
 import { id } from "tsafe/id";
 import { z } from "zod";
 import { join as pathJoin, dirname as pathDirname } from "path";
 import * as fsPr from "fs/promises";
 import type { BuildContext } from "../shared/buildContext";
-import { is } from "tsafe/is";
 import { existsAsync } from "../tools/fs.existsAsync";
 import { listInstalledModules } from "../tools/listInstalledModules";
 import { crawlAsync } from "../tools/crawlAsync";

src/bin/shared/buildContext.ts

@@ -9,7 +9,7 @@ import {
 import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
 import { z } from "zod";
 import * as fs from "fs";
-import { assert, type Equals } from "tsafe/assert";
+import { assert, type Equals, is } from "tsafe/assert";
 import * as child_process from "child_process";
 import {
     VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES,
@@ -23,7 +23,6 @@ import { objectEntries } from "tsafe/objectEntries";
 import { id } from "tsafe/id";
 import chalk from "chalk";
 import { getProxyFetchOptions, type FetchOptionsLike } from "../tools/fetchProxyOptions";
-import { is } from "tsafe/is";
 
 export type BuildContext = {
     themeVersion: string;

src/bin/tools/isTrackedByGit.ts

@@ -0,0 +1,29 @@
+import * as child_process from "child_process";
+import { dirname as pathDirname, basename as pathBasename } from "path";
+import { Deferred } from "evt/tools/Deferred";
+
+export function getIsTrackedByGit(params: { filePath: string }): Promise<boolean> {
+    const { filePath } = params;
+
+    const dIsTracked = new Deferred<boolean>();
+
+    child_process.exec(
+        `git ls-files --error-unmatch ${pathBasename(filePath)}`,
+        { cwd: pathDirname(filePath) },
+        error => {
+            if (error === null) {
+                dIsTracked.resolve(true);
+                return;
+            }
+
+            if (error.code === 1) {
+                dIsTracked.resolve(false);
+                return;
+            }
+
+            dIsTracked.reject(error);
+        }
+    );
+
+    return dIsTracked.pr;
+}

src/bin/tools/listInstalledModules.ts

@@ -1,9 +1,8 @@
-import { assert, type Equals } from "tsafe/assert";
+import { assert, type Equals, is } from "tsafe/assert";
 import { id } from "tsafe/id";
 import { z } from "zod";
 import { join as pathJoin, dirname as pathDirname } from "path";
 import * as fsPr from "fs/promises";
-import { is } from "tsafe/is";
 import { getInstalledModuleDirPath } from "../tools/getInstalledModuleDirPath";
 import { exclude } from "tsafe/exclude";
 

src/bin/tools/npmInstall.ts

@@ -3,9 +3,8 @@ import { join as pathJoin, dirname as pathDirname } from "path";
 import * as child_process from "child_process";
 import chalk from "chalk";
 import { z } from "zod";
-import { assert, type Equals } from "tsafe/assert";
+import { assert, type Equals, is } from "tsafe/assert";
 import { id } from "tsafe/id";
-import { is } from "tsafe/is";
 import { objectKeys } from "tsafe/objectKeys";
 import { getAbsoluteAndInOsFormatPath } from "./getAbsoluteAndInOsFormatPath";
 import { exclude } from "tsafe/exclude";

src/bin/tools/runPrettier.ts

@@ -1,10 +1,12 @@
 import { getNodeModulesBinDirPath } from "./nodeModulesBinDirPath";
-import { join as pathJoin } from "path";
+import { join as pathJoin, resolve as pathResolve } from "path";
 import * as fsPr from "fs/promises";
 import { id } from "tsafe/id";
-import { assert } from "tsafe/assert";
+import { assert, is } from "tsafe/assert";
 import chalk from "chalk";
 import * as crypto from "crypto";
+import { symToStr } from "tsafe/symToStr";
+import { readThisNpmPackageVersion } from "./readThisNpmPackageVersion";
 
 getIsPrettierAvailable.cache = id<boolean | undefined>(undefined);
 
@@ -40,7 +42,25 @@ export async function getPrettier(): Promise<PrettierAndConfigHash> {
         return getPrettier.cache;
     }
 
-    const prettier = await import("prettier");
+    let prettier = id<typeof import("prettier") | undefined>(undefined);
+
+    import_prettier: {
+        // NOTE: When module is linked we want to make sure we import the correct version
+        // of prettier, that is the one of the project, not the one of this repo.
+        // So we do a sketchy eval to bypass ncc.
+        // We make sure to only do that when linking, otherwise we import properly.
+        if (readThisNpmPackageVersion().startsWith("0.0.0")) {
+            eval(
+                `${symToStr({ prettier })} = require("${pathResolve(pathJoin(getNodeModulesBinDirPath(), "..", "prettier"))}")`
+            );
+
+            assert(!is<undefined>(prettier));
+
+            break import_prettier;
+        }
+
+        prettier = await import("prettier");
+    }
 
     const configHash = await (async () => {
         const configFilePath = await prettier.resolveConfigFile(

src/bin/tools/untrackFromGit.ts

@@ -0,0 +1,24 @@
+import * as child_process from "child_process";
+import { dirname as pathDirname, basename as pathBasename } from "path";
+import { Deferred } from "evt/tools/Deferred";
+
+export async function untrackFromGit(params: { filePath: string }): Promise<void> {
+    const { filePath } = params;
+
+    const dDone = new Deferred<void>();
+
+    child_process.exec(
+        `git rm --cached ${pathBasename(filePath)}`,
+        { cwd: pathDirname(filePath) },
+        error => {
+            if (error !== null) {
+                dDone.reject(error);
+                return;
+            }
+
+            dDone.resolve();
+        }
+    );
+
+    await dDone.pr;
+}

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/lib/getKcClsx.ts

@@ -1,8 +1,7 @@
 import type { Param0 } from "tsafe";
 import { type CxArg, clsx_withTransform } from "../tools/clsx_withTransform";
 import { clsx } from "../tools/clsx";
-import { assert } from "tsafe/assert";
-import { is } from "tsafe/is";
+import { assert, is } from "tsafe/assert";
 
 export function createGetKcClsx<ClassKey extends string>(params: {
     defaultClasses: Record<ClassKey, string | undefined>;

src/login/KcContext/KcContext.ts

@@ -33,7 +33,7 @@ export type KcContext =
     | KcContext.LoginResetPassword
     | KcContext.LoginVerifyEmail
     | KcContext.Terms
-    | KcContext.LoginDeviceVerifyUserCode
+    | KcContext.LoginOauth2DeviceVerifyUserCode
     | KcContext.LoginOauthGrant
     | KcContext.LoginOtp
     | KcContext.LoginUsername
@@ -277,7 +277,7 @@ export declare namespace KcContext {
         __localizationRealmOverridesTermsText?: string;
     };
 
-    export type LoginDeviceVerifyUserCode = Common & {
+    export type LoginOauth2DeviceVerifyUserCode = Common & {
         pageId: "login-oauth2-device-verify-user-code.ftl";
         url: {
             oauth2DeviceVerificationAction: string;

src/login/KcContext/kcContextMocks.ts

@@ -290,7 +290,7 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         pageId: "terms.ftl"
     }),
-    id<KcContext.LoginDeviceVerifyUserCode>({
+    id<KcContext.LoginOauth2DeviceVerifyUserCode>({
         ...kcContextCommonMock,
         pageId: "login-oauth2-device-verify-user-code.ftl",
         url: loginUrl

src/login/TemplateProps.ts

@@ -11,7 +11,6 @@ export type TemplateProps<KcContext, I18n> = {
     displayInfo?: boolean;
     displayMessage?: boolean;
     displayRequiredFields?: boolean;
-    showAnotherWayIfPresent?: boolean;
     headerNode: ReactNode;
     socialProvidersNode?: ReactNode;
     infoNode?: ReactNode;

src/login/i18n/noJsx/getI18n.tsx

@@ -1,11 +1,11 @@
 import "keycloakify/tools/Object.fromEntries";
-import { assert } from "tsafe/assert";
+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";
 import { FALLBACK_LANGUAGE_TAG } from "keycloakify/bin/shared/constants";
 import { id } from "tsafe/id";
-import { is } from "tsafe/is";
 import { Reflect } from "tsafe/Reflect";
 import {
     type LanguageTag as LanguageTag_defaultSet,
@@ -169,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/login/pages/LoginPasskeysConditionalAuthenticate.tsx

@@ -115,62 +115,61 @@ export default function LoginPasskeysConditionalAuthenticate(
                                 </div>
                             </>
                         )}
-                        <div id="kc-form">
-                            <div id="kc-form-wrapper">
-                                {realm.password && (
-                                    <form
-                                        id="kc-form-passkey"
-                                        action={url.loginAction}
-                                        method="post"
-                                        style={{ display: "none" }}
-                                        onSubmit={event => {
-                                            try {
-                                                // @ts-expect-error
-                                                event.target.login.disabled = true;
-                                            } catch {}
-
-                                            return true;
-                                        }}
-                                    >
-                                        {!usernameHidden && (
-                                            <div className={kcClsx("kcFormGroupClass")}>
-                                                <label htmlFor="username" className={kcClsx("kcLabelClass")}>
-                                                    {msg("passkey-autofill-select")}
-                                                </label>
-                                                <input
-                                                    tabIndex={1}
-                                                    id="username"
-                                                    aria-invalid={messagesPerField.existsError("username")}
-                                                    className={kcClsx("kcInputClass")}
-                                                    name="username"
-                                                    defaultValue={login.username ?? ""}
-                                                    //autoComplete="username webauthn"
-                                                    type="text"
-                                                    autoFocus
-                                                    autoComplete="off"
-                                                />
-                                                {messagesPerField.existsError("username") && (
-                                                    <span id="input-error-username" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
-                                                        {messagesPerField.get("username")}
-                                                    </span>
-                                                )}
-                                            </div>
-                                        )}
-                                    </form>
-                                )}
-                                <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
-                                    <input
-                                        id={authButtonId}
-                                        type="button"
-                                        autoFocus
-                                        value={msgStr("passkey-doAuthenticate")}
-                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                                    />
-                                </div>
-                            </div>
-                        </div>
                     </>
                 )}
+                <div id="kc-form">
+                    <div id="kc-form-wrapper">
+                        {realm.password && (
+                            <form
+                                id="kc-form-login"
+                                action={url.loginAction}
+                                method="post"
+                                style={{ display: "none" }}
+                                onSubmit={event => {
+                                    try {
+                                        // @ts-expect-error
+                                        event.target.login.disabled = true;
+                                    } catch {}
+
+                                    return true;
+                                }}
+                            >
+                                {!usernameHidden && (
+                                    <div className={kcClsx("kcFormGroupClass")}>
+                                        <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                                            {msg("passkey-autofill-select")}
+                                        </label>
+                                        <input
+                                            tabIndex={1}
+                                            id="username"
+                                            aria-invalid={messagesPerField.existsError("username")}
+                                            className={kcClsx("kcInputClass")}
+                                            name="username"
+                                            defaultValue={login.username ?? ""}
+                                            autoComplete="username webauthn"
+                                            type="text"
+                                            autoFocus
+                                        />
+                                        {messagesPerField.existsError("username") && (
+                                            <span id="input-error-username" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
+                                                {messagesPerField.get("username")}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+                            </form>
+                        )}
+                        <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
+                            <input
+                                id={authButtonId}
+                                type="button"
+                                autoFocus
+                                value={msgStr("passkey-doAuthenticate")}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
         </Template>
     );

src/tools/StatefulObservable/StatefulObservable.ts

@@ -1,5 +1,4 @@
-import { assert } from "tsafe/assert";
-import { is } from "tsafe/is";
+import { assert, is } from "tsafe/assert";
 
 export type StatefulObservable<T> = {
     current: T;

src/tools/deepAssign.ts

@@ -1,5 +1,4 @@
-import { assert } from "tsafe/assert";
-import { is } from "tsafe/is";
+import { assert, is } from "tsafe/assert";
 import { structuredCloneButFunctions } from "./structuredCloneButFunctions";
 
 /** NOTE: Array a copied over, not merged. */

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;
+}

stories/login/pages/Info.stories.tsx

@@ -17,6 +17,7 @@ export const Default: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
+                messageHeader: "Message header",
                 message: {
                     summary: "Server info message"
                 }
@@ -29,6 +30,7 @@ export const WithLinkBack: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
+                messageHeader: "Message header",
                 message: {
                     summary: "Server message"
                 },
@@ -42,6 +44,7 @@ export const WithRequiredActions: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
+                messageHeader: "Message header",
                 message: {
                     summary: "Required actions: "
                 },
@@ -55,42 +58,3 @@ export const WithRequiredActions: Story = {
         />
     )
 };
-export const WithPageRedirect: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: { summary: "You will be redirected shortly." },
-                pageRedirectUri: "https://example.com"
-            }}
-        />
-    )
-};
-export const WithoutClientBaseUrl: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: { summary: "No client base URL defined." },
-                client: { baseUrl: undefined }
-            }}
-        />
-    )
-};
-export const WithMessageHeader: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                messageHeader: "Important Notice",
-                message: { summary: "This is an important message." }
-            }}
-        />
-    )
-};
-export const WithAdvancedMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: { summary: "Please take note of this <strong>important</strong> information." }
-            }}
-        />
-    )
-};

stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { createKcPageStory } from "../KcPageStory";
-
-const { KcPageStory } = createKcPageStory({ pageId: "login-device-verify-user-code.ftl" });
-
-const meta = {
-    title: "login/login-device-verify-user-code.ftl",
-    component: KcPageStory
-} satisfies Meta<typeof KcPageStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render: () => <KcPageStory />
-};

yarn.lock

@@ -6172,6 +6172,14 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
+d@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.2.tgz#2aefd554b81981e7dccf72d6842ae725cb17e5de"
+  integrity sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==
+  dependencies:
+    es5-ext "^0.10.64"
+    type "^2.7.2"
+
 data-urls@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-5.0.0.tgz#2f76906bce1824429ffecb6920f45a0b30f00dde"
@@ -6743,7 +6751,7 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46:
+es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46:
   version "0.10.62"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
   integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
@@ -6752,6 +6760,16 @@ es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@
     es6-symbol "^3.1.3"
     next-tick "^1.1.0"
 
+es5-ext@^0.10.62, es5-ext@^0.10.64:
+  version "0.10.64"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.64.tgz#12e4ffb48f1ba2ea777f1fcdd1918ef73ea21714"
+  integrity sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==
+  dependencies:
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.3"
+    esniff "^2.0.1"
+    next-tick "^1.1.0"
+
 es5-shim@^4.5.13:
   version "4.6.7"
   resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.6.7.tgz#bc67ae0fc3dd520636e0a1601cc73b450ad3e955"
@@ -6920,6 +6938,16 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
   integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
 
+esniff@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/esniff/-/esniff-2.0.1.tgz#a4d4b43a5c71c7ec51c51098c1d8a29081f9b308"
+  integrity sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==
+  dependencies:
+    d "^1.0.1"
+    es5-ext "^0.10.62"
+    event-emitter "^0.3.5"
+    type "^2.7.2"
+
 esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -6994,14 +7022,14 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-evt@^2.5.7:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/evt/-/evt-2.5.7.tgz#55c5f8ff910f4b7531bfac91e963d4cb3231f253"
-  integrity sha512-dr7Wd16ry5F8WNU1xXLKpFpO3HsoAGg8zC48e08vDdzMzGWCP9/QFGt1PQptEEDh8SwYP3EL8M+d/Gb0kgUp6g==
+evt@^2.5.8:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.5.8.tgz#4cc4e2db92d89cc43e00a0755703317f5f9b6d4c"
+  integrity sha512-wjurRtEqepH03fZSzkCUAw2tNNtEoeoEYXf7EqG8uU52wQ3D/+ctyQE8hf+YR/5DXZlwl2jNGLMm4hAd/wyD6g==
   dependencies:
     minimal-polyfills "^2.2.3"
     run-exclusive "^2.2.19"
-    tsafe "^1.6.6"
+    tsafe "^1.8.5"
 
 execa@^5.1.1:
   version "5.1.1"
@@ -9350,13 +9378,13 @@ memfs@^3.1.2, memfs@^3.2.2:
   dependencies:
     fs-monkey "^1.0.3"
 
-memoizee@^0.4.15:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72"
-  integrity sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==
+memoizee@^0.4.17:
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.17.tgz#942a5f8acee281fa6fb9c620bddc57e3b7382949"
+  integrity sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==
   dependencies:
-    d "^1.0.1"
-    es5-ext "^0.10.53"
+    d "^1.0.2"
+    es5-ext "^0.10.64"
     es6-weak-map "^2.0.3"
     event-emitter "^0.3.5"
     is-promise "^2.2.2"
@@ -10629,14 +10657,14 @@ postcss@^8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-powerhooks@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-1.0.10.tgz#9d532b23294cba69d5872d859bdf843b91cb9c41"
-  integrity sha512-fJmKSVJk9Bkotl9rK1ryVPSqhY4xOZKxM6deyTaMbICK8jHh/CQztN2mNTxlKu6vkJBIFj1cRd/7N6slh3uM6w==
+powerhooks@^1.0.19:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-1.0.19.tgz#e93ce44f55d31ca26a4511883a49cfe5341d47af"
+  integrity sha512-kmZX0LLvJyaIphwf2FjKABAQwQFrRqsEA41N4CB8EzfDobyXle545t4teajVo/NPboy0HEaioyv55FWN7d58/Q==
   dependencies:
-    evt "^2.5.7"
-    memoizee "^0.4.15"
-    tsafe "^1.6.6"
+    evt "^2.5.8"
+    memoizee "^0.4.17"
+    tsafe "^1.8.5"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
@@ -12574,15 +12602,10 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsafe@^1.6.6:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.6.6.tgz#fd93e64d6eb13ef83ed1650669cc24bad4f5df9f"
-  integrity sha512-gzkapsdbMNwBnTIjgO758GujLCj031IgHK/PKr2mrmkCSJMhSOR5FeOuSxKLMUoYc0vAA4RGEYYbjt/v6afD3g==
-
-tsafe@^1.7.5:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.7.5.tgz#0d3a31202b5ef87c7ba997e66e03fd80801278ef"
-  integrity sha512-tbNyyBSbwfbilFfiuXkSOj82a6++ovgANwcoqBAcO9/REPoZMEQoE8kWPeO0dy5A2D/2Lajr8Ohue5T0ifIvLQ==
+tsafe@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.8.5.tgz#cdf9fa3111974ac480d7ee519f8241815e5d22ea"
+  integrity sha512-LFWTWQrW6rwSY+IBNFl2ridGfUzVsPwrZ26T4KUJww/py8rzaQ/SY+MIz6YROozpUCaRcuISqagmlwub9YT9kw==
 
 tsc-alias@^1.8.10:
   version "1.8.10"