keycloakify 7.0.0-rc.0 → 7.0.0-rc.10

package/src/account/kcContext/KcContext.ts

@@ -0,0 +1,83 @@
+import type { AccountThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+export type KcContext = KcContext.Password | KcContext.Account;
+
+export declare namespace KcContext {
+    export type Common = {
+        locale?: {
+            supported: {
+                url: string;
+                label: string;
+                languageTag: string;
+            }[];
+            currentLanguageTag: string;
+        };
+        url: {
+            accountUrl: string;
+            passwordUrl: string;
+            totpUrl: string;
+            socialUrl: string;
+            sessionsUrl: string;
+            applicationsUrl: string;
+            logUrl: string;
+            resourceUrl: string;
+            resourcesCommonPath: string;
+            resourcesPath: string;
+            getLogoutUrl: () => string;
+        };
+        features: {
+            passwordUpdateSupported: boolean;
+            identityFederation: boolean;
+            log: boolean;
+            authorization: boolean;
+        };
+        realm: {
+            internationalizationEnabled: boolean;
+            userManagedAccessAllowed: boolean;
+        };
+        message?: {
+            type: "success" | "warning" | "error" | "info";
+            summary: string;
+        };
+        referrer?: {
+            url?: string;
+            name: string;
+        };
+        messagesPerField: {
+            printIfExists: <T>(fieldName: string, x: T) => T | undefined;
+            existsError: (fieldName: string) => boolean;
+            get: (fieldName: string) => string;
+            exists: (fieldName: string) => boolean;
+        };
+        account: {
+            email?: string;
+            firstName: string;
+            lastName?: string;
+            username?: string;
+        };
+    };
+
+    export type Password = Common & {
+        pageId: "password.ftl";
+        password: {
+            passwordSet: boolean;
+        };
+    };
+
+    export type Account = Common & {
+        pageId: "account.ftl";
+        url: {
+            referrerURI: string;
+            accountUrl: string;
+        };
+        realm: {
+            registrationEmailAsUsername: boolean;
+            editUsernameAllowed: boolean;
+        };
+        stateChecker: string;
+    };
+}
+
+assert<Equals<KcContext["pageId"], AccountThemePageId>>();

package/src/account/kcContext/getKcContext.ts

@@ -0,0 +1,72 @@
+import { kcContextMocks, kcContextCommonMock } from "./kcContextMocks";
+import type { DeepPartial } from "keycloakify/tools/DeepPartial";
+import { deepAssign } from "keycloakify/tools/deepAssign";
+import type { ExtendKcContext } from "./getKcContextFromWindow";
+import { getKcContextFromWindow } from "./getKcContextFromWindow";
+import { pathJoin } from "keycloakify/bin/tools/pathJoin";
+import { pathBasename } from "keycloakify/tools/pathBasename";
+import { mockTestingResourcesCommonPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { symToStr } from "tsafe/symToStr";
+
+export function getKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
+    mockPageId?: ExtendKcContext<KcContextExtension>["pageId"];
+    mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
+}): { kcContext: ExtendKcContext<KcContextExtension> | undefined } {
+    const { mockPageId, mockData } = params ?? {};
+
+    const realKcContext = getKcContextFromWindow<KcContextExtension>();
+
+    if (mockPageId !== undefined && realKcContext === undefined) {
+        //TODO maybe trow if no mock fo custom page
+
+        console.log(
+            [
+                `%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`,
+                `If assets are missing make sure you have built your Keycloak theme at least once.`
+            ].join(" "),
+            "background: red; color: yellow; font-size: medium"
+        );
+
+        const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
+
+        const partialKcContextCustomMock = mockData?.find(({ pageId }) => pageId === mockPageId);
+
+        if (kcContextDefaultMock === undefined && partialKcContextCustomMock === undefined) {
+            console.warn(
+                [
+                    `WARNING: You declared the non build in page ${mockPageId} but you didn't `,
+                    `provide mock data needed to debug the page outside of Keycloak as you are trying to do now.`,
+                    `Please check the documentation of the getKcContext function`
+                ].join("\n")
+            );
+        }
+
+        const kcContext: any = {};
+
+        deepAssign({
+            "target": kcContext,
+            "source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock }
+        });
+
+        if (partialKcContextCustomMock !== undefined) {
+            deepAssign({
+                "target": kcContext,
+                "source": partialKcContextCustomMock
+            });
+        }
+
+        return { kcContext };
+    }
+
+    if (realKcContext === undefined) {
+        return { "kcContext": undefined };
+    }
+
+    {
+        const { url } = realKcContext;
+
+        url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
+    }
+
+    return { "kcContext": realKcContext };
+}

package/src/account/kcContext/getKcContextFromWindow.ts

