keycloak_theme/src/lib/components/Terms.tsx

import { memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import type { KcContextBase } from "../getKcContext/KcContextBase";
import { useKcMessage } from "../i18n/useKcMessage";
import { useCssAndCx } from "tss-react";

export const Terms = memo(
    ({ kcContext, ...props }: { kcContext: KcContextBase.Terms } & KcProps) => {
        const { msg, msgStr } = useKcMessage();

        const { cx } = useCssAndCx();

        const { url } = kcContext;

        return (
            <Template
                {...{ kcContext, ...props }}
                doFetchDefaultThemeResources={true}
                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" />
                    </>
                }
            />
        );
    },
);