Bump version

feat: addition of extra account pages

.github/workflows/ci.yaml

@@ -3,9 +3,6 @@ on:
   push:
     branches:
       - main
-      - v5
-      - v6
-      - v7
   pull_request:
     branches:
       - main

README.md

@@ -14,9 +14,6 @@
     <a href="https://github.com/garronej/keycloakify/blob/main/LICENSE">
       <img src="https://img.shields.io/npm/l/keycloakify">
     </a>
-    <a href="https://github.com/keycloakify/keycloakify/blob/729503fe31a155a823f46dd66ad4ff34ca274e0a/tsconfig.json#L14">
-        <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
-    </a>
     <a href="https://github.com/thomasdarimont/awesome-keycloak">
         <img src="https://awesome.re/mentioned-badge.svg"/>
     </a>
@@ -43,11 +40,7 @@
 
 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** [and up](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)!
 
-> 📣 I've observed that a few people have unstarred the project recently.  
-> I'm concerned that I may have inadvertently introduced some misinformation in the documentation, leading to frustration.  
-> If you're having a negative experience, [please let me know so I can resolve the issue](https://github.com/keycloakify/keycloakify/discussions/507).
-
-## Sponsor 👼
+## Sponsor
 
 We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.  
 Their dedicated support helps us continue the development and maintenance of this project.
@@ -70,12 +63,12 @@ Their dedicated support helps us continue the development and maintenance of thi
 </div>
 
 <p align="center">
-    <i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud IAM</a> and use promo code <code>keycloakify5</code></i>
+    <i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud-IAM</a> and use promo code <code>keycloakify5</code></i>
     <br/>
     <i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
 </p>
 