@@ -0,0 +1,11 @@
+import type { KcContext } from "./KcContext";
+import type { AndByDiscriminatingKey } from "keycloakify/tools/AndByDiscriminatingKey";
+import { ftlValuesGlobalName } from "keycloakify/bin/keycloakify/ftlValuesGlobalName";
+
+export type ExtendKcContext<KcContextExtension extends { pageId: string }> = [KcContextExtension] extends [never]
+    ? KcContext
+    : AndByDiscriminatingKey<"pageId", KcContextExtension & KcContext.Common, KcContext>;
+
+export function getKcContextFromWindow<KcContextExtension extends { pageId: string } = never>(): ExtendKcContext<KcContextExtension> | undefined {
+    return typeof window === "undefined" ? undefined : (window as any)[ftlValuesGlobalName];
+}

package/src/account/kcContext/index.ts

@@ -0,0 +1 @@
+export type { KcContext } from "./KcContext";

package/src/account/kcContext/kcContextMocks.ts

@@ -0,0 +1,174 @@
+import "minimal-polyfills/Object.fromEntries";
+import type { KcContext } from "./KcContext";
+import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { pathJoin } from "keycloakify/bin/tools/pathJoin";
+import { id } from "tsafe/id";
+
+const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
+
+export const kcContextCommonMock: KcContext.Common = {
+    "url": {
+        "resourcesPath": pathJoin(PUBLIC_URL, mockTestingResourcesPath),
+        "resourcesCommonPath": pathJoin(PUBLIC_URL, mockTestingResourcesCommonPath),
+        "resourceUrl": "#",
+        "accountUrl": "#",
+        "applicationsUrl": "#",
+        "getLogoutUrl": () => "#",
+        "logUrl": "#",
+        "passwordUrl": "#",
+        "sessionsUrl": "#",
+        "socialUrl": "#",
+        "totpUrl": "#"
+    },
+    "realm": {
+        "internationalizationEnabled": true,
+        "userManagedAccessAllowed": true
+    },
+    "messagesPerField": {
+        "printIfExists": () => {
+            return undefined;
+        },
+        "existsError": () => false,
+        "get": key => `Fake error for ${key}`,
+        "exists": () => false
+    },
+    "locale": {
+        "supported": [
+            /* spell-checker: disable */
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=de",
+                "label": "Deutsch",
+                "languageTag": "de"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=no",
+                "label": "Norsk",
+                "languageTag": "no"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ru",
+                "label": "Русский",
+                "languageTag": "ru"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sv",
+                "label": "Svenska",
+                "languageTag": "sv"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pt-BR",
+                "label": "Português (Brasil)",
+                "languageTag": "pt-BR"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=lt",
+                "label": "Lietuvių",
+                "languageTag": "lt"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=en",
+                "label": "English",
+                "languageTag": "en"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=it",
+                "label": "Italiano",
+                "languageTag": "it"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=fr",
+                "label": "Français",
+                "languageTag": "fr"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=zh-CN",
+                "label": "中文简体",
+                "languageTag": "zh-CN"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=es",
+                "label": "Español",
+                "languageTag": "es"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=cs",
+                "label": "Čeština",
+                "languageTag": "cs"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ja",
+                "label": "日本語",
+                "languageTag": "ja"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sk",
+                "label": "Slovenčina",
+                "languageTag": "sk"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pl",
+                "label": "Polski",
+                "languageTag": "pl"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ca",
+                "label": "Català",
+                "languageTag": "ca"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=nl",
+                "label": "Nederlands",
+                "languageTag": "nl"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=tr",
+                "label": "Türkçe",
+                "languageTag": "tr"
+            }
+            /* spell-checker: enable */
+        ],
+        "currentLanguageTag": "en"
+    },
+    "message": {
+        "type": "success",
+        "summary": "This is a test message"
+    },
+    "features": {
+        "authorization": true,
+        "identityFederation": true,
+        "log": true,
+        "passwordUpdateSupported": true
+    },
+    "referrer": undefined,
+    "account": {
+        "firstName": "john",
+        "lastName": "doe",
+        "email": "john.doe@code.gouv.fr",
+        "username": "doe_j"
+    }
+};
+
+export const kcContextMocks: KcContext[] = [
+    id<KcContext.Password>({
+        ...kcContextCommonMock,
+        "pageId": "password.ftl",
+        "password": {
+            "passwordSet": true
+        }
+    }),
+    id<KcContext.Account>({
+        ...kcContextCommonMock,
+        "pageId": "account.ftl",
+        "url": {
+            ...kcContextCommonMock.url,
+            "referrerURI": "#",
+            "accountUrl": "#"
+        },
+        "realm": {
+            ...kcContextCommonMock.realm,
+            "registrationEmailAsUsername": true,
+            "editUsernameAllowed": true
+        },
+        "stateChecker": ""
+    })
+];

package/src/account/lib/useGetClassName.ts

