keycloakify 6.0.0-beta.0 → 6.0.0-beta.12

package/src/lib/components/Template.tsx

@@ -1,16 +1,14 @@
-import { useReducer, useEffect, memo } from "react";
+import React, { useReducer, useEffect, memo } from "react";
 import type { ReactNode } from "react";
-import { getCurrentKcLanguageTag, changeLocale, getTagLabel } from "../i18n";
-import type { I18n } from "../i18n";
-import type { KcLanguageTag } from "../i18n";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { assert } from "../tools/assert";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
 export type TemplateProps = {
     displayInfo?: boolean;
@@ -26,9 +24,9 @@ export type TemplateProps = {
      * to avoid pulling the default theme assets.
      */
     doFetchDefaultThemeResources: boolean;
-} & { kcContext: KcContextBase; useI18n: () => I18n } & KcTemplateProps;
+} & { kcContext: KcContextBase; i18n: I18n } & KcTemplateProps;
 
-export const Template = memo((props: TemplateProps) => {
+const Template = memo((props: TemplateProps) => {
     const {
         displayInfo = false,
         displayMessage = true,
@@ -40,24 +38,15 @@ export const Template = memo((props: TemplateProps) => {
         formNode,
         infoNode = null,
         kcContext,
-        doFetchDefaultThemeResources,
-        useI18n,
+        i18n,
+        doFetchDefaultThemeResources
     } = props;
 
     const { cx } = useCssAndCx();
 
-    useEffect(() => {
-        console.log("Rendering this page with react using keycloakify");
-    }, []);
-
-    const { msg } = useI18n();
+    const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
-    const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [KcLanguageTag]) =>
-        changeLocale({
-            kcContext,
-            kcLanguageTag,
-        }),
-    );
+    const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));
 
     const onTryAnotherWayClick = useConstCallback(() => (document.forms["kc-select-try-another-way-form" as never].submit(), false));
 
@@ -79,16 +68,16 @@ export const Template = memo((props: TemplateProps) => {
         Promise.all(
             [
                 ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
-                ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath)),
+                ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
             ]
                 .reverse()
                 .map(href =>
                     headInsert({
                         "type": "css",
                         href,
-                        "position": "prepend",
-                    }),
-                ),
+                        "position": "prepend"
+                    })
+                )
         ).then(() => {
             if (isUnmounted) {
                 return;
@@ -100,8 +89,8 @@ export const Template = memo((props: TemplateProps) => {
         toArr(props.scripts).forEach(relativePath =>
             headInsert({
                 "type": "javascript",
-                "src": pathJoin(url.resourcesPath, relativePath),
-            }),
+                "src": pathJoin(url.resourcesPath, relativePath)
+            })
         );
 
         if (props.kcHtmlClass !== undefined) {
@@ -140,13 +129,13 @@ export const Template = memo((props: TemplateProps) => {
                             <div id="kc-locale-wrapper" className={cx(props.kcLocaleWrapperClass)}>
                                 <div className="kc-dropdown" id="kc-locale-dropdown">
                                     <a href="#" id="kc-current-locale-link">
-                                        {getTagLabel({ "kcLanguageTag": getCurrentKcLanguageTag(kcContext), kcContext })}
+                                        {labelBySupportedLanguageTag[currentLanguageTag]}
                                     </a>
                                     <ul>
                                         {locale.supported.map(({ languageTag }) => (
                                             <li key={languageTag} className="kc-dropdown-item">
                                                 <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
-                                                    {getTagLabel({ "kcLanguageTag": languageTag, kcContext })}
+                                                    {labelBySupportedLanguageTag[languageTag]}
                                                 </a>
                                             </li>
                                         ))}
@@ -222,7 +211,7 @@ export const Template = memo((props: TemplateProps) => {
                                 <span
                                     className="kc-feedback-text"
                                     dangerouslySetInnerHTML={{
-                                        "__html": message.summary,
+                                        "__html": message.summary
                                     }}
                                 />
                             </div>
@@ -258,3 +247,5 @@ export const Template = memo((props: TemplateProps) => {
         </div>
     );
 });
+
+export default Template;

package/src/lib/components/Terms.tsx

@@ -1,53 +1,80 @@
-import { useReducer, useEffect, memo } from "react";
-import { Template } from "./Template";
+import React, { useEffect, memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
-import { getCurrentKcLanguageTag } from "../i18n";
-import type { KcLanguageTag, I18n } from "../i18n";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import { Evt } from "evt";
+import { useRerenderOnStateChange } from "evt/hooks";
+import { assert } from "tsafe/assert";
+import { fallbackLanguageTag } from "../i18n";
+import type { I18n } from "../i18n";
+import memoize from "memoizee";
+import { useConst } from "powerhooks/useConst";
+import { useConstCallback } from "powerhooks/useConstCallback";
+
+export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
+
+export type KcContextLike = {
+    pageId: KcContextBase["pageId"];
+    locale?: {
+        currentLanguageTag: string;
+    };
+};
+
+assert<KcContextBase extends KcContextLike ? true : false>();
 
 /** Allow to avoid bundling the terms and download it on demand*/
 export function useDownloadTerms(params: {
-    kcContext: KcContextBase;
-    downloadTermMarkdown: (params: { currentKcLanguageTag: KcLanguageTag }) => Promise<string>;
-    useI18n: () => I18n;
+    kcContext: KcContextLike;
+    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
 }) {
-    const { kcContext, downloadTermMarkdown, useI18n } = params;
+    const { kcContext } = params;
 
-    const [, forceUpdate] = useReducer(x => x + 1, 0);
+    const { downloadTermMarkdownMemoized } = (function useClosure() {
+        const { downloadTermMarkdown } = params;
 
-    const { evtKcMessages } = useI18n();
+        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
 
-    useEffect(() => {
-        const currentKcLanguageTag = getCurrentKcLanguageTag(kcContext);
+        const downloadTermMarkdownMemoized = useConst(() =>
+            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }), { "promise": true })
+        );
 
-        downloadTermMarkdown({ currentKcLanguageTag }).then(thermMarkdown => {
-            evtKcMessages.$attachOnce(
-                kcMessages => (kcMessages !== undefined ? [kcMessages] : null),
-                kcMessages => (kcMessages[currentKcLanguageTag].termsText = thermMarkdown),
-            );
+        return { downloadTermMarkdownMemoized };
+    })();
 
-            forceUpdate();
-        });
+    useEffect(() => {
+        if (kcContext.pageId !== "terms.ftl") {
+            return;
+        }
+
+        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
+            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
+        );
     }, []);
 }
 
-export const Terms = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Terms; useI18n: () => I18n } & KcProps) => {
-    const { msg, msgStr } = useI18n();
+const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Terms; i18n: I18n } & KcProps) => {
+    const { msg, msgStr } = i18n;
+
+    useRerenderOnStateChange(evtTermMarkdown);
 
     const { cx } = useCssAndCx();
 
     const { url } = kcContext;
 
+    if (evtTermMarkdown.state === undefined) {
+        return null;
+    }
+
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={msg("termsTitle")}
             formNode={
                 <>
-                    <div id="kc-terms-text">{msg("termsText")}</div>
+                    <div id="kc-terms-text">{evtTermMarkdown.state}</div>
                     <form className="form-actions" action={url.loginAction} method="POST">
                         <input
                             className={cx(
@@ -55,7 +82,7 @@ export const Terms = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
                                 props.kcButtonClass,
                                 props.kcButtonClass,
                                 props.kcButtonPrimaryClass,
-                                props.kcButtonLargeClass,
+                                props.kcButtonLargeClass
                             )}
                             name="accept"
                             id="kc-accept"
@@ -76,3 +103,5 @@ export const Terms = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
         />
     );
 });
+
+export default Terms;

package/src/lib/getKcContext/KcContextBase.ts

@@ -1,8 +1,7 @@
-import type { PageId } from "../../bin/build-keycloak-theme/generateFtl";
-import type { KcLanguageTag } from "../i18n";
+import type { PageId } from "../../bin/keycloakify/generateFtl";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { MessageKey } from "../i18n";
+import type { MessageKeyBase } from "../i18n";
 
 type ExtractAfterStartingWith<Prefix extends string, StrEnum> = StrEnum extends `${Prefix}${infer U}` ? U : never;
 
@@ -24,7 +23,9 @@ export type KcContextBase =
     | KcContextBase.LoginUpdateProfile
     | KcContextBase.LoginIdpLinkConfirm
     | KcContextBase.LoginIdpLinkEmail
-    | KcContextBase.LoginPageExpired;
+    | KcContextBase.LoginPageExpired
+    | KcContextBase.LoginConfigTotp
+    | KcContextBase.LogoutConfirm;
 
 export declare namespace KcContextBase {
     export type Common = {
@@ -47,9 +48,9 @@ export declare namespace KcContextBase {
             supported: {
                 url: string;
                 label: string;
-                languageTag: KcLanguageTag;
+                languageTag: string;
             }[];
-            currentLanguageTag: KcLanguageTag;
+            currentLanguageTag: string;
         };
         auth?: {
             showUsername?: boolean;
@@ -152,7 +153,7 @@ export declare namespace KcContextBase {
     export type Info = Common & {
         pageId: "info.ftl";
         messageHeader?: string;
-        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
+        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKeyBase>[];
         skipLink: boolean;
         pageRedirectUri?: string;
         actionUri?: string;
@@ -178,6 +179,10 @@ export declare namespace KcContextBase {
 
     export type LoginVerifyEmail = Common & {
         pageId: "login-verify-email.ftl";
+        //NOTE: Optional because maybe it wasn't defined in older keycloak versions.
+        user?: {
+            email: string;
+        };
     };
 
     export type Terms = Common & {
@@ -223,6 +228,48 @@ export declare namespace KcContextBase {
     export type LoginPageExpired = Common & {
         pageId: "login-page-expired.ftl";
     };
+
+    export type LoginConfigTotp = Common & {
+        pageId: "login-config-totp.ftl";
+        mode?: "qr" | "manual" | undefined | null;
+        totp: {
+            totpSecretEncoded: string;
+            qrUrl: string;
+            policy: {
+                supportedApplications: string[];
+                algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
+                digits: number;
+                lookAheadWindow: number;
+            } & (
+                | {
+                      type: "totp";
+                      period: number;
+                  }
+                | {
+                      type: "hotp";
+                      initialCounter: number;
+                  }
+            );
+            totpSecretQrCode: string;
+            manualUrl: string;
+            totpSecret: string;
+            otpCredentials: { id: string; userLabel: string }[];
+        };
+    };
+
+    export type LogoutConfirm = Common & {
+        pageId: "logout-confirm.ftl";
+        url: {
+            logoutConfirmAction: string;
+        };
+        client: {
+            baseUrl?: string;
+        };
+        logoutConfirm: {
+            code: string;
+            skipLink?: boolean;
+        };
+    };
 }
 
 export type Attribute = {

package/src/lib/getKcContext/getKcContext.ts

@@ -7,9 +7,9 @@ import { exclude } from "tsafe/exclude";
 import { assert } from "tsafe/assert";
 import type { ExtendsKcContextBase } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
-import { pathJoin } from "../tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 import { pathBasename } from "../tools/pathBasename";
-import { resourcesCommonPath } from "./kcContextMocks/urlResourcesPath";
+import { mockTestingResourcesCommonPath } from "../../bin/mockTestingResourcesPath";
 
 export function getKcContext<KcContextExtended extends { pageId: string } = never>(params?: {
     mockPageId?: ExtendsKcContextBase<KcContextExtended>["pageId"];
@@ -29,8 +29,8 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                 [
                     `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"),
+                    `Please check the documentation of the getKcContext function`
+                ].join("\n")
             );
         }
 
@@ -38,13 +38,13 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
 
         deepAssign({
             "target": kcContext,
-            "source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock },
+            "source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock }
         });
 
         if (partialKcContextCustomMock !== undefined) {
             deepAssign({
                 "target": kcContext,
-                "source": partialKcContextCustomMock,
+                "source": partialKcContextCustomMock
             });
 
             if (partialKcContextCustomMock.pageId === "register-user-profile.ftl") {
@@ -56,17 +56,19 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                 id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributesByName = {};
 
                 const partialAttributes = [
-                    ...((partialKcContextCustomMock as DeepPartial<KcContextBase.RegisterUserProfile>).profile?.attributes ?? []),
+                    ...((partialKcContextCustomMock as DeepPartial<KcContextBase.RegisterUserProfile>).profile?.attributes ?? [])
                 ].filter(exclude(undefined));
 
                 attributes.forEach(attribute => {
+                    console.log("====>", attribute);
+
                     const partialAttribute = partialAttributes.find(({ name }) => name === attribute.name);
 
                     const augmentedAttribute: Attribute = {} as any;
 
                     deepAssign({
                         "target": augmentedAttribute,
-                        "source": attribute,
+                        "source": attribute
                     });
 
                     if (partialAttribute !== undefined) {
@@ -74,7 +76,7 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
 
                         deepAssign({
                             "target": augmentedAttribute,
-                            "source": partialAttribute,
+                            "source": partialAttribute
                         });
                     }
 
@@ -82,14 +84,16 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
                     id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributesByName[augmentedAttribute.name] = augmentedAttribute;
                 });
 
-                partialAttributes.forEach(partialAttribute => {
-                    const { name } = partialAttribute;
+                partialAttributes
+                    .map(partialAttribute => ({ "validators": {}, ...partialAttribute }))
+                    .forEach(partialAttribute => {
+                        const { name } = partialAttribute;
 
-                    assert(name !== undefined, "If you define a mock attribute it must have at least a name");
+                        assert(name !== undefined, "If you define a mock attribute it must have at least a name");
 
-                    id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributes.push(partialAttribute as any);
-                    id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributesByName[name] = partialAttribute as any;
-                });
+                        id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributes.push(partialAttribute as any);
+                        id<KcContextBase.RegisterUserProfile>(kcContext).profile.attributesByName[name] = partialAttribute as any;
+                    });
             }
         }
 
@@ -101,7 +105,7 @@ export function getKcContext<KcContextExtended extends { pageId: string } = neve
     if (kcContext !== undefined) {
         const { url } = kcContext;
 
-        url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonPath));
+        url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
     }
 
     return { kcContext };

package/src/lib/getKcContext/getKcContextFromWindow.ts

@@ -1,6 +1,6 @@
 import type { KcContextBase } from "./KcContextBase";
 import type { AndByDiscriminatingKey } from "../tools/AndByDiscriminatingKey";
-import { ftlValuesGlobalName } from "../../bin/build-keycloak-theme/ftlValuesGlobalName";
+import { ftlValuesGlobalName } from "../../bin/keycloakify/ftlValuesGlobalName";
 
 export type ExtendsKcContextBase<KcContextExtended extends { pageId: string }> = [KcContextExtended] extends [never]
     ? KcContextBase