-Thank you, [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
+Thank you, [Cloud-IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
 
 ## Contributors ✨
 
@@ -130,6 +123,20 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
+## 9.5
+
+-   Post build hook: You can now apply custom transformation to your theme files. [Learn more](https://docs.keycloakify.dev/build-options#postbuild-hook).
+-   You can now specify your option in the Keycloakify's Vite plugin instead in the package.json. [See example](https://docs.keycloakify.dev/build-options#themename).
+
+## 9.4
+
+**Vite Support! 🎉**
+
+-   [The starter is now a Vite project](https://github.com/keycloakify/keycloakify-starter).
+    The Webpack based starter is accessible [here](https://github.com/keycloakify/keycloakify-starter-cra).
+-   CRA (Webpack) remains supported for the forseable future.
+-   If you have a CRA Keycloakify theme that you wish to migrate to Vite checkout [this migration guide](https://docs.keycloakify.dev/migration-guides/cra-greater-than-vite).
+
 ## 9.0
 
 Bring back support for account themes in Keycloak v23 and up! [See issue](https://github.com/keycloakify/keycloakify/issues/389).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "9.4.0-rc.14",
+    "version": "9.6.2",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -125,6 +125,7 @@
         "tsafe": "^1.6.0",
         "yauzl": "^2.10.0",
         "yazl": "^2.5.1",
-        "zod": "^3.17.10"
+        "zod": "^3.17.10",
+        "magic-string": "^0.30.7"
     }
 }

src/account/Fallback.tsx

@@ -6,6 +6,10 @@ import { assert, type Equals } from "tsafe/assert";
 
 const Password = lazy(() => import("keycloakify/account/pages/Password"));
 const Account = lazy(() => import("keycloakify/account/pages/Account"));
+const Sessions = lazy(() => import("keycloakify/account/pages/Sessions"));
+const Totp = lazy(() => import("keycloakify/account/pages/Totp"));
+const Applications = lazy(() => import("keycloakify/account/pages/Applications"));
+const Log = lazy(() => import("keycloakify/account/pages/Log"));
 
 export default function Fallback(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
@@ -16,8 +20,16 @@ export default function Fallback(props: PageProps<KcContext, I18n>) {
                 switch (kcContext.pageId) {
                     case "password.ftl":
                         return <Password kcContext={kcContext} {...rest} />;
+                    case "sessions.ftl":
+                        return <Sessions kcContext={kcContext} {...rest} />;
                     case "account.ftl":
                         return <Account kcContext={kcContext} {...rest} />;
+                    case "totp.ftl":
+                        return <Totp kcContext={kcContext} {...rest} />;
+                    case "applications.ftl":
+                        return <Applications kcContext={kcContext} {...rest} />;
+                    case "log.ftl":
+                        return <Log kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/account/TemplateProps.ts

@@ -11,4 +11,17 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     children: ReactNode;
 };
 
-export type ClassKey = "kcHtmlClass" | "kcBodyClass" | "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";
+export type ClassKey =
+    | "kcHtmlClass"
+    | "kcBodyClass"
+    | "kcButtonClass"
+    | "kcButtonPrimaryClass"
+    | "kcButtonLargeClass"
+    | "kcButtonDefaultClass"
+    | "kcContentWrapperClass"
+    | "kcFormClass"
+    | "kcFormGroupClass"
+    | "kcInputWrapperClass"
+    | "kcLabelClass"
+    | "kcInputClass"
+    | "kcInputErrorMessageClass";

src/account/kcContext/KcContext.ts

@@ -3,7 +3,7 @@ import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { type ThemeType } from "keycloakify/bin/constants";
 
-export type KcContext = KcContext.Password | KcContext.Account;
+export type KcContext = KcContext.Password | KcContext.Account | KcContext.Sessions | KcContext.Totp | KcContext.Applications | KcContext.Log;
 
 export declare namespace KcContext {
     export type Common = {
@@ -90,6 +90,16 @@ export declare namespace KcContext {
             lastName?: string;
             username?: string;
         };
+        properties: Record<string, string | undefined>;
+        sessions: {
+            sessions: {
+                ipAddress: string;
+                started?: any;
+                lastAccess?: any;
+                expires?: any;
+                clients: string[];
+            }[];
+        };
     };
 
     export type Password = Common & {
@@ -111,6 +121,144 @@ export declare namespace KcContext {
         };
         stateChecker: string;
     };
+
+    export type Sessions = Common & {
+        pageId: "sessions.ftl";
+        sessions: {
+            sessions: {
+                ipAddress: string;
+                started?: any;
+                lastAccess?: any;
+                expires?: any;
+                clients: string[];
+            }[];
+        };
+        stateChecker: string;
+    };
+
+    export type Totp = Common & {
+        pageId: "totp.ftl";
+        totp: {
+            enabled: boolean;
+            totpSecretEncoded: string;
+            qrUrl: string;
+            policy: {
+                algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
+                digits: number;
+                lookAheadWindow: number;
+            } & (
+                | {
+                      type: "totp";
+                      period: number;
+                  }
+                | {
+                      type: "hotp";
+                      initialCounter: number;
+                  }
+            );
+            supportedApplications: string[];
+            totpSecretQrCode: string;
+            manualUrl: string;
+            totpSecret: string;
+            otpCredentials: { id: string; userLabel: string }[];
+        };
+        mode?: "qr" | "manual" | undefined | null;
+        isAppInitiatedAction: boolean;
+        url: {
+            accountUrl: string;
+            passwordUrl: string;
+            totpUrl: string;
+            socialUrl: string;
+            sessionsUrl: string;
+            applicationsUrl: string;
+            logUrl: string;
+            resourceUrl: string;
+            resourcesCommonPath: string;
+            resourcesPath: string;
+            /** @deprecated, not present in recent keycloak version apparently, use kcContext.referrer instead */
+            referrerURI?: string;
+            getLogoutUrl: () => string;
+        };
+        stateChecker: string;
+    };
+
+    export type Applications = Common & {
+        pageId: "applications.ftl";
+        features: {
+            log: boolean;
+            identityFederation: boolean;
+            authorization: boolean;
+            passwordUpdateSupported: boolean;
+        };
+        stateChecker: string;
+        applications: {
+            applications: {
+                realmRolesAvailable: { name: string; description: string }[];
+                resourceRolesAvailable: Record<
+                    string,
+                    {
+                        roleName: string;
+                        roleDescription: string;
+                        clientName: string;
+                        clientId: string;
+                    }[]
+                >;
+                additionalGrants: string[];
+                clientScopesGranted: string[];
+                effectiveUrl?: string;
+                client: {
+                    consentScreenText: string;
+                    surrogateAuthRequired: boolean;
+                    bearerOnly: boolean;
+                    id: string;
+                    protocolMappersStream: Record<string, unknown>;
+                    includeInTokenScope: boolean;
+                    redirectUris: string[];
+                    fullScopeAllowed: boolean;
+                    registeredNodes: Record<string, unknown>;
+                    enabled: boolean;
+                    clientAuthenticatorType: string;
+                    realmScopeMappingsStream: Record<string, unknown>;
+                    scopeMappingsStream: Record<string, unknown>;
+                    displayOnConsentScreen: boolean;
+                    clientId: string;
+                    rootUrl: string;
+                    authenticationFlowBindingOverrides: Record<string, unknown>;
+                    standardFlowEnabled: boolean;
+                    attributes: Record<string, unknown>;
+                    publicClient: boolean;
+                    alwaysDisplayInConsole: boolean;
+                    consentRequired: boolean;
+                    notBefore: string;
+                    rolesStream: Record<string, unknown>;
+                    protocol: string;
+                    dynamicScope: boolean;
+                    directAccessGrantsEnabled: boolean;
+                    name: string;
+                    serviceAccountsEnabled: boolean;
+                    frontchannelLogout: boolean;
+                    nodeReRegistrationTimeout: string;
+                    implicitFlowEnabled: boolean;
+                    baseUrl: string;
+                    webOrigins: string[];
+                    realm: Record<string, unknown>;
+                };
+            }[];
+        };
+    };
+
+    export type Log = Common & {
+        pageId: "log.ftl";
+        log: {
+            events: {
+                date: string | number | Date;
+                event: string;
+                ipAddress: string;
+                client: any;
+                details: any[];
+            }[];
+        };
+    };
 }
 
 {

src/account/kcContext/createGetKcContext.ts

@@ -8,8 +8,9 @@ import { kcContextMocks, kcContextCommonMock } from "keycloakify/account/kcConte
 
 export function createGetKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
     mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
+    mockProperties?: Record<string, string>;
 }) {
-    const { mockData } = params ?? {};
+    const { mockData, mockProperties } = params ?? {};
 
     function getKcContext<PageId extends ExtendKcContext<KcContextExtension>["pageId"] | undefined = undefined>(params?: {
         mockPageId?: PageId;
@@ -82,6 +83,13 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
                 });
             }
 
+            if (mockProperties !== undefined) {
+                deepAssign({
+                    "target": kcContext.properties,
+                    "source": mockProperties
+                });
+            }
+
             return { kcContext };
         }
 

src/account/kcContext/kcContextMocks.ts

@@ -145,6 +145,28 @@ export const kcContextCommonMock: KcContext.Common = {
         "lastName": "doe",
         "email": "john.doe@code.gouv.fr",
         "username": "doe_j"
+    },
+    "properties": {
+        "parent": "account-v1",
+        "kcButtonLargeClass": "btn-lg",
+        "locales": "ar,ca,cs,da,de,en,es,fr,fi,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN",
+        "kcButtonPrimaryClass": "btn-primary",
+        "accountResourceProvider": "account-v1",
+        "styles":
+            "css/account.css img/icon-sidebar-active.png img/logo.png resources-common/node_modules/patternfly/dist/css/patternfly.min.css resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css",
+        "kcButtonClass": "btn",
+        "kcButtonDefaultClass": "btn-default"
+    },
+    "sessions": {
+        "sessions": [
+            {
+                "ipAddress": "127.0.0.1",
+                "started": new Date().toString(),
+                "lastAccess": new Date().toString(),
+                "expires": new Date().toString(),
+                "clients": ["Chrome", "Firefox"]
+            }
+        ]
     }
 };
 
@@ -171,5 +193,62 @@ export const kcContextMocks: KcContext[] = [
             "editUsernameAllowed": true
         },
         "stateChecker": ""
+    }),
+    id<KcContext.Sessions>({
+        ...kcContextCommonMock,
+        "pageId": "sessions.ftl",
+        "sessions": {
+            "sessions": [
+                {
+                    ...kcContextCommonMock.sessions,
+                    "ipAddress": "127.0.0.1",
+                    "started": new Date().toString(),
+                    "lastAccess": new Date().toString(),
+                    "expires": new Date().toString(),
+                    "clients": ["Chrome", "Firefox"]
+                }
+            ]
+        },
+        "stateChecker": "g6WB1FaYnKotTkiy7ZrlxvFztSqS0U8jvHsOOOb2z4g"
+    }),
+    id<KcContext.Totp>({
+        ...kcContextCommonMock,
+        "pageId": "totp.ftl",
+        "totp": {
+            "enabled": true,
+            "totpSecretEncoded": "KVVF G2BY N4YX S6LB IUYT K2LH IFYE 4SBV",
+            "qrUrl": "#",
+            "totpSecretQrCode":
+                "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACM0lEQVR4Xu3OIZJgOQwDUDFd2UxiurLAVnnbHw4YGDKtSiWOn4Gxf81//7r/+q8b4HfLGBZDK9d85NmNR+sB42sXvOYrN5P1DcgYYFTGfOlbzE8gzwy3euweGizw7cfdl34/GRhlkxjKNV+5AebPXPORX1JuB9x8ZfbyyD2y1krWAKsbMq1HnqQDaLfa77p4+MqvzEGSqvSAD/2IHW2yHaigR9tX3m8dDIYGcNf3f+gDpVBZbZU77zyJ6Rlcy+qoTMG887KAPD9hsh6a1Sv3gJUHGHUAxSMzj7zqDDe7Phmt2eG+8UsMxjRGm816MAO+8VMl1R1jGHOrZB/5Zo/WXAPgxixm9Mo96vDGrM1eOto8c4Ax4wF437mifOXlpiPzCnN7Y9l95NnEMxgMY9AAGA8fucH14Y1aVb6N/cqrmyh0BVht7k1e+bU8LK0Cg5vmVq9c5vHIjOfqxDIfeTraNVTwewa4wVe+SW5N+uP1qACeudUZbqGOfA6VZV750Noq2Xx3kpveV44ZelSV1V7KFHzkWyVrrlUwG0Pl9pWnoy3vsQoME6vKI69i5osVgwWzHT7zjmJtMcNUSVn1oYMd7ZodbgowZl45VG0uVuLPUr1yc79uaQBag/mqR34xhlWyHm1prplHboCWdZ4TeZjsK8+dI+jbz1C5hl65mcpgB5dhcj8+dGO+0Ko68+lD37JDD83dpDLzzK+TrQyaVwGj6pUboGV+7+AyN8An/pf84/7rv/4/1l4OCc/1BYMAAAAASUVORK5CYII=",
+            "manualUrl": "#",
+            "totpSecret": "G4nsI8lQagRMUchH8jEG",
+            "otpCredentials": [],
+            "supportedApplications": ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+            "policy": {
+                "algorithm": "HmacSHA1",
+                "digits": 6,
+                "lookAheadWindow": 1,
+                "type": "totp",
+                "period": 30
+            }
+        },
+        "mode": "qr",
+        "isAppInitiatedAction": false,
+        "stateChecker": ""
+    }),
+    id<KcContext.Log>({
+        ...kcContextCommonMock,
+        "pageId": "log.ftl",
+        "log": {
+            "events": [
+                {
+                    "date": "2/21/2024, 1:28:39 PM",
+                    "event": "login",
+                    "ipAddress": "172.17.0.1",
+                    "client": "security-admin-console",
+                    "details": ["auth_method = openid-connect, username = admin"]
+                }
+            ]
+        }
     })
 ];

src/account/lib/useGetClassName.ts

@@ -6,8 +6,15 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         "kcHtmlClass": undefined,
         "kcBodyClass": undefined,
         "kcButtonClass": "btn",
+        "kcContentWrapperClass": "row",
         "kcButtonPrimaryClass": "btn-primary",
         "kcButtonLargeClass": "btn-lg",
-        "kcButtonDefaultClass": "btn-default"
+        "kcButtonDefaultClass": "btn-default",
+        "kcFormClass": "form-horizontal",
+        "kcFormGroupClass": "form-group",
+        "kcInputWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcLabelClass": "control-label",
+        "kcInputClass": "form-control",
+        "kcInputErrorMessageClass": "pf-c-form__helper-text pf-m-error required kc-feedback-text"
     }
 });

src/account/pages/Applications.tsx

