Update Terms.tsx to Keycloakify v7

codegouvfr · Mar 24, 2023 · adf5d77 · adf5d77
1 parent 085e54d
commit adf5d77
Showing 1 changed file with 53 additions and 51 deletions.
diff --git a/src/ui/keycloak-theme/pages/Terms.tsx b/src/ui/keycloak-theme/pages/Terms.tsx
@@ -1,30 +1,37 @@
-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 { Markdown } from "keycloakify/tools/Markdown";
+import {
+    evtTermMarkdown,
+    useDownloadTerms
+} from "keycloakify/login/lib/useDownloadTerms";
 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 { PageProps } from "keycloakify/login/pages/PageProps";
+import { makeStyles } from "@codegouvfr/react-dsfr/tss";
+import { fr } from "@codegouvfr/react-dsfr";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
-import { makeStyles } from "tss-react/dsfr";
-import App from "../../App";
-import { fr } from "@codegouvfr/react-dsfr";
 
 export default function Terms(
     props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>
 ) {
     const {
         kcContext,
         i18n,
-        doFetchDefaultThemeResources = true,
+        doUseDefaultCss = true,
         Template,
-        ...kcProps
+        classes: classes_props
     } = props;
 
     const { msg, msgStr } = i18n;
     const { classes, cx } = useStyles();
 
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        "classes": classes_props
+    });
+
     useDownloadTerms({
         kcContext,
         "downloadTermMarkdown": async ({ currentLanguageTag }) => {
@@ -53,50 +60,45 @@ export default function Terms(
 
     return (
         <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            {...{ kcContext, i18n, doUseDefaultCss, "classes": classes_props }}
             displayMessage={false}
             headerNode={msg("termsTitle")}
-            formNode={
-                <>
-                    <div id="kc-terms-text">
-                        {evtTermMarkdown.state && (
-                            <Markdown>{evtTermMarkdown.state}</Markdown>
-                        )}
-                    </div>
-                    <form
-                        className={cx("form-actions", classes.formActions)}
-                        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" />
-                </>
-            }
-        />
+        >
+            <div id="kc-terms-text">
+                {evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}
+            </div>
+            <form
+                className={cx("form-actions", classes.formActions)}
+                action={url.loginAction}
+                method="POST"
+            >
+                <input
+                    className={cx(
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonPrimaryClass"),
+                        getClassName("kcButtonLargeClass")
+                    )}
+                    name="accept"
+                    id="kc-accept"
+                    type="submit"
+                    value={msgStr("doAccept")}
+                />
+                <input
+                    className={cx(
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonDefaultClass"),
+                        getClassName("kcButtonLargeClass")
+                    )}
+                    name="cancel"
+                    id="kc-decline"
+                    type="submit"
+                    value={msgStr("doDecline")}
+                />
+            </form>
+            <div className="clearfix" />
+        </Template>
     );
 }