Release candidate

docs: add madmadson as a contributor for code

.all-contributorsrc

@@ -231,6 +231,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "madmadson",
+      "name": "Tobias Matt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/798831?v=4",
+      "profile": "https://github.com/madmadson",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -43,7 +43,8 @@
 
 Keycloakify is fully compatible with Keycloak 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, [~~22~~](https://github.com/keycloakify/keycloakify/issues/389#issuecomment-1822509763), 23, 24, 25...[and beyond](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)
 
-> NOTE: Keycloakify 10 is still in release-candidate state. [Follow progress](https://github.com/keycloakify/keycloakify/pull/538).
+> NOTE: Keycloakify 10, while still being tagged as release candidate is the version you should use if you are starting today.  
+> Use `yarn add keycloakify@next` or pin [the latest version candidate](https://www.npmjs.com/package/keycloakify?activeTab=versions).
 
 ## Sponsors
 
@@ -130,7 +131,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/madmadson"><img src="https://avatars.githubusercontent.com/u/798831?v=4?s=100" width="100px;" alt="Tobias Matt"/><br /><sub><b>Tobias Matt</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=madmadson" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.124",
+    "version": "10.0.0-rc.137",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -85,7 +85,7 @@
         "@types/yauzl": "^2.10.3",
         "@vercel/ncc": "^0.38.1",
         "chalk": "^4.1.2",
-        "cheerio": "^1.0.0-rc.12",
+        "cheerio": "1.0.0-rc.12",
         "chokidar-cli": "^3.0.0",
         "cli-select": "^1.1.2",
         "husky": "^4.3.8",
@@ -103,7 +103,7 @@
         "termost": "^v0.12.1",
         "tsc-alias": "^1.8.10",
         "tss-react": "^4.9.10",
-        "typescript": "^4.9.1-beta",
+        "typescript": "^4.9.4",
         "vite": "^5.2.11",
         "vitest": "^1.6.0",
         "yauzl": "^2.10.0",

scripts/link-in-starter.ts

@@ -2,8 +2,33 @@ import * as child_process from "child_process";
 import * as fs from "fs";
 import { join } from "path";
 import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+import { crawl } from "../src/bin/tools/crawl";
+
+{
+    const dirPath = "node_modules";
+
+    try {
+        fs.rmSync(dirPath, { recursive: true, force: true });
+    } catch {
+        // NOTE: This is a workaround for windows
+        // we can't remove locked executables.
+
+        crawl({
+            dirPath,
+            returnedPathsType: "absolute"
+        }).forEach(filePath => {
+            try {
+                fs.rmSync(filePath, { force: true });
+            } catch (error) {
+                if (filePath.endsWith(".exe")) {
+                    return;
+                }
+                throw error;
+            }
+        });
+    }
+}
 
-fs.rmSync("node_modules", { recursive: true, force: true });
 fs.rmSync("dist", { recursive: true, force: true });
 fs.rmSync(".yarn_home", { recursive: true, force: true });
 

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

@@ -2,7 +2,10 @@ import { join as pathJoin, relative as pathRelative, dirname as pathDirname } fr
 import type { BuildContext } from "../shared/buildContext";
 import * as fs from "fs";
 import chalk from "chalk";
-import { getLatestsSemVersionedTag } from "../shared/getLatestsSemVersionedTag";
+import {
+    getLatestsSemVersionedTag,
+    type BuildContextLike as BuildContextLike_getLatestsSemVersionedTag
+} from "../shared/getLatestsSemVersionedTag";
 import fetch from "make-fetch-happen";
 import { z } from "zod";
 import { assert, type Equals } from "tsafe/assert";
@@ -12,8 +15,7 @@ import { npmInstall } from "../tools/npmInstall";
 import { copyBoilerplate } from "./copyBoilerplate";
 import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
 
-type BuildContextLike = {
-    cacheDirPath: string;
+type BuildContextLike = BuildContextLike_getLatestsSemVersionedTag & {
     fetchOptions: BuildContext["fetchOptions"];
     packageJsonFilePath: string;
 };
@@ -30,11 +32,11 @@ export async function initializeAccountTheme_singlePage(params: {
     const REPO = "keycloak-account-ui";
 
     const [semVersionedTag] = await getLatestsSemVersionedTag({
-        cacheDirPath: buildContext.cacheDirPath,
         owner: OWNER,
         repo: REPO,
         count: 1,
-        doIgnoreReleaseCandidates: false
+        doIgnoreReleaseCandidates: false,
+        buildContext
     });
 
     const dependencies = await fetch(

src/bin/initialize-email-theme.ts

@@ -30,7 +30,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         // NOTE: This is arbitrary
         startingFromMajor: 17,
         excludeMajorVersions: [],
-        cacheDirPath: buildContext.cacheDirPath
+        buildContext
     });
 
     const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -1,4 +1,4 @@
-import cheerio from "cheerio";
+import * as cheerio from "cheerio";
 import {
     replaceImportsInJsCode,
     BuildContextLike as BuildContextLike_replaceImportsInJsCode
@@ -77,7 +77,8 @@ export function generateFtlFilesCodeFactory(params: {
         (
             [
                 ["link", "href"],
-                ["script", "src"]
+                ["script", "src"],
+                ["script", "data-src"]
             ] as const
         ).forEach(([selector, attrName]) =>
             $(selector).each((...[, element]) => {

src/bin/shared/getLatestsSemVersionedTag.ts

@@ -9,6 +9,8 @@ import { assert, type Equals } from "tsafe/assert";
 import { id } from "tsafe/id";
 import type { SemVer } from "../tools/SemVer";
 import { same } from "evt/tools/inDepth/same";
+import type { BuildContext } from "./buildContext";
+import fetch from "make-fetch-happen";
 
 type GetLatestsSemVersionedTag = ReturnType<
     typeof getLatestsSemVersionedTagFactory
@@ -31,11 +33,23 @@ type Cache = {
     }[];
 };
 
+export type BuildContextLike = {
+    cacheDirPath: string;
+    fetchOptions: BuildContext["fetchOptions"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
 export async function getLatestsSemVersionedTag({
-    cacheDirPath,
+    buildContext,
     ...params
-}: Params & { cacheDirPath: string }): Promise<R> {
-    const cacheFilePath = pathJoin(cacheDirPath, "latest-sem-versioned-tags.json");
+}: Params & {
+    buildContext: BuildContextLike;
+}): Promise<R> {
+    const cacheFilePath = pathJoin(
+        buildContext.cacheDirPath,
+        "latest-sem-versioned-tags.json"
+    );
 
     const cacheLookupResult = (() => {
         const getResult_currentCache = (currentCacheEntries: Cache["entries"]) => ({
@@ -144,9 +158,16 @@ export async function getLatestsSemVersionedTag({
         const octokit = (() => {
             const githubToken = process.env.GITHUB_TOKEN;
 
-            const octokit = new Octokit(
-                githubToken === undefined ? undefined : { auth: githubToken }
-            );
+            const octokit = new Octokit({
+                ...(githubToken === undefined ? {} : { auth: githubToken }),
+                request: {
+                    fetch: (url: string, options?: any) =>
+                        fetch(url, {
+                            ...options,
+                            ...buildContext.fetchOptions
+                        })
+                }
+            });
 
             return octokit;
         })();

src/bin/shared/promptKeycloakVersion.ts

@@ -1,22 +1,31 @@
-import { getLatestsSemVersionedTag } from "./getLatestsSemVersionedTag";
+import {
+    getLatestsSemVersionedTag,
+    type BuildContextLike as BuildContextLike_getLatestsSemVersionedTag
+} from "./getLatestsSemVersionedTag";
 import cliSelect from "cli-select";
+import { assert } from "tsafe/assert";
 import { SemVer } from "../tools/SemVer";
+import type { BuildContext } from "./buildContext";
+
+export type BuildContextLike = BuildContextLike_getLatestsSemVersionedTag & {};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export async function promptKeycloakVersion(params: {
     startingFromMajor: number | undefined;
     excludeMajorVersions: number[];
-    cacheDirPath: string;
+    buildContext: BuildContextLike;
 }) {
-    const { startingFromMajor, excludeMajorVersions, cacheDirPath } = params;
+    const { startingFromMajor, excludeMajorVersions, buildContext } = params;
 
     const semVersionedTagByMajor = new Map<number, { tag: string; version: SemVer }>();
 
     const semVersionedTags = await getLatestsSemVersionedTag({
-        cacheDirPath,
         count: 50,
         owner: "keycloak",
         repo: "keycloak",
-        doIgnoreReleaseCandidates: true
+        doIgnoreReleaseCandidates: true,
+        buildContext
     });
 
     semVersionedTags.forEach(semVersionedTag => {

src/bin/start-keycloak/myrealm-realm-18.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -611,8 +611,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2099,7 +2099,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-19.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -618,8 +618,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2130,7 +2130,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-20.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -628,8 +628,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2140,7 +2140,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-21.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -632,8 +632,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2144,7 +2144,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-23.json

@@ -55,7 +55,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -644,7 +644,7 @@
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
             "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2088,7 +2088,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-24.json

@@ -63,7 +63,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["manage-account", "view-profile"]
+                        "account": ["delete-account", "manage-account", "view-profile"]
                     }
                 },
                 "clientRole": false,
@@ -653,7 +653,7 @@
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
             "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2235,7 +2235,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-25.json

@@ -63,7 +63,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["manage-account", "view-profile"]
+                        "account": ["delete-account", "manage-account", "view-profile"]
                     }
                 },
                 "clientRole": false,
@@ -543,7 +543,7 @@
                 "favourite_pet": ["cat"],
                 "bio": ["Hello I'm Test User and I do not exist."],
                 "phone_number": ["1111111111"],
-                "locale": ["fr"],
+                "locale": ["en"],
                 "favorite_media": ["movies", "series"]
             },
             "createdTimestamp": 1716183898408,
@@ -767,7 +767,7 @@
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
             "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2315,7 +2315,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/start-keycloak.ts

@@ -97,13 +97,20 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         }
 
         console.log(
-            chalk.cyan("On which version of Keycloak do you want to test your theme?")
+            [
+                chalk.cyan(
+                    "On which version of Keycloak do you want to test your theme?"
+                ),
+                chalk.gray(
+                    "You can also explicitly provide the version with `npx keycloakify start-keycloak --keycloak-version 25.0.2` (or any other version)"
+                )
+            ].join("\n")
         );
 
         const { keycloakVersion } = await promptKeycloakVersion({
             startingFromMajor: 18,
             excludeMajorVersions: [22],
-            cacheDirPath: buildContext.cacheDirPath
+            buildContext
         });
 
         console.log(`→ ${keycloakVersion}`);
@@ -286,11 +293,11 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                 ? []
                 : [
                       "-v",
-                      `${realmJsonFilePath}:/opt/keycloak/data/import/myrealm-realm.json`
+                      `"${realmJsonFilePath}":/opt/keycloak/data/import/myrealm-realm.json`
                   ]),
             ...[
                 "-v",
-                `${jarFilePath_cacheDir}:/opt/keycloak/providers/keycloak-theme.jar`
+                `"${jarFilePath_cacheDir}":/opt/keycloak/providers/keycloak-theme.jar`
             ],
             ...(keycloakMajorVersionNumber <= 20
                 ? ["-e", "JAVA_OPTS=-Dkeycloak.profile=preview"]
@@ -317,7 +324,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                 }))
                 .map(({ localDirPath, containerDirPath }) => [
                     "-v",
-                    `${localDirPath}:${containerDirPath}:rw`
+                    `"${localDirPath}":${containerDirPath}:rw`
                 ])
                 .flat(),
             ...buildContext.environmentVariables

src/bin/tools/assertNoPnpmDlx.ts

@@ -5,9 +5,11 @@ export function assertNoPnpmDlx() {
     if (__dirname.includes(`${pathSep}pnpm${pathSep}dlx${pathSep}`)) {
         console.log(
             [
-                chalk.red("Please don't use `pnpm dlx keycloakify`"),
+                chalk.red(
+                    "Please don't use `pnpm dlx keycloakify` (download and execute)"
+                ),
                 "\nUse `npx keycloakify` or `pnpm exec keycloakify` instead since you want to use the keycloakify",
-                "version that is installed in your project and not the latest version on NPM."
+                "version that is installed in your project and not download and run the latest NPM version of keycloakify."
             ].join(" ")
         );
         process.exit(1);

src/bin/tools/fetchProxyOptions.ts

@@ -1,6 +1,7 @@
 import { type FetchOptions } from "make-fetch-happen";
 import * as child_process from "child_process";
 import * as fs from "fs";
+import { exclude } from "tsafe/exclude";
 
 export type ProxyFetchOptions = Pick<
     FetchOptions,
@@ -23,12 +24,32 @@ export function getProxyFetchOptions(params: {
             .split("\n")
             .filter(line => !line.startsWith(";"))
             .map(line => line.trim())
-            .map(line => line.split("=", 2) as [string, string])
+            .map(line => {
+                const [key, value] = line.split("=");
+                if (key === undefined) {
+                    return undefined;
+                }
+                if (value === undefined) {
+                    return undefined;
+                }
+                return [key.trim(), value.trim()] as const;
+            })
+            .filter(exclude(undefined))
+            .filter(([key]) => key !== "")
+            .map(([key, value]) => {
+                if (value.startsWith('"') && value.endsWith('"')) {
+                    return [key, value.slice(1, -1)] as const;
+                }
+
+                if (value === "true" || value === "false") {
+                    return [key, value] as const;
+                }
+
+                return undefined;
+            })
+            .filter(exclude(undefined))
             .reduce(
-                (
-                    cfg: Record<string, string | string[]>,
-                    [key, value]: [string, string]
-                ) =>
+                (cfg: Record<string, string | string[]>, [key, value]) =>
                     key in cfg
                         ? { ...cfg, [key]: [...ensureArray(cfg[key]), value] }
                         : { ...cfg, [key]: value },
@@ -37,18 +58,18 @@ export function getProxyFetchOptions(params: {
     })();
 
     const proxy = ensureSingleOrNone(cfg["https-proxy"] ?? cfg["proxy"]);
+
     const noProxy = cfg["noproxy"] ?? cfg["no-proxy"];
 
-    function maybeBoolean(arg0: string | undefined) {
-        return typeof arg0 === "undefined" ? undefined : Boolean(arg0);
-    }
+    const strictSSL = ensureSingleOrNone(cfg["strict-ssl"]) === "true";
 
-    const strictSSL = maybeBoolean(ensureSingleOrNone(cfg["strict-ssl"]));
     const cert = cfg["cert"];
+
     const ca = ensureArray(cfg["ca"] ?? cfg["ca[]"]);
+
     const cafile = ensureSingleOrNone(cfg["cafile"]);
 
-    if (typeof cafile !== "undefined" && cafile !== "null") {
+    if (cafile !== undefined) {
         ca.push(
             ...(() => {
                 const cafileContent = fs.readFileSync(cafile).toString("utf8");
@@ -82,7 +103,7 @@ export function getProxyFetchOptions(params: {
 }
 
 function ensureArray<T>(arg0: T | T[]) {
-    return Array.isArray(arg0) ? arg0 : typeof arg0 === "undefined" ? [] : [arg0];
+    return Array.isArray(arg0) ? arg0 : arg0 === undefined ? [] : [arg0];
 }
 
 function ensureSingleOrNone<T>(arg0: T | T[]) {

src/login/KcContext/KcContext.ts

@@ -79,8 +79,8 @@ export declare namespace KcContext {
         };
         realm: {
             name: string;
-            displayName?: string;
-            displayNameHtml?: string;
+            displayName: string;
+            displayNameHtml: string;
             internationalizationEnabled: boolean;
             registrationEmailAsUsername: boolean;
         };

src/login/Template.tsx

@@ -224,19 +224,17 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                         {auth !== undefined && auth.showTryAnotherWayLink && (
                             <form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
                                 <div className={kcClsx("kcFormGroupClass")}>
-                                    <div className={kcClsx("kcFormGroupClass")}>
-                                        <input type="hidden" name="tryAnotherWay" value="on" />
-                                        <a
-                                            href="#"
-                                            id="try-another-way"
-                                            onClick={() => {
-                                                document.forms["kc-select-try-another-way-form" as never].submit();
-                                                return false;
-                                            }}
-                                        >
-                                            {msg("doTryAnotherWay")}
-                                        </a>
-                                    </div>
+                                    <input type="hidden" name="tryAnotherWay" value="on" />
+                                    <a
+                                        href="#"
+                                        id="try-another-way"
+                                        onClick={() => {
+                                            document.forms["kc-select-try-another-way-form" as never].submit();
+                                            return false;
+                                        }}
+                                    >
+                                        {msg("doTryAnotherWay")}
+                                    </a>
                                 </div>
                             </form>
                         )}

src/login/i18n/i18n.tsx

@@ -217,7 +217,13 @@ function createI18nTranslationFunctionsFactory<MessageKey_themeDefined extends s
 
                 messageWithArgsInjected = messageWithArgsInjected.replace(
                     new RegExp(`\\{${i + startIndex}\\}`, "g"),
-                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                    (() => {
+                        if (key === "loginTitleHtml") {
+                            return arg;
+                        }
+
+                        return arg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                    })()
                 );
             });
 

stories/login/pages/Login.stories.tsx

@@ -122,73 +122,85 @@ export const WithSocialProviders: Story = {
                             loginUrl: "google",
                             alias: "google",
                             providerId: "google",
-                            displayName: "Google"
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
                         },
                         {
                             loginUrl: "microsoft",
                             alias: "microsoft",
                             providerId: "microsoft",
-                            displayName: "Microsoft"
+                            displayName: "Microsoft",
+                            iconClasses: "fa fa-windows"
                         },
                         {
                             loginUrl: "facebook",
                             alias: "facebook",
                             providerId: "facebook",
-                            displayName: "Facebook"
+                            displayName: "Facebook",
+                            iconClasses: "fa fa-facebook"
                         },
                         {
                             loginUrl: "instagram",
                             alias: "instagram",
                             providerId: "instagram",
-                            displayName: "Instagram"
+                            displayName: "Instagram",
+                            iconClasses: "fa fa-instagram"
                         },
                         {
                             loginUrl: "twitter",
                             alias: "twitter",
                             providerId: "twitter",
-                            displayName: "Twitter"
+                            displayName: "Twitter",
+                            iconClasses: "fa fa-twitter"
                         },
                         {
                             loginUrl: "linkedin",
                             alias: "linkedin",
                             providerId: "linkedin",
-                            displayName: "LinkedIn"
+                            displayName: "LinkedIn",
+                            iconClasses: "fa fa-linkedin"
                         },
                         {
                             loginUrl: "stackoverflow",
                             alias: "stackoverflow",
                             providerId: "stackoverflow",
-                            displayName: "Stackoverflow"
+                            displayName: "Stackoverflow",
+                            iconClasses: "fa fa-stack-overflow"
                         },
                         {
                             loginUrl: "github",
                             alias: "github",
                             providerId: "github",
-                            displayName: "Github"
+                            displayName: "Github",
+                            iconClasses: "fa fa-github"
                         },
                         {
                             loginUrl: "gitlab",
                             alias: "gitlab",
                             providerId: "gitlab",
-                            displayName: "Gitlab"
+                            displayName: "Gitlab",
+                            iconClasses: "fa fa-gitlab"
                         },
                         {
                             loginUrl: "bitbucket",
                             alias: "bitbucket",
                             providerId: "bitbucket",
-                            displayName: "Bitbucket"
+                            displayName: "Bitbucket",
+                            iconClasses: "fa fa-bitbucket"
                         },
                         {
                             loginUrl: "paypal",
                             alias: "paypal",
                             providerId: "paypal",
-                            displayName: "PayPal"
+                            displayName: "PayPal",
+                            iconClasses: "fa fa-paypal"
                         },
                         {
                             loginUrl: "openshift",
                             alias: "openshift",
                             providerId: "openshift",
-                            displayName: "OpenShift"
+                            displayName: "OpenShift",
+                            iconClasses: "fa fa-cloud"
                         }
                     ]
                 }

yarn.lock

@@ -4518,7 +4518,7 @@ cheerio-select@^2.1.0:
     domhandler "^5.0.3"
     domutils "^3.0.1"
 
-cheerio@^1.0.0-rc.12:
+cheerio@1.0.0-rc.12:
   version "1.0.0-rc.12"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
   integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
@@ -11332,7 +11332,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@^4.9.1-beta:
+typescript@^4.9.4:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==