@@ -0,0 +1,138 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+function isArrayWithEmptyObject(variable: any): boolean {
+    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
+}
+
+export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const {
+        url,
+        applications: { applications },
+        stateChecker
+    } = kcContext;
+
+    const { msg, advancedMsg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="applications">
+            <div className="row">
+                <div className="col-md-10">
+                    <h2>{msg("applicationsHtmlTitle")}</h2>
+                </div>
+
+                <form action={url.applicationsUrl} method="post">
+                    <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                    <input type="hidden" id="referrer" name="referrer" value={stateChecker} />
+
+                    <table className="table table-striped table-bordered">
+                        <thead>
+                            <tr>
+                                <td>{msg("application")}</td>
+                                <td>{msg("availableRoles")}</td>
+                                <td>{msg("grantedPermissions")}</td>
+                                <td>{msg("additionalGrants")}</td>
+                                <td>{msg("action")}</td>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            {applications.map(application => (
+                                <tr key={application.client.clientId}>
+                                    <td>
+                                        {application.effectiveUrl && (
+                                            <a href={application.effectiveUrl}>
+                                                {(application.client.name && advancedMsg(application.client.name)) || application.client.clientId}
+                                            </a>
+                                        )}
+                                        {!application.effectiveUrl &&
+                                            ((application.client.name && advancedMsg(application.client.name)) || application.client.clientId)}
+                                    </td>
+
+                                    <td>
+                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) &&
+                                            application.realmRolesAvailable.map(role => (
+                                                <span key={role.name}>
+                                                    {role.description ? advancedMsg(role.description) : advancedMsg(role.name)}
+                                                    {role !== application.realmRolesAvailable[application.realmRolesAvailable.length - 1] && ", "}
+                                                </span>
+                                            ))}
+                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) && application.resourceRolesAvailable && ", "}
+                                        {application.resourceRolesAvailable &&
+                                            Object.keys(application.resourceRolesAvailable).map(resource => (
+                                                <span key={resource}>
+                                                    {!isArrayWithEmptyObject(application.realmRolesAvailable) && ", "}
+                                                    {application.resourceRolesAvailable[resource].map(clientRole => (
+                                                        <span key={clientRole.roleName}>
+                                                            {clientRole.roleDescription
+                                                                ? advancedMsg(clientRole.roleDescription)
+                                                                : advancedMsg(clientRole.roleName)}{" "}
+                                                            {msg("inResource")}{" "}
+                                                            <strong>
+                                                                {clientRole.clientName ? advancedMsg(clientRole.clientName) : clientRole.clientId}
+                                                            </strong>
+                                                            {clientRole !==
+                                                                application.resourceRolesAvailable[resource][
+                                                                    application.resourceRolesAvailable[resource].length - 1
+                                                                ] && ", "}
+                                                        </span>
+                                                    ))}
+                                                </span>
+                                            ))}
+                                    </td>
+
+                                    <td>
+                                        {application.client.consentRequired ? (
+                                            application.clientScopesGranted.map(claim => (
+                                                <span key={claim}>
+                                                    {advancedMsg(claim)}
+                                                    {claim !== application.clientScopesGranted[application.clientScopesGranted.length - 1] && ", "}
+                                                </span>
+                                            ))
+                                        ) : (
+                                            <strong>{msg("fullAccess")}</strong>
+                                        )}
+                                    </td>
+
+                                    <td>
+                                        {application.additionalGrants.map(grant => (
+                                            <span key={grant}>
+                                                {advancedMsg(grant)}
+                                                {grant !== application.additionalGrants[application.additionalGrants.length - 1] && ", "}
+                                            </span>
+                                        ))}
+                                    </td>
+
+                                    <td>
+                                        {(application.client.consentRequired && application.clientScopesGranted.length > 0) ||
+                                        application.additionalGrants.length > 0 ? (
+                                            <button
+                                                type="submit"
+                                                className={clsx(getClassName("kcButtonPrimaryClass"), getClassName("kcButtonClass"))}
+                                                id={`revoke-${application.client.clientId}`}
+                                                name="clientId"
+                                                value={application.client.id}
+                                            >
+                                                {msg("revoke")}
+                                            </button>
+                                        ) : null}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </form>
+            </div>
+        </Template>
+    );
+}

src/account/pages/Log.tsx

@@ -0,0 +1,70 @@
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+import { Key } from "react";
+import { useGetClassName } from "../lib/useGetClassName";
+
+export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { log } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="log">
+            <div className={getClassName("kcContentWrapperClass")}>
+                <div className="col-md-10">
+                    <h2>{msg("accountLogHtmlTitle")}</h2>
+                </div>
+
+                <table className="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <td>{msg("date")}</td>
+                            <td>{msg("event")}</td>
+                            <td>{msg("ip")}</td>
+                            <td>{msg("client")}</td>
+                            <td>{msg("details")}</td>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        {log.events.map(
+                            (
+                                event: {
+                                    date: string | number | Date;
+                                    event: string;
+                                    ipAddress: string;
+                                    client: any;
+                                    details: any[];
+                                },
+                                index: Key | null | undefined
+                            ) => (
+                                <tr key={index}>
+                                    <td>{event.date ? new Date(event.date).toLocaleString() : ""}</td>
+                                    <td>{event.event}</td>
+                                    <td>{event.ipAddress}</td>
+                                    <td>{event.client || ""}</td>
+                                    <td>
+                                        {event.details.map((detail, detailIndex) => (
+                                            <span key={detailIndex}>
+                                                {`${detail.key} = ${detail.value}`}
+                                                {detailIndex < event.details.length - 1 && ", "}
+                                            </span>
+                                        ))}
+                                    </td>
+                                </tr>
+                            )
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </Template>
+    );
+}

src/account/pages/PageProps.ts

@@ -1,10 +1,11 @@
 import type { I18n } from "keycloakify/account/i18n";
 import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import type { KcContext } from "keycloakify/account/kcContext";
 
