Add TermsAcceptance component

src/login/TermsAcceptance.tsx

@@ -0,0 +1,81 @@
+import type { ClassKey } from "keycloakify/login/TemplateProps";
+import { useRerenderOnStateChange } from "evt/hooks";
+import { Markdown } from "keycloakify/tools/Markdown";
+import { evtTermMarkdown } from "keycloakify/login/lib/useDownloadTerms";
+import type { KcContext } from "keycloakify/login/kcContext/KcContext";
+import type { I18n } from "./i18n";
+
+export type PropsOfTermsAcceptance = {
+    kcContext: KcContextLike;
+    i18n: I18n;
+    getClassName: (classKey: ClassKey) => string;
+};
+
+type KcContextLike = {
+    termsAcceptanceRequired?: boolean;
+    messagesPerField: Pick<KcContext.Common["messagesPerField"], "existsError" | "get">;
+};
+
+export function TermsAcceptance(props: PropsOfTermsAcceptance) {
+    const {
+        kcContext: { termsAcceptanceRequired = false }
+    } = props;
+
+    if (!termsAcceptanceRequired) {
+        return null;
+    }
+
+    return <TermsAcceptanceEnabled {...props} />;
+}
+
+export function TermsAcceptanceEnabled(props: PropsOfTermsAcceptance) {
+    const {
+        i18n,
+        getClassName,
+        kcContext: { messagesPerField }
+    } = props;
+
+    const { msg } = i18n;
+
+    useRerenderOnStateChange(evtTermMarkdown);
+
+    const termMarkdown = evtTermMarkdown.state;
+
+    if (termMarkdown === undefined) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className="form-group">
+                <div className={getClassName("kcInputWrapperClass")}>
+                    {msg("termsTitle")}
+                    <div id="kc-registration-terms-text">
+                        <Markdown>{termMarkdown}</Markdown>
+                    </div>
+                </div>
+            </div>
+            <div className="form-group">
+                <div className={getClassName("kcLabelWrapperClass")}>
+                    <input
+                        type="checkbox"
+                        id="termsAccepted"
+                        name="termsAccepted"
+                        className={getClassName("kcCheckboxInputClass")}
+                        aria-invalid={messagesPerField.existsError("termsAccepted")}
+                    />
+                    <label htmlFor="termsAccepted" className={getClassName("kcLabelClass")}>
+                        {msg("acceptTerms")}
+                    </label>
+                </div>
+                {messagesPerField.existsError("termsAccepted") && (
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <span id="input-error-terms-accepted" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                            {messagesPerField.get("termsAccepted")}
+                        </span>
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}