keycloakify 6.0.0-beta.0 → 6.0.0-beta.7

package/src/lib/components/LogoutConfirm.tsx

@@ -0,0 +1,62 @@
+import React, { memo } from "react";
+import { useCssAndCx } from "tss-react";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import type { I18n } from "../i18n";
+
+const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n } & KcProps) => {
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            displayMessage={false}
+            headerNode={msg("logoutConfirmTitle")}
+            formNode={
+                <>
+                    <div id="kc-logout-confirm" className="content-area">
+                        <p className="instruction">{msg("logoutConfirmHeader")}</p>
+                        <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                            <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                            <div className={cx(props.kcFormGroupClass)}>
+                                <div id="kc-form-options">
+                                    <div className={cx(props.kcFormOptionsWrapperClass)}></div>
+                                </div>
+                                <div id="kc-form-buttons" className={cx(props.kcFormGroupClass)}>
+                                    <input
+                                        tabIndex={4}
+                                        className={cx(
+                                            props.kcButtonClass,
+                                            props.kcButtonPrimaryClass,
+                                            props.kcButtonBlockClass,
+                                            props.kcButtonLargeClass
+                                        )}
+                                        name="confirmLogout"
+                                        id="kc-logout"
+                                        type="submit"
+                                        value={msgStr("doLogout")}
+                                    />
+                                </div>
+                            </div>
+                        </form>
+                        <div id="kc-info-message">
+                            {!logoutConfirm.skipLink && client.baseUrl && (
+                                <p>
+                                    <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </>
+            }
+        />
+    );
+});
+
+export default LogoutConfirm;

package/src/lib/components/Register.tsx

@@ -1,20 +1,20 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
 import { useCssAndCx } from "tss-react";
+import type { I18n } from "../i18n";
 
-export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Register; useI18n: () => I18n } & KcProps) => {
+const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Register; i18n: I18n } & KcProps) => {
     const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
-    const { msg, msgStr } = useI18n();
+    const { msg, msgStr } = i18n;
 
     const { cx } = useCssAndCx();
 
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("registerTitle")}
             formNode={
@@ -111,7 +111,7 @@ export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcC
                             <div
                                 className={cx(
                                     props.kcFormGroupClass,
-                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass),
+                                    messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass)
                                 )}
                             >
                                 <div className={cx(props.kcLabelWrapperClass)}>
@@ -154,3 +154,5 @@ export const Register = memo(({ kcContext, useI18n, ...props }: { kcContext: KcC
         />
     );
 });
+
+export default Register;

package/src/lib/components/RegisterUserProfile.tsx

@@ -1,100 +1,88 @@
-import { useMemo, memo, useEffect, useState, Fragment } from "react";
-import { Template } from "./Template";
+import React, { useMemo, memo, useEffect, useState, Fragment } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
 import { useCssAndCx } from "tss-react";
 import type { ReactComponent } from "../tools/ReactComponent";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { useFormValidationSlice } from "../useFormValidationSlice";
+import type { I18n } from "../i18n";
 
-export const RegisterUserProfile = memo(
-    ({ kcContext, useI18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; useI18n: () => I18n } & KcProps) => {
-        const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
-
-        const { msg, msgStr } = useI18n();
-
-        const { cx, css } = useCssAndCx();
-
-        const props = useMemo(
-            () => ({
-                ...props_,
-                "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 })),
-            }),
-            [cx, css],
-        );
-
-        const [isFomSubmittable, setIsFomSubmittable] = useState(false);
-
-        return (
-            <Template
-                {...{ kcContext, useI18n, ...props }}
-                displayMessage={messagesPerField.exists("global")}
-                displayRequiredFields={true}
-                doFetchDefaultThemeResources={true}
-                headerNode={msg("registerTitle")}
-                formNode={
-                    <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
-                        <UserProfileFormFields
-                            kcContext={kcContext}
-                            onIsFormSubmittableValueChange={setIsFomSubmittable}
-                            useI18n={useI18n}
-                            {...props}
-                        />
-                        {recaptchaRequired && (
-                            <div className="form-group">
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
-                                </div>
+const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps) => {
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { cx, css } = useCssAndCx();
+
+    const props = useMemo(
+        () => ({
+            ...props_,
+            "kcFormGroupClass": cx(props_.kcFormGroupClass, css({ "marginBottom": 20 }))
+        }),
+        [cx, css]
+    );
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("registerTitle")}
+            formNode={
+                <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
+                    <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...props} />
+                    {recaptchaRequired && (
+                        <div className="form-group">
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
                             </div>
-                        )}
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                                <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                    <span>
-                                        <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                    </span>
-                                </div>
+                        </div>
+                    )}
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
                             </div>
+                        </div>
 
-                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                                <input
-                                    className={cx(
-                                        props.kcButtonClass,
-                                        props.kcButtonPrimaryClass,
-                                        props.kcButtonBlockClass,
-                                        props.kcButtonLargeClass,
-                                    )}
-                                    type="submit"
-                                    value={msgStr("doRegister")}
-                                    disabled={!isFomSubmittable}
-                                />
-                            </div>
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                                disabled={!isFomSubmittable}
+                            />
                         </div>
-                    </form>
-                }
-            />
-        );
-    },
-);
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
-type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; useI18n: () => I18n } & KcProps &
+type UserProfileFormFieldsProps = { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps &
     Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
         onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
     };
 
-const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableValueChange, ...props }: UserProfileFormFieldsProps) => {
+const UserProfileFormFields = memo(({ kcContext, onIsFormSubmittableValueChange, i18n, ...props }: UserProfileFormFieldsProps) => {
     const { cx, css } = useCssAndCx();
 
-    const { advancedMsg } = useI18n();
+    const { advancedMsg } = i18n;
 
     const {
         formValidationState: { fieldStateByAttributeName, isFormSubmittable },
         formValidationReducer,
-        attributesWithPassword,
+        attributesWithPassword
     } = useFormValidationSlice({
         kcContext,
-        useI18n,
+        i18n
     });
 
     useEffect(() => {
@@ -106,22 +94,22 @@ const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableVal
             [name]: [string],
             [
                 {
-                    target: { value },
-                },
-            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>],
+                    target: { value }
+                }
+            ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
         ) =>
             formValidationReducer({
                 "action": "update value",
                 name,
-                "newValue": value,
-            }),
+                "newValue": value
+            })
     );
 
     const onBlurFactory = useCallbackFactory(([name]: [string]) =>
         formValidationReducer({
             "action": "focus lost",
-            name,
-        }),
+            name
+        })
     );
 
     let currentGroup = "";
@@ -212,8 +200,8 @@ const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableVal
                                             props.kcInputErrorMessageClass,
                                             css({
                                                 "position": displayableErrors.length === 1 ? "absolute" : undefined,
-                                                "& > span": { "display": "block" },
-                                            }),
+                                                "& > span": { "display": "block" }
+                                            })
                                         )}
                                         aria-live="polite"
                                     >
@@ -228,3 +216,5 @@ const UserProfileFormFields = memo(({ kcContext, useI18n, onIsFormSubmittableVal
         </>
     );
 });
+
+export default RegisterUserProfile;

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 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 { 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 = {