-export type PageProps<KcContext, I18nExtended extends I18n> = {
+export type PageProps<NarowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
     Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
-    kcContext: KcContext;
+    kcContext: NarowedKcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;

src/account/pages/Sessions.tsx

@@ -0,0 +1,68 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    console.log({ kcContext });
+    const { url, stateChecker, sessions } = kcContext;
+
+    const { msg } = i18n;
+    console.log({ sdf: kcContext.locale?.supported });
+    console.log({ asdf: "asdf" });
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
+            <div className={getClassName("kcContentWrapperClass")}>
+                <div className="col-md-10">
+                    <h2>{msg("sessionsHtmlTitle")}</h2>
+                </div>
+            </div>
+
+            <table className="table table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th>{msg("ip")}</th>
+                        <th>{msg("started")}</th>
+                        <th>{msg("lastAccess")}</th>
+                        <th>{msg("expires")}</th>
+                        <th>{msg("clients")}</th>
+                    </tr>
+                </thead>
+
+                <tbody role="rowgroup">
+                    {sessions.sessions.map((session, index: number) => (
+                        <tr key={index}>
+                            <td>{session.ipAddress}</td>
+                            <td>{session?.started}</td>
+                            <td>{session?.lastAccess}</td>
+                            <td>{session?.expires}</td>
+                            <td>
+                                {session.clients.map((client: string, clientIndex: number) => (
+                                    <div key={clientIndex}>
+                                        {client}
+                                        <br />
+                                    </div>
+                                ))}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+
+            <form action={url.sessionsUrl} method="post">
+                <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                <button id="logout-all-sessions" type="submit" className={clsx(getClassName("kcButtonDefaultClass"), getClassName("kcButtonClass"))}>
+                    {msg("doLogOutAllSessions")}
+                </button>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Totp.tsx

@@ -0,0 +1,236 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+import { MessageKey } from "keycloakify/account/i18n/i18n";
+
+export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
+        "HmacSHA1": "SHA1",
+        "HmacSHA256": "SHA256",
+        "HmacSHA512": "SHA512"
+    };
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
+            <>
+                <div className="row">
+                    <div className="col-md-10">
+                        <h2>{msg("authenticatorTitle")}</h2>
+                    </div>
+                    {totp.otpCredentials.length === 0 && (
+                        <div className="subtitle col-md-2">
+                            <span className="required">*</span>
+                            {msg("requiredFields")}
+                        </div>
+                    )}
+                </div>
+                {totp.enabled && (
+                    <table className="table table-bordered table-striped">
+                        <thead>
+                            {totp.otpCredentials.length > 1 ? (
+                                <tr>
+                                    <th colSpan={4}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            ) : (
+                                <tr>
+                                    <th colSpan={3}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            )}
+                        </thead>
+                        <tbody>
+                            {totp.otpCredentials.map((credential, index) => (
+                                <tr key={index}>
+                                    <td className="provider">{msg("mobile")}</td>
+                                    {totp.otpCredentials.length > 1 && <td className="provider">{credential.id}</td>}
+                                    <td className="provider">{credential.userLabel || ""}</td>
+                                    <td className="action">
+                                        <form action={url.totpUrl} method="post" className="form-inline">
+                                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" id="submitAction" name="submitAction" value="Delete" />
+                                            <input type="hidden" id="credentialId" name="credentialId" value={credential.id} />
+                                            <button id={`remove-mobile-${index}`} className="btn btn-default">
+                                                <i className="pficon pficon-delete"></i>
+                                            </button>
+                                        </form>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+                {!totp.enabled && (
+                    <div>
+                        <hr />
+                        <ol id="kc-totp-settings">
+                            <li>
+                                <p>{msg("totpStep1")}</p>
+
+                                <ul id="kc-totp-supported-apps">
+                                    {totp.supportedApplications.map(app => (
+                                        <li key={app}>{msg(app as MessageKey)}</li>
+                                    ))}
+                                </ul>
+                            </li>
+
+                            {mode && mode == "manual" ? (
+                                <>
+                                    <li>
+                                        <p>{msg("totpManualStep2")}</p>
+                                        <p>
+                                            <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                        </p>
+                                        <p>
+                                            <a href={totp.qrUrl} id="mode-barcode">
+                                                {msg("totpScanBarcode")}
+                                            </a>
+                                        </p>
+                                    </li>
+                                    <li>
+                                        <p>{msg("totpManualStep3")}</p>
+                                        <p>
+                                            <ul>
+                                                <li id="kc-totp-type">
+                                                    {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
+                                                </li>
+                                                <li id="kc-totp-algorithm">
+                                                    {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                                </li>
+                                                <li id="kc-totp-digits">
+                                                    {msg("totpDigits")}: {totp.policy.digits}
+                                                </li>
+                                                {totp.policy.type === "totp" ? (
+                                                    <li id="kc-totp-period">
+                                                        {msg("totpInterval")}: {totp.policy.period}
+                                                    </li>
+                                                ) : (
+                                                    <li id="kc-totp-counter">
+                                                        {msg("totpCounter")}: {totp.policy.initialCounter}
+                                                    </li>
+                                                )}
+                                            </ul>
+                                        </p>
+                                    </li>
+                                </>
+                            ) : (
+                                <li>
+                                    <p>{msg("totpStep2")}</p>
+                                    <p>
+                                        <img
+                                            id="kc-totp-secret-qr-code"
+                                            src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+                                            alt="Figure: Barcode"
+                                        />
+                                    </p>
+                                    <p>
+                                        <a href={totp.manualUrl} id="mode-manual">
+                                            {msg("totpUnableToScan")}
+                                        </a>
+                                    </p>
+                                </li>
+                            )}
+                            <li>
+                                <p>{msg("totpStep3")}</p>
+                                <p>{msg("totpStep3DeviceName")}</p>
+                            </li>
+                        </ol>
+                        <hr />
+                        <form action={url.totpUrl} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="totp" className="control-label">
+                                        {msg("authenticatorCode")}
+                                    </label>
+                                    <span className="required">*</span>
+                                </div>
+                                <div className="col-sm-10 col-md-10">
+                                    <input
+                                        type="text"
+                                        id="totp"
+                                        name="totp"
+                                        autoComplete="off"
+                                        className={getClassName("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("totp")}
+                                    />
+
+                                    {messagesPerField.existsError("totp") && (
+                                        <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                            {messagesPerField.get("totp")}
+                                        </span>
+                                    )}
+                                </div>
+                                <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                                {mode && <input type="hidden" id="mode" value={mode} />}
+                            </div>
+
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                        {msg("totpDeviceName")}
+                                    </label>
+                                    {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                                </div>
+                                <div className="col-sm-10 col-md-10">
+                                    <input
+                                        type="text"
+                                        id="userLabel"
+                                        name="userLabel"
+                                        autoComplete="off"
+                                        className={getClassName("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("userLabel")}
+                                    />
+                                    {messagesPerField.existsError("userLabel") && (
+                                        <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                            {messagesPerField.get("userLabel")}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div id="kc-form-buttons" className={clsx(getClassName("kcFormGroupClass"), "text-right")}>
+                                <div className={getClassName("kcInputWrapperClass")}>
+                                    <input
+                                        type="submit"
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonPrimaryClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        id="saveTOTPBtn"
+                                        value={msgStr("doSave")}
+                                    />
+                                    <button
+                                        type="submit"
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonDefaultClass"),
+                                            getClassName("kcButtonLargeClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        id="cancelTOTPBtn"
+                                        name="submitAction"
+                                        value="Cancel"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                )}
+            </>
+        </Template>
+    );
+}

src/bin/constants.ts

@@ -10,3 +10,5 @@ export const retrocompatPostfix = "_retrocompat";
 export const accountV1ThemeName = "account-v1";
 
 export type ThemeType = (typeof themeTypes)[number];
+
+export const keycloakifyBuildOptionsForPostPostBuildScriptEnvName = "KEYCLOAKIFY_BUILD_OPTIONS_POST_POST_BUILD_SCRIPT";

src/bin/download-builtin-keycloak-theme.ts

@@ -50,6 +50,49 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
                     });
                 }
 
+                install_and_move_to_common_resources_generated_in_keycloak_v2: {
+                    if (!fs.readFileSync(pathJoin(destDirPath, "keycloak", "login", "theme.properties")).toString("utf8").includes("web_modules")) {
+                        break install_and_move_to_common_resources_generated_in_keycloak_v2;
+                    }
+
+                    const accountV2DirSrcDirPath = pathJoin(destDirPath, "keycloak.v2", "account", "src");
+
+                    if (!fs.existsSync(accountV2DirSrcDirPath)) {
+                        break install_and_move_to_common_resources_generated_in_keycloak_v2;
+                    }
+
+                    const packageManager = fs.existsSync(pathJoin(accountV2DirSrcDirPath, "pnpm-lock.yaml")) ? "pnpm" : "npm";
+
+                    if (packageManager === "pnpm") {
+                        try {
+                            child_process.execSync(`which pnpm`);
+                        } catch {
+                            console.log(`Installing pnpm globally`);
+                            child_process.execSync(`npm install -g pnpm`);
+                        }
+                    }
+
+                    child_process.execSync(`${packageManager} install`, { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
+
+                    const packageJsonFilePath = pathJoin(accountV2DirSrcDirPath, "package.json");
+
+                    const packageJsonRaw = fs.readFileSync(packageJsonFilePath);
+
+                    const parsedPackageJson = JSON.parse(packageJsonRaw.toString("utf8"));
+
+                    parsedPackageJson.scripts.build = parsedPackageJson.scripts.build
+                        .replace(`${packageManager} run check-types`, "true")
+                        .replace(`${packageManager} run babel`, "true");
+
+                    fs.writeFileSync(packageJsonFilePath, Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8"));
+
+                    child_process.execSync(`${packageManager} run build`, { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
+
+                    fs.writeFileSync(packageJsonFilePath, packageJsonRaw);
+
+                    fs.rmSync(pathJoin(accountV2DirSrcDirPath, "node_modules"), { "recursive": true });
+                }
+
                 remove_keycloak_v2: {
                     const keycloakV2DirPath = pathJoin(destDirPath, "keycloak.v2");
 
@@ -181,34 +224,6 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
                         );
                     }
 
-                    {
-                        const totpFtlFilePath = pathJoin(destDirPath, "base", "account", "totp.ftl");
-
-                        fs.writeFileSync(
-                            totpFtlFilePath,
-                            Buffer.from(
-                                fs
-                                    .readFileSync(totpFtlFilePath)
-                                    .toString("utf8")
-                                    .replace(
-                                        [
-                                            "                <#list totp.policy.supportedApplications as app>",
-                                            "                    <li>${app}</li>",
-                                            "                </#list>"
-                                        ].join("\n"),
-                                        [
-                                            "                <#if totp.policy.supportedApplications?has_content>",
-                                            "                    <#list totp.policy.supportedApplications as app>",
-                                            "                        <li>${app}</li>",
-                                            "                    </#list>",
-                                            "                </#if>"
-                                        ].join("\n")
-                                    ),
-                                "utf8"
-                            )
-                        );
-                    }
-
                     // Note, this is an optimization for reducing the size of the jar,
                     // For this version we know exactly which resources are used.
                     {

src/bin/keycloakify/buildOptions/UserProvidedBuildOptions.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export type UserProvidedBuildOptions = {
+    extraThemeProperties?: string[];
+    artifactId?: string;
+    groupId?: string;
+    doCreateJar?: boolean;
+    loginThemeResourcesFromKeycloakVersion?: string;
+    reactAppBuildDirPath?: string;
+    keycloakifyBuildDirPath?: string;
+    themeName?: string | string[];
+    doBuildRetrocompatAccountTheme?: boolean;
+};
+
+export const zUserProvidedBuildOptions = z.object({
+    "extraThemeProperties": z.array(z.string()).optional(),
+    "artifactId": z.string().optional(),
+    "groupId": z.string().optional(),
+    "doCreateJar": z.boolean().optional(),
+    "loginThemeResourcesFromKeycloakVersion": z.string().optional(),
+    "reactAppBuildDirPath": z.string().optional(),
+    "keycloakifyBuildDirPath": z.string().optional(),
+    "themeName": z.union([z.string(), z.array(z.string())]).optional(),
+    "doBuildRetrocompatAccountTheme": z.boolean().optional()
+});

src/bin/keycloakify/buildOptions/buildOptions.ts

@@ -47,10 +47,15 @@ export function readBuildOptions(params: { processArgv: string[] }): BuildOption
         throw new Error("Keycloakify's Vite plugin output not found");
     }
 
-    const parsedPackageJson = readParsedPackageJson({ reactAppRootDirPath });
+    const { keycloakify: userProvidedBuildOptionsFromPackageJson, ...parsedPackageJson } = readParsedPackageJson({ reactAppRootDirPath });
+
+    const userProvidedBuildOptions = {
+        ...userProvidedBuildOptionsFromPackageJson,
+        ...resolvedViteConfig?.userProvidedBuildOptions
+    };
 
     const themeNames = (() => {
-        if (parsedPackageJson.keycloakify?.themeName === undefined) {
+        if (userProvidedBuildOptions.themeName === undefined) {
             return [
                 parsedPackageJson.name
                     .replace(/^@(.*)/, "$1")
@@ -59,11 +64,11 @@ export function readBuildOptions(params: { processArgv: string[] }): BuildOption
             ];
         }
 
-        if (typeof parsedPackageJson.keycloakify.themeName === "string") {
-            return [parsedPackageJson.keycloakify.themeName];
+        if (typeof userProvidedBuildOptions.themeName === "string") {
+            return [userProvidedBuildOptions.themeName];
         }
 
-        return parsedPackageJson.keycloakify.themeName;
+        return userProvidedBuildOptions.themeName;
     })();
 
     const reactAppBuildDirPath = (() => {
@@ -72,9 +77,9 @@ export function readBuildOptions(params: { processArgv: string[] }): BuildOption
                 break webpack;
             }
 
-            if (parsedPackageJson.keycloakify?.reactAppBuildDirPath !== undefined) {
+            if (userProvidedBuildOptions.reactAppBuildDirPath !== undefined) {
                 return getAbsoluteAndInOsFormatPath({
-                    "pathIsh": parsedPackageJson.keycloakify?.reactAppBuildDirPath,
+                    "pathIsh": userProvidedBuildOptions.reactAppBuildDirPath,
                     "cwd": reactAppRootDirPath
                 });
             }
@@ -94,13 +99,13 @@ export function readBuildOptions(params: { processArgv: string[] }): BuildOption
         "isSilent": typeof argv["silent"] === "boolean" ? argv["silent"] : false,
         "themeVersion": process.env.KEYCLOAKIFY_THEME_VERSION ?? parsedPackageJson.version ?? "0.0.0",
         themeNames,
-        "extraThemeProperties": parsedPackageJson.keycloakify?.extraThemeProperties,
+        "extraThemeProperties": userProvidedBuildOptions.extraThemeProperties,
         "groupId": (() => {
             const fallbackGroupId = `${themeNames[0]}.keycloak`;
 
             return (
                 process.env.KEYCLOAKIFY_GROUP_ID ??
-                parsedPackageJson.keycloakify?.groupId ??
+                userProvidedBuildOptions.groupId ??
                 (parsedPackageJson.homepage === undefined
                     ? fallbackGroupId
                     : urlParse(parsedPackageJson.homepage)
@@ -110,20 +115,23 @@ export function readBuildOptions(params: { processArgv: string[] }): BuildOption
                           .join(".") ?? fallbackGroupId) + ".keycloak"
             );
         })(),
-        "artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? parsedPackageJson.keycloakify?.artifactId ?? `${themeNames[0]}-keycloak-theme`,
-        "doCreateJar": parsedPackageJson.keycloakify?.doCreateJar ?? true,
-        "loginThemeResourcesFromKeycloakVersion": parsedPackageJson.keycloakify?.loginThemeResourcesFromKeycloakVersion ?? "11.0.3",
+        "artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? userProvidedBuildOptions.artifactId ?? `${themeNames[0]}-keycloak-theme`,
+        "doCreateJar": userProvidedBuildOptions.doCreateJar ?? true,
+        "loginThemeResourcesFromKeycloakVersion": userProvidedBuildOptions.loginThemeResourcesFromKeycloakVersion ?? "11.0.3",
         reactAppRootDirPath,
         reactAppBuildDirPath,
         "keycloakifyBuildDirPath": (() => {
-            if (parsedPackageJson.keycloakify?.keycloakifyBuildDirPath !== undefined) {
+            if (userProvidedBuildOptions.keycloakifyBuildDirPath !== undefined) {
                 return getAbsoluteAndInOsFormatPath({
-                    "pathIsh": parsedPackageJson.keycloakify?.keycloakifyBuildDirPath,
+                    "pathIsh": userProvidedBuildOptions.keycloakifyBuildDirPath,
                     "cwd": reactAppRootDirPath
                 });
             }
 
-            return resolvedViteConfig?.buildDir === undefined ? "build_keycloak" : `${resolvedViteConfig.buildDir}_keycloak`;
+            return pathJoin(
+                reactAppRootDirPath,
+                resolvedViteConfig?.buildDir === undefined ? "build_keycloak" : `${resolvedViteConfig.buildDir}_keycloak`
+            );
         })(),
         "publicDirPath": (() => {
             webpack: {
@@ -179,7 +187,7 @@ export function readBuildOptions(params: { processArgv: string[] }): BuildOption
 
             return pathJoin(reactAppBuildDirPath, resolvedViteConfig.assetsDir);
         })(),
-        "doBuildRetrocompatAccountTheme": parsedPackageJson.keycloakify?.doBuildRetrocompatAccountTheme ?? true,
+        "doBuildRetrocompatAccountTheme": userProvidedBuildOptions.doBuildRetrocompatAccountTheme ?? true,
         npmWorkspaceRootDirPath
     };
 }

src/bin/keycloakify/buildOptions/parsedPackageJson.ts

@@ -3,41 +3,20 @@ import { assert } from "tsafe";
 import type { Equals } from "tsafe";
 import { z } from "zod";
 import { join as pathJoin } from "path";
+import { type UserProvidedBuildOptions, zUserProvidedBuildOptions } from "./UserProvidedBuildOptions";
 
 export type ParsedPackageJson = {
     name: string;
     version?: string;
     homepage?: string;
-    keycloakify?: {
-        extraThemeProperties?: string[];
-        artifactId?: string;
-        groupId?: string;
-        doCreateJar?: boolean;
-        loginThemeResourcesFromKeycloakVersion?: string;
-        reactAppBuildDirPath?: string;
-        keycloakifyBuildDirPath?: string;
-        themeName?: string | string[];
-        doBuildRetrocompatAccountTheme?: boolean;
-    };
+    keycloakify?: UserProvidedBuildOptions;
 };
 
 const zParsedPackageJson = z.object({
     "name": z.string(),
     "version": z.string().optional(),
     "homepage": z.string().optional(),
-    "keycloakify": z
-        .object({
-            "extraThemeProperties": z.array(z.string()).optional(),
-            "artifactId": z.string().optional(),
-            "groupId": z.string().optional(),
-            "doCreateJar": z.boolean().optional(),
-            "loginThemeResourcesFromKeycloakVersion": z.string().optional(),
-            "reactAppBuildDirPath": z.string().optional(),
-            "keycloakifyBuildDirPath": z.string().optional(),
-            "themeName": z.union([z.string(), z.array(z.string())]).optional(),
-            "doBuildRetrocompatAccountTheme": z.boolean().optional()
-        })
-        .optional()
+    "keycloakify": zUserProvidedBuildOptions.optional()
 });
 
 assert<Equals<ReturnType<(typeof zParsedPackageJson)["parse"]>, ParsedPackageJson>>();

src/bin/keycloakify/buildOptions/resolvedViteConfig.ts

@@ -5,19 +5,22 @@ import { z } from "zod";
 import { join as pathJoin } from "path";
 import { resolvedViteConfigJsonBasename } from "../../constants";
 import type { OptionalIfCanBeUndefined } from "../../tools/OptionalIfCanBeUndefined";
+import { UserProvidedBuildOptions, zUserProvidedBuildOptions } from "./UserProvidedBuildOptions";
 
 export type ResolvedViteConfig = {
     buildDir: string;
     publicDir: string;
     assetsDir: string;
     urlPathname: string | undefined;
+    userProvidedBuildOptions: UserProvidedBuildOptions;
 };
 
 const zResolvedViteConfig = z.object({
     "buildDir": z.string(),
     "publicDir": z.string(),
     "assetsDir": z.string(),
-    "urlPathname": z.string().optional()
+    "urlPathname": z.string().optional(),
+    "userProvidedBuildOptions": zUserProvidedBuildOptions
 });
 
 {

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -431,7 +431,7 @@
         <#if isHash>
 
             <#if path?size gt 10>
-                <#return "ABORT: Too many recursive calls">
+                <#return "ABORT: Too many recursive calls, path: " + path?join(".")>
             </#if>
 
             <#local keys = "">
@@ -463,9 +463,10 @@
                         <#-- https://github.com/keycloakify/keycloakify/issues/91#issue-1212319466 (reports with error.ftl and Kc18) -->
                         <#-- https://github.com/keycloakify/keycloakify/issues/109#issuecomment-1134610163 -->
                         <#-- https://github.com/keycloakify/keycloakify/issues/357 -->
+                        <#-- https://github.com/keycloakify/keycloakify/discussions/406#discussioncomment-7514787 -->
                         key == "loginAction" && 
                         are_same_path(path, ["url"]) && 
-                        ["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl", "logout-confirm.ftl"]?seq_contains(pageId) &&
+                        ["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl", "logout-confirm.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) &&
                         !(auth?has_content && auth.showTryAnotherWayLink())
                     ) || (
                         <#-- https://github.com/keycloakify/keycloakify/issues/362 -->
@@ -488,24 +489,33 @@
                         !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
                     ) || (
                         "applications.ftl" == pageId &&
-                        are_same_path(path, ["applications", "applications", "*", "client", "realm"])
+                        is_subpath(path, ["applications", "applications"]) &&
+                        ( 
+                            key == "realm" || 
+                            key == "container" 
+                        )
                     ) || (
-                        "applications.ftl" == pageId &&
-                        "masterAdminClient" == key
+                        are_same_path(path, ["user"]) &&
+                        key == "delegateForUpdate"
                     )
                 >
-                    <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
+                    <#local out_seq += ["/*If you need '" + path?join(".") + "." + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
                     <#continue>
                 </#if>
 
-                <#if pageId == "register.ftl" && key == "attemptedUsername" && are_same_path(path, ["auth"])>
+                <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
+                <#if (
+                    ["register.ftl", "info.ftl", "login.ftl", "login-update-password.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) && 
+                    key == "attemptedUsername" && are_same_path(path, ["auth"])
+                )>
                     <#attempt>
                         <#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
-                        <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
                         <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+                            <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
                             <#continue>
                         </#if>
                     <#recover>
+                        <#local out_seq += ["/*Testing if attemptedUsername should be skipped throwed an exception */"]>
                     </#attempt>
                 </#if>
                 
@@ -658,9 +668,9 @@
         <#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non enumerable object">
 
 </#function>
-<#function are_same_path path searchedPath>
+<#function is_subpath path searchedPath>
 
-    <#if path?size != searchedPath?size>
+    <#if path?size < searchedPath?size>
         <#return false>
     </#if>
 
@@ -668,8 +678,14 @@
 
     <#list path as property>
 
+        <#if i == searchedPath?size >
+            <#continue>
+        </#if>
+
         <#local searchedProperty=searchedPath[i]>
 
+        <#local i+= 1>
+
         <#if searchedProperty?is_string && searchedProperty == "*">
             <#continue>
         </#if>
@@ -686,11 +702,13 @@
             <#return false>
         </#if>
 
-        <#local i+= 1>
-
     </#list>
 
     <#return true>
 
 </#function>
+
+<#function are_same_path path searchedPath>
+    <#return path?size == searchedPath?size && is_subpath(path, searchedPath)>
+</#function>
 </script>

src/bin/keycloakify/generateFtl/pageId.ts

@@ -27,7 +27,7 @@ export const loginThemePageIds = [
     "saml-post-form.ftl"
 ] as const;
 
-export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;
+export const accountThemePageIds = ["password.ftl", "account.ftl", "sessions.ftl", "totp.ftl", "applications.ftl", "log.ftl"] as const;
 
 export type LoginThemePageId = (typeof loginThemePageIds)[number];
 export type AccountThemePageId = (typeof accountThemePageIds)[number];

src/bin/keycloakify/generateTheme/generateTheme.ts

@@ -20,6 +20,7 @@ import { readFieldNameUsage } from "./readFieldNameUsage";
 import { readExtraPagesNames } from "./readExtraPageNames";
 import { generateMessageProperties } from "./generateMessageProperties";
 import { bringInAccountV1 } from "./bringInAccountV1";
+import { rmSync } from "../../tools/fs.rmSync";
 
 export type BuildOptionsLike = {
     bundler: "vite" | "webpack";
@@ -78,6 +79,11 @@ export async function generateTheme(params: {
         const themeTypeDirPath = getThemeTypeDirPath({ themeType });
 
         apply_replacers_and_move_to_theme_resources: {
+            const destDirPath = pathJoin(themeTypeDirPath, "resources", basenameOfTheKeycloakifyResourcesDir);
+
+            // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
+            rmSync(destDirPath, { "recursive": true, "force": true });
+
             if (themeType === "account" && implementedThemeTypes.login) {
                 // NOTE: We prevend doing it twice, it has been done for the login theme.
 
@@ -89,7 +95,7 @@ export async function generateTheme(params: {
                         "resources",
                         basenameOfTheKeycloakifyResourcesDir
                     ),
-                    "destDirPath": pathJoin(themeTypeDirPath, "resources", basenameOfTheKeycloakifyResourcesDir)
+                    destDirPath
                 });
 
                 break apply_replacers_and_move_to_theme_resources;
@@ -97,7 +103,7 @@ export async function generateTheme(params: {
 
             transformCodebase({
                 "srcDirPath": buildOptions.reactAppBuildDirPath,
-                "destDirPath": pathJoin(themeTypeDirPath, "resources", basenameOfTheKeycloakifyResourcesDir),
+                destDirPath,
                 "transformSourceCode": ({ filePath, sourceCode }) => {
                     //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
                     // This should not happen if users follow the new instruction setup but we keep it for retrocompatibility.

src/bin/keycloakify/keycloakify.ts

@@ -9,6 +9,7 @@ import { getLogger } from "../tools/logger";
 import { getThemeSrcDirPath } from "../getThemeSrcDirPath";
 import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
 import { readThisNpmProjectVersion } from "../tools/readThisNpmProjectVersion";
+import { keycloakifyBuildOptionsForPostPostBuildScriptEnvName } from "../constants";
 
 export async function main() {
     const buildOptions = readBuildOptions({
@@ -36,9 +37,37 @@ export async function main() {
         fs.writeFileSync(pathJoin(buildOptions.keycloakifyBuildDirPath, "pom.xml"), Buffer.from(pomFileCode, "utf8"));
     }
 
+    const containerKeycloakVersion = "23.0.6";
+
     const jarFilePath = pathJoin(buildOptions.keycloakifyBuildDirPath, "target", `${buildOptions.artifactId}-${buildOptions.themeVersion}.jar`);
 
-    if (buildOptions.doCreateJar) {
+    generateStartKeycloakTestingContainer({
+        "keycloakVersion": containerKeycloakVersion,
+        jarFilePath,
+        buildOptions
+    });
+
+    fs.writeFileSync(pathJoin(buildOptions.keycloakifyBuildDirPath, ".gitignore"), Buffer.from("*", "utf8"));
+
+    run_post_build_script: {
+        if (buildOptions.bundler !== "vite") {
+            break run_post_build_script;
+        }
+
+        child_process.execSync("npx vite", {
+            "cwd": buildOptions.reactAppRootDirPath,
+            "env": {
+                ...process.env,
+                [keycloakifyBuildOptionsForPostPostBuildScriptEnvName]: JSON.stringify(buildOptions)
+            }
+        });
+    }
+
+    create_jar: {
+        if (!buildOptions.doCreateJar) {
+            break create_jar;
+        }
+
         child_process.execSync("mvn clean install", { "cwd": buildOptions.keycloakifyBuildDirPath });
 
         const jarDirPath = pathDirname(jarFilePath);
@@ -59,14 +88,6 @@ export async function main() {
         );
     }
 
-    const containerKeycloakVersion = "23.0.0";
-
-    generateStartKeycloakTestingContainer({
-        "keycloakVersion": containerKeycloakVersion,
-        jarFilePath,
-        buildOptions
-    });
-
     logger.log(
         [
             "",

src/bin/promptKeycloakVersion.ts

@@ -22,11 +22,12 @@ export async function promptKeycloakVersion() {
 
     const tags = [
         ...(await getLatestsSemVersionedTag({
-            "count": 10,
+            "count": 15,
             "owner": "keycloak",
             "repo": "keycloak"
         }).then(arr => arr.map(({ tag }) => tag))),
         lastKeycloakVersionWithAccountV1,
+        "19.0.1",
         "11.0.3"
     ];
 

src/lib/isStorybook.ts

@@ -1,3 +1 @@
-import { BASE_URL } from "./BASE_URL";
-
-export const isStorybook = BASE_URL.startsWith(".");
+export const isStorybook = typeof window === "object" && Object.keys(window).find(key => key.startsWith("__STORYBOOK")) !== undefined;

src/login/kcContext/KcContext.ts

@@ -84,7 +84,7 @@ export declare namespace KcContext {
             description?: string;
             attributes: Record<string, string>;
         };
-        isAppInitiatedAction: boolean;
+        isAppInitiatedAction?: boolean;
         messagesPerField: {
             /**
              * Return text if message for given field exists. Useful eg. to add css styles for fields with message.
@@ -116,6 +116,7 @@ export declare namespace KcContext {
              */
             exists: (fieldName: string) => boolean;
         };
+        properties: Record<string, string | undefined>;
     };
 
     export type SamlPostForm = Common & {
@@ -244,6 +245,17 @@ export declare namespace KcContext {
 
     export type Terms = Common & {
         pageId: "terms.ftl";
+        //NOTE: Optional because maybe it wasn't defined in older keycloak versions.
+        user?: {
+            id: string;
+            username: string;
+            attributes: Record<string, string[]>;
+            email: string;
+            emailVerified: boolean;
+            firstName?: string;
+            lastName?: string;
+            markedForEviction?: boolean;
+        };
     };
 
     export type LoginDeviceVerifyUserCode = Common & {

src/login/kcContext/createGetKcContext.ts

@@ -12,8 +12,9 @@ import { symToStr } from "tsafe/symToStr";
 
 export function createGetKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
     mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
+    mockProperties?: Record<string, string>;
 }) {
-    const { mockData } = params ?? {};
+    const { mockData, mockProperties } = params ?? {};
 
     function getKcContext<PageId extends ExtendKcContext<KcContextExtension>["pageId"] | undefined = undefined>(params?: {
         mockPageId?: PageId;
@@ -141,6 +142,13 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
                 }
             }
 
+            if (mockProperties !== undefined) {
+                deepAssign({
+                    "target": kcContext.properties,
+                    "source": mockProperties
+                });
+            }
+
             return { kcContext };
         }
 

src/login/kcContext/kcContextMocks.ts

@@ -236,7 +236,127 @@ export const kcContextCommonMock: KcContext.Common = {
         "attributes": {}
     },
     "scripts": [],
-    "isAppInitiatedAction": false
+    "isAppInitiatedAction": false,
+    "properties": {
+        "kcLogoIdP-facebook": "fa fa-facebook",
+        "parent": "keycloak",
+        "kcAuthenticatorOTPClass": "fa fa-mobile list-view-pf-icon-lg",
+        "kcLogoIdP-bitbucket": "fa fa-bitbucket",
+        "kcAuthenticatorWebAuthnClass": "fa fa-key list-view-pf-icon-lg",
+        "kcWebAuthnDefaultIcon": "pficon pficon-key",
+        "kcLogoIdP-stackoverflow": "fa fa-stack-overflow",
+        "kcSelectAuthListItemClass": "pf-l-stack__item select-auth-box-parent pf-l-split",
+        "kcLogoIdP-microsoft": "fa fa-windows",
+        "kcLocaleItemClass": "pf-c-dropdown__menu-item",
+        "kcLoginOTPListItemHeaderClass": "pf-c-tile__header",
+        "kcLoginOTPListItemIconBodyClass": "pf-c-tile__icon",
+        "kcInputHelperTextAfterClass": "pf-c-form__helper-text pf-c-form__helper-text-after",
+        "kcFormClass": "form-horizontal",
+        "kcSelectAuthListClass": "pf-l-stack select-auth-container",
+        "kcInputClassRadioCheckboxLabelDisabled": "pf-m-disabled",
+        "kcSelectAuthListItemIconClass": "pf-l-split__item select-auth-box-icon",
+        "kcRecoveryCodesWarning": "kc-recovery-codes-warning",
+        "kcFormSettingClass": "login-pf-settings",
+        "kcWebAuthnBLE": "fa fa-bluetooth-b",
+        "kcInputWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcSelectAuthListItemArrowIconClass": "fa fa-angle-right fa-lg",
+        "meta": "viewport==width=device-width,initial-scale=1",
+        "styles": "css/login.css css/tile.css",
+        "kcFeedbackAreaClass": "col-md-12",
+        "kcLogoIdP-google": "fa fa-google",
+        "kcCheckLabelClass": "pf-c-check__label",
+        "kcSelectAuthListItemFillClass": "pf-l-split__item pf-m-fill",
+        "kcAuthenticatorDefaultClass": "fa fa-list list-view-pf-icon-lg",
+        "kcLogoIdP-gitlab": "fa fa-gitlab",
+        "kcFormAreaClass": "col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2",
+        "kcFormButtonsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcInputClassRadioLabel": "pf-c-radio__label",
+        "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
+        "kcSelectAuthListItemHeadingClass": "pf-l-stack__item select-auth-box-headline pf-c-title",
+        "kcInfoAreaClass": "col-xs-12 col-sm-4 col-md-4 col-lg-5 details",
+        "kcLogoLink": "http://www.keycloak.org",
+        "kcContainerClass": "container-fluid",
+        "kcSelectAuthListItemTitle": "select-auth-box-paragraph",
+        "kcHtmlClass": "login-pf",
+        "kcLoginOTPListItemTitleClass": "pf-c-tile__title",
+        "locales": "ca,cs,da,de,en,es,fr,fi,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN",
+        "serviceTitle": "CodeGouv",
+        "kcLogoIdP-openshift-v4": "pf-icon pf-icon-openshift",
+        "kcWebAuthnUnknownIcon": "pficon pficon-key unknown-transport-class",
+        "kcFormSocialAccountNameClass": "kc-social-provider-name",
+        "kcLogoIdP-openshift-v3": "pf-icon pf-icon-openshift",
+        "kcLoginOTPListInputClass": "pf-c-tile__input",
+        "kcWebAuthnUSB": "fa fa-usb",
+        "kcInputClassRadio": "pf-c-radio",
+        "kcWebAuthnKeyIcon": "pficon pficon-key",
+        "kcFeedbackInfoIcon": "fa fa-fw fa-info-circle",
+        "kcCommonLogoIdP": "kc-social-provider-logo kc-social-gray",
+        "stylesCommon":
+            "web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css",
+        "kcRecoveryCodesActions": "kc-recovery-codes-actions",
+        "kcFormGroupHeader": "pf-c-form__group",
+        "kcFormSocialAccountSectionClass": "kc-social-section kc-social-gray",
+        "kcLogoIdP-instagram": "fa fa-instagram",
+        "kcAlertClass": "pf-c-alert pf-m-inline",
+        "kcHeaderClass": "login-pf-page-header",
+        "kcLabelWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcFormSocialAccountLinkClass": "pf-c-login__main-footer-links-item-link",
+        "kcLocaleMainClass": "pf-c-dropdown",
+        "kcTextareaClass": "form-control",
+        "kcButtonBlockClass": "pf-m-block",
+        "kcButtonClass": "pf-c-button",
+        "kcWebAuthnNFC": "fa fa-wifi",
+        "kcLocaleClass": "col-xs-12 col-sm-1",
+        "kcInputClassCheckboxInput": "pf-c-check__input",
+        "kcFeedbackErrorIcon": "fa fa-fw fa-exclamation-circle",
+        "kcInputLargeClass": "input-lg",
+        "kcInputErrorMessageClass": "pf-c-form__helper-text pf-m-error required kc-feedback-text",
+        "kcRecoveryCodesList": "kc-recovery-codes-list",
+        "kcFormSocialAccountListClass": "pf-c-login__main-footer-links kc-social-links",
+        "kcAlertTitleClass": "pf-c-alert__title kc-feedback-text",
+        "kcAuthenticatorPasswordClass": "fa fa-unlock list-view-pf-icon-lg",
+        "kcCheckInputClass": "pf-c-check__input",
+        "kcLogoIdP-linkedin": "fa fa-linkedin",
+        "kcLogoIdP-twitter": "fa fa-twitter",
+        "kcFeedbackWarningIcon": "fa fa-fw fa-exclamation-triangle",
+        "kcResetFlowIcon": "pficon pficon-arrow fa",
+        "kcSelectAuthListItemIconPropertyClass": "fa-2x select-auth-box-icon-properties",
+        "kcFeedbackSuccessIcon": "fa fa-fw fa-check-circle",
+        "kcLoginOTPListClass": "pf-c-tile",
+        "kcSrOnlyClass": "sr-only",
+        "kcFormSocialAccountListGridClass": "pf-l-grid kc-social-grid",
+        "kcButtonDefaultClass": "btn-default",
+        "kcFormGroupErrorClass": "has-error",
+        "kcSelectAuthListItemDescriptionClass": "pf-l-stack__item select-auth-box-desc",
+        "kcSelectAuthListItemBodyClass": "pf-l-split__item pf-l-stack",
+        "import": "common/keycloak",
+        "kcWebAuthnInternal": "pficon pficon-key",
+        "kcSelectAuthListItemArrowClass": "pf-l-split__item select-auth-box-arrow",
+        "kcCheckClass": "pf-c-check",
+        "kcContentClass": "col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3",
+        "kcLogoClass": "login-pf-brand",
+        "kcLoginOTPListItemIconClass": "fa fa-mobile",
+        "kcLoginClass": "login-pf-page",
+        "kcSignUpClass": "login-pf-signup",
+        "kcButtonLargeClass": "btn-lg",
+        "kcFormCardClass": "card-pf",
+        "kcLocaleListClass": "pf-c-dropdown__menu pf-m-align-right",
+        "kcInputClass": "pf-c-form-control",
+        "kcFormGroupClass": "form-group",
+        "kcLogoIdP-paypal": "fa fa-paypal",
+        "kcInputClassCheckbox": "pf-c-check",
+        "kcRecoveryCodesConfirmation": "kc-recovery-codes-confirmation",
+        "kcInputClassRadioInput": "pf-c-radio__input",
+        "kcFormSocialAccountListButtonClass": "pf-c-button pf-m-control pf-m-block kc-social-item kc-social-gray",
+        "kcInputClassCheckboxLabel": "pf-c-check__label",
+        "kcFormOptionsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcFormHeaderClass": "login-pf-header",
+        "kcFormSocialAccountGridItem": "pf-l-grid__item",
+        "kcButtonPrimaryClass": "pf-m-primary",
+        "kcInputHelperTextBeforeClass": "pf-c-form__helper-text pf-c-form__helper-text-before",
+        "kcLogoIdP-github": "fa fa-github",
+        "kcLabelClass": "pf-c-form__label pf-c-form__label-text"
+    }
 };
 
 const loginUrl = {

src/login/pages/PageProps.ts

@@ -1,10 +1,11 @@
 import type { I18n } from "keycloakify/login/i18n";
 import { type TemplateProps, type ClassKey } from "keycloakify/login/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import type { KcContext } from "keycloakify/account/kcContext";
 
-export type PageProps<KcContext, I18nExtended extends I18n> = {
+export type PageProps<NarowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
     Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
-    kcContext: KcContext;
+    kcContext: NarowedKcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;

src/vite-plugin/vite-plugin.ts

@@ -1,31 +1,66 @@
 import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
 import type { Plugin } from "vite";
 import * as fs from "fs";
-import { resolvedViteConfigJsonBasename, nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir, keycloak_resources } from "../bin/constants";
+import {
+    resolvedViteConfigJsonBasename,
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir,
+    keycloak_resources,
+    keycloakifyBuildOptionsForPostPostBuildScriptEnvName
+} from "../bin/constants";
 import type { ResolvedViteConfig } from "../bin/keycloakify/buildOptions/resolvedViteConfig";
 import { getCacheDirPath } from "../bin/keycloakify/buildOptions/getCacheDirPath";
-import { replaceAll } from "../bin/tools/String.prototype.replaceAll";
 import { id } from "tsafe/id";
 import { rm } from "../bin/tools/fs.rm";
 import { copyKeycloakResourcesToPublic } from "../bin/copy-keycloak-resources-to-public";
 import { assert } from "tsafe/assert";
+import type { BuildOptions } from "../bin/keycloakify/buildOptions";
+import type { UserProvidedBuildOptions } from "../bin/keycloakify/buildOptions/UserProvidedBuildOptions";
+import MagicString from "magic-string";
+
+export type Params = UserProvidedBuildOptions & {
+    postBuild?: (buildOptions: Omit<BuildOptions, "bundler">) => Promise<void>;
+};
+
+export function keycloakify(params?: Params) {
+    const { postBuild, ...userProvidedBuildOptions } = params ?? {};
 
-export function keycloakify() {
     let reactAppRootDirPath: string | undefined = undefined;
     let urlPathname: string | undefined = undefined;
     let buildDirPath: string | undefined = undefined;
     let command: "build" | "serve" | undefined = undefined;
+    let shouldGenerateSourcemap: boolean | undefined = undefined;
 
     const plugin = {
         "name": "keycloakify" as const,
         "configResolved": async resolvedConfig => {
+            shouldGenerateSourcemap = resolvedConfig.build.sourcemap !== false;
+
+            run_post_build_script: {
+                const buildOptionJson = process.env[keycloakifyBuildOptionsForPostPostBuildScriptEnvName];
+
+                if (buildOptionJson === undefined) {
+                    break run_post_build_script;
+                }
+
+                if (postBuild === undefined) {
+                    process.exit(0);
+                }
+
+                const buildOptions: BuildOptions = JSON.parse(buildOptionJson);
+
+                await postBuild(buildOptions);
+
+                process.exit(0);
+            }
+
             command = resolvedConfig.command;
 
             reactAppRootDirPath = resolvedConfig.root;
             urlPathname = (() => {
                 let out = resolvedConfig.env.BASE_URL;
 
-                if (out.startsWith(".") && command === "build") {
+                if (out.startsWith(".") && command === "build" && resolvedConfig.envPrefix?.includes("STORYBOOK_") !== true) {
                     throw new Error(
                         [
                             `BASE_URL=${out} is not supported By Keycloakify. Use an absolute URL instead.`,
@@ -67,7 +102,8 @@ export function keycloakify() {
                             "publicDir": pathRelative(reactAppRootDirPath, resolvedConfig.publicDir),
                             "assetsDir": resolvedConfig.build.assetsDir,
                             "buildDir": resolvedConfig.build.outDir,
-                            urlPathname
+                            urlPathname,
+                            userProvidedBuildOptions
                         }),
                         null,
                         2
@@ -82,6 +118,7 @@ export function keycloakify() {
         },
         "transform": (code, id) => {
             assert(command !== undefined);
+            assert(shouldGenerateSourcemap !== undefined);
 
             if (command !== "build") {
                 return;
@@ -89,49 +126,53 @@ export function keycloakify() {
 
             assert(reactAppRootDirPath !== undefined);
 
-            let transformedCode: string | undefined = undefined;
+            {
+                const isWithinSourceDirectory = id.startsWith(pathJoin(reactAppRootDirPath, "src") + pathSep);
 
-            replace_import_meta_env_base_url_in_source_code: {
-                {
-                    const isWithinSourceDirectory = id.startsWith(pathJoin(reactAppRootDirPath, "src") + pathSep);
-
-                    if (!isWithinSourceDirectory) {
-                        break replace_import_meta_env_base_url_in_source_code;
-                    }
+                if (!isWithinSourceDirectory) {
+                    return;
                 }
-
-                {
-                    const isJavascriptFile = id.endsWith(".js") || id.endsWith(".jsx");
-                    const isTypeScriptFile = id.endsWith(".ts") || id.endsWith(".tsx");
-
-                    if (!isTypeScriptFile && !isJavascriptFile) {
-                        break replace_import_meta_env_base_url_in_source_code;
-                    }
-                }
-
-                if (transformedCode === undefined) {
-                    transformedCode = code;
-                }
-
-                transformedCode = replaceAll(
-                    transformedCode,
-                    "import.meta.env.BASE_URL",
-                    [
-                        `(`,
-                        `(window.${nameOfTheGlobal} === undefined || import.meta.env.MODE === "development")?`,
-                        `"${urlPathname ?? "/"}":`,
-                        `(window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/")`,
-                        `)`
-                    ].join("")
-                );
             }
 
-            if (transformedCode === undefined) {
+            {
+                const isJavascriptFile = id.endsWith(".js") || id.endsWith(".jsx");
+                const isTypeScriptFile = id.endsWith(".ts") || id.endsWith(".tsx");
+
+                if (!isTypeScriptFile && !isJavascriptFile) {
+                    return;
+                }
+            }
+
+            const transformedCode = new MagicString(code);
+
+            transformedCode.replaceAll(
+                /import\.meta\.env(?:(?:\.BASE_URL)|(?:\["BASE_URL"\]))/g,
+                [
+                    `(`,
+                    `(window.${nameOfTheGlobal} === undefined || import.meta.env.MODE === "development")?`,
+                    `"${urlPathname ?? "/"}":`,
+                    `(window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/")`,
+                    `)`
+                ].join("")
+            );
+
+            if (!transformedCode.hasChanged()) {
                 return;
             }
 
+            if (!shouldGenerateSourcemap) {
+                return transformedCode.toString();
+            }
+
+            const map = transformedCode.generateMap({
+                "source": id,
+                "includeContent": true,
+                "hires": true
+            });
+
             return {
-                "code": transformedCode
+                "code": transformedCode.toString(),
+                "map": map.toString()
             };
         },
         "closeBundle": async () => {

stories/account/pages/Sessions.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "sessions.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `account/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;
+
+export const WithMessage = () => <PageStory kcContext={{}} />;

stories/account/pages/Totp.stories.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "totp.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `account/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => (
+    <PageStory
+        kcContext={{
+            totp: {
+                enabled: false,
+                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                totpSecretQrCode:
+                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                otpCredentials: []
+            },
+            url: {
+                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                logUrl: "http://localhost:8080/realms/master/account/log",
+                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                accountUrl: "http://localhost:8080/realms/master/account/",
+                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                passwordUrl: "http://localhost:8080/realms/master/account/password"
+            }
+        }}
+    />
+);
+
+export const WithTotpEnabled = () => (
+    <PageStory
+        kcContext={{
+            totp: {
+                enabled: true,
+                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                totpSecretQrCode:
+                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                otpCredentials: []
+            },
+            url: {
+                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                logUrl: "http://localhost:8080/realms/master/account/log",
+                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                accountUrl: "http://localhost:8080/realms/master/account/",
+                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                passwordUrl: "http://localhost:8080/realms/master/account/password"
+            }
+        }}
+    />
+);
+
+export const WithManualMode = () => (
+    <PageStory
+        kcContext={{
+            mode: "manual",
+            totp: {
+                enabled: false,
+                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                totpSecretQrCode:
+                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                otpCredentials: []
+            },
+            url: {
+                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                logUrl: "http://localhost:8080/realms/master/account/log",
+                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                accountUrl: "http://localhost:8080/realms/master/account/",
+                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                passwordUrl: "http://localhost:8080/realms/master/account/password"
+            }
+        }}
+    />
+);

yarn.lock

@@ -1665,7 +1665,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -8352,6 +8352,13 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+magic-string@^0.30.7:
+  version "0.30.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.7.tgz#0cecd0527d473298679da95a2d7aeb8c64048505"
+  integrity sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"