@@ -8294,6 +8294,11 @@ "requires": {
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "1.1.0",
+      "resolved": "https://npm-8ee.hidora.com/marked/-/marked-1.1.0.tgz",
+      "integrity": "sha512-EkE7RW6KcXfMHy2PA7Jg0YJE1l8UPEZE8k45tylzmZM30/r1M1MUXWQfJlrSbsTeh7m/XTwHbWUENvAJZpp1YA=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

@@ -13,6 +13,7 @@ "@testing-library/user-event": "^7.2.1",
     "fontsource-roboto": "^2.1.4",
     "i18next": "^19.5.1",
     "leaflet": "^1.6.0",
+    "marked": "^1.1.0",
     "moment": "^2.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

@@ -8,7 +8,7 @@ import CssBaseline from "@material-ui/core/CssBaseline";
 import Router from "./Router";
 import theme from "./theme";
 
-const models = [{ name: "events" }, { name: "cars" }];
+const models = [{ name: "events" }, { name: "cars" }, { name: "pages" }];
 
 const App = () => {
   return (

@@ -1,10 +1,13 @@ 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useReducer } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import Checkbox from "@material-ui/core/Checkbox";
 import { useTranslation } from "react-i18next";
 import useDebounce from "../../hooks/useDebounce";
 import Paper from "../../components/Paper";
+import TosDialog from "../TosDialog";
 
 const isValidEmail = (email) =>
   // eslint-disable-next-line
@@ -20,6 +23,8 @@ // States
   const [name, setName] = useState(event.name ?? "");
   const [email, setEmail] = useState(event.email ?? "");
   const [emailIsValid, setEmailIsValid] = useState(false);
+  const [tos, setTos] = useState(false);
+  const [showTos, toggleTos] = useReducer((i) => !i, false);
 
   const debouncedEmail = useDebounce(email, 400);
   useEffect(() => {
@@ -32,40 +37,54 @@ nextStep();
   };
 
   return (
-    <Paper {...props}>
-      <TextField
-        className={classes.textField}
-        label={t("event.creation.event_name")}
-        fullWidth
-        autoFocus
-        margin="dense"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        id="NewEventName"
-        name="name"
-      />
-      <TextField
-        className={classes.textField}
-        label={t("event.creation.creator_email")}
-        fullWidth
-        margin="dense"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        id="NewEventEmail"
-        name="email"
-        type="email"
-      />
-      <Button
-        className={classes.button}
-        variant="contained"
-        color="secondary"
-        fullWidth
-        onClick={onNext}
-        disabled={!name || !email || !emailIsValid}
-      >
-        {t("event.creation.next")}
-      </Button>
-    </Paper>
+    <>
+      <Paper {...props}>
+        <TextField
+          className={classes.textField}
+          label={t("event.creation.event_name")}
+          fullWidth
+          autoFocus
+          margin="dense"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          id="NewEventName"
+          name="name"
+        />
+        <TextField
+          className={classes.textField}
+          label={t("event.creation.creator_email")}
+          fullWidth
+          margin="dense"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          id="NewEventEmail"
+          name="email"
+          type="email"
+        />
+        <div className={classes.tos}>
+          <Checkbox
+            name="tos"
+            id="NewEventTos"
+            checked={tos}
+            onChange={(e) => setTos(e.target.checked)}
+          />
+          <Typography variant="caption" onClick={toggleTos}>
+            {t("event.creation.tos")}
+          </Typography>
+        </div>
+        <Button
+          className={classes.button}
+          variant="contained"
+          color="secondary"
+          fullWidth
+          onClick={onNext}
+          disabled={!name || !email || !emailIsValid || !tos}
+        >
+          {t("event.creation.next")}
+        </Button>
+      </Paper>
+      <TosDialog open={showTos} toggle={toggleTos} />
+    </>
   );
 };
 
@@ -73,6 +92,13 @@ const useStyles = makeStyles((theme) => ({
   textField: {},
   button: {
     marginTop: theme.spacing(2),
+  },
+  tos: {
+    cursor: "pointer",
+    marginTop: theme.spacing(2),
+    display: "flex",
+    alignItems: "center",
+    marginLeft: "-11px",
   },
 }));
 

@@ -0,0 +1,49 @@ 
+import React, { useEffect } from "react";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Button from "@material-ui/core/Button";
+import Slide from "@material-ui/core/Slide";
+import { useStrapi } from "strapi-react-context";
+import marked from "marked";
+import { useTranslation } from "react-i18next";
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+const TosDialog = ({ open, toggle }) => {
+  const strapi = useStrapi();
+  const { t } = useTranslation();
+  const page = strapi.stores?.pages?.find(({ type }) => type === "tos");
+
+  useEffect(() => {
+    strapi.services.pages.find({ type: "tos" });
+  }, []);
+
+  return (
+    <Dialog
+      open={open}
+      TransitionComponent={Transition}
+      onClose={toggle}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>{page?.name}</DialogTitle>
+      <DialogContent>
+        {page && (
+          <DialogContentText
+            dangerouslySetInnerHTML={{ __html: marked(page.content) }}
+          />
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={toggle}>{t("generic.close")}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default TosDialog;

@@ -1,5 +1,5 @@ 
 {
-  "generic": { "loading": "Chargement..." },
+  "generic": { "loading": "Chargement...", "close": "Fermer" },
   "event": {
     "fields": {
       "starts_on": "Commence le",
@@ -11,7 +11,8 @@ "creator_email": "Votre e-mail",
       "date": "Date de l'événement",
       "address": "Adresse de l'événement",
       "next": "Suivant",
-      "create": "Créer"
+      "create": "Créer",
+      "tos": "J'accepte les conditions générales d'utilisation"
     },
     "actions": {
       "show_details": "Afficher les détails",