Zeusina/zeusina-keycloak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(storybook): progress on many more pages

Browse Source
This commit is contained in:
Waldemar Reusch
2023-03-14 17:29:14 +01:00
parent dbe320b2fc
commit 1e1a638011
30 changed files with 1061 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/keycloak-theme/pages/Terms.tsx
+71 -64
View File
@@ -1,81 +1,88 @@
/**
* NOTE: Yo 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
* 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 {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";
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 {kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps} = props;
const { msg, msgStr } = i18n;
const {msg, msgStr} = i18n;
useDownloadTerms({
kcContext,
"downloadTermMarkdown": async ({ currentLanguageTag }) => {
useDownloadTerms({
kcContext,
"downloadTermMarkdown": async ({currentLanguageTag}) => {
const markdownString = await fetch((() => {
switch (currentLanguageTag) {
case "fr": return tos_fr_url;
default: return tos_en_url;
}
})()).then(response => response.text());
const resource = (() => {
switch (currentLanguageTag) {
case "fr":
return tos_fr_url;
default:
return tos_en_url;
}
})();
return markdownString;
},
});
// webpack5 (used via storybook) loads markdown as string, not url
if (resource.includes("\n")) return resource
useRerenderOnStateChange(evtTermMarkdown);
const response = await fetch(resource);
return response.text();
},
});
const { url } = kcContext;
useRerenderOnStateChange(evtTermMarkdown);
if (evtTermMarkdown.state === undefined) {
return null;
}
const {url} = kcContext;
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" />
</>
}
/>
);
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"/>
</>
}
/>
);
}