Support terms and condition

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -10,7 +10,11 @@ import fs from "fs";
 import { join as pathJoin } from "path";
 import { objectKeys } from "evt/tools/typeSafety/objectKeys";
 
-export const pageIds = ["login.ftl", "register.ftl", "info.ftl", "error.ftl", "login-reset-password.ftl", "login-verify-email.ftl"] as const;
+export const pageIds = [
+    "login.ftl", "register.ftl", "info.ftl", 
+    "error.ftl", "login-reset-password.ftl", 
+    "login-verify-email.ftl", "terms.ftl"
+] as const;
 
 export type PageId = typeof pageIds[number];
 

src/bin/generate-i18n-messages.ts

@@ -65,7 +65,7 @@ Object.keys(record).forEach(pageType => {
                 '//PLEASE DO NOT EDIT MANUALLY',
                 '',
                 '/* spell-checker: disable */',
-                `export const messages= ${JSON.stringify(record[pageType], null, 2)} as const;`,
+                `export const messages= ${JSON.stringify(record[pageType], null, 2)};`,
                 '/* spell-checker: enable */'
             ].join("\n"), "utf8")
     );

src/lib/components/KcApp.tsx

@@ -8,6 +8,7 @@ import { Info } from "./Info";
 import { Error } from "./Error";
 import { LoginResetPassword } from "./LoginResetPassword";
 import { LoginVerifyEmail } from "./LoginVerifyEmail";
+import { Terms } from "./Terms";
 
 export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps ) => {
     switch (kcContext.pageId) {
@@ -17,5 +18,6 @@ export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } &
         case "error.ftl": return <Error {...{ kcContext, ...props }} />;
         case "login-reset-password.ftl": return <LoginResetPassword {...{ kcContext, ...props }} />;
         case "login-verify-email.ftl": return <LoginVerifyEmail {...{ kcContext, ...props }} />;
+        case "terms.ftl": return <Terms {...{ kcContext, ...props }}/>;
     }
 });

src/lib/components/Terms.tsx

@@ -0,0 +1,57 @@
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContext } from "../KcContext";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContext.Terms; } & KcProps) => {
+
+    const { msg, msgStr } = useKcMessage();
+
+    const { url } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            displayMessage={false}
+            headerNode={msg("termsTitle")}
+            formNode={
+                <>
+                    <div id="kc-terms-text">
+                        {msg("termsText")}
+                    </div>
+                    <form className="form-actions" action={url.loginAction} method="POST">
+                        <input
+                            className={cx(
+                                props.kcButtonClass,
+                                props.kcButtonClass,
+                                props.kcButtonClass,
+                                props.kcButtonPrimaryClass,
+                                props.kcButtonLargeClass
+                            )}
+                            name="accept"
+                            id="kc-accept"
+                            type="submit"
+                            value={msgStr("doAccept")}
+                        />
+                        <input
+                            className={cx(
+                                props.kcButtonClass,
+                                props.kcButtonDefaultClass,
+                                props.kcButtonLargeClass
+                            )}
+                            name="cancel"
+                            id="kc-decline"
+                            type="submit"
+                            value={msgStr("doDecline")}
+                        />
+                    </form>
+                    <div className="clearfix" />
+                </>
+            }
+        />
+    );
+});
+
+

src/lib/i18n/generated_messages/account.ts

@@ -3060,5 +3060,5 @@ export const messages= {
     "locale_ru": "Русский",
     "locale_zh-CN": "中文简体"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/generated_messages/admin.ts

@@ -240,5 +240,5 @@ export const messages= {
     "pairwiseFailedToGetRedirectURIs": "无法从服务器获得重定向URL",
     "pairwiseRedirectURIsMismatch": "客户端的重定向URI与服务器端获取的URI配置不匹配。"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/generated_messages/email.ts

@@ -634,5 +634,5 @@ export const messages= {
     "eventUpdateTotpBody": "您账户的OTP 配置在{0} 由 {1}更改. 如非本人操作，请联系管理员。",
     "eventUpdateTotpBodyHtml": "<p>您账户的OTP 配置在{0} 由 {1}更改. 如非本人操作，请联系管理员。</p>"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/generated_messages/login.ts

@@ -4360,5 +4360,5 @@ export const messages= {
     "invalidParameterMessage": "无效的参数 : {0}",
     "alreadyLoggedIn": "您已经登录"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/useKcMessage.tsx

@@ -1,9 +1,10 @@
 
-import { useCallback } from "react";
+import { useCallback } from "react";
 import { useKcLanguageTag } from "./useKcLanguageTag";
 import { messages } from "./generated_messages/login";
 import type { ReactNode } from "react";
-import { id } from "evt/tools/typeSafety/id";
+//@ts-ignore
+import * as markdown from "markdown";
 
 export type MessageKey = keyof typeof messages["en"];
 
@@ -32,11 +33,16 @@ export function useKcMessage() {
         [kcLanguageTag]
     );
 
-    const msg = useCallback(
+    const msg = useCallback<(...args: Parameters<typeof msgStr>) => ReactNode>(
-        id<(...args: Parameters<typeof msgStr>) => ReactNode>(
+        (key, ...args) =>
-            (key, ...args) =>
+            <span
-                <span className={key} dangerouslySetInnerHTML={{ "__html": msgStr(key, ...args) }} />
+                className={key}
-        ),
+                dangerouslySetInnerHTML={{
+                    "__html":
+                        markdown.toHTML(msgStr(key, ...args))
+                }}
+            />
+        ,
         [kcLanguageTag]
     );
 

src/lib/kcContext.ts

@@ -16,7 +16,8 @@ type ExtractAfterStartingWith<Prefix extends string, StrEnum> =
  */
 export type KcContext =
     KcContext.Login | KcContext.Register | KcContext.Info |
-    KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail;
+    KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail |
+    KcContext.Terms;
 
 export declare namespace KcContext {
 
@@ -155,6 +156,10 @@ export declare namespace KcContext {
         pageId: "login-verify-email.ftl";
     };
 
+    export type Terms = Common & {
+        pageId: "terms.ftl";
+    };
+
 }
 
 doExtends<KcContext["pageId"], PageId>();

src/lib/kcContextMocks/index.ts

@@ -199,3 +199,8 @@ export const kcLoginVerifyEmailContext: KcContext.LoginVerifyEmail = {
     "pageId": "login-verify-email.ftl"
 };
 
+export const kcTermContext: KcContext.Terms = {
+    ...kcCommonContext,
+    "pageId": "terms.ftl"
+};
+