Add event signup terms & conditions

* Fixes #11
* Users have to accept the Terms and Conditions (Teilnahmebedingungen)
before they can register for an event.

.gitlab-ci.yml

@@ -5,11 +5,11 @@ stages:
 
 eslint:
   stage: test
-  image: node:13
+  image: node:13.8
   before_script:
    - npm install
   script:
-    - npm run eslint
+   - npm run eslint
 
 build_master:
   stage: build

src/components/events/details.js

@@ -3,7 +3,18 @@ import PropTypes from 'prop-types'
 import { useSelector, useDispatch } from 'react-redux'
 import { Parser as HtmlToReactParser } from 'html-to-react'
 import { makeStyles } from '@material-ui/styles'
-import { Toolbar, Button, TextField } from '@material-ui/core'
+import {
+  Toolbar,
+  Button,
+  TextField,
+  Checkbox,
+  FormControlLabel,
+  Dialog,
+  DialogActions,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+} from '@material-ui/core'
 import { useIntl, FormattedMessage } from 'gatsby-plugin-intl'
 import Alert from '@material-ui/lab/Alert'
 import {
@@ -16,6 +27,8 @@ import {
 import { dateFormatter } from 'config'
 
 import TranslatedContent from '../general/translatedContent'
+import terms_en from '../../content/termsAndConditions.en.md'
+import terms_de from '../../content/termsAndConditions.de.md'
 import { authLoginStart } from '../../store/auth/actions'
 import {
   loadSignupForEvent,
@@ -126,6 +139,8 @@ const EventDetails = ({ eventId, ...props }) => {
   const [isAdditionalValuesValid, setIsAdditionalValuesValid] = useState(false)
   const [isSignupLoaded, setIsSignupLoaded] = useState(false)
   const [email, setEmail] = useState('')
+  const [termsAccepted, setTermsAccepted] = useState(false)
+  const [termsModalOpen, setTermsModalOpen] = useState(false)
   const [isEmailValid, setIsEmailValid] = useState(true)
   const [storedNotification, setStoredNotification] = useState(null)
   const auth = useSelector(state => state.auth)
@@ -165,6 +180,8 @@ const EventDetails = ({ eventId, ...props }) => {
   let signupButtons = null
   let additionalFields = null
   let emailField = null
+  let termsCheckbox = null
+  let termsDialog = null
   let notification = null
 
   // --------------------
@@ -290,6 +307,72 @@ const EventDetails = ({ eventId, ...props }) => {
     )
   }
 
+  const openTermsModal = e => {
+    e.preventDefault()
+    setTermsModalOpen(true)
+  }
+
+  const handleCloseModal = accept => {
+    setTermsAccepted(accept)
+    setTermsModalOpen(false)
+  }
+
+  termsDialog = (
+    <Dialog
+      open={termsModalOpen}
+      scroll="paper"
+      aria-labelledby={
+        <FormattedMessage id="events.signup.termsAndConditions" />
+      }
+      aria-describedby="scroll-dialog-description"
+    >
+      <DialogTitle>
+        <FormattedMessage id="events.signup.termsAndConditions" />
+      </DialogTitle>
+      <DialogContent dividers={true}>
+        <DialogContentText>
+          <TranslatedContent
+            content={{ en: terms_en, de: terms_de }}
+            noEscape
+          />
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => handleCloseModal(false)} color="primary">
+          <FormattedMessage id="close" />
+        </Button>
+        <Button onClick={() => handleCloseModal(true)} color="secondary">
+          <FormattedMessage id="button.accept" />
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+
+  termsCheckbox = (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={termsAccepted}
+          onChange={({ target: { checked } }) => {
+            setTermsAccepted(checked)
+          }}
+          value="termsAccepted"
+          color="secondary"
+        />
+      }
+      label={
+        <FormattedMessage
+          id="events.signup.termsAccepted"
+          values={{
+            breakingLine: <br />,
+            // eslint-disable-next-line react/display-name
+            a: (...chunks) => <a onClick={openTermsModal}>{chunks}</a>,
+          }}
+        />
+      }
+    />
+  )
+
   // ----------------------
   // Prepare signup buttons
   if (data.time_register_start === null || data.time_register_end === null) {
@@ -405,7 +488,8 @@ const EventDetails = ({ eventId, ...props }) => {
             disabled={
               (hasEmailField && !isEmailValid) ||
               (hasAdditionalFields && !isAdditionalValuesValid) ||
-              (signup && signup.isPending)
+              (signup && signup.isPending) ||
+              !termsAccepted
             }
             variant="outlined"
           >
@@ -447,6 +531,8 @@ const EventDetails = ({ eventId, ...props }) => {
       >
         {emailField}
         {additionalFields}
+        {termsDialog}
+        {termsCheckbox}
       </div>
       <TranslatedContent
         parseMarkdown

src/content/termsAndConditions.de.md

+1. Versicherung ist Sache der TeilnehmerInnen. JedeR TeilnehmerIn nimmt auf eigene Verantwortung und Risiko am Event teil. Soweit gesetzlich zulässig, schliesst der Veranstalter (AMIV) jegliche Haftung für Schäden der TeilnehmerInnen aus.
+2. Die TeilnehmerInnen verpflichten sich, den Veranstalter (AMIV) und seine Hilfspersonen auf erstes Verlangen von Haftungsansprüchen Dritter freizustellen, soweit diese Dritten Schäden in Folge der Teilnahme des/der TeilnehmersIn an einem vom AMIV organisierten Event erleiden.
+3. Der AMIV behält sich Änderungen oder die Absage des Events vor.
+4. Abmeldungen sind nur bis zur festgelegten Abmeldefrist möglich, danach muss die Teilnahmegebühr in jedem Fall bezahlt werden. Bei Fernbleiben von einem Gratis-Event wird der/die TeilnehmerIn zur Zahlung einer Aufwandsentschädigung von CHF 5 an den AMIV verpflichtet.
+5. Der Veranstalter (AMIV) erlaubt sich, fehlbare TeilnehmerInnen von zukünftigen Events auszuschliessen. Diese Entscheidung liegt beim AMIV-Vorstand.
+6. Anmeldungen sind nicht übertragbar. Bei Events ohne Warteliste und kurzfristigen Ausfällen ist es möglich, einen Ersatz für die eigene Teilnahme an einem Event zu organisieren. Dies muss vor dem Eventstart mit dem Event-OK abgeklärt werden.

src/content/termsAndConditions.en.md

+1. The participation at AMIV events is at the participant's own risk and he/she is responsible for their own insurance. To the maximum extent permitted by law, the organizer (AMIV) shall in no event be liable (explicitly, implicitly or otherwise) for any damage or injury to the participants.
+2. By registering, the participant is obliged to indemnify the organizer (AMIV) upon first request of all liability claims by third parties which result from the participation of the participant.
+3. AMIV reserves the right to change or cancel the event.
+4. Signoffs are only possible until the designated deadline, after that date the registration fee has to be paid in any case. If a registered participant does not attend to a free event, he/she has to pay a compensation of CHF 5 to AMIV.
+5. Participants who violate these regulations can be banned from future events organized by AMIV; This measure is at the discretion of the AMIV-board.
+6. Registrations are not transferable to other persons. In the case a participant is prevented from attending by an inevitable and unforeseeable event and there is no waiting list, he is allowed to organize a replacement person. This has to be clarified with the event-organizers beforehand.

src/intl/de.json

@@ -30,6 +30,7 @@
   "button.clear": "löschen",
   "button.create": "erstellen",
   "button.cancel": "abbrechen",
+  "button.accept": "akzeptieren",
   "button.confirm": "bestätigen",
   "button.enroll": "einschreiben",
   "button.withdraw": "ausschreiben",
@@ -150,6 +151,8 @@
   "events.signup.waitingListWithSpot": "Du bist auf Platz {position} der Warteliste.",
   "events.signup.accepted": "Du bist angemeldet und hast einen Platz.",
   "events.signup.noAdditionalInfoRequired": "Keine Zusatzinformationen erforderlich.",
+  "events.signup.termsAccepted": "Ich habe die <a>Teilnahmebedingungen</a>{breakingLine}gelesen und akzeptiert.",
+  "events.signup.termsAndConditions": "Teilnahmebedingungen",
   "events.signoff.action": "abmelden",
   "events.signoff.success": "Anmeldung gelöscht",
   "events.signoff.failed": "Abmelden fehlgeschlagen",

src/intl/en.json

@@ -30,6 +30,7 @@
   "button.clear": "clear",
   "button.create": "create",
   "button.cancel": "cancel",
+  "button.accept": "accept",
   "button.confirm": "confirm",
   "button.enroll": "enroll",
   "button.withdraw": "withdraw",
@@ -148,6 +149,8 @@
   "events.signup.waitingListWithSpot": "You are on spot {position} of the waiting list.",
   "events.signup.accepted": "You are signed up and got a spot.",
   "events.signup.noAdditionalInfoRequired": "No additional information required.",
+  "events.signup.termsAccepted": "I have read and accepted the{breakingLine}<a>Terms and Conditions</a>.",
+  "events.signup.termsAndConditions": "Terms and Conditions",
   "events.signoff.action": "signoff",
   "events.signoff.success": "Signoff successful",
   "events.signoff.failed": "Signoff failed",