@@ -0,0 +1,12 @@
+import { createUseClassName } from "keycloakify/lib/useGetClassName";
+import type { ClassKey } from "keycloakify/account/TemplateProps";
+
+export const { useGetClassName } = createUseClassName<ClassKey>({
+    "defaultClasses": {
+        "kcBodyClass": undefined,
+        "kcButtonClass": "btn",
+        "kcButtonPrimaryClass": "btn-primary",
+        "kcButtonLargeClass": "btn-lg",
+        "kcButtonDefaultClass": "btn-default"
+    }
+});

package/src/account/pages/Account.tsx

@@ -0,0 +1,134 @@
+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 LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        "classes": {
+            ...classes,
+            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
+        }
+    });
+
+    const { url, realm, messagesPerField, stateChecker, account } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
+            <div className="row">
+                <div className="col-md-10">
+                    <h2>{msg("editAccountHtmlTitle")}</h2>
+                </div>
+                <div className="col-md-2 subtitle">
+                    <span className="subtitle">
+                        <span className="required">*</span> {msg("requiredFields")}
+                    </span>
+                </div>
+            </div>
+
+            <form action={url.accountUrl} className="form-horizontal" method="post">
+                <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+
+                {!realm.registrationEmailAsUsername && (
+                    <div className={clsx("form-group", messagesPerField.printIfExists("username", "has-error"))}>
+                        <div className="col-sm-2 col-md-2">
+                            <label htmlFor="username" className="control-label">
+                                {msg("username")}
+                            </label>
+                            {realm.editUsernameAllowed && <span className="required">*</span>}
+                        </div>
+
+                        <div className="col-sm-10 col-md-10">
+                            <input
+                                type="text"
+                                className="form-control"
+                                id="username"
+                                name="username"
+                                disabled={!realm.editUsernameAllowed}
+                                value={account.username ?? ""}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div className={clsx("form-group", messagesPerField.printIfExists("email", "has-error"))}>
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="email" className="control-label">
+                            {msg("email")}
+                        </label>{" "}
+                        <span className="required">*</span>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="text" className="form-control" id="email" name="email" autoFocus value={account.email ?? ""} />
+                    </div>
+                </div>
+
+                <div className={clsx("form-group", messagesPerField.printIfExists("firstName", "has-error"))}>
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="firstName" className="control-label">
+                            {msg("firstName")}
+                        </label>{" "}
+                        <span className="required">*</span>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="text" className="form-control" id="firstName" name="firstName" value={account.firstName ?? ""} />
+                    </div>
+                </div>
+
+                <div className={clsx("form-group", messagesPerField.printIfExists("lastName", "has-error"))}>
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="lastName" className="control-label">
+                            {msg("lastName")}
+                        </label>{" "}
+                        <span className="required">*</span>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="text" className="form-control" id="lastName" name="lastName" value={account.lastName ?? ""} />
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
+                        <div>
+                            {url.referrerURI !== undefined && <a href={url.referrerURI}>${msg("backToApplication")}</a>}
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="submitAction"
+                                value="Save"
+                            >
+                                {msg("doSave")}
+                            </button>
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonDefaultClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="submitAction"
+                                value="Cancel"
+                            >
+                                {msg("doCancel")}
+                            </button>
+                            I
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/src/account/pages/PageProps.ts

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

package/src/account/pages/Password.tsx

@@ -0,0 +1,105 @@
+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 LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        "classes": {
+            ...classes,
+            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
+        }
+    });
+
+    const { url, password, account } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="password">
+            <div className="row">
+                <div className="col-md-10">
+                    <h2>{msg("changePasswordHtmlTitle")}</h2>
+                </div>
+                <div className="col-md-2 subtitle">
+                    <span className="subtitle">${msg("allFieldsRequired")}</span>
+                </div>
+            </div>
+
+            <form action={url.passwordUrl} className="form-horizontal" method="post">
+                <input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value={account.username ?? ""}
+                    autoComplete="username"
+                    readOnly
+                    style={{ "display": "none;" }}
+                />
+
+                {password.passwordSet && (
+                    <div className="form-group">
+                        <div className="col-sm-2 col-md-2">
+                            <label htmlFor="password" className="control-label">
+                                {msg("password")}
+                            </label>
+                        </div>
+
+                        <div className="col-sm-10 col-md-10">
+                            <input type="password" className="form-control" id="password" name="password" autoFocus autoComplete="current-password" />
+                        </div>
+                    </div>
+                )}
+
+                <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}" />
+
+                <div className="form-group">
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="password-new" className="control-label">
+                            {msg("passwordNew")}
+                        </label>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="password" className="form-control" id="password-new" name="password-new" autoComplete="new-password" />
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="password-confirm" className="control-label two-lines">
+                            {msg("passwordConfirm")}
+                        </label>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="password" className="form-control" id="password-confirm" name="password-confirm" autoComplete="new-password" />
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
+                        <div>
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="submitAction"
+                                value="Save"
+                            >
+                                {msg("doSave")}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}