89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
/**
|
|
* NOTE: You do not need to do all this to put your own Terms and conditions
|
|
* this is if you want component level customization.
|
|
* If the default works for you, you can just use the useDownloadTerms hook
|
|
* in the KcApp.tsx
|
|
* Example: https://github.com/garronej/keycloakify-starter/blob/a20c21b2aae7c6dc6dbea294f3d321955ddf9355/src/KcApp/KcApp.tsx#L14-L30
|
|
*/
|
|
import {clsx} from "keycloakify/lib/tools/clsx";
|
|
import {useRerenderOnStateChange} from "evt/hooks";
|
|
import {Markdown} from "keycloakify/lib/tools/Markdown";
|
|
import {evtTermMarkdown, useDownloadTerms} from "keycloakify/lib/pages/Terms";
|
|
import tos_en_url from "../assets/tos_en.md";
|
|
import tos_fr_url from "../assets/tos_fr.md";
|
|
import type {PageProps} from "keycloakify/lib/KcProps";
|
|
import type {KcContext} from "../kcContext";
|
|
import type {I18n} from "../i18n";
|
|
|
|
export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl"; }>, I18n>) {
|
|
const {kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps} = props;
|
|
|
|
const {msg, msgStr} = i18n;
|
|
|
|
useDownloadTerms({
|
|
kcContext,
|
|
"downloadTermMarkdown": async ({currentLanguageTag}) => {
|
|
|
|
const resource = (() => {
|
|
switch (currentLanguageTag) {
|
|
case "fr":
|
|
return tos_fr_url;
|
|
default:
|
|
return tos_en_url;
|
|
}
|
|
})();
|
|
|
|
// webpack5 (used via storybook) loads markdown as string, not url
|
|
if (resource.includes("\n")) return resource
|
|
|
|
const response = await fetch(resource);
|
|
return response.text();
|
|
},
|
|
});
|
|
|
|
useRerenderOnStateChange(evtTermMarkdown);
|
|
|
|
const {url} = kcContext;
|
|
|
|
if (evtTermMarkdown.state === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Template
|
|
{...{kcContext, i18n, doFetchDefaultThemeResources, ...kcProps}}
|
|
displayMessage={false}
|
|
headerNode={msg("termsTitle")}
|
|
formNode={
|
|
<>
|
|
<div id="kc-terms-text">{evtTermMarkdown.state &&
|
|
<Markdown>{evtTermMarkdown.state}</Markdown>}</div>
|
|
<form className="form-actions" action={url.loginAction} method="POST">
|
|
<input
|
|
className={clsx(
|
|
kcProps.kcButtonClass,
|
|
kcProps.kcButtonClass,
|
|
kcProps.kcButtonClass,
|
|
kcProps.kcButtonPrimaryClass,
|
|
kcProps.kcButtonLargeClass
|
|
)}
|
|
name="accept"
|
|
id="kc-accept"
|
|
type="submit"
|
|
value={msgStr("doAccept")}
|
|
/>
|
|
<input
|
|
className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
|
|
name="cancel"
|
|
id="kc-decline"
|
|
type="submit"
|
|
value={msgStr("doDecline")}
|
|
/>
|
|
</form>
|
|
<div className="clearfix"